From 1c9a3d21cc3479d299181d98fb895614e0aaf649 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Tue, 16 Aug 2022 12:15:55 +0530 Subject: random bullshit --- client/src/components/Card/CardAgreement.jsx | 4 +- client/src/components/Gender/Gender.jsx | 97 +++---- client/src/components/Header/Header.jsx | 4 +- .../components/LanguageSelect/LanguageSelect.js | 67 +++++ .../LanguageSelect/locales/en/translation.json | 83 ++++++ .../LanguageSelect/locales/hi/translation.json | 4 + client/src/components/RegEx/RegEx.jsx | 2 + client/src/i18nextInit.js | 41 +++ client/src/index.js | 1 + client/src/pages/Enrollment/Address/Address.jsx | 226 ++++++++-------- .../src/pages/Enrollment/Agreement/Agreement.jsx | 14 +- .../Enrollment/DocumentScanner/DocumentScanner.jsx | 30 +-- client/src/pages/Enrollment/Enrollment.jsx | 43 +-- .../src/pages/Enrollment/FinalSlip/FinalSlip.jsx | 9 +- .../pages/Enrollment/Fingerprint/Fingerprint.jsx | 12 +- client/src/pages/Enrollment/FormOne/FormOne.jsx | 50 ++-- client/src/pages/Enrollment/FormTwo/FormTwo.jsx | 12 +- client/src/pages/Enrollment/IrisScan/IrisScan.jsx | 12 +- .../pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 15 +- client/src/pages/Home/Home.jsx | 15 +- client/src/pages/Update/Address/Address.jsx | 300 +++++++++++---------- client/src/pages/Update/Agreement/Agreement.jsx | 16 +- .../Update/BiometricSelect/BiometricSelect.jsx | 12 +- .../src/pages/Update/Demographic/Demographic.jsx | 77 +++--- .../Update/DocumentScanner/DocumentScanner.jsx | 12 +- client/src/pages/Update/FinalSlip/FinalSlip.jsx | 9 +- .../src/pages/Update/Fingerprint/Fingerprint.jsx | 12 +- client/src/pages/Update/FormOne/FormOne.jsx | 104 +++---- client/src/pages/Update/IrisScan/IrisScan.jsx | 12 +- .../src/pages/Update/PhotoCapture/PhotoCapture.jsx | 16 +- client/src/pages/Update/Update.jsx | 83 +++--- .../src/pages/Update/UpdateSelect/UpdateSelect.jsx | 13 +- client/src/services/apiservice.js | 5 + 33 files changed, 845 insertions(+), 567 deletions(-) create mode 100644 client/src/components/LanguageSelect/LanguageSelect.js create mode 100644 client/src/components/LanguageSelect/locales/en/translation.json create mode 100644 client/src/components/LanguageSelect/locales/hi/translation.json create mode 100644 client/src/i18nextInit.js (limited to 'client/src') diff --git a/client/src/components/Card/CardAgreement.jsx b/client/src/components/Card/CardAgreement.jsx index 245cdbb..da35c91 100644 --- a/client/src/components/Card/CardAgreement.jsx +++ b/client/src/components/Card/CardAgreement.jsx @@ -2,14 +2,16 @@ import React from 'react' import styles from './CardAgreement.module.css' import SubmitButton from '../SubmitButton/SubmitButton' import { Typography } from '@mui/material' +import { useTranslation } from 'react-i18next' const CardAgreement = ({ title, image }) => { + const { t } = useTranslation() return ( <>
- I hereby confirm the identity and address of ___________ as being true, correct and accurate. + {t('I_HEREBY_CONFIRM_THE_IDENTITY_AND_ADDRESS')}
diff --git a/client/src/components/Gender/Gender.jsx b/client/src/components/Gender/Gender.jsx index 97e4d6e..98a1b48 100644 --- a/client/src/components/Gender/Gender.jsx +++ b/client/src/components/Gender/Gender.jsx @@ -1,59 +1,62 @@ import React from 'react' +import { useTranslation } from 'react-i18next' import EditButton from '../../components/EditButton/EditButton' import LabelCard from '../LabelCard/LabelCard' import styles from './Gender.module.css' const Gender = ({ formData, setFormData }) => { - const [editable, setEditable] = React.useState(true) + const { t } = useTranslation() + const [editable, setEditable] = React.useState(true) - const handleEdit = () => { - setEditable(!editable) - } + const handleEdit = () => { + setEditable(!editable) + } return (
- { - setFormData({ - ...formData, - gender: 'Male' - }) - }} - image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} /> - { - setFormData({ - ...formData, - gender: 'Female' - }) - }} - image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} /> - { - setFormData({ - ...formData, - gender: 'Transgender' - }) - }} - image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} /> - -
+ { + setFormData({ + ...formData, + gender: 'Male' + }) + }} + image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} + /> + { + setFormData({ + ...formData, + gender: 'Female' + }) + }} + image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} + /> + { + setFormData({ + ...formData, + gender: 'Other' + }) + }} + image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} + /> + + ) } diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx index d90aafe..1116312 100644 --- a/client/src/components/Header/Header.jsx +++ b/client/src/components/Header/Header.jsx @@ -1,10 +1,12 @@ import React from 'react' +import { useTranslation } from 'react-i18next' import styles from './Header.module.css' const Header = ({ subheading }) => { + const { t } = useTranslation() return (
-

AADHAAR

+

{t('AADHAAR')}

{subheading}

) diff --git a/client/src/components/LanguageSelect/LanguageSelect.js b/client/src/components/LanguageSelect/LanguageSelect.js new file mode 100644 index 0000000..ac455b8 --- /dev/null +++ b/client/src/components/LanguageSelect/LanguageSelect.js @@ -0,0 +1,67 @@ +import React from 'react' +import { useTranslation } from 'react-i18next' +import i18next from 'i18next' + +import ArrowDropDown from '@mui/icons-material/ArrowDropDown' +import Button from '@mui/material/Button' +import Popover from '@mui/material/Popover' +import List from '@mui/material/List' +import ListItem from '@mui/material/ListItem' +import ListSubheader from '@mui/material/ListSubheader' + +const languageMap = { + en: { label: 'English', dir: 'ltr', active: true }, + hi: { label: 'Hindi', dir: 'ltr', active: false } +} + +const LanguageSelect = () => { + const selected = localStorage.getItem('i18nextLng') || 'en' + const { t } = useTranslation() + + const [menuAnchor, setMenuAnchor] = React.useState(null) + React.useEffect(() => { + document.body.dir = languageMap[selected]?.dir + }, [menuAnchor, selected]) + + return ( +
+ + setMenuAnchor(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'right' + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right' + }} + > +
+ + {t('select_language')} + {Object.keys(languageMap)?.map((item) => ( + { + i18next.changeLanguage(item) + setMenuAnchor(null) + }} + > + {languageMap[item].label} + + ))} + +
+ +
+ ) +} + +export default LanguageSelect diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json new file mode 100644 index 0000000..bedc763 --- /dev/null +++ b/client/src/components/LanguageSelect/locales/en/translation.json @@ -0,0 +1,83 @@ +{ + "AADHAAR": "AADHAAR", + "MERA_AADHAAR_MERI_PEHCHAN": "Mera Aadhaar Meri Pehchan", + "ENROLLMENT": "Enrollment", + "UPDATE": "Update", + "INDIAN_RESIDENT": "Indian Resident", + "NON_RESIDENTIAL_INDIAN": "Non-Residential Indian", + "FULL_NAME": "Full Name", + "ENTER_YOUR_FULL_NAME": "Enter your full name", + "MALE": "Male", + "FEMALE": "Female", + "OTHER": "Other", + "DATE_OF_BIRTH": "Date of Birth", + "MOBILE": "Mobile", + "ENTER_YOUR_MOBILE_NUMBER": "Enter your Mobile Number", + "EMAIL": "Email", + "ENTER_YOUR_EMAIL_ID": "Enter your Email ID", + "COUNTRY": "Country", + "STATE": "State", + "DISTRICT": "District", + "VILLAGE_TOWN": "Village / Town", + "ENTER_YOUR_VILLAGE_TOWN": "Enter your Village / Town", + "HOUSE_NUMBER_APARTMENT": "House Number/ Apartment", + "ENTER_YOUR_HOUSE_NUMBER_APARTMENT": "Enter your House Number/ Apartment", + "STREET_ROAD": "Street / Road", + "ENTER_YOUR_STREET_ROAD": "Enter your Street / Road", + "AREA_LOCALITY": "Area / Locality", + "ENTER_YOUR_AREA_LOCALITY": "Enter your Area / Locality", + "POST_OFFICE": "Post Office", + "ENTER_YOUR_AREA_POST_OFFICE": "Enter your Area Post Office", + "LANDMARK": "Landmark", + "ENTER_ANY_NEAREST_LANDMARK": "Enter any nearest Landmark", + "PINCODE": "Pincode", + "ENTER_YOUR_AREA_PINCODE": "Enter your area Pincode", + "CAPTURE": "Capture", + "RESET": "Reset", + "PLEASE_LOOK_INTO_THE_CAMERA": "Please look into the camera", + "CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO": "Click Capture to Capture the photo", + "CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO": "Click Reset to remove the captured photo", + "PROOF_OF_IDENTITY": "Proof of Identity", + "PROOF_OF_ADDRESS": "Proof of Address", + "PROOF_OF_DOB": "Proof of Date of Birth", + "SCAN": "Scan", + "KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS": "Kindly click the picture of your documents", + "ALL_STEPS_COMPLETED": "All steps completed - you're finished", + "BACK": "Back", + "FINISH": "Finish", + "NEXT": "Next", + "PLEASE_PUT_YOUR_EYES_INSIDE_THE_IRIS_SCANNER": "Please put your eyes inside the iris scanner.", + "WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_EYES": "Wait for prompt and beep sound to remove your eyes", + "THANK_YOU_FOR_YOUR_TIME": "Thank you for your time.", + "ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE": "Please ensure that you have recieved a confirmation message before leaving", + "PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER": "Please put your fingers one by one on the fingerprint scanner.", + "WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS": "Wait for prompt and beep sound to remove your fingers", + "PLEASE_VERIFY_YOUR_IDENTITY": "Please verify your identity by receiving the OTP on your registered mobile number xxxxxxxx15", + "SEND_OTP": "Send OTP", + "RESEND": "Resend", + "PLEASE_SELECT_YOUR_RESIDENCY": "Please select your residency", + "PLEASE_ENTER_YOUR_NAME": "Please enter your name", + "PLEASE_ENTER_VALID_NAME": "Please enter valid name", + "PLEASE_SELECT_YOUR_GENDER": "Please select your gender", + "PLEASE_ENTER_YOUR_MOBILE_NUMBER": "Please enter your mobile number", + "PLEASE_ENTER_VALID_MOBILE_NUMBER": "Please enter valid mobile number", + "PLEASE_ENTER_YOUR_EMAIL": "Please enter your email", + "PLEASE_ENTER_VALID_EMAIL": "Please enter valid email", + "PLEASE_SELECT_YOUR_COUNTRY": "Please select your country", + "PLEASE_SELECT_YOUR_STATE": "Please select your state", + "PLEASE_SELECT_YOUR_DISTRICT": "Please select your district", + "PLEASE_ENTER_YOUR_VILLAGE": "Please enter your village", + "PLEASE_ENTER_YOUR_HOUSE_NUMBER": "Please enter your house number", + "PLEASE_ENTER_YOUR_STREET": "Please enter your street", + "PLEASE_ENTER_YOUR_LOCALITY": "Please enter your locality", + "PLEASE_ENTER_YOUR_AREA_POST_OFFICE": "Please enter your area post office", + "PLEASE_ENTER_NEAREST_LANDMARK": "Please enter nearest landmark", + "PLEASE_ENTER_YOUR_AREA_PINCODE": "Please enter your area pincode", + "PLEASE_ENTER_VALID_PINCODE": "Please enter valid pincode", + "I_HEREBY_CONFIRM_THE_IDENTITY_AND_ADDRESS": "I hereby confirm the identity and address of ___________ as being true, correct and accurate.", + "PHOTOGRAPH": "Photograph", + "FINGERPRINT_SCAN": "Fingerprint Scan", + "IRIS_SCAN": "Iris Scan", + "DEMOGRAPHIC": "Demographic", + "BIOMETRIC": "Biometric" +} diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json new file mode 100644 index 0000000..3b0eadd --- /dev/null +++ b/client/src/components/LanguageSelect/locales/hi/translation.json @@ -0,0 +1,4 @@ +{ + "ENROLLMENT": "उपस्थिति पंजी", + "UPDATE": "अद्यतन" +} diff --git a/client/src/components/RegEx/RegEx.jsx b/client/src/components/RegEx/RegEx.jsx index 2df4266..fca28f1 100644 --- a/client/src/components/RegEx/RegEx.jsx +++ b/client/src/components/RegEx/RegEx.jsx @@ -2,6 +2,8 @@ export const validString = /^[a-zA-Z]+$/ export const validMobileNumber = /^[0-9]{10}$/ +export const validAadhaar = /^[0-9]{12}$/ + export const validNumber = /^[0-9]+$/ export const validPincode = /^[0-9]{6}$/ diff --git a/client/src/i18nextInit.js b/client/src/i18nextInit.js new file mode 100644 index 0000000..3ae0848 --- /dev/null +++ b/client/src/i18nextInit.js @@ -0,0 +1,41 @@ +import i18n from 'i18next' +import { initReactI18next } from 'react-i18next' +import Backend from 'i18next-xhr-backend' +import LanguageDetector from 'i18next-browser-languagedetector' +import translationEN from '../src/components/LanguageSelect/locales/en/translation.json' +import translationHI from '../src/components/LanguageSelect/locales/hi/translation.json' + +const fallbackLng = ['en'] +const availableLanguages = ['en', 'hi'] + +const resources = { + en: { + translation: translationEN + }, + hi: { + translation: translationHI + } +} + +i18n + .use(Backend) + .use(LanguageDetector) + .use(initReactI18next) + .init({ + resources, + fallbackLng, + + detection: { + checkWhitelist: true + }, + + debug: false, + + whitelist: availableLanguages, + + interpolation: { + escapeValue: false + } + }) + +export default i18n diff --git a/client/src/index.js b/client/src/index.js index 57e6f94..652a231 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom' import { QueryClient, QueryClientProvider } from 'react-query' import './index.css' import App from './App' +import './i18nextInit' const queryClient = new QueryClient() diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index d4ffe81..571d7ad 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -5,8 +5,10 @@ import { Country, State, City } from 'country-state-city' import Select from 'react-select' import styles from './Address.module.css' +import { useTranslation } from 'react-i18next' const Address = ({ formData, setFormData }) => { + const { t } = useTranslation() const countries = Country.getAllCountries() const updatedCountries = countries.map((country) => ({ @@ -16,114 +18,118 @@ const Address = ({ formData, setFormData }) => { })) const updatedStates = (countryId) => - State - .getStatesOfCountry(countryId) - .map((state) => ({ label: state.name, value: state.id, ...state })) + State.getStatesOfCountry(countryId).map((state) => ({ + label: state.name, + value: state.id, + ...state + })) const updatedCities = (countryID, stateId) => - City - .getCitiesOfState(countryID, stateId) - .map((city) => ({ label: city.name, value: city.id, ...city })) + City.getCitiesOfState(countryID, stateId).map((city) => ({ + label: city.name, + value: city.id, + ...city + })) - const customStyles = { - control: (base, state) => ({ - ...base, - width: '330px', - height: '60px', - margin: '10px 0px', - // padding: '20px 10px', - border: '3px solid', - borderRadius: '10px !important' - }), - input: (base, state) => ({ - ...base, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: '0px', - margin: '0px' - }) - } - - console.log(formData.country, formData.state, formData.district, formData.village) + const customStyles = { + control: (base, state) => ({ + ...base, + width: '330px', + height: '60px', + margin: '10px 0px', + border: '3px solid', + borderRadius: '10px !important' + }), + input: (base, state) => ({ + ...base, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '0px', + margin: '0px' + }) + } return ( <> -
+
-
-
- - { - setFormData({ - ...formData, - state: e - }) - }} - styles={customStyles} - /> -
-
-
-
- - { - setFormData({ - ...formData, - village: e.target.value - }) - }} - placeholder="Enter your Village / Town" - /> +
+
+ + { + setFormData({ + ...formData, + state: e + }) + }} + styles={customStyles} + />
-
+
+
+
+ + { + setFormData({ + ...formData, + village: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} + /> +
+
{ @@ -132,11 +138,11 @@ const Address = ({ formData, setFormData }) => { houseNo: e.target.value }) }} - placeholder="Enter your House Number / Apartment" + placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')} /> { @@ -145,11 +151,11 @@ const Address = ({ formData, setFormData }) => { street: e.target.value }) }} - placeholder="Enter the Street / Road" + placeholder={t('ENTER_YOUR_STREET_ROAD')} /> { @@ -158,11 +164,11 @@ const Address = ({ formData, setFormData }) => { locality: e.target.value }) }} - placeholder="Enter your Area / Locality" + placeholder={t('ENTER_YOUR_AREA_LOCALITY')} /> { @@ -171,13 +177,13 @@ const Address = ({ formData, setFormData }) => { postOffice: e.target.value }) }} - placeholder="Enter your Village / Town" + placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')} /> -
+
{ @@ -186,11 +192,11 @@ const Address = ({ formData, setFormData }) => { landmark: e.target.value }) }} - placeholder="Enter the Landmark" + placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} /> { @@ -199,7 +205,7 @@ const Address = ({ formData, setFormData }) => { pincode: e.target.value }) }} - placeholder="Enter your area Pincode" + placeholder={t('ENTER_YOUR_AREA_PINCODE')} pattern="[0-9]+" />
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx index 94303d5..9764110 100644 --- a/client/src/pages/Enrollment/Agreement/Agreement.jsx +++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx @@ -4,21 +4,23 @@ 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 { useTranslation } from 'react-i18next' const Agreement = () => { + const { t } = useTranslation() return ( <> -
+
- @@ -28,7 +30,7 @@ const Agreement = () => { type="submit" variant="contained" > - Send OTP + {t('SEND_OTP')} @@ -38,7 +40,7 @@ const Agreement = () => { type="submit" variant="contained" > - Resend + {t('RESEND')} diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx index 2a2a9b6..043d5b5 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -13,14 +13,15 @@ import { Box } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' - -const steps = [ - 'Proof of Identity', - 'Proof of Address', - 'Proof of Date of Birth' -] +import { useTranslation } from 'react-i18next' const DocumentScanner = ({ formData, setFormData }) => { + const { t } = useTranslation() + const steps = [ + t('PROOF_OF_IDENTITY'), + t('PROOF_OF_ADDRESS'), + t('PROOF_OF_DOB') + ] const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' }) const [activeStep, setActiveStep] = React.useState(0) @@ -53,10 +54,7 @@ const DocumentScanner = ({ formData, setFormData }) => { setActiveStep((prevActiveStep) => prevActiveStep - 1) } - // setDocuments({ ...documents, POI: '' }) - const WebcamComponent = ({ doc }) => { - console.log(doc) return ( <>
@@ -89,7 +87,7 @@ const DocumentScanner = ({ formData, setFormData }) => { capture(doc) }} > - Scan + {t('SCAN')} @@ -109,7 +107,7 @@ const DocumentScanner = ({ formData, setFormData }) => { }) }} > - Reset + {t('RESET')} @@ -117,7 +115,7 @@ const DocumentScanner = ({ formData, setFormData }) => {
- Kindly click the picture of your documents + {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
@@ -127,7 +125,7 @@ const DocumentScanner = ({ formData, setFormData }) => { return ( <> -
+
@@ -144,7 +142,7 @@ const DocumentScanner = ({ formData, setFormData }) => { {activeStep === steps.length ? ( - All steps completed - you're finished + {t('ALL_STEPS_COMPLETED')} @@ -166,11 +164,11 @@ const DocumentScanner = ({ formData, setFormData }) => { onClick={handleBack} sx={{ mr: 1 }} > - Back + {t('BACK')} diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index e564311..76461d2 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -14,11 +14,14 @@ import Home from '../Home/Home' import { validEmail, validMobileNumber, - validPincode + validPincode, + validString } from '../../components/RegEx/RegEx' import { createUser } from '../../services/apiservice' +import { useTranslation } from 'react-i18next' const Enrollment = () => { + const { t } = useTranslation() const [page, setPage] = useState(0) const [formData, setFormData] = useState({ @@ -52,49 +55,51 @@ const Enrollment = () => { const handleSubmit = () => { if (page === 0) { if (formData.indianResident === '') { - return alert('Please select your residency') + return alert(t('PLEASE_SELECT_YOUR_RESIDENCY')) } else if (formData.name === '' || formData.name.length < 1) { - return alert('Please enter your name') + return alert(t('PLEASE_ENTER_YOUR_NAME')) + } else if (!validString.test(formData.name)) { + return alert(t('PLEASE_ENTER_VALID_NAME')) } else if (formData.gender === '') { - return alert('Please select your gender') + return alert(t('PLEASE_SELECT_YOUR_GENDER')) } else { setPage(page + 1) } } else if (page === 1) { if (formData.mobile === '') { - return alert('Please enter your mobile number') + return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER')) } else if (!validMobileNumber.test(formData.mobile)) { - return alert('Please enter valid mobile number') + return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER')) } else if (formData.email === '') { - return alert('Please enter your email') + return alert(t('PLEASE_ENTER_YOUR_EMAIL')) } else if (!validEmail.test(formData.email)) { - return alert('Please enter valid email') + return alert(t('PLEASE_ENTER_VALID_EMAIL')) } else { setPage(page + 1) } } else if (page === 2) { if (formData.country === '') { - return alert('Please select your country') + return alert(t('PLEASE_SELECT_YOUR_COUNTRY')) } else if (formData.state === '') { - return alert('Please select your state') + return alert(t('PLEASE_SELECT_YOUR_STATE')) } else if (formData.district === '') { - return alert('Please select your district') + return alert(t('PLEASE_SELECT_YOUR_DISTRICT')) } else if (formData.village === '') { - return alert('Please enter your village') + return alert(t('PLEASE_ENTER_YOUR_VILLAGE')) } else if (formData.houseNo === '') { - return alert('Please enter your house number') + return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) } else if (formData.street === '') { - return alert('Please enter your street') + return alert(t('PLEASE_ENTER_YOUR_STREET')) } else if (formData.locality === '') { - return alert('Please enter your locality') + return alert(t('PLEASE_ENTER_YOUR_LOCALITY')) } else if (formData.postOffice === '') { - return alert('Please enter your post office') + return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) } else if (formData.landmark === '') { - return alert('Please enter your landmark') + return alert(t('PLEASE_ENTER_NEAREST_LANDMARK')) } else if (formData.pincode === '') { - return alert('Please enter your pincode') + return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) } else if (!validPincode.test(formData.pincode)) { - return alert('Please enter valid pincode') + return alert(t('PLEASE_ENTER_VALID_PINCODE')) } else { setFormData({ ...formData, diff --git a/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx b/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx index 9ac568a..c3c032e 100644 --- a/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx +++ b/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx @@ -3,11 +3,13 @@ import Header from '../../../components/Header/Header' import CardScanner from '../../../components/Card/CardScanner' import styles from './FinalSlip.module.css' import { Grid, Typography } from '@mui/material' +import { useTranslation } from 'react-i18next' const FinalSlip = () => { + const { t } = useTranslation() return ( <> -
+
{
- Thank you for your time.
- Please collect your slip before leaving + {t('THANK_YOU_FOR_YOUR_TIME')} +
+ {t('ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE')}
diff --git a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx index bb46556..1860a2f 100644 --- a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx +++ b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx @@ -4,11 +4,13 @@ import CardBiometrics from '../../../components/Card/CardBiometrics' import styles from './Fingerprint.module.css' import { Button, Grid, Typography } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { useTranslation } from 'react-i18next' const Fingerprint = () => { + const { t } = useTranslation() return ( <> -
+
{ type="submit" variant="contained" > - Scan + {t('SCAN')} @@ -35,7 +37,7 @@ const Fingerprint = () => { type="submit" variant="contained" > - Reset + {t('RESET')} @@ -43,9 +45,9 @@ const Fingerprint = () => {
- Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER')}
- Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS')}
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx index d245faf..dd336d8 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx @@ -1,17 +1,16 @@ import React from 'react' +import { useTranslation } from 'react-i18next' import Header from '../../../components/Header/Header' import Input from '../../../components/Input/Input' import LabelCard from '../../../components/LabelCard/LabelCard' import styles from './FormOne.module.css' const FormOne = ({ formData, setFormData }) => { - console.log(formData.indianResident, formData.name, formData.dob, formData.gender) - - const handleSubmit = () => { - } + const { t } = useTranslation() return ( - <>
handleSubmit()}> + <> +
@@ -26,8 +25,9 @@ const FormOne = ({ formData, setFormData }) => { indianResident: true }) }} - required /> - + required + /> + { indianResident: false }) }} - required /> - + required + /> +
{ setFormData({ @@ -57,14 +58,15 @@ const FormOne = ({ formData, setFormData }) => { name: e.target.value }) }} - placeholder="Enter your full name" - pattern="[a-zA-z]+" /> + placeholder={t('ENTER_YOUR_FULL_NAME')} + pattern="[a-zA-z]+" + />
{ setFormData({ @@ -72,35 +74,38 @@ const FormOne = ({ formData, setFormData }) => { gender: 'Male' }) }} - image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} /> + image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} + /> { setFormData({ ...formData, gender: 'Female' }) }} - image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} /> + image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} + /> { setFormData({ ...formData, - gender: 'Transgender' + gender: 'Other' }) }} - image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} /> + image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} + />
- + { dob: e.target.value }) }} - required /> + required + />
- + ) } diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx index 91d8f6b..6bc6223 100644 --- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx +++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx @@ -2,15 +2,17 @@ import React from 'react' import Input from '../../../components/Input/Input' import Header from '../../../components/Header/Header' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { useTranslation } from 'react-i18next' const FormTwo = ({ formData, setFormData }) => { + const { t } = useTranslation() return (
-
+
{ setFormData({ @@ -18,7 +20,7 @@ const FormTwo = ({ formData, setFormData }) => { mobile: e.target.value }) }} - placeholder="Enter your Mobile Number" + placeholder={t('ENTER_YOUR_MOBILE_NUMBER')} pattern="[0-9]+" maxLength="10" minLength="10" @@ -26,7 +28,7 @@ const FormTwo = ({ formData, setFormData }) => { { setFormData({ @@ -34,7 +36,7 @@ const FormTwo = ({ formData, setFormData }) => { email: e.target.value }) }} - placeholder="Enter your Email ID" + placeholder={t('ENTER_YOUR_EMAIL_ID')} pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" /> diff --git a/client/src/pages/Enrollment/IrisScan/IrisScan.jsx b/client/src/pages/Enrollment/IrisScan/IrisScan.jsx index c07e9b8..c1e24d7 100644 --- a/client/src/pages/Enrollment/IrisScan/IrisScan.jsx +++ b/client/src/pages/Enrollment/IrisScan/IrisScan.jsx @@ -4,11 +4,13 @@ import CardBiometrics from '../../../components/Card/CardBiometrics' import styles from './IrisScan.module.css' import { Button, Grid, Typography } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { useTranslation } from 'react-i18next' const IrisScan = () => { + const { t } = useTranslation() return ( <> -
+
{ type="submit" variant="contained" > - Scan + {t('SCAN')} @@ -35,7 +37,7 @@ const IrisScan = () => { type="submit" variant="contained" > - Reset + {t('RESET')} @@ -43,9 +45,9 @@ const IrisScan = () => {
- Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_EYES_INSIDE_THE_IRIS_SCANNER')}
- Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_EYES')}
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index 509030b..a54085f 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -6,6 +6,7 @@ import Header from '../../../components/Header/Header' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import styles from './PhotoCapture.module.css' import { Button, Grid, Typography } from '@mui/material' +import { t } from 'i18next' const PhotoCapture = ({ formData, setFormData }) => { const navigate = useNavigate() @@ -19,7 +20,7 @@ const PhotoCapture = ({ formData, setFormData }) => { return ( <> -
+
{formData.photo === '' ? ( { capture() }} > - Capture + {t('CAPTURE')} @@ -64,7 +65,7 @@ const PhotoCapture = ({ formData, setFormData }) => { setFormData({ ...formData, photo: '' }) }} > - Reset + {t('RESET')} @@ -72,9 +73,11 @@ const PhotoCapture = ({ formData, setFormData }) => {
- Please look into the camera

- Click Capture to Capture the photo

- Click Reset the remove the captured photo + {t('PLEASE_LOOK_INTO_THE_CAMERA')} +

+ {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')} +

+ {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')}
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx index 85aee57..354b2e9 100644 --- a/client/src/pages/Home/Home.jsx +++ b/client/src/pages/Home/Home.jsx @@ -1,24 +1,27 @@ import React from 'react' +import { useTranslation } from 'react-i18next' import { Link } from 'react-router-dom' - import Card from '../../components/Card/Card' import Header from '../../components/Header/Header' +import LanguageSelect from '../../components/LanguageSelect/LanguageSelect' import styles from './Home.module.css' const Home = ({ page, setPage }) => { + const { t } = useTranslation() return ( <> -
+
+
- + - + diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx index bb9afdd..29f0f40 100644 --- a/client/src/pages/Update/Address/Address.jsx +++ b/client/src/pages/Update/Address/Address.jsx @@ -6,8 +6,10 @@ import Select from 'react-select' import styles from './Address.module.css' import UpdateInput from '../../../components/UpdateInput/UpdateInput' import EditButton from '../../../components/EditButton/EditButton' +import { useTranslation } from 'react-i18next' const Address = ({ formData, setFormData }) => { + const { t } = useTranslation() const countries = Country.getAllCountries() const updatedCountries = countries.map((country) => ({ @@ -17,149 +19,163 @@ const Address = ({ formData, setFormData }) => { })) const updatedStates = (countryId) => - State - .getStatesOfCountry(countryId) - .map((state) => ({ label: state.name, value: state.id, ...state })) + State.getStatesOfCountry(countryId).map((state) => ({ + label: state.name, + value: state.id, + ...state + })) const updatedCities = (countryID, stateId) => - City - .getCitiesOfState(countryID, stateId) - .map((city) => ({ label: city.name, value: city.id, ...city })) + City.getCitiesOfState(countryID, stateId).map((city) => ({ + label: city.name, + value: city.id, + ...city + })) - const customStyles = { - control: (base, state) => ({ - ...base, - width: '330px', - height: '60px', - margin: '10px 0px', - // padding: '20px 10px', - border: '3px solid', - borderRadius: '10px !important' - }), - input: (base, state) => ({ - ...base, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - padding: '0px', - margin: '0px' - }) - } + const customStyles = { + control: (base, state) => ({ + ...base, + width: '330px', + height: '60px', + margin: '10px 0px', + border: '3px solid', + borderRadius: '10px !important' + }), + input: (base, state) => ({ + ...base, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + padding: '0px', + margin: '0px' + }) + } - const [editable, setEditable] = React.useState(true) - const [editable1, setEditable1] = React.useState(true) - const [editable2, setEditable2] = React.useState(true) + const [editable, setEditable] = React.useState(true) + const [editable1, setEditable1] = React.useState(true) + const [editable2, setEditable2] = React.useState(true) - const handleEdit = () => { - setEditable(!editable) - } - const handleEdit1 = () => { - setEditable1(!editable1) - } - const handleEdit2 = () => { - setEditable2(!editable2) - } + const handleEdit = () => { + setEditable(!editable) + } + const handleEdit1 = () => { + setEditable1(!editable1) + } + const handleEdit2 = () => { + setEditable2(!editable2) + } - console.log(formData.country, formData.state, formData.district, formData.village) + console.log( + formData.country, + formData.state, + formData.district, + formData.village + ) return ( <> -
+
-
-
- -
- { - setFormData({ - ...formData, - state: e - }) - }} - styles={customStyles} - /> - -
-
-
-
-
- -
- { + setFormData({ + ...formData, + country: e + }) + }} + styles={customStyles} + /> + +
+
+
+
+
+ +
+ { + setFormData({ + ...formData, + district: e + }) + }} + styles={customStyles} + /> + +
+
+
+ { + setFormData({ + ...formData, + village: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} + /> +
+
{ @@ -168,11 +184,11 @@ const Address = ({ formData, setFormData }) => { houseNo: e.target.value }) }} - placeholder="Enter your House Number / Apartment" + placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')} /> { @@ -181,11 +197,11 @@ const Address = ({ formData, setFormData }) => { street: e.target.value }) }} - placeholder="Enter the Street / Road" + placeholder={t('ENTER_YOUR_STREET_ROAD')} /> { @@ -194,11 +210,11 @@ const Address = ({ formData, setFormData }) => { locality: e.target.value }) }} - placeholder="Enter your Area / Locality" + placeholder={t('ENTER_YOUR_AREA_LOCALITY')} /> { @@ -207,13 +223,13 @@ const Address = ({ formData, setFormData }) => { postOffice: e.target.value }) }} - placeholder="Enter your Village / Town" + placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')} /> -
+
{ @@ -222,11 +238,11 @@ const Address = ({ formData, setFormData }) => { landmark: e.target.value }) }} - placeholder="Enter the Landmark" + placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} /> { @@ -235,7 +251,7 @@ const Address = ({ formData, setFormData }) => { pincode: e.target.value }) }} - placeholder="Enter your area Pincode" + placeholder={t('ENTER_YOUR_AREA_PINCODE')} pattern="[0-9]+" />
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx index 95bef8a..6452bd8 100644 --- a/client/src/pages/Update/Agreement/Agreement.jsx +++ b/client/src/pages/Update/Agreement/Agreement.jsx @@ -6,20 +6,22 @@ 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 { useTranslation } from 'react-i18next' const Agreement = () => { + const { t } = useTranslation() return ( <> -
+
- @@ -30,7 +32,7 @@ const Agreement = () => { type="submit" variant="contained" > - Send OTP + {t('SEND_OTP')} @@ -40,12 +42,12 @@ const Agreement = () => { type="submit" variant="contained" > - Resend + {t('RESEND')} - - + + ) diff --git a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx index 7eab595..b7be260 100644 --- a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx +++ b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx @@ -3,16 +3,18 @@ import Header from '../../../components/Header/Header' import BiometricCard from '../../../components/BiometricCard/BiometricCard' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { Link } from 'react-router-dom' +import { useTranslation } from 'react-i18next' const BiometricSelect = ({ page, setPage }) => { + const { t } = useTranslation() return ( <> -
- setPage(0)} /> - setPage(1)} /> - setPage(2)} /> +
+ setPage(0)} /> + setPage(1)} /> + setPage(2)} /> - + ) diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 8ec9e82..27a162a 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -3,10 +3,17 @@ import Address from '../Address/Address' import DocumentScanner from '../DocumentScanner/DocumentScanner' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import FormOne from '../FormOne/FormOne' -import { validEmail, validMobileNumber, validPincode } from '../../../components/RegEx/RegEx' +import { + validEmail, + validMobileNumber, + validPincode, + validString +} from '../../../components/RegEx/RegEx' import UpdateSelect from '../UpdateSelect/UpdateSelect' +import { useTranslation } from 'react-i18next' const Demographic = () => { + const { t } = useTranslation() const [page, setPage] = useState(0) const [formData, setFormData] = useState({ @@ -28,58 +35,48 @@ const Demographic = () => { address: '' }) - function handleSubmit () { + const handleSubmit = () => { if (page === 0) { - if (formData.name === '' || formData.name.length < 1) { - return alert('Please enter your name') + if (formData.name === '' || formData.name.length < 1) { + return alert(t('PLEASE_ENTER_YOUR_NAME')) + } else if (!validString.test(formData.name)) { + return alert(t('PLEASE_ENTER_VALID_NAME')) } else if (formData.gender === '') { - return alert('Please select your gender') + return alert(t('PLEASE_SELECT_YOUR_GENDER')) } else if (formData.mobile === '') { - return alert('Please enter your mobile number') + return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER')) } else if (!validMobileNumber.test(formData.mobile)) { - return alert('Please enter valid mobile number') + return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER')) } else if (formData.email === '') { - return alert('Please enter your email') + return alert(t('PLEASE_ENTER_YOUR_EMAIL')) } else if (!validEmail.test(formData.email)) { - return alert('Please enter valid email') + return alert(t('PLEASE_ENTER_VALID_EMAIL')) } else { setPage(page + 1) } } else if (page === 1) { - if (formData.mobile === '') { - return alert('Please enter your mobile number') - } else if (!validMobileNumber.test(formData.mobile)) { - return alert('Please enter valid mobile number') - } else if (formData.email === '') { - return alert('Please enter your email') - } else if (!validEmail.test(formData.email)) { - return alert('Please enter valid email') - } else { - setPage(page + 1) - } - } else if (page === 2) { if (formData.country === '') { - return alert('Please select your country') + return alert(t('PLEASE_SELECT_YOUR_COUNTRY')) } else if (formData.state === '') { - return alert('Please select your state') + return alert(t('PLEASE_SELECT_YOUR_STATE')) } else if (formData.district === '') { - return alert('Please select your district') + return alert(t('PLEASE_SELECT_YOUR_DISTRICT')) } else if (formData.village === '') { - return alert('Please enter your village') + return alert(t('PLEASE_ENTER_YOUR_VILLAGE')) } else if (formData.houseNo === '') { - return alert('Please enter your house number') + return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER')) } else if (formData.street === '') { - return alert('Please enter your street') + return alert(t('PLEASE_ENTER_YOUR_STREET')) } else if (formData.locality === '') { - return alert('Please enter your locality') + return alert(t('PLEASE_ENTER_YOUR_LOCALITY')) } else if (formData.postOffice === '') { - return alert('Please enter your post office') + return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE')) } else if (formData.landmark === '') { - return alert('Please enter your landmark') + return alert(t('PLEASE_ENTER_NEAREST_LANDMARK')) } else if (formData.pincode === '') { - return alert('Please enter your pincode') + return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE')) } else if (!validPincode.test(formData.pincode)) { - return alert('Please enter valid pincode') + return alert(t('PLEASE_ENTER_VALID_PINCODE')) } else { setFormData({ ...formData, @@ -108,21 +105,13 @@ const Demographic = () => { const conditionalButton = () => { switch (page) { case 0: - return - Next - + return Next case 1: - return - Next - + return Next case 2: - return - Next - + return Next default: - return - Next - + return Next } } return ( diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx index f200497..ae8846c 100644 --- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx @@ -4,8 +4,10 @@ import CardScanner from '../../../components/Card/CardScanner' import styles from './DocumentScanner.module.css' import { Button, Grid, Typography } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { useTranslation } from 'react-i18next' const DocumentScanner = () => { + const { t } = useTranslation() return ( <>
@@ -22,7 +24,7 @@ const DocumentScanner = () => { type="submit" variant="contained" > - Scan + {t('SCAN')} @@ -32,7 +34,7 @@ const DocumentScanner = () => { type="submit" variant="contained" > - Reset + {t('RESET')} @@ -40,11 +42,7 @@ const DocumentScanner = () => {
- Please place your document on the scanner. -
- Close the lid. -
- Wait for prompt to remove your document + {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
diff --git a/client/src/pages/Update/FinalSlip/FinalSlip.jsx b/client/src/pages/Update/FinalSlip/FinalSlip.jsx index 9ac568a..ae1ea31 100644 --- a/client/src/pages/Update/FinalSlip/FinalSlip.jsx +++ b/client/src/pages/Update/FinalSlip/FinalSlip.jsx @@ -3,11 +3,13 @@ import Header from '../../../components/Header/Header' import CardScanner from '../../../components/Card/CardScanner' import styles from './FinalSlip.module.css' import { Grid, Typography } from '@mui/material' +import { useTranslation } from 'react-i18next' const FinalSlip = () => { + const { t } = useTranslation() return ( <> -
+
{
- Thank you for your time.
- Please collect your slip before leaving + {t('THANK_YOU_FOR_YOUR_TIME')} +
+ {t('ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE')}
diff --git a/client/src/pages/Update/Fingerprint/Fingerprint.jsx b/client/src/pages/Update/Fingerprint/Fingerprint.jsx index bb46556..cda36d5 100644 --- a/client/src/pages/Update/Fingerprint/Fingerprint.jsx +++ b/client/src/pages/Update/Fingerprint/Fingerprint.jsx @@ -4,11 +4,13 @@ import CardBiometrics from '../../../components/Card/CardBiometrics' import styles from './Fingerprint.module.css' import { Button, Grid, Typography } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { useTranslation } from 'react-i18next' const Fingerprint = () => { + const { t } = useTranslation() return ( <> -
+
{ type="submit" variant="contained" > - Scan + {t('SCAN')} @@ -35,7 +37,7 @@ const Fingerprint = () => { type="submit" variant="contained" > - Reset + {t('RESET')} @@ -43,9 +45,9 @@ const Fingerprint = () => {
- Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER')}
- Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS')}
diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx index 5861971..629588d 100644 --- a/client/src/pages/Update/FormOne/FormOne.jsx +++ b/client/src/pages/Update/FormOne/FormOne.jsx @@ -4,10 +4,10 @@ import UpdateInput from '../../../components/UpdateInput/UpdateInput' import styles from './FormOne.module.css' import EditButton from '../../../components/EditButton/EditButton' import Gender from '../../../components/Gender/Gender' +import { useTranslation } from 'react-i18next' const FormOne = ({ formData, setFormData }) => { - const handleSubmit = () => { - } + const { t } = useTranslation() const [editable, setEditable] = React.useState(true) @@ -16,12 +16,13 @@ const FormOne = ({ formData, setFormData }) => { } return ( - <>
handleSubmit()}> + <> +
{ setFormData({ @@ -29,63 +30,62 @@ const FormOne = ({ formData, setFormData }) => { name: e.target.value }) }} - placeholder="Enter your full name" /> + placeholder={t('ENTER_YOUR_FULL_NAME')} + /> - { - setFormData({ - ...formData, - mobile: e.target.value - }) - }} - placeholder="Enter your Mobile Number" /> + { + setFormData({ + ...formData, + mobile: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_MOBILE_NUMBER')} + />
- +
- { - setFormData({ - ...formData, - dob: e.target.value - }) - }} - required /> - + { + setFormData({ + ...formData, + dob: e.target.value + }) + }} + required + /> +
- { - setFormData({ - ...formData, - email: e.target.value - }) - }} - placeholder="Enter your Email ID" /> - - + { + setFormData({ + ...formData, + email: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_EMAIL_ID')} + /> +
- + ) } diff --git a/client/src/pages/Update/IrisScan/IrisScan.jsx b/client/src/pages/Update/IrisScan/IrisScan.jsx index c07e9b8..e00a0a7 100644 --- a/client/src/pages/Update/IrisScan/IrisScan.jsx +++ b/client/src/pages/Update/IrisScan/IrisScan.jsx @@ -4,11 +4,13 @@ import CardBiometrics from '../../../components/Card/CardBiometrics' import styles from './IrisScan.module.css' import { Button, Grid, Typography } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { useTranslation } from 'react-i18next' const IrisScan = () => { + const { t } = useTranslation() return ( <> -
+
{ type="submit" variant="contained" > - Scan + {t('SCAN')} @@ -35,7 +37,7 @@ const IrisScan = () => { type="submit" variant="contained" > - Reset + {t('RESET')} @@ -43,9 +45,9 @@ const IrisScan = () => {
- Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_EYES_INSIDE_THE_IRIS_SCANNER')}
- Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_EYES')}
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx index c4960c2..0c4e9f2 100644 --- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx @@ -6,8 +6,10 @@ import Header from '../../../components/Header/Header' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import styles from './PhotoCapture.module.css' import { Button, Grid, Typography } from '@mui/material' +import { useTranslation } from 'react-i18next' const PhotoCapture = () => { + const { t } = useTranslation() const [photo, setPhoto] = useState() const navigate = useNavigate() @@ -21,7 +23,7 @@ const PhotoCapture = () => { return ( <> -
+
{photo === '' ? ( { capture() }} > - Capture + {t('CAPTURE')} @@ -66,7 +68,7 @@ const PhotoCapture = () => { setPhoto('') }} > - Reset + {t('RESET')} @@ -74,9 +76,11 @@ const PhotoCapture = () => {
- Please look into the camera

- Click Capture to Capture the photo

- Click Reset the remove the captured photo + {t('PLEASE_LOOK_INTO_THE_CAMERA')} +

+ {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')} +

+ {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')}
diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx index 69b9224..afa3bbd 100644 --- a/client/src/pages/Update/Update.jsx +++ b/client/src/pages/Update/Update.jsx @@ -1,55 +1,72 @@ -import React from 'react' +import React, { useState } from 'react' import { useNavigate } from 'react-router-dom' import Header from '../../components/Header/Header' import styles from './Update.module.css' import Input from '../../components/Input/Input' +// import { useQuery } from 'react-query' import { Grid, Button } from '@mui/material' +// import { getUserByAadhaar } from '../../services/apiservice' +// import { validAadhaar } from '../../components/RegEx/RegEx' const Update = () => { + const [aadhaarNumber, setAadhaarNumber] = useState() const navigate = useNavigate() + + // console.log(aadhaarNumber) + // const user = useQuery(['user', aadhaarNumber], () => + // getUserByAadhaar(aadhaarNumber) + // ) + + // console.log(user.data.data) + return ( - <>
+ <> +
-

Provide Aadhaar Number (UID):

- Provide Aadhaar Number (UID): + - - - + value={aadhaarNumber} + onChange={(e) => setAadhaarNumber(e.target.value)} + placeholder="Enter your Aadhaar Number" + required + /> + + + + -
-

Enter OTP

- Enter OTP + - - - + placeholder="Enter One Time Password" + /> + + + + -
- + ) } diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx index a903704..e57587a 100644 --- a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx +++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx @@ -1,3 +1,4 @@ +import { t } from 'i18next' import React from 'react' import { Link } from 'react-router-dom' @@ -9,22 +10,22 @@ import styles from './UpdateSelect.module.css' const UpdateSelect = () => { return ( <> -
+
- + - + - +
diff --git a/client/src/services/apiservice.js b/client/src/services/apiservice.js index 4cfd2ba..f6b5f4e 100644 --- a/client/src/services/apiservice.js +++ b/client/src/services/apiservice.js @@ -8,3 +8,8 @@ export const createUser = async (payload) => { const response = await apiClient.post('/user', payload) return response } + +export const getUserByAadhaar = async (aadhaarNumber) => { + const response = await apiClient.get(`/user/aadhaar/${aadhaarNumber}`) + return response +} -- cgit