diff options
Diffstat (limited to 'client/src')
33 files changed, 845 insertions, 567 deletions
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 ( <> <div className={styles.card}> <img className={styles.card__image} src={image} alt="" /> <Typography> - I hereby confirm the identity and address of ___________ as being true, correct and accurate. + {t('I_HEREBY_CONFIRM_THE_IDENTITY_AND_ADDRESS')} </Typography> </div> <SubmitButton /> 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 ( <div className={styles.formone__gender}> - <LabelCard - id="male" - name="gender" - title="Male" - value={formData.gender} - readOnly={editable} - onChange={() => { - setFormData({ - ...formData, - gender: 'Male' - }) - }} - image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} /> - <LabelCard - id="female" - name="gender" - value={formData.gender} - title="Female" - readOnly={editable} - onChange={() => { - setFormData({ - ...formData, - gender: 'Female' - }) - }} - image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} /> - <LabelCard - id="trans" - name="gender" - value={formData.gender} - title="Transgender" - readOnly={editable} - onChange={() => { - setFormData({ - ...formData, - gender: 'Transgender' - }) - }} - image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} /> - <EditButton - onClick={handleEdit} - enabled={!editable ? '1' : '0' } /> - </div> + <LabelCard + id="male" + name="gender" + title={t('MALE')} + value={formData.gender} + readOnly={editable} + onChange={() => { + setFormData({ + ...formData, + gender: 'Male' + }) + }} + image={`${process.env.PUBLIC_URL}/assets/images/male.svg`} + /> + <LabelCard + id="female" + name="gender" + value={formData.gender} + title={t('FEMALE')} + readOnly={editable} + onChange={() => { + setFormData({ + ...formData, + gender: 'Female' + }) + }} + image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} + /> + <LabelCard + id="trans" + name="gender" + value={formData.gender} + title={t('OTHER')} + readOnly={editable} + onChange={() => { + setFormData({ + ...formData, + gender: 'Other' + }) + }} + image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} + /> + <EditButton onClick={handleEdit} enabled={!editable ? '1' : '0'} /> + </div> ) } 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 ( <header className={styles.header}> - <h1 className={styles.header__heading}>AADHAAR</h1> + <h1 className={styles.header__heading}>{t('AADHAAR')}</h1> <h3 className={styles.header__subheading}>{subheading}</h3> </header> ) 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 ( + <div className="d-flex justify-content-end align-items-center language-select-root"> + <Button onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}> + {languageMap[selected]?.label} + <ArrowDropDown fontSize="small" /> + </Button> + <Popover + open={!!menuAnchor} + anchorEl={menuAnchor} + onClose={() => setMenuAnchor(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'right' + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right' + }} + > + <div> + <List> + <ListSubheader>{t('select_language')}</ListSubheader> + {Object.keys(languageMap)?.map((item) => ( + <ListItem + button + key={item} + onClick={() => { + i18next.changeLanguage(item) + setMenuAnchor(null) + }} + > + {languageMap[item].label} + </ListItem> + ))} + </List> + </div> + </Popover> + </div> + ) +} + +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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.address}> <div className={styles.address__container}> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='country'>Country</label> - <Select - id="country" - name="country" - label="country" - options={updatedCountries} - value={formData.country} - onChange={e => { - setFormData({ - ...formData, - country: e - }) - }} - styles={customStyles} - /> - </div> - </div> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='state'>State</label> - <Select - id="state" - name="state" - options={updatedStates(formData.country.isoCode)} - value={formData.state} - onChange={e => { - setFormData({ - ...formData, - state: e - }) - }} - styles={customStyles} - /> - </div> - </div> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='city'>District</label> - <Select - id="city" - name="city" - options={updatedCities(formData.country.isoCode, formData.state.isoCode)} - value={formData.district} - onChange={e => { - setFormData({ - ...formData, - district: e - }) - }} - styles={customStyles} - /> - </div> - </div> - <Input - id="town" - label="Village / Town" - value={formData.village} - type="text" - onChange={(e) => { - setFormData({ - ...formData, - village: e.target.value - }) - }} - placeholder="Enter your Village / Town" - /> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="country">{t('COUNTRY')}</label> + <Select + id="country" + name="country" + label="country" + options={updatedCountries} + value={formData.country} + onChange={(e) => { + setFormData({ + ...formData, + country: e + }) + }} + styles={customStyles} + /> + </div> + </div> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="state">{t('STATE')}</label> + <Select + id="state" + name="state" + options={updatedStates(formData.country.isoCode)} + value={formData.state} + onChange={(e) => { + setFormData({ + ...formData, + state: e + }) + }} + styles={customStyles} + /> </div> - <div className={styles.address__container}> + </div> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="city">{t('DISTRICT')}</label> + <Select + id="city" + name="city" + options={updatedCities( + formData.country.isoCode, + formData.state.isoCode + )} + value={formData.district} + onChange={(e) => { + setFormData({ + ...formData, + district: e + }) + }} + styles={customStyles} + /> + </div> + </div> + <Input + id="town" + label={t('VILLAGE_TOWN')} + value={formData.village} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + village: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} + /> + </div> + <div className={styles.address__container}> <Input id="houseNo" - label="House Number/ Apartment" + label={t('HOUSE_NUMBER_APARTMENT')} value={formData.houseNo} type="text" onChange={(e) => { @@ -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')} /> <Input id="street" - label="Street / Road" + label={t('STREET_ROAD')} value={formData.street} type="text" onChange={(e) => { @@ -145,11 +151,11 @@ const Address = ({ formData, setFormData }) => { street: e.target.value }) }} - placeholder="Enter the Street / Road" + placeholder={t('ENTER_YOUR_STREET_ROAD')} /> <Input id="locality" - label="Area / Locality" + label={t('AREA_LOCALITY')} value={formData.locality} type="text" onChange={(e) => { @@ -158,11 +164,11 @@ const Address = ({ formData, setFormData }) => { locality: e.target.value }) }} - placeholder="Enter your Area / Locality" + placeholder={t('ENTER_YOUR_AREA_LOCALITY')} /> <Input id="postOffice" - label="Post Office" + label={t('POST_OFFICE')} value={formData.postOffice} type="text" onChange={(e) => { @@ -171,13 +177,13 @@ const Address = ({ formData, setFormData }) => { postOffice: e.target.value }) }} - placeholder="Enter your Village / Town" + placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')} /> - </div> + </div> <div className={styles.address__container}> <Input id="landmark" - label="Landmark" + label={t('LANDMARK')} value={formData.landmark} type="text" onChange={(e) => { @@ -186,11 +192,11 @@ const Address = ({ formData, setFormData }) => { landmark: e.target.value }) }} - placeholder="Enter the Landmark" + placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} /> <Input id="pincode" - label="Pincode" + label={t('PINCODE')} value={formData.pincode} type="text" onChange={(e) => { @@ -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]+" /> </div> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.card__container}> <CardAgreement image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`} /> </div> - <Input + <Input type="text" id="otp" - label="Please verify your identity by receiving the OTP on your registered mobile number xxxxxxxx15" - placeholder="XXXX" + label={t('PLEASE_VERIFY_YOUR_IDENTITY')} + placeholder="XXXXXX" /> <Grid container columnSpacing={10} justifyContent="center"> <Grid item> @@ -28,7 +30,7 @@ const Agreement = () => { type="submit" variant="contained" > - Send OTP + {t('SEND_OTP')} </Button> </Grid> <Grid item> @@ -38,7 +40,7 @@ const Agreement = () => { type="submit" variant="contained" > - Resend + {t('RESEND')} </Button> </Grid> </Grid> 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 ( <> <div className={styles.card__container}> @@ -89,7 +87,7 @@ const DocumentScanner = ({ formData, setFormData }) => { capture(doc) }} > - Scan + {t('SCAN')} </Button> </Grid> <Grid item> @@ -109,7 +107,7 @@ const DocumentScanner = ({ formData, setFormData }) => { }) }} > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -117,7 +115,7 @@ const DocumentScanner = ({ formData, setFormData }) => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Kindly click the picture of your documents + {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')} </Typography> </Grid> </div> @@ -127,7 +125,7 @@ const DocumentScanner = ({ formData, setFormData }) => { return ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <SubmitButton /> <Box sx={{ width: '100%' }}> <Stepper activeStep={activeStep}> @@ -144,7 +142,7 @@ const DocumentScanner = ({ formData, setFormData }) => { {activeStep === steps.length ? ( <React.Fragment> <Typography sx={{ mt: 2, mb: 1 }}> - All steps completed - you're finished + {t('ALL_STEPS_COMPLETED')} </Typography> <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <Box sx={{ flex: '1 1 auto' }} /> @@ -166,11 +164,11 @@ const DocumentScanner = ({ formData, setFormData }) => { onClick={handleBack} sx={{ mr: 1 }} > - Back + {t('BACK')} </Button> <Box sx={{ flex: '1 1 auto' }} /> <Button onClick={handleNext}> - {activeStep === steps.length - 1 ? 'Finish' : 'Next'} + {activeStep === steps.length - 1 ? t('FINISH') : t('NEXT')} </Button> </Box> </React.Fragment> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.card__container}> <CardScanner image={`${process.env.PUBLIC_URL}/assets/images/slip.svg`} @@ -16,8 +18,9 @@ const FinalSlip = () => { <div> <Grid container justifyContent="center"> <Typography align="center" fontWeight={'Bold'}> - Thank you for your time.<br /> - Please collect your slip before leaving + {t('THANK_YOU_FOR_YOUR_TIME')} + <br /> + {t('ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE')} </Typography> </Grid> </div> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.card__container}> <CardBiometrics image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`} @@ -25,7 +27,7 @@ const Fingerprint = () => { type="submit" variant="contained" > - Scan + {t('SCAN')} </Button> </Grid> <Grid item> @@ -35,7 +37,7 @@ const Fingerprint = () => { type="submit" variant="contained" > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -43,9 +45,9 @@ const Fingerprint = () => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER')} <br /> - Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS')} </Typography> </Grid> </div> 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 ( - <><Header subheading="Enrollment" /><form onSubmit={() => handleSubmit()}> + <> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.formone}> <div className={styles.formone__radio}> <span className={styles.formone__resident}> @@ -26,8 +25,9 @@ const FormOne = ({ formData, setFormData }) => { indianResident: true }) }} - required /> - <label htmlFor="indian">Indian Resident</label> + required + /> + <label htmlFor="indian">{t('INDIAN_RESIDENT')}</label> </span> <span className={styles.formone__resident}> <input @@ -41,15 +41,16 @@ const FormOne = ({ formData, setFormData }) => { indianResident: false }) }} - required /> - <label htmlFor="indian">Non-Residential Indian</label> + required + /> + <label htmlFor="indian">{t('NON_RESIDENTIAL_INDIAN')}</label> </span> </div> <Input type="text" id="fullName" - label="Full Name" + label={t('FULL_NAME')} value={formData.name} onChange={(e) => { 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]+" + /> <div className={styles.formone__gender}> <LabelCard id="male" name="gender" - title="Male" + title={t('MALE')} value={formData.gender} onChange={() => { 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`} + /> <LabelCard id="female" name="gender" value={formData.gender} - title="Female" + title={t('FEMALE')} onChange={() => { setFormData({ ...formData, gender: 'Female' }) }} - image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} /> + image={`${process.env.PUBLIC_URL}/assets/images/female.svg`} + /> <LabelCard id="trans" name="gender" value={formData.gender} - title="Transgender" + title={t('OTHER')} onChange={() => { setFormData({ ...formData, - gender: 'Transgender' + gender: 'Other' }) }} - image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} /> + image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`} + /> </div> <div className={styles.formone__dob}> - <label htmlFor="dob">Date of Birth</label> + <label htmlFor="dob">{t('DATE_OF_BIRTH')}</label> <input className={styles.formone__dob_input} type="date" @@ -113,10 +118,11 @@ const FormOne = ({ formData, setFormData }) => { dob: e.target.value }) }} - required /> + required + /> </div> </div> - </form></> + </> ) } 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 ( <div className="formtwo"> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <Input id="mobile" value={formData.mobile} - label="Mobile" + label={t('MOBILE')} type="text" onChange={(e) => { 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 }) => { <Input id="email" value={formData.email} - label="Email" + label={t('EMAIL')} type="email" onChange={(e) => { 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}$" /> <SubmitButton /> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.card__container}> <CardBiometrics image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`} @@ -25,7 +27,7 @@ const IrisScan = () => { type="submit" variant="contained" > - Scan + {t('SCAN')} </Button> </Grid> <Grid item> @@ -35,7 +37,7 @@ const IrisScan = () => { type="submit" variant="contained" > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -43,9 +45,9 @@ const IrisScan = () => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_EYES_INSIDE_THE_IRIS_SCANNER')} <br /> - Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_EYES')} </Typography> </Grid> </div> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('ENROLLMENT')} /> <div className={styles.card__container}> {formData.photo === '' ? ( <Webcam @@ -50,7 +51,7 @@ const PhotoCapture = ({ formData, setFormData }) => { capture() }} > - Capture + {t('CAPTURE')} </Button> </Grid> <Grid item> @@ -64,7 +65,7 @@ const PhotoCapture = ({ formData, setFormData }) => { setFormData({ ...formData, photo: '' }) }} > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -72,9 +73,11 @@ const PhotoCapture = ({ formData, setFormData }) => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Please look into the camera<br></br> - Click Capture to Capture the photo<br></br> - Click Reset the remove the captured photo + {t('PLEASE_LOOK_INTO_THE_CAMERA')} + <br></br> + {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')} + <br></br> + {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')} </Typography> </Grid> </div> 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 ( <> - <Header subheading="Mera Aadhaar Meri Pehchan" /> + <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} /> + <LanguageSelect /> <div className={styles.card__container}> - <Link to="/enrollment"> + <Link to="/enrollment"> <Card - title="Enrollment" + title={t('ENROLLMENT')} image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`} /> - </Link> + </Link> <Link to="/update"> <Card - title="Update" + title={t('UPDATE')} image={`${process.env.PUBLIC_URL}/assets/images/update.svg`} /> </Link> 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 ( <> - <Header subheading="Update" /> + <Header subheading={t('UPDATE')} /> <div className={styles.address}> <div className={styles.address__container}> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='country'>Country</label> - <div className={styles.input__edit}> - <Select - id="country" - name="country" - label="country" - options={updatedCountries} - value={formData.country} - isDisabled={editable} - isSearchable={!editable} - onChange={e => { - setFormData({ - ...formData, - country: e - }) - }} - styles={customStyles} - /> - <EditButton - onClick={handleEdit} - enabled={!editable ? '1' : '0' } /> - </div> - </div> - </div> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='state'>State</label> - <div className={styles.input__edit}> - <Select - id="state" - name="state" - options={updatedStates(formData.country.isoCode)} - value={formData.state} - isDisabled={editable1} - isSearchable={!editable1} - onChange={e => { - setFormData({ - ...formData, - state: e - }) - }} - styles={customStyles} - /> - <EditButton - onClick={handleEdit1} - enabled={!editable1 ? '1' : '0' } /> - </div> - </div> - </div> - <div className={styles.input}> - <div className={styles.input__container}> - <label htmlFor='city'>District</label> - <div className={styles.input__edit}> - <Select - id="city" - name="city" - options={updatedCities(formData.country.isoCode, formData.state.isoCode)} - value={formData.district} - isDisabled={editable2} - isSearchable={!editable2} - onChange={e => { - setFormData({ - ...formData, - district: e - }) - }} - styles={customStyles} - /> - <EditButton - onClick={handleEdit2} - enabled={!editable2 ? '1' : '0' } /> - </div> - </div> - </div> - <UpdateInput - id="town" - label="Village / Town" - value={formData.village} - type="text" - onChange={(e) => { - setFormData({ - ...formData, - village: e.target.value - }) - }} - placeholder="Enter your Village / Town" - /> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="country">{t('COUNTRY')}</label> + <div className={styles.input__edit}> + <Select + id="country" + name="country" + label="country" + options={updatedCountries} + value={formData.country} + isDisabled={editable} + isSearchable={!editable} + onChange={(e) => { + setFormData({ + ...formData, + country: e + }) + }} + styles={customStyles} + /> + <EditButton + onClick={handleEdit} + enabled={!editable ? '1' : '0'} + /> + </div> + </div> + </div> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="state">{t('STATE')}</label> + <div className={styles.input__edit}> + <Select + id="state" + name="state" + options={updatedStates(formData.country.isoCode)} + value={formData.state} + isDisabled={editable1} + isSearchable={!editable1} + onChange={(e) => { + setFormData({ + ...formData, + state: e + }) + }} + styles={customStyles} + /> + <EditButton + onClick={handleEdit1} + enabled={!editable1 ? '1' : '0'} + /> + </div> </div> - <div className={styles.address__container}> + </div> + <div className={styles.input}> + <div className={styles.input__container}> + <label htmlFor="city">{t('DISTRICT')}</label> + <div className={styles.input__edit}> + <Select + id="city" + name="city" + options={updatedCities( + formData.country.isoCode, + formData.state.isoCode + )} + value={formData.district} + isDisabled={editable2} + isSearchable={!editable2} + onChange={(e) => { + setFormData({ + ...formData, + district: e + }) + }} + styles={customStyles} + /> + <EditButton + onClick={handleEdit2} + enabled={!editable2 ? '1' : '0'} + /> + </div> + </div> + </div> + <UpdateInput + id="town" + label={t('VILLAGE_TOWN')} + value={formData.village} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + village: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_VILLAGE_TOWN')} + /> + </div> + <div className={styles.address__container}> <UpdateInput id="houseNo" - label="House Number/ Apartment" + label={t('HOUSE_NUMBER_APARTMENT')} value={formData.houseNo} type="text" onChange={(e) => { @@ -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')} /> <UpdateInput id="street" - label="Street / Road" + label={t('STREET_ROAD')} value={formData.street} type="text" onChange={(e) => { @@ -181,11 +197,11 @@ const Address = ({ formData, setFormData }) => { street: e.target.value }) }} - placeholder="Enter the Street / Road" + placeholder={t('ENTER_YOUR_STREET_ROAD')} /> <UpdateInput id="locality" - label="Area / Locality" + label={t('AREA_LOCALITY')} value={formData.locality} type="text" onChange={(e) => { @@ -194,11 +210,11 @@ const Address = ({ formData, setFormData }) => { locality: e.target.value }) }} - placeholder="Enter your Area / Locality" + placeholder={t('ENTER_YOUR_AREA_LOCALITY')} /> <UpdateInput id="postOffice" - label="Post Office" + label={t('POST_OFFICE')} value={formData.postOffice} type="text" onChange={(e) => { @@ -207,13 +223,13 @@ const Address = ({ formData, setFormData }) => { postOffice: e.target.value }) }} - placeholder="Enter your Village / Town" + placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')} /> - </div> + </div> <div className={styles.address__container}> <UpdateInput id="landmark" - label="Landmark" + label={t('LANDMARK')} value={formData.landmark} type="text" onChange={(e) => { @@ -222,11 +238,11 @@ const Address = ({ formData, setFormData }) => { landmark: e.target.value }) }} - placeholder="Enter the Landmark" + placeholder={t('ENTER_ANY_NEAREST_LANDMARK')} /> <UpdateInput id="pincode" - label="Pincode" + label={t('PINCODE')} value={formData.pincode} type="text" onChange={(e) => { @@ -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]+" /> </div> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('UPDATE')} /> <div className={styles.card__container}> <CardAgreement image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`} /> </div> - <Input + <Input type="text" id="otp" - label="Please verify your identity by receiving the OTP on your registered mobile number xxxxxxxx15" + label={t('PLEASE_VERIFY_YOUR_IDENTITY')} placeholder="XXXX" /> <Grid container columnSpacing={10} justifyContent="center"> @@ -30,7 +32,7 @@ const Agreement = () => { type="submit" variant="contained" > - Send OTP + {t('SEND_OTP')} </Button> </Grid> <Grid item> @@ -40,12 +42,12 @@ const Agreement = () => { type="submit" variant="contained" > - Resend + {t('RESEND')} </Button> </Grid> </Grid> - <Link to ="/update/final-slip"> - <SubmitButton /> + <Link to="/update/final-slip"> + <SubmitButton /> </Link> </> ) 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 ( <> - <Header subheading="Update" /> - <BiometricCard label="Photograph" onclick={() => setPage(0)} /> - <BiometricCard label="Fingerprint Scan" onclick={() => setPage(1)} /> - <BiometricCard label="Iris Scan" onclick={() => setPage(2)} /> + <Header subheading={t('UPDATE')} /> + <BiometricCard label={t('PHOTOGRAPH')} onclick={() => setPage(0)} /> + <BiometricCard label={t('FINGERPRINT_SCAN')} onclick={() => setPage(1)} /> + <BiometricCard label={t('IRIS_SCAN')} onclick={() => setPage(2)} /> <Link to="/update/select-update"> - <SubmitButton /> + <SubmitButton /> </Link> </> ) 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 <SubmitButton onClick={handleSubmit}> - Next - </SubmitButton> + return <SubmitButton onClick={handleSubmit}>Next</SubmitButton> case 1: - return <SubmitButton onClick={handleSubmit}> - Next - </SubmitButton> + return <SubmitButton onClick={handleSubmit}>Next</SubmitButton> case 2: - return <SubmitButton onClick={handleSubmit}> - Next - </SubmitButton> + return <SubmitButton onClick={handleSubmit}>Next</SubmitButton> default: - return <SubmitButton onClick={handleSubmit}> - Next - </SubmitButton> + return <SubmitButton onClick={handleSubmit}>Next</SubmitButton> } } 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 ( <> <Header subheading="Update" /> @@ -22,7 +24,7 @@ const DocumentScanner = () => { type="submit" variant="contained" > - Scan + {t('SCAN')} </Button> </Grid> <Grid item> @@ -32,7 +34,7 @@ const DocumentScanner = () => { type="submit" variant="contained" > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -40,11 +42,7 @@ const DocumentScanner = () => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Please place your document on the scanner. - <br /> - Close the lid. - <br /> - Wait for prompt to remove your document + {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')} </Typography> </Grid> </div> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('UPDATE')} /> <div className={styles.card__container}> <CardScanner image={`${process.env.PUBLIC_URL}/assets/images/slip.svg`} @@ -16,8 +18,9 @@ const FinalSlip = () => { <div> <Grid container justifyContent="center"> <Typography align="center" fontWeight={'Bold'}> - Thank you for your time.<br /> - Please collect your slip before leaving + {t('THANK_YOU_FOR_YOUR_TIME')} + <br /> + {t('ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE')} </Typography> </Grid> </div> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('UPDATE')} /> <div className={styles.card__container}> <CardBiometrics image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`} @@ -25,7 +27,7 @@ const Fingerprint = () => { type="submit" variant="contained" > - Scan + {t('SCAN')} </Button> </Grid> <Grid item> @@ -35,7 +37,7 @@ const Fingerprint = () => { type="submit" variant="contained" > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -43,9 +45,9 @@ const Fingerprint = () => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER')} <br /> - Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS')} </Typography> </Grid> </div> 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 ( - <><Header subheading="Update" /><form onSubmit={() => handleSubmit()}> + <> + <Header subheading={t('UPDATE')} /> <div className={styles.formone}> <UpdateInput type="text" id="fullName" - label="Full Name" + label={t('FULL_NAME')} value={formData.name} onChange={(e) => { setFormData({ @@ -29,63 +30,62 @@ const FormOne = ({ formData, setFormData }) => { name: e.target.value }) }} - placeholder="Enter your full name" /> + placeholder={t('ENTER_YOUR_FULL_NAME')} + /> - <UpdateInput - id="mobile" - value={formData.mobile} - label="Mobile" - type="text" - onChange={(e) => { - setFormData({ - ...formData, - mobile: e.target.value - }) - }} - placeholder="Enter your Mobile Number" /> + <UpdateInput + id="mobile" + value={formData.mobile} + label={t('MOBILE')} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + mobile: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_MOBILE_NUMBER')} + /> <div className={styles.formone__dob}> - <label htmlFor="dob">Date of Birth</label> + <label htmlFor="dob">{t('DATE_OF_BIRTH')}</label> <div className={styles.input__edit}> - <input - className={styles.formone__dob_input} - type="date" - id="dob" - name="dob" - value={formData.dob} - readOnly={editable} - onChange={(e) => { - setFormData({ - ...formData, - dob: e.target.value - }) - }} - required /> - <EditButton - onClick={handleEdit} - enabled={!editable ? '1' : '0' } /> + <input + className={styles.formone__dob_input} + type="date" + id="dob" + name="dob" + value={formData.dob} + readOnly={editable} + onChange={(e) => { + setFormData({ + ...formData, + dob: e.target.value + }) + }} + required + /> + <EditButton onClick={handleEdit} enabled={!editable ? '1' : '0'} /> </div> </div> - <UpdateInput - id="email" - value={formData.email} - label="Email" - type="email" - onChange={(e) => { - setFormData({ - ...formData, - email: e.target.value - }) - }} - placeholder="Enter your Email ID" /> - - <Gender - formData={formData} - setFormData={setFormData} /> + <UpdateInput + id="email" + value={formData.email} + label={t('EMAIL')} + type="email" + onChange={(e) => { + setFormData({ + ...formData, + email: e.target.value + }) + }} + placeholder={t('ENTER_YOUR_EMAIL_ID')} + /> + <Gender formData={formData} setFormData={setFormData} /> </div> - </form></> + </> ) } 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('UPDATE')} /> <div className={styles.card__container}> <CardBiometrics image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`} @@ -25,7 +27,7 @@ const IrisScan = () => { type="submit" variant="contained" > - Scan + {t('SCAN')} </Button> </Grid> <Grid item> @@ -35,7 +37,7 @@ const IrisScan = () => { type="submit" variant="contained" > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -43,9 +45,9 @@ const IrisScan = () => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Please put your eyes inside the iris scanner. + {t('PLEASE_PUT_YOUR_EYES_INSIDE_THE_IRIS_SCANNER')} <br /> - Wait for prompt and beep sound to remove your eyes + {t('WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_EYES')} </Typography> </Grid> </div> 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 ( <> - <Header subheading="Enrollment" /> + <Header subheading={t('UPDATE')} /> <div className={styles.card__container}> {photo === '' ? ( <Webcam @@ -52,7 +54,7 @@ const PhotoCapture = () => { capture() }} > - Capture + {t('CAPTURE')} </Button> </Grid> <Grid item> @@ -66,7 +68,7 @@ const PhotoCapture = () => { setPhoto('') }} > - Reset + {t('RESET')} </Button> </Grid> </Grid> @@ -74,9 +76,11 @@ const PhotoCapture = () => { <div> <Grid container justifyContent="center"> <Typography align="center"> - Please look into the camera<br></br> - Click Capture to Capture the photo<br></br> - Click Reset the remove the captured photo + {t('PLEASE_LOOK_INTO_THE_CAMERA')} + <br></br> + {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')} + <br></br> + {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')} </Typography> </Grid> </div> 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 ( - <><Header - subheading='Update' /> + <> + <Header subheading="Update" /> <div className={styles.subheading__container}> - <h3 className={styles.subheading}> Provide Aadhaar Number (UID): </h3> - <Input + <h3 className={styles.subheading}> Provide Aadhaar Number (UID): </h3> + <Input type="text" id="aadhaarNumber" - placeholder="Enter your Aadhaar Number" /> - <Grid container columnSpacing={10} justifyContent="center"> - <Grid item> - <Button - color="primary" - size="large" - type="submit" - variant="contained" - > - Send OTP - </Button> + value={aadhaarNumber} + onChange={(e) => setAadhaarNumber(e.target.value)} + placeholder="Enter your Aadhaar Number" + required + /> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Send OTP + </Button> + </Grid> </Grid> - </Grid> </div> <div className={styles.subheading__container}> - <h3 className={styles.subheading}> Enter OTP </h3> - <Input + <h3 className={styles.subheading}> Enter OTP </h3> + <Input type="text" id="aadhaarNumber" - placeholder="Enter One Time Password" /> - <Grid container columnSpacing={10} justifyContent="center"> - <Grid item> - <Button - color="primary" - size="large" - type="submit" - variant="contained" - onClick={() => navigate('/update/select-update')} - > - Verify OTP - </Button> + placeholder="Enter One Time Password" + /> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + onClick={() => navigate('/update/select-update')} + > + Verify OTP + </Button> + </Grid> </Grid> - </Grid> </div> - </> + </> ) } 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 ( <> - <Header subheading="Mera Aadhaar Meri Pehchan" /> + <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} /> <div className={styles.card__container}> - <Link to="/update/demographic"> + <Link to="/update/demographic"> <Card - title="Demographic" + title={t('DEMOGRAPHIC')} image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`} /> - </Link> + </Link> <Link to="/update/biometric"> <Card - title="Biometric" + title={t('BIOMETRIC')} image={`${process.env.PUBLIC_URL}/assets/images/update.svg`} /> </Link> <Link to="/update/agreement"> - <SubmitButton /> + <SubmitButton /> </Link> </div> </> 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 +} |