summaryrefslogtreecommitdiff
path: root/client/src/pages/Enrollment
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/pages/Enrollment')
-rw-r--r--client/src/pages/Enrollment/Address/Address.jsx226
-rw-r--r--client/src/pages/Enrollment/Agreement/Agreement.jsx14
-rw-r--r--client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx30
-rw-r--r--client/src/pages/Enrollment/Enrollment.jsx43
-rw-r--r--client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx9
-rw-r--r--client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx12
-rw-r--r--client/src/pages/Enrollment/FormOne/FormOne.jsx50
-rw-r--r--client/src/pages/Enrollment/FormTwo/FormTwo.jsx12
-rw-r--r--client/src/pages/Enrollment/IrisScan/IrisScan.jsx12
-rw-r--r--client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx15
10 files changed, 226 insertions, 197 deletions
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&apos;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>
Powered by cgit, Gruvboxed by Blaster4385.