diff options
Diffstat (limited to 'client/src/components')
| -rw-r--r-- | client/src/components/Card/CardAgreement.jsx | 4 | ||||
| -rw-r--r-- | client/src/components/Gender/Gender.jsx | 97 | ||||
| -rw-r--r-- | client/src/components/Header/Header.jsx | 4 | ||||
| -rw-r--r-- | client/src/components/LanguageSelect/LanguageSelect.js | 67 | ||||
| -rw-r--r-- | client/src/components/LanguageSelect/locales/en/translation.json | 83 | ||||
| -rw-r--r-- | client/src/components/LanguageSelect/locales/hi/translation.json | 4 | ||||
| -rw-r--r-- | client/src/components/RegEx/RegEx.jsx | 2 |
7 files changed, 212 insertions, 49 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}$/ |