From 277b13e5d85584de2a4ad0c031262607441cc458 Mon Sep 17 00:00:00 2001 From: Alihaghighattalab Date: Mon, 5 Aug 2024 13:06:00 +0330 Subject: [PATCH] create otp page - link auth page --- package-lock.json | 11 + package.json | 1 + public/svgs/auth/login-with-code.svg | 253 ++++++++++++++ public/svgs/auth/send-code.svg | 310 ++++++++++++++++++ src/components/common/combo-box.tsx | 10 +- src/components/forms/forgot-password-form.tsx | 5 +- src/components/forms/login-form.tsx | 4 +- src/components/forms/login-with-code-form.tsx | 28 ++ src/components/forms/send-code-form.tsx | 42 +++ src/index.css | 12 + src/pages/auth/login-with-code.tsx | 12 + src/pages/auth/send-code.tsx | 13 + src/router/index.tsx | 11 + 13 files changed, 704 insertions(+), 8 deletions(-) create mode 100644 public/svgs/auth/login-with-code.svg create mode 100644 public/svgs/auth/send-code.svg create mode 100644 src/components/forms/login-with-code-form.tsx create mode 100644 src/components/forms/send-code-form.tsx create mode 100644 src/pages/auth/login-with-code.tsx create mode 100644 src/pages/auth/send-code.tsx diff --git a/package-lock.json b/package-lock.json index d0c69a2..56d44cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "iconsax-react": "^0.0.8", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-otp-input": "^3.1.1", "react-router-dom": "^6.26.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", @@ -16165,6 +16166,16 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "license": "MIT" }, + "node_modules/react-otp-input": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/react-otp-input/-/react-otp-input-3.1.1.tgz", + "integrity": "sha512-bjPavgJ0/Zmf/AYi4onj8FbH93IjeD+e8pWwxIJreDEWsU1ILR5fs8jEJmMGWSBe/yyvPP6X/W6Mk9UkOCkTPw==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.6 || ^17.0.0 || ^18.0.0", + "react-dom": ">=16.8.6 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/package.json b/package.json index e198089..ba45ed4 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "iconsax-react": "^0.0.8", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-otp-input": "^3.1.1", "react-router-dom": "^6.26.0", "react-scripts": "5.0.1", "typescript": "^4.9.5", diff --git a/public/svgs/auth/login-with-code.svg b/public/svgs/auth/login-with-code.svg new file mode 100644 index 0000000..e691ffc --- /dev/null +++ b/public/svgs/auth/login-with-code.svg @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svgs/auth/send-code.svg b/public/svgs/auth/send-code.svg new file mode 100644 index 0000000..d8f3c95 --- /dev/null +++ b/public/svgs/auth/send-code.svg @@ -0,0 +1,310 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/combo-box.tsx b/src/components/common/combo-box.tsx index 33a27f5..0279a3f 100644 --- a/src/components/common/combo-box.tsx +++ b/src/components/common/combo-box.tsx @@ -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 = () => { diff --git a/src/components/forms/forgot-password-form.tsx b/src/components/forms/forgot-password-form.tsx index 45abc51..b99da40 100644 --- a/src/components/forms/forgot-password-form.tsx +++ b/src/components/forms/forgot-password-form.tsx @@ -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 = () => {
-

بازگشت

+ +

بازگشت

+
diff --git a/src/components/forms/login-form.tsx b/src/components/forms/login-form.tsx index 4f967e4..738ad46 100644 --- a/src/components/forms/login-form.tsx +++ b/src/components/forms/login-form.tsx @@ -19,11 +19,11 @@ export const LoginForm = () => {
-

فراموشی رمز عبور

+

فراموشی رمز عبور

-

ورود با رمز یکبار مصرف

+

ورود با رمز یکبار مصرف

diff --git a/src/components/forms/login-with-code-form.tsx b/src/components/forms/login-with-code-form.tsx new file mode 100644 index 0000000..3507443 --- /dev/null +++ b/src/components/forms/login-with-code-form.tsx @@ -0,0 +1,28 @@ +import { Link } from "react-router-dom" +import { Input } from "../common/input" + +export const LoginWithCodeForm = () => { + return ( +
+ logo +
+
+ ورود با رمز یکبار مصرف +
+

لطفا شماره موبایل خود را وارد کنید

+
+
+
+ +
+
+ + +

بازگشت

+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/forms/send-code-form.tsx b/src/components/forms/send-code-form.tsx new file mode 100644 index 0000000..2e503a9 --- /dev/null +++ b/src/components/forms/send-code-form.tsx @@ -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 ( +
+ logo +
+
+ ورود با رمز یکبار مصرف +
+
+

کد تایید ارسال شده به شماره 09376225448 را وارد کنید.

+ +

ویرایش

+ +
+
+
+
+ } + inputStyle="otp-inputs" + /> + +
+
+

30 ثانیه دیگر تا دریافت کد

+ +

ارسال مجدد

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 3a0d967..2bcc6a5 100644 --- a/src/index.css +++ b/src/index.css @@ -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 + } } \ No newline at end of file diff --git a/src/pages/auth/login-with-code.tsx b/src/pages/auth/login-with-code.tsx new file mode 100644 index 0000000..1d06985 --- /dev/null +++ b/src/pages/auth/login-with-code.tsx @@ -0,0 +1,12 @@ +import { LoginWithCodeForm } from "../../components/forms/login-with-code-form" + +export const LoginWithCode = () => { + return ( + <> + +
+ login with code +
+ + ) +} \ No newline at end of file diff --git a/src/pages/auth/send-code.tsx b/src/pages/auth/send-code.tsx new file mode 100644 index 0000000..bd34b77 --- /dev/null +++ b/src/pages/auth/send-code.tsx @@ -0,0 +1,13 @@ +import React from "react" +import { SendCodeForm } from "../../components/forms/send-code-form" + +export const SendCode = () => { + return ( + + +
+ send code +
+ + ) +} \ No newline at end of file diff --git a/src/router/index.tsx b/src/router/index.tsx index f2953bc..0de0400 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -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: }, + { + path: "login-with-code", + element: + }, + { + path: "send-code", + element: + }, ] } ]) \ No newline at end of file