complete register form

src/components/common/combo-box.tsx

@@ -1,6 +1,6 @@
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
 import { ArrowDown2 } from 'iconsax-react'
-import { useState } from 'react'
+import { FC, useState } from 'react'
 
 const value = [
     { id: 1, name: 'تهران' },
@@ -10,9 +10,13 @@ const value = [
     { id: 5, name: 'تبریز' },
 ]
 
-export const ComboBox = () => {
+type Props = {
+    field?: any
+}
+
+export const ComboBox: FC<Props> = ({ field }) => {
     const [query, setQuery] = useState('')
-    const [selected, setSelected] = useState(value[1])
+    // const [selected, setSelected] = useState(value[1])
 
     const filteredValue =
         query === ''
@@ -22,12 +26,15 @@ export const ComboBox = () => {
             })
 
     return (
-        <Combobox value={selected} onChange={(value: any) => setSelected(value)} onClose={() => setQuery('')}>
+        <Combobox value={field.value} onChange={field.onChange} onClose={() => setQuery('')}>
             <div className="relative w-full">
                 <ComboboxInput
                     className="input-style"
                     displayValue={(person: any) => person?.name}
                     onChange={(event) => setQuery(event.target.value)}
+                    ref={field.ref}
+                    name={field.name}
+                    onBlur={field.onBlur}
                 />
                 <ComboboxButton className="absolute top-0 h-full bg-transparent">
                     <ArrowDown2 className="size-5 absolute left-3 top-5 p-0 text-secondary-text-color/70" />

src/components/forms/register-form.tsx

@@ -1,10 +1,22 @@
 import { Link } from "react-router-dom"
 import { ComboBox } from "../common/combo-box"
 import { Input } from "../common/input"
+import { Button } from "@headlessui/react"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { RegisterInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { RegisterSchema } from "../../schema"
+import { ErrorComponent } from "../common/error"
 
 export const RegisterForm = () => {
+    const { handleSubmit, formState: { errors }, control } = useForm<RegisterInterface>({
+        resolver: yupResolver(RegisterSchema)
+    })
+    const handleRegister: SubmitHandler<RegisterInterface> = async (data) => {
+        console.log("data=>", data)
+    }
     return (
-        <div
+        <form onSubmit={handleSubmit(handleRegister)}
             className="w-fit sm:min-w-[500px] max-h-full overflow-y-auto xl:w-1/2 xl:p-0 xl:py-5 p-10 flex flex-col bg-auth-form items-center  gap-y-[42px] rounded-3x rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col w-full md:w-[400px]">
@@ -19,20 +31,44 @@ export const RegisterForm = () => {
                 </div>
                 <div className="grid grid-cols-1 gap-y-5 mb-[42px] mt-9">
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-5">
-                        <Input type="text" placeholder="نام" />
+                        <Controller control={control} name="name" render={({ field }) => <div>
-                        <Input type="text" placeholder="نام خانوادگی" />
+                            <Input type="text" placeholder="نام" field={field} />
+                            <ErrorComponent show={errors.name} message={errors.name?.message} />
+                        </div>} />
+                        <Controller control={control} name="family" render={({ field }) => <div>
+                            <Input type="text" placeholder="نام خانوادگی" field={field} />
+                            <ErrorComponent show={errors.family} message={errors.family?.message} />
+                        </div>} />
                     </div>
                     <div className="flex flex-col lg:flex-row gap-y-5 gap-x-4">
-                        <ComboBox />
+                        <Controller control={control} name="capCity" render={({ field }) => <div>
-                        <ComboBox />
+                            <ComboBox field={field} />
+                            <ErrorComponent show={errors.capCity} message={errors.capCity?.message} />
+                        </div>} />
+                        <Controller control={control} name="city" render={({ field }) => <div>
+                            <ComboBox field={field} />
+                            <ErrorComponent show={errors.city} message={errors.city?.message} />
+                        </div>} />
                     </div>
-                    <Input type="text" placeholder="نام فروشگاه" />
+                    <Controller control={control} name="marketName" render={({ field }) => (<div>
-                    <Input type="number" placeholder="شماره موبایل" />
+                        <Input type="text" placeholder="نام فروشگاه" field={field} />
-                    <Input type="password" placeholder="رمز عبور" />
+                        <ErrorComponent show={errors.marketName} message={errors.marketName?.message} />
-                    <Input type="password" placeholder="تکرار رمز عبور" />
+                    </div>)} />
+                    <Controller control={control} name="phoneNumber" render={({ field }) => <div>
+                        <Input type="number" placeholder="شماره موبایل" field={field} />
+                        <ErrorComponent show={errors.phoneNumber} message={errors.phoneNumber?.message} />
+                    </div>} />
+                    <Controller control={control} name="password" render={({ field }) => <div>
+                        <Input type="password" placeholder="رمز عبور" field={field} />
+                        <ErrorComponent show={errors.password} message={errors.password?.message} />
+                    </div>} />
+                    <Controller control={control} name="repeatPassword" render={({ field }) => <div>
+                        <Input type="password" placeholder="تکرار رمز عبور" field={field} />
+                        <ErrorComponent show={errors.repeatPassword} message={errors.repeatPassword?.message} />
+                    </div>} />
                 </div>
-                <button>ثبت نام</button>
+                <Button type="submit">ثبت نام</Button>
             </div>
-        </div>
+        </form>
     )
 }

src/schema/index.ts

@@ -48,4 +48,21 @@ export const LoginCodeSchema = yup.object({
         .min(5, "کد نمیتوند کمتر از 5 رقم باشد")
         .max(5, " کد نمیتواند بیشتر از 5 رقم باشد")
         .matches(/^[0-9]{5}$/, "کد نامعتبر"),
+})
+
+export const RegisterSchema = yup.object({
+    name: yup.string().required("وارد کردن نام الزامی میباشد").min(3, "نام نمیتواند کمتر از 3 کاراکتر باشد").max(20, "نام نمیتواند بیشتر از 20 کاراکتر باشد"),
+    family: yup.string().required("وارد کردن نام خانوادگی الزامی میباشد").min(3, "نام خانوادگی نمیتواند کمتر از 3 کاراکتر باشد").max(25, "نام خانوادگی نمیتواند بیشتر از 25 کاراکتر باشد"),
+    city: yup.object().required("وارد کردن شهر الزامی مباشد"),
+    capCity: yup.object().required("وارد کردن استان الزامی مباشد"),
+    marketName: yup.string().required("وارد کردن نام فروشگاه الزامی میباشد").min(2, "نام فروشگاه نمیتواند کمتر از 3 کاراکتر باشد").max(30, "نام فروشگاه نمیتواند بیشتر از 30 کاراکتر باشد"),
+    phoneNumber: yup.string()
+        .required("وارد کردن شماره تماس الزامی میباشد")
+        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+    password: yup.string().min(8, "رمز عبور نمیتواند کمتر از 8 کاراکتر باشد").required("رمز عبور الزامی است"),
+    repeatPassword: yup.string()
+        .oneOf([yup.ref('password')], "رمز عبور و تکرار آن باید یکسان باشند")
+        .required("تکرار رمز عبور الزامی است"),
 })

src/types/index.ts

@@ -23,3 +23,14 @@ export interface LoginCodeInterface {
     code: string
 }
 
+export interface RegisterInterface {
+    name: string,
+    family: string,
+    city: object,
+    capCity: object,
+    marketName: string,
+    phoneNumber: string,
+    password: string,
+    repeatPassword: string,
+}
+