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

Completing the functionalization of the reset password code page

Browse Source
This commit is contained in:
Alihaghighattalab
2024-08-05 18:40:53 +03:30
parent accc7e35b9
commit ea2a96cff5
4 changed files with 77 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/forms/reset-password-code-form.tsx
+27 -13
View File
@@ -1,11 +1,21 @@
import { useState } from "react";
import { Button } from "@headlessui/react";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
import OTPInput from "react-otp-input"
import { Link } from "react-router-dom"
import { ResetPasswordCodeInterface } from "../../types";
import { yupResolver } from "@hookform/resolvers/yup";
import { ResetPasswordCodeSchema } from "../../schema";
import { ErrorComponent } from "../common/error";
export const ResetpasswordCodeForm = () => {
const [otp, setOtp] = useState('');
const { handleSubmit, formState: { errors }, control } = useForm<ResetPasswordCodeInterface>({
resolver: yupResolver(ResetPasswordCodeSchema)
})
const submitCode: SubmitHandler<ResetPasswordCodeInterface> = async (data) => {
console.log("data=>", data)
}
return (
<div
<form onSubmit={handleSubmit(submitCode)}
className="w-fit 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">
@@ -21,22 +31,26 @@ export const ResetpasswordCodeForm = () => {
</div>
</div>
<div className="mt-9 mb-[42px] flex w-full justify-center items-center" id="otp">
<OTPInput
containerStyle="otp-container"
value={otp}
onChange={setOtp}
numInputs={5}
renderInput={(props) => <input {...props} />}
inputStyle="otp-inputs"
/>
<Controller control={control} name="code" render={({ field }) => (
<div>
<OTPInput
containerStyle="otp-container"
{...field}
numInputs={5}
renderInput={(props) => <input {...props} />}
inputStyle="otp-inputs"
/>
<ErrorComponent show={errors.code} message={errors.code?.message} />
</div>
)} />
</div>
<div className="flex flex-col gap-y-[27px] items-center">
<p className="font-normal text-secondary-text-color text-base">30 ثانیه دیگر تا دریافت کد</p>
<button>تایید</button>
<Button type="submit">تایید</Button>
<p className="font-medium text-base text-primary-color">ارسال مجدد</p>
</div>
</div>
</div>
</form>
)
}
src/components/forms/send-code-form.tsx
+27 -13
View File
@@ -1,11 +1,21 @@
import { useState } from "react";
import OTPInput from "react-otp-input"
import { Link } from "react-router-dom"
import { ErrorComponent } from "../common/error"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { Button } from "@headlessui/react"
import { LoginCodeInterface } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { LoginCodeSchema } from "../../schema"
export const SendCodeForm = () => {
const [otp, setOtp] = useState('');
const { handleSubmit, formState: { errors }, control } = useForm<LoginCodeInterface>({
resolver: yupResolver(LoginCodeSchema)
})
const submitCode: SubmitHandler<LoginCodeInterface> = async (data) => {
console.log("data=>", data)
}
return (
<div
<form onSubmit={handleSubmit(submitCode)}
className="w-fit 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">
@@ -21,22 +31,26 @@ export const SendCodeForm = () => {
</div>
</div>
<div className="mt-9 mb-[42px] flex w-full justify-center items-center" id="otp">
<OTPInput
containerStyle="otp-container"
value={otp}
onChange={setOtp}
numInputs={5}
renderInput={(props) => <input {...props} />}
inputStyle="otp-inputs"
/>
<Controller control={control} name="code" render={({ field }) => (
<div>
<OTPInput
containerStyle="otp-container"
{...field}
numInputs={5}
renderInput={(props) => <input {...props} />}
inputStyle="otp-inputs"
/>
<ErrorComponent show={errors.code} message={errors.code?.message} />
</div>
)} />
</div>
<div className="flex flex-col gap-y-[27px] items-center">
<p className="font-normal text-secondary-text-color text-base">30 ثانیه دیگر تا دریافت کد</p>
<button>تایید</button>
<Button type="submit">تایید</Button>
<p className="font-medium text-base text-primary-color">ارسال مجدد</p>
</div>
</div>
</div>
</form>
)
}
src/schema/index.ts
+16
View File
@@ -32,4 +32,20 @@ export const LoginWithCodeSchema = yup.object({
.min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
.max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
.matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
})
export const ResetPasswordCodeSchema = yup.object({
code: yup.string()
.required("وارد کردن کد الزامی میباشد")
.min(5, "کد نمیتوند کمتر از 5 رقم باشد")
.max(5, "کد نمیتواند بیشتر از 5 رقم باشد")
.matches(/^[0-9]{5}$/, "کد نامعتبر"),
})
export const LoginCodeSchema = yup.object({
code: yup.string()
.required("وارد کردن کد الزامی میباشد")
.min(5, "کد نمیتوند کمتر از 5 رقم باشد")
.max(5, " کد نمیتواند بیشتر از 5 رقم باشد")
.matches(/^[0-9]{5}$/, "کد نامعتبر"),
})
src/types/index.ts
+7
View File
@@ -15,4 +15,11 @@ export interface ForgotPasswordInterface {
export interface LoginWithCodeInterface {
phoneNumber: string
}
export interface ResetPasswordCodeInterface {
code: string
}
export interface LoginCodeInterface {
code: string
}