Completing the functionalization of the login page

src/components/common/error.tsx

@@ -0,0 +1,17 @@
+
+import { FC } from "react";
+
+type Props = {
+  message: any;
+  show: any;
+};
+
+export const ErrorComponent: FC<Props> = ({ message, show }) => {
+  return (
+    show && (
+      <p className="w-full text-right text-xs text-red-500 font-medium -mt-5">
+        * {message}
+      </p>
+    )
+  );
+};

src/components/common/input.tsx

@@ -6,22 +6,21 @@ type Props = {
     style?: string,
     type?: React.HTMLInputTypeAttribute,
     placeholder: string,
-    icon?: React.ReactNode
+    icon?: React.ReactNode,
+    other?: any
 }
 
-export const Input: FC<Props> = ({ placeholder, type = "text", icon }) => {
+export const Input: FC<Props> = ({ placeholder, type = "text", icon, other }) => {
     const [hidden, setHidden] = useState<boolean>(false)
     const handleHidden = () => setHidden(prev => !prev)
     return (
-
         <div className="relative w-full min-w-[250px] sm:min-w-[400px]">
             <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
                 {type === "password" ?
                     !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
                     : icon}
             </div>
-            <InputComponent type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style" />
+            <InputComponent {...other} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style" />
         </div>
-
     )
 }

src/components/forms/login-form.tsx

@@ -1,9 +1,25 @@
 import { Link } from "react-router-dom"
 import { Input } from "../common/input"
+import { Button } from "@headlessui/react"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { LoginFormInterface } from "../../types"
+import { loginSchema } from "../../schema"
+import { ErrorComponent } from "../common/error"
+import { yupResolver } from '@hookform/resolvers/yup'
 
 export const LoginForm = () => {
+    const {
+        handleSubmit,
+        formState: { errors },
+        control,
+    } = useForm<LoginFormInterface>({
+        resolver: yupResolver(loginSchema)
+    })
+    const handleLoginSubmit: SubmitHandler<any> = async (data) => {
+        console.log("data=>", data)
+    }
     return (
-        <div
+        <form onSubmit={handleSubmit(handleLoginSubmit)}
             className="w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24">
@@ -17,15 +33,25 @@ export const LoginForm = () => {
                     </div>
                 </div>
                 <div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
-                    <Input type="number" placeholder="شماره تماس" />
-                    <Input type="password" placeholder="رمز عبور" />
+                    <Controller control={control} name="phoneNumber" render={({ field }) => (
+                        <>
+                            <Input type="number" placeholder="شماره تماس" other={field} />
+                            <ErrorComponent show={errors.phoneNumber} message={errors.phoneNumber?.message} />
+                        </>
+                    )} />
+                    <Controller control={control} name="password" render={({ field }) => (
+                        <>
+                            <Input type="password" placeholder="رمز عبور" other={field} />
+                            <ErrorComponent show={errors.password} message={errors.password?.message} />
+                        </>
+                    )} />
                     <Link to="/auth/forgot-password"><p className="font-medium text-sm text-secondary-text-color cursor-pointer">فراموشی رمز عبور</p></Link>
                 </div>
                 <div className="flex flex-col gap-y-[27px] items-center">
-                    <button>ثبت</button>
+                    <Button type="submit">ثبت</Button>
                     <Link to="/auth/login-with-code"><p className="font-medium text-base text-primary-color cursor-pointer">ورود با رمز یکبار مصرف</p></Link>
                 </div>
             </div>
-        </div>
+        </form>
     )
 }

src/schema/index.ts

@@ -0,0 +1,12 @@
+import * as yup from 'yup'
+
+export const loginSchema = yup.object({
+    phoneNumber: yup.string()
+        .required("وارد کردن شماره تماس الزامی میباشد")
+        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+    password: yup.string()
+        .required("وارد کردن رمزعبور الزامی میباشد")
+        .min(8, "رمزعبور نمیتواند کمتر از 8 کاراکتر باشد")
+})

src/types/index.ts

@@ -0,0 +1,4 @@
+export interface LoginFormInterface {
+    phoneNumber: string,
+    password: string
+}