danak/asan-installer-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete register form

Browse Source
This commit is contained in:
Alihaghighattalab
2024-08-05 19:58:03 +03:30
parent 5d24b1d5c4
commit d7b66b11a0
4 changed files with 86 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/combo-box.tsx
+11 -4
View File
@@ -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
+47 -11
View File
@@ -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>
)
}