Login

Usage

import React from "react";
import { Input, Button } from "tawuniya";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";

import styles from "../styles.module.css";

const schema = Yup.object().shape({
  username: Yup.string()
    .required("Username is required")
    .min(1, "Username is required"),
  password: Yup.string()
    .required("Password is required")
    .min(1, "Password is required"),
});

type LoginFormType = Yup.InferType<typeof schema>;

const LoginForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormType>({
    resolver: yupResolver(schema as Yup.ObjectSchema<LoginFormType>),
    mode: "onChange",
  });

  const onSubmit = (data: LoginFormType) => {
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <div className={styles.container}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Input
          name="username"
          label="Username"
          register={register}
          size="lg"
          error={errors.username?.message}
        />
        <Input
          type="password"
          name="password"
          label="Password"
          register={register}
          size="lg"
          error={errors.password?.message}
        />
        <Button type="submit" size="lg">
          Login
        </Button>
      </form>
    </div>
  );
};

export default LoginForm;
Usage​

Usage
