Alihaghighattalab
57 lines
3.1 KiB
TypeScript
57 lines
3.1 KiB
TypeScript
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 (
|
||
<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">
|
||
<div className="flex flex-col gap-y-5">
|
||
<span className="font-medium text-lg md:text-2xl xl:text-3xl text-primary-text-color">وارد حساب کاربری شوید</span>
|
||
<div className="flex flex-row gap-x-0.5 items-center">
|
||
<p className="text-secondary-text-color font-normal text-xs md:text-sm">حساب کاربری ندارید؟</p>
|
||
<Link to="/auth/register">
|
||
<p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">ثبت نام کنید</p>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
|
||
<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 type="submit">ثبت</Button>
|
||
<Link to="/auth/login-with-code"><p className="font-medium text-base text-primary-color cursor-pointer">ورود با رمز یکبار مصرف</p></Link>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
)
|
||
} |