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

create otp page - link auth page

Browse Source
This commit is contained in:
Alihaghighattalab
2024-08-05 13:06:00 +03:30
parent 0e5089aad5
commit 277b13e5d8
13 changed files with 704 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/combo-box.tsx
+5 -5
View File
@@ -3,11 +3,11 @@ import { ArrowDown2 } from 'iconsax-react'
import { useState } from 'react'
const value = [
{ id: 1, name: 'علی' },
{ id: 2, name: 'رضا' },
{ id: 3, name: 'محمد' },
{ id: 4, name: 'محمدرضا' },
{ id: 5, name: 'قاسم' },
{ id: 1, name: 'تهران' },
{ id: 2, name: 'شیراز' },
{ id: 3, name: 'اصفهان' },
{ id: 4, name: 'اراک' },
{ id: 5, name: 'تبریز' },
]
export const ComboBox = () => {
src/components/forms/forgot-password-form.tsx
+4 -1
View File
@@ -1,3 +1,4 @@
import { Link } from "react-router-dom"
import { Input } from "../common/input"
export const ForgotPasswordForm = () => {
@@ -17,7 +18,9 @@ export const ForgotPasswordForm = () => {
</div>
<div className="flex flex-col gap-y-[27px] items-center">
<button>دریافت کد تایید</button>
<p className="font-medium text-base text-primary-color">بازگشت</p>
<Link to="/auth/login">
<p className="font-medium text-base text-primary-color">بازگشت</p>
</Link>
</div>
</div>
</div>
src/components/forms/login-form.tsx
+2 -2
View File
@@ -19,11 +19,11 @@ export const LoginForm = () => {
<div className="flex flex-col gap-y-[25px] mt-9 mb-[42px]">
<Input type="number" placeholder="شماره تماس" />
<Input type="password" placeholder="رمز عبور" />
<p className="font-medium text-sm text-secondary-text-color cursor-pointer">فراموشی رمز عبور</p>
<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>ثبت</button>
<p className="font-medium text-base text-primary-color">ورود با رمز یکبار مصرف</p>
<Link to="/auth/login-with-code"><p className="font-medium text-base text-primary-color cursor-pointer">ورود با رمز یکبار مصرف</p></Link>
</div>
</div>
</div>
src/components/forms/login-with-code-form.tsx
+28
View File
@@ -0,0 +1,28 @@
import { Link } from "react-router-dom"
import { Input } from "../common/input"
export const LoginWithCodeForm = () => {
return (
<div
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">
<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>
</div>
</div>
<div className="mt-9 mb-[42px]">
<Input type="number" placeholder="شماره موبایل" />
</div>
<div className="flex flex-col gap-y-[27px] items-center">
<button>دریافت کد تایید</button>
<Link to="/auth/login">
<p className="font-medium text-base text-primary-color">بازگشت</p>
</Link>
</div>
</div>
</div>
)
}
src/components/forms/send-code-form.tsx
+42
View File
@@ -0,0 +1,42 @@
import { useState } from "react";
import OTPInput from "react-otp-input"
import { Link } from "react-router-dom"
export const SendCodeForm = () => {
const [otp, setOtp] = useState('');
return (
<div
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">
<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">
<div className="flex flex-col sm:flex-row gap-0.5 items-center">
<p className="text-secondary-text-color font-normal text-xs md:text-sm">کد تایید ارسال شده به شماره 09376225448 را وارد کنید.</p>
<Link to="/auth/login-with-code">
<p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">ویرایش</p>
</Link>
</div>
</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"
/>
</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>
<p className="font-medium text-base text-primary-color">ارسال مجدد</p>
</div>
</div>
</div>
)
}
src/index.css
+12
View File
@@ -26,6 +26,10 @@
button{
@apply text-base font-medium flex w-full justify-center bg-primary-color max-w-[442px] max-h-[55px] rounded-[20px] p-[18px] text-white
}
#otp{
direction: ltr;
}
}
@layer components {
@@ -40,4 +44,12 @@
.auth-logo-size {
@apply w-full max-w-[198px] h-auto
}
.otp-inputs {
@apply !w-full max-w-[40px] min-h-[40px] sm:max-w-[50px] sm:min-h-[50px] lg:max-w-[72px] lg:min-h-[72px] rounded-full ml-2
}
.otp-container {
@apply min-w-max
}
}
src/pages/auth/login-with-code.tsx
+12
View File
@@ -0,0 +1,12 @@
import { LoginWithCodeForm } from "../../components/forms/login-with-code-form"
export const LoginWithCode = () => {
return (
<>
<LoginWithCodeForm />
<div className="hidden xl:flex w-1/2 h-full justify-center items-center">
<img src="/svgs/auth/login-with-code.svg" alt="login with code" className="auth-image-desktop" />
</div>
</>
)
}
src/pages/auth/send-code.tsx
+13
View File
@@ -0,0 +1,13 @@
import React from "react"
import { SendCodeForm } from "../../components/forms/send-code-form"
export const SendCode = () => {
return (
<React.Fragment>
<SendCodeForm />
<div className="hidden xl:flex w-1/2 h-full justify-center items-center">
<img src="/svgs/auth/send-code.svg" alt="send code" className="auth-image-desktop" />
</div>
</React.Fragment>
)
}
src/router/index.tsx
+11
View File
@@ -5,6 +5,9 @@ import { Login } from "../pages/auth/login";
import { ForgotPassword } from "../pages/auth/forgot-password";
import { Register } from "../pages/auth/register";
import { ResetPassword } from "../pages/auth/reset-password";
import { LoginWithCode } from "../pages/auth/login-with-code";
import { SendCode } from "../pages/auth/send-code";
export const router = createBrowserRouter([
{
@@ -31,6 +34,14 @@ export const router = createBrowserRouter([
path: "reset-password",
element: <ResetPassword />
},
{
path: "login-with-code",
element: <LoginWithCode />
},
{
path: "send-code",
element: <SendCode />
},
]
}
])