From 7157a6396974b56061b21adb47fd91b86f724dd3 Mon Sep 17 00:00:00 2001 From: "Pratham.Mandavkar" Date: Wed, 15 Jan 2025 20:36:12 +0530 Subject: [PATCH] OTPpages --- src/App.tsx | 56 ++++++++---- src/Contexts/GlobalStateProvider.tsx | 2 +- src/Pages/OnBoarding/LoginOtp.tsx | 132 +++++++++++++++++++++++++++ src/assets/icons/edit.png | Bin 0 -> 667 bytes src/components/ui/pin-input.tsx | 27 ++++++ 5 files changed, 197 insertions(+), 20 deletions(-) create mode 100644 src/Pages/OnBoarding/LoginOtp.tsx create mode 100644 src/assets/icons/edit.png create mode 100644 src/components/ui/pin-input.tsx diff --git a/src/App.tsx b/src/App.tsx index fa6affb..7b53971 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,42 @@ -import { useContext } from 'react'; +import { useContext } from "react"; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; -import GlobalStateContext from './Contexts/GlobalStateContext'; -import DefaultLayout from './Layouts/DefaultLayout'; -import Login from './Pages/Login'; -import { RouteLink } from './Routes/Routes'; +import GlobalStateContext from "./Contexts/GlobalStateContext"; +import DefaultLayout from "./Layouts/DefaultLayout"; +import Login from "./Pages/Login"; +import { RouteLink } from "./Routes/Routes"; +import LoginOtp from "./Pages/OnBoarding/LoginOtp"; -function App() { - const context = useContext(GlobalStateContext); - if (!context) throw new Error('App must be used within a GlobalStateProvider'); - const { isAuthenticate } = context; +function App() { + const context = useContext(GlobalStateContext); + if (!context) + throw new Error("App must be used within a GlobalStateProvider"); + const { isAuthenticate } = context; - return ( - - - } /> - {RouteLink.map(({ path, Component }, index) => (} />))}) : ()} /> - } /> - - - ); -} + return ( + + + } /> + } /> + + + {RouteLink.map(({ path, Component }, index) => ( + } /> + ))} + + + ) : ( + + ) + } + /> + } /> + + + ); +} export default App; diff --git a/src/Contexts/GlobalStateProvider.tsx b/src/Contexts/GlobalStateProvider.tsx index 1f2c713..9a839de 100644 --- a/src/Contexts/GlobalStateProvider.tsx +++ b/src/Contexts/GlobalStateProvider.tsx @@ -5,7 +5,7 @@ import GlobalStateContext from './GlobalStateContext'; const GlobalStateProvider = ({ children }:{children:ReactNode}) => { - const [isAuthenticate, setIsAuthenticate] = useState(true); + const [isAuthenticate, setIsAuthenticate] = useState(false); return ( diff --git a/src/Pages/OnBoarding/LoginOtp.tsx b/src/Pages/OnBoarding/LoginOtp.tsx new file mode 100644 index 0000000..3fa635a --- /dev/null +++ b/src/Pages/OnBoarding/LoginOtp.tsx @@ -0,0 +1,132 @@ +import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"; +import { useContext, useState } from "react"; +import { useForm } from "react-hook-form"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import logo from "../../assets/logo.svg"; +import uiEdit from "../../assets/icons/edit.png"; +import { Button } from "../../components/ui/button"; +import { Field } from "../../components/ui/field"; +import { Toaster, toaster } from "../../components/ui/toaster"; +import { PinInput } from "../../components/ui/pin-input"; + +interface FormValues { + mobileNumber: number; +} + +const LoginOtp = () => { + const [isLoading, setIsLoading] = useState(false); + const context = useContext(GlobalStateContext); + if (!context) { + throw new Error("App must be used within a GlobalStateProvider"); + } + const { setIsAuthenticate } = context; + const { + register, + handleSubmit, + formState: { errors }, + } = useForm(); + + const onSubmit = handleSubmit((data) => { + setIsLoading(true); + if (data?.mobileNumber === 1234567890) { + setTimeout(() => { + setIsAuthenticate(true); + setIsLoading(false); + }, 3000); // 3-second delay + } else { + toaster.create({ + title: `Invalid Credentials`, + type: "error", + }); + setIsLoading(false); + } + }); + + return ( + + + + + + +
+ +
+ +
+ + + Enter otp + + + OTP has been send to your E-mail Address + + + + + 9619565889 + + + + + + + + Forgot password + + +
+ + + + ); +}; + +export default LoginOtp; diff --git a/src/assets/icons/edit.png b/src/assets/icons/edit.png new file mode 100644 index 0000000000000000000000000000000000000000..2aeaad044baee7c745aa8b2a4b2e02a437de8ff6 GIT binary patch literal 667 zcmV;M0%ZM(P)Px%RY^oaRA>e5ncZ>1Fbse@0wXX&N5})%N}hP>H8wmj0vo^x-3T^d1V&&4dP-1; z-TYXIgL6IiuID&bBz=2Ey2*e0X9RU#e5v0DQQa>`O?;zEAz5e=~+O8M< zNwQg_LS51MrhkOCw9kS;@6Nn)%^tdd5 z(8rhK#yai{VK~$>iER)J5|t5_ASYmkEUfcA0pOZFM41Z!88t!lBNh5O#3t!0T9Dgw z384L4DWOaHwSt)O8v1J^|3k5D3E| zE`Wo49p34h3o$zYZYE|4z=4=800*LaF*(#U7uc!pyM$cl1j(U;UHaY*z{^DWb7Xb^ zJ|Ti+fFep|LjAV3OD-sYk4yvy7y>~VX=ppQpKTfTa-W>(Q})_o8v6}8Lkb7L$wVJy z&~evH1a-2{_`4v=H$HFA-sgKY{yvEQmu2M?_u^kb&=Jj$?Wt?Ps$)v2AFj`^dXOQUN_8kQF4Tqbn7b$*vr|b)`F-%25!8j>9Z3J^6TU92`ZoeH=)28ex=dGW z7^PI`i%;h>xxJ%K`lwPFix)8hF#<6HF#>amz%LGocy$b2GiU$+002ovPDHLkV1i+) BCWHV0 literal 0 HcmV?d00001 diff --git a/src/components/ui/pin-input.tsx b/src/components/ui/pin-input.tsx new file mode 100644 index 0000000..93e013c --- /dev/null +++ b/src/components/ui/pin-input.tsx @@ -0,0 +1,27 @@ +import { PinInput as ChakraPinInput, Group } from "@chakra-ui/react" +import * as React from "react" + +export interface PinInputProps extends ChakraPinInput.RootProps { + rootRef?: React.Ref + count?: number + inputProps?: React.InputHTMLAttributes + attached?: boolean +} + +export const PinInput = React.forwardRef( + function PinInput(props, ref) { + const { count = 4, inputProps, rootRef, attached, ...rest } = props + return ( + + + + + {Array.from({ length: count }).map((_, index) => ( + + ))} + + + + ) + }, +)