complete register form
This commit is contained in:
Alihaghighattalab
@@ -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" />
|
||||
|
||||
@@ -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="نام" />
|
||||
<Input type="text" placeholder="نام خانوادگی" />
|
||||
<Controller control={control} name="name" render={({ field }) => <div>
|
||||
<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 />
|
||||
<ComboBox />
|
||||
<Controller control={control} name="capCity" render={({ field }) => <div>
|
||||
<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="نام فروشگاه" />
|
||||
<Input type="number" placeholder="شماره موبایل" />
|
||||
<Input type="password" placeholder="رمز عبور" />
|
||||
<Input type="password" placeholder="تکرار رمز عبور" />
|
||||
<Controller control={control} name="marketName" render={({ field }) => (<div>
|
||||
<Input type="text" placeholder="نام فروشگاه" field={field} />
|
||||
<ErrorComponent show={errors.marketName} message={errors.marketName?.message} />
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@@ -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("تکرار رمز عبور الزامی است"),
|
||||
})
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user