From 4480f2d62865a585f8bbf0cd7122a25d0413bf2b Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Sun, 21 Aug 2022 01:46:36 +0530 Subject: fixed update components --- client/public/assets/images/biometrics.svg | 49 +++++ client/public/assets/images/demographic.svg | 41 ++++ .../LanguageSelect/locales/en/translation.json | 6 +- .../LanguageSelect/locales/hi/translation.json | 6 +- .../components/UpdateInput/UpdateInput.module.css | 4 +- .../Enrollment/DocumentScanner/DocumentScanner.jsx | 2 +- client/src/pages/Update/Address/Address.jsx | 186 ++++++++-------- client/src/pages/Update/Address/Address.module.css | 19 +- client/src/pages/Update/Agreement/Agreement.jsx | 122 ++++++++--- .../pages/Update/Agreement/Agreement.module.css | 13 +- client/src/pages/Update/Biometric/Biometric.jsx | 18 +- .../src/pages/Update/Demographic/Demographic.jsx | 24 ++- .../Update/DocumentScanner/DocumentScanner.jsx | 240 ++++++++++----------- .../DocumentScanner/DocumentScanner.module.css | 53 ++++- client/src/pages/Update/DocumentScanner/styles.js | 7 + client/src/pages/Update/FormOne/FormOne.module.css | 4 +- client/src/pages/Update/Otp/Otp.jsx | 106 +++++++-- client/src/pages/Update/Otp/Otp.module.css | 5 + client/src/pages/Update/Update.jsx | 19 +- .../src/pages/Update/UpdateSelect/UpdateSelect.jsx | 8 +- 20 files changed, 607 insertions(+), 325 deletions(-) create mode 100644 client/public/assets/images/biometrics.svg create mode 100644 client/public/assets/images/demographic.svg create mode 100644 client/src/pages/Update/DocumentScanner/styles.js (limited to 'client') diff --git a/client/public/assets/images/biometrics.svg b/client/public/assets/images/biometrics.svg new file mode 100644 index 0000000..2d7a06a --- /dev/null +++ b/client/public/assets/images/biometrics.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/assets/images/demographic.svg b/client/public/assets/images/demographic.svg new file mode 100644 index 0000000..522a2ff --- /dev/null +++ b/client/public/assets/images/demographic.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json index 3b4383b..bf73d43 100644 --- a/client/src/components/LanguageSelect/locales/en/translation.json +++ b/client/src/components/LanguageSelect/locales/en/translation.json @@ -89,10 +89,12 @@ "SCAN_YOUR_DOCUMENT": "Scan your document", "INCORRECT_OTP": "Incorrect OTP!", "OTP_VERIFIED!": "OTP verified!", - "PROVIDE_AADHAAR_NUMBER": "Provide Aadhaar Number", + "PROVIDE_YOUR_AADHAAR_NUMBER": "Provide your Aadhaar Number", "SUBMIT": "Submit", "ENTER_YOUR_AADHAAR_NUMBER": "Enter your Aadhaar Number", + "PLEASE_ENTER_VALID_AADHAAR_NUMBER": "Please enter a valid aadhaar number", "ENTER_OTP": "Enter OTP", + "SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER": "Sent to your registered mobile number", "PLEASE_VERIFY_OTP": "Please verify OTP", - "USER_ALREADY_EXISTS": "User already exists" + "USER_ALREADY_EXISTS": "USER ALREADY EXISTS" } diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json index 801d46c..eedee10 100644 --- a/client/src/components/LanguageSelect/locales/hi/translation.json +++ b/client/src/components/LanguageSelect/locales/hi/translation.json @@ -89,10 +89,12 @@ "SCAN_YOUR_DOCUMENT": "अपना दस्तावेज़ स्कैन करें", "INCORRECT_OTP": "गलत ऑट्पी!", "OTP_VERIFIED!": "ऑट्पी सत्यापित कर दिया गया है!", - "PROVIDE_AADHAAR_NUMBER": "आधार नंबर प्रदान करें", - "ENTER_YOUR_AADHAAR_NUMBER": "आधार नंबर दर्ज करें", + "PROVIDE_YOUR_AADHAAR_NUMBER": "अपना आधार नंबर प्रदान करें", + "ENTER_YOUR_AADHAAR_NUMBER": "अपना आधार नंबर दर्ज करें", + "PLEASE_ENTER_VALID_AADHAAR_NUMBER": "कृपया वैध आधार संख्या दर्ज करें", "SUBMIT": "प्रस्तुत करें", "ENTER_OTP": "ओटीपी दर्ज करें", + "SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER": "आपके पंजीकृत मोबाइल नंबर पर भेजा गया", "PLEASE_VERIFY_OTP": "कृपया ओटीपी सत्यापित करें", "USER_ALREADY_EXISTS": "उपयोगकर्ता पहले से मौजूद है" } diff --git a/client/src/components/UpdateInput/UpdateInput.module.css b/client/src/components/UpdateInput/UpdateInput.module.css index 52e13a7..d4d7ee5 100644 --- a/client/src/components/UpdateInput/UpdateInput.module.css +++ b/client/src/components/UpdateInput/UpdateInput.module.css @@ -10,13 +10,13 @@ flex-direction: column; } -.input__edit{ +.input__edit { display: flex; flex-direction: row; } .input__field { - width: 300px; + width: 330px; margin: 10px 0px; padding: 18px 10px; border: 3px solid; diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx index 86f53f4..d61f16f 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -37,7 +37,7 @@ const DocumentScanner = () => { DOB: doccu.DOB }) }) - console.log(activeStep) + const handleNext = () => { if (activeStep === steps.length - 1) { setUserData({ ...userData, documents: documents }) diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx index 9159508..20a97f7 100644 --- a/client/src/pages/Update/Address/Address.jsx +++ b/client/src/pages/Update/Address/Address.jsx @@ -27,7 +27,7 @@ const Address = () => { })) const customStyles = { - control: (base, state) => ({ + control: (base) => ({ ...base, width: '330px', height: '60px', @@ -35,7 +35,7 @@ const Address = () => { border: '3px solid', borderRadius: '10px !important' }), - input: (base, state) => ({ + input: (base) => ({ ...base, display: 'flex', justifyContent: 'center', @@ -55,88 +55,10 @@ const Address = () => { setEditable2(!editable2) } - console.log(userData.address.village) - return ( <> -
+
-
-
-
- -
- { - setUserData({ - ...userData, - address: { - ...userData.address, - district: e - } - }) - }} - styles={customStyles} - /> - -
-
-
- { - setUserData({ - ...userData, - address: { - ...userData.address, - village: e.target.value - } - }) - }} - placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} - /> -
{ placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')} /> { setUserData({ ...userData, address: { ...userData.address, - street: e.target.value + village: e.target.value } }) }} - placeholder={t('ENTER_YOUR_STREET_ROAD')} + placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} /> +
+ +
+ { + setUserData({ + ...userData, + address: { + ...userData.address, + district: e + } + }) + }} + styles={customStyles} + /> + +
+
{ setUserData({ ...userData, address: { ...userData.address, - landmark: e.target.value + locality: e.target.value } }) }} - placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} + placeholder={t('ENTER_YOUR_AREA_LOCALITY')} /> { }} placeholder={t('ENTER_YOUR_AREA_PINCODE')} /> + { + setUserData({ + ...userData, + address: { + ...userData.address, + landmark: e.target.value + } + }) + }} + placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} + />
diff --git a/client/src/pages/Update/Address/Address.module.css b/client/src/pages/Update/Address/Address.module.css index 41cbf17..ccaca08 100644 --- a/client/src/pages/Update/Address/Address.module.css +++ b/client/src/pages/Update/Address/Address.module.css @@ -1,33 +1,22 @@ .address { display: flex; justify-content: center; + margin: 40px 0px 0px; } .address__container { margin: 0px 20px; } -.input { +.input__container { display: flex; + flex-direction: column; justify-content: center; font-family: 'Barlow'; font-size: var(--font-medium-s); } -.input__container { - display: flex; - flex-direction: column; -} - -.input__edit{ +.input__edit { display: flex; flex-direction: row; } - -.input__field { - width: 300px; - margin: 10px 0px; - padding: 20px 10px; - border: 3px solid; - border-radius: 10px; -} diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx index 804561b..2d1361d 100644 --- a/client/src/pages/Update/Agreement/Agreement.jsx +++ b/client/src/pages/Update/Agreement/Agreement.jsx @@ -1,57 +1,111 @@ -import React from 'react' +import React, { useState } from 'react' import Header from '../../../components/Header/Header' import CardAgreement from '../../../components/Card/CardAgreement' import styles from './Agreement.module.css' import Input from '../../../components/Input/Input' -import { Grid, Button } from '@mui/material' import { Link } from 'react-router-dom' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { Button, Typography } from '@mui/material' import { useTranslation } from 'react-i18next' +import { sendOTP, updateUser } from '../../../services/apiservice' import { userContext } from '../../../context/User' import { useMutation } from 'react-query' -import { updateUser } from '../../../services/apiservice' +import { ToastContainer, toast } from 'react-toastify' +import 'react-toastify/dist/ReactToastify.css' -const Agreement = () => { +const Agreement = ({ unverified, setUnverified }) => { + const { t } = useTranslation() + const [otp, setOtp] = useState() + const [disabled, setDisabled] = useState(false) + const [finalDisable, setFinalDisable] = useState(false) + const [show, setShow] = useState(false) const { userData } = userContext() + const updateUse = useMutation(() => updateUser(userData._id, { ...userData })) - const { t } = useTranslation() + const { data, mutate } = useMutation(() => + sendOTP({ mobile: `+91${userData?.mobile}` }) + ) + + console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable) + + const verifyOTP = () => { + if (data?.data?.otpCode === Number(otp)) { + console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable) + setFinalDisable(true) + setDisabled(true) + setShow(false) + setUnverified(false) + toast.success(t('OTP_VERIFIED!')) + } else { + toast.error(t('INCORRECT_OTP!')) + } + } + + const sendResendOTP = () => { + setTimeout(() => { + if (finalDisable === false) { + console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable) + setDisabled(false) + } + }, 30000) + } + return ( <> -
+ +
- - - - - - - - - +
+ {t('PLEASE_VERIFY_YOUR_IDENTITY')} + + {show && ( + <> + setOtp(e.target.value)} + maxLength="6" + placeholder="XXXXXX" + /> + + + )} +
updateUse.mutate()} /> diff --git a/client/src/pages/Update/Agreement/Agreement.module.css b/client/src/pages/Update/Agreement/Agreement.module.css index c618a4d..2580d47 100644 --- a/client/src/pages/Update/Agreement/Agreement.module.css +++ b/client/src/pages/Update/Agreement/Agreement.module.css @@ -1,4 +1,11 @@ .card__container { - display: flex; - justify-content: center; - } \ No newline at end of file + display: flex; + justify-content: center; +} + +.card__elements { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx index 72aa1b7..6737ed9 100644 --- a/client/src/pages/Update/Biometric/Biometric.jsx +++ b/client/src/pages/Update/Biometric/Biometric.jsx @@ -11,20 +11,14 @@ const Biometric = () => { const [page, setPage] = useState(4) const { userData, oriUserData, setUserData } = userContext() - const [formData, setFormData] = useState({ - photo: '', - irisScan: '', - fingerPrint: '' - }) - const conditionalComponent = () => { switch (page) { case 0: - return + return case 1: - return + return case 2: - return + return default: return } @@ -49,21 +43,21 @@ const Biometric = () => { case 0: return ( <> - handleSubmit()}> Next + handleSubmit()} /> handleBack()} /> ) case 1: return ( <> - setPage(4)}> Next + setPage(4)} /> setPage(page - 1)} /> ) case 2: return ( <> - setPage(4)}> Next + setPage(4)} /> setPage(page - 1)} /> ) diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 61fe972..0f89fe2 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -13,6 +13,7 @@ import UpdateSelect from '../UpdateSelect/UpdateSelect' import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' import { ToastContainer, toast } from 'react-toastify' +import BackButton from '../../../components/BackButton/BackButton' import 'react-toastify/dist/ReactToastify.css' const Demographic = () => { @@ -87,13 +88,26 @@ const Demographic = () => { const conditionalButton = () => { switch (page) { case 0: - return Next + return ( + <> + + setPage(page - 1)} /> + + ) case 1: - return Next + return ( + <> + + setPage(page - 1)} /> + + ) case 2: - return Next - default: - return Next + return ( + <> + + setPage(page - 1)} /> + + ) } } return ( diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx index f6fe0b5..0fe8d42 100644 --- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx @@ -3,34 +3,18 @@ import React, { useState } from 'react' import Webcam from 'react-webcam' import Header from '../../../components/Header/Header' import styles from './DocumentScanner.module.css' -import { - Button, - Grid, - Typography, - StepLabel, - Step, - Stepper, - Box -} from '@mui/material' +import { Button, Typography, StepLabel, Step, Stepper } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' +import { toast } from 'react-toastify' +import { useStyles } from './styles' const DocumentScanner = () => { const { userData, oriUserData, setUserData } = userContext() const { t } = useTranslation() - - // JSON.stringify(oriUserData?.address) === let steps - // use conditional statements to compare userData and oriUserData to determine the steps - // 1st case: if only address is changed, then step=['POA'] - // 2nd case: if only either name or gender is changed, then step=['POI'] - // 3rd case: if only dob is changed, then step=['DOB'] - // 4th case: If only address and name or gender is changed, then step=['POA', 'POI'] - // 5th case: If only address and dob is changed, then step=['POA', 'DOB'] - // 6th case: If only name or gender and dob is changed, then step=['POI', 'DOB'] - // 7th case: If everything is changed, then step=['POA', 'POI', 'DOB'] if ( (userData.address !== oriUserData.address && userData.dob !== oriUserData.dob && @@ -71,7 +55,7 @@ const DocumentScanner = () => { const [doccu] = useState({ POI: '', POA: '', DOB: '' }) - console.log(documents) + const classes = useStyles() const webcamRef = React.useRef(null) @@ -90,7 +74,15 @@ const DocumentScanner = () => { if (activeStep === steps.length - 1) { setUserData({ ...userData, documents: documents }) } - setActiveStep((prevActiveStep) => prevActiveStep + 1) + if ( + (!documents.POI && activeStep === 0) || + (!documents.POA && activeStep === 1) || + (!documents.DOB && activeStep === 2) + ) { + toast.error(t('SCAN_YOUR_DOCUMENT')) + } else { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } } const handleBack = () => { @@ -100,67 +92,85 @@ const DocumentScanner = () => { const WebcamComponent = ({ doc }) => { return ( <> -
- {documents[doc] === '' ? ( - + +
+ {documents[doc] === '' ? ( + + ) : ( + + )} +
+ +
+
+ +
- - - - - - - -

- +
{t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')} - +
) @@ -168,55 +178,43 @@ const DocumentScanner = () => { return ( <> -
+
- - - {steps.map((label, index) => { - const stepProps = {} - const labelProps = {} - return ( - - {label} - - ) - })} - - {activeStep === steps.length ? ( - - +
+
+ + {steps.map((label, index) => { + const stepProps = {} + const labelProps = {} + return ( + + + {label} + + + ) + })} + + {activeStep === steps.length ? ( + {t('ALL_STEPS_COMPLETED')} - - - - - ) : ( - - {activeStep === 0 ? ( - - ) : activeStep === 1 ? ( - - ) : ( - activeStep === 2 && - )} - - - - - - - )} - + ) : ( + + {activeStep === 0 ? ( + + ) : activeStep === 1 ? ( + + ) : ( + activeStep === 2 && + )} + + )} +
+
) } diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css index ec59f61..f73d192 100644 --- a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css @@ -1,5 +1,50 @@ .card__container { - display: flex; - justify-content: center; - } - \ No newline at end of file + display: flex; + justify-content: center; + align-items: center; + margin: 20px; +} + +.stepper__container { + display: flex; + justify-content: center; +} + +.button__container { + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.button { + background: transparent; + border: none; +} + +.image { + height: 50px; + width: 50px; +} + +.image:hover { + cursor: pointer; + transform: scale(1.1); +} + +.image:active { + transform: scale(0.98); +} + +.box { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; +} + +.container { + display: flex; + align-items: center; +} diff --git a/client/src/pages/Update/DocumentScanner/styles.js b/client/src/pages/Update/DocumentScanner/styles.js new file mode 100644 index 0000000..0b7e915 --- /dev/null +++ b/client/src/pages/Update/DocumentScanner/styles.js @@ -0,0 +1,7 @@ +import { makeStyles } from '@mui/styles' + +export const useStyles = makeStyles({ + stepLabel: { + fontSize: '20px' + } +}) diff --git a/client/src/pages/Update/FormOne/FormOne.module.css b/client/src/pages/Update/FormOne/FormOne.module.css index abde7ef..e0cff0e 100644 --- a/client/src/pages/Update/FormOne/FormOne.module.css +++ b/client/src/pages/Update/FormOne/FormOne.module.css @@ -34,14 +34,14 @@ } .formone__dob_input { - width: 300px; + width: 330px; margin: 10px 0px; padding: 11px 10px; border: 3px solid; border-radius: 10px; } -.input__edit{ +.input__edit { display: flex; flex-direction: row; } diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx index 31d8096..bce6ef7 100644 --- a/client/src/pages/Update/Otp/Otp.jsx +++ b/client/src/pages/Update/Otp/Otp.jsx @@ -1,19 +1,26 @@ -import React, { useEffect } from 'react' +import React, { useState, useEffect } from 'react' import Header from '../../../components/Header/Header' import Input from '../../../components/Input/Input' -import { Button, Grid } from '@mui/material' +import { Button } from '@mui/material' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' -import { useQuery } from 'react-query' -import { getUserByAadhaar } from '../../../services/apiservice' -import styles from './Otp.module.css' +import { useQuery, useMutation } from 'react-query' +import { getUserByAadhaar, sendOTP } from '../../../services/apiservice' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { toast, ToastContainer } from 'react-toastify' + +import styles from './Otp.module.css' const Otp = () => { const navigate = useNavigate() const { t } = useTranslation() - const { aadhaarNumber, setUserData, oriUserData, setOriUserData } = + const [otp, setOtp] = useState() + const [disabled, setDisabled] = useState(false) + const [finalDisable, setFinalDisable] = useState(false) + const [unverified, setUnverified] = useState(true) + const [show, setShow] = useState(false) + const { aadhaarNumber, userData, setUserData, oriUserData, setOriUserData } = userContext() useEffect(() => { @@ -22,7 +29,6 @@ const Otp = () => { const isLongEnough = aadhaarNumber?.toString().length > 11 - // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders. const { isLoading, isError, data } = useQuery('user', async () => { if (isLongEnough) { const response = await getUserByAadhaar(aadhaarNumber) @@ -30,6 +36,31 @@ const Otp = () => { } }) + const mutateOTP = useMutation(() => + sendOTP({ mobile: `+91${userData?.mobile}` }) + ) + + const verifyOTP = () => { + if (mutateOTP?.data?.data?.otpCode === Number(otp)) { + setFinalDisable(true) + setDisabled(true) + setShow(false) + setUnverified(false) + toast.success(t('OTP_VERIFIED!')) + } else { + toast.error(t('INCORRECT_OTP')) + } + } + + const sendResendOTP = () => { + setTimeout(() => { + if (finalDisable === false) { + console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable) + setDisabled(false) + } + }, 30000) + } + if (isLoading) { return
{t('loading')}
} @@ -43,29 +74,66 @@ const Otp = () => { } return ( <> +
-

{t('ENTER_OTP')}

- - - +

{t('ENTER_OTP')}

+

+ {t('SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER')} +

+ + {show && ( + <> + setOtp(e.target.value)} + maxLength="6" + placeholder={t('ENTER_OTP')} + /> - - + + )}
- navigate('/update/select-update')} /> + { + if (unverified) { + toast.error(t('PLEASE_VERIFY_OTP')) + } else { + navigate('/update/select-update') + } + }} + /> ) } diff --git a/client/src/pages/Update/Otp/Otp.module.css b/client/src/pages/Update/Otp/Otp.module.css index 261d7aa..b88d5d4 100644 --- a/client/src/pages/Update/Otp/Otp.module.css +++ b/client/src/pages/Update/Otp/Otp.module.css @@ -12,3 +12,8 @@ font-size: var(--font-medium); font-weight: 400; } + +.subsubheading { + font-size: var(--font-medium-s); + margin: 10px 0px; +} diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx index 2ef98ec..ecf1677 100644 --- a/client/src/pages/Update/Update.jsx +++ b/client/src/pages/Update/Update.jsx @@ -6,6 +6,8 @@ import { Grid, Button } from '@mui/material' import { userContext } from '../../context/User' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' +import { ToastContainer, toast } from 'react-toastify' +import { validAadhaar } from '../../constants/RegEx' const Update = () => { const { aadhaarNumber, setAadhaarNumber } = userContext() @@ -15,11 +17,18 @@ const Update = () => { return ( <> +
-

{t('PROVIDE_AADHAAR_NUMBER')}

+

+ {t('PROVIDE_YOUR_AADHAAR_NUMBER')} +

setAadhaarNumber(e.target.value)} @@ -34,7 +43,11 @@ const Update = () => { type="submit" variant="contained" onClick={() => { - navigate('/update/otp') + if (!validAadhaar.test(aadhaarNumber)) { + toast.error(t('Please enter a valid aadhaar number')) + } else { + navigate('/update/otp') + } }} > {t('SUBMIT')} diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx index e57587a..3c2edb3 100644 --- a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx +++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx @@ -1,27 +1,27 @@ import { t } from 'i18next' import React from 'react' import { Link } from 'react-router-dom' - import Card from '../../../components/Card/Card' import Header from '../../../components/Header/Header' import SubmitButton from '../../../components/SubmitButton/SubmitButton' + import styles from './UpdateSelect.module.css' const UpdateSelect = () => { return ( <> -
+
-- cgit