diff options
Diffstat (limited to 'client/src/pages/Update')
24 files changed, 1124 insertions, 1 deletions
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx new file mode 100644 index 0000000..bb9afdd --- /dev/null +++ b/client/src/pages/Update/Address/Address.jsx @@ -0,0 +1,247 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import { Country, State, City } from 'country-state-city' +import Select from 'react-select' + +import styles from './Address.module.css' +import UpdateInput from '../../../components/UpdateInput/UpdateInput' +import EditButton from '../../../components/EditButton/EditButton' + +const Address = ({ formData, setFormData }) => { + const countries = Country.getAllCountries() + + const updatedCountries = countries.map((country) => ({ + label: country.name, + value: country.id, + ...country + })) + + const updatedStates = (countryId) => + 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 })) + + 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 [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) + } + + console.log(formData.country, formData.state, formData.district, formData.village) + + return ( + <> + <Header subheading="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> + <div className={styles.address__container}> + <UpdateInput + id="houseNo" + label="House Number/ Apartment" + value={formData.houseNo} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + houseNo: e.target.value + }) + }} + placeholder="Enter your House Number / Apartment" + /> + <UpdateInput + id="street" + label="Street / Road" + value={formData.street} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + street: e.target.value + }) + }} + placeholder="Enter the Street / Road" + /> + <UpdateInput + id="locality" + label="Area / Locality" + value={formData.locality} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + locality: e.target.value + }) + }} + placeholder="Enter your Area / Locality" + /> + <UpdateInput + id="postOffice" + label="Post Office" + value={formData.postOffice} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + postOffice: e.target.value + }) + }} + placeholder="Enter your Village / Town" + /> + </div> + <div className={styles.address__container}> + <UpdateInput + id="landmark" + label="Landmark" + value={formData.landmark} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + landmark: e.target.value + }) + }} + placeholder="Enter the Landmark" + /> + <UpdateInput + id="pincode" + label="Pincode" + value={formData.pincode} + type="text" + onChange={(e) => { + setFormData({ + ...formData, + pincode: e.target.value + }) + }} + placeholder="Enter your area Pincode" + pattern="[0-9]+" + /> + </div> + </div> + </> + ) +} + +export default Address diff --git a/client/src/pages/Update/Address/Address.module.css b/client/src/pages/Update/Address/Address.module.css new file mode 100644 index 0000000..41cbf17 --- /dev/null +++ b/client/src/pages/Update/Address/Address.module.css @@ -0,0 +1,33 @@ +.address { + display: flex; + justify-content: center; +} + +.address__container { + margin: 0px 20px; +} + +.input { + display: flex; + justify-content: center; + font-family: 'Barlow'; + font-size: var(--font-medium-s); +} + +.input__container { + display: flex; + flex-direction: column; +} + +.input__edit{ + display: flex; + flex-direction: row; +} + +.input__field { + width: 300px; + margin: 10px 0px; + padding: 20px 10px; + border: 3px solid; + border-radius: 10px; +} diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx new file mode 100644 index 0000000..95bef8a --- /dev/null +++ b/client/src/pages/Update/Agreement/Agreement.jsx @@ -0,0 +1,54 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import CardAgreement from '../../../components/Card/CardAgreement' +import styles from './Agreement.module.css' +import Input from '../../../components/Input/Input' +import { Grid, Button } from '@mui/material' +import { Link } from 'react-router-dom' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' + +const Agreement = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.card__container}> + <CardAgreement + image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`} + /> + </div> + <Input + type="text" + id="otp" + label="Please verify your identity by receiving the OTP on your registered mobile number xxxxxxxx15" + placeholder="XXXX" + /> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Send OTP + </Button> + </Grid> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Resend + </Button> + </Grid> + </Grid> + <Link to ="/update/final-slip"> + <SubmitButton /> + </Link> + </> + ) +} + +export default Agreement diff --git a/client/src/pages/Update/Agreement/Agreement.module.css b/client/src/pages/Update/Agreement/Agreement.module.css new file mode 100644 index 0000000..c618a4d --- /dev/null +++ b/client/src/pages/Update/Agreement/Agreement.module.css @@ -0,0 +1,4 @@ +.card__container { + display: flex; + justify-content: center; + }
\ No newline at end of file diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx new file mode 100644 index 0000000..c105ad8 --- /dev/null +++ b/client/src/pages/Update/Biometric/Biometric.jsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import PhotoCapture from '../PhotoCapture/PhotoCapture' +import Fingerprint from '../Fingerprint/Fingerprint' +import IrisScan from '../IrisScan/IrisScan' +import BiometricSelect from '../BiometricSelect/BiometricSelect' + +const Biometric = () => { + const [page, setPage] = useState(4) + + const [formData, setFormData] = useState({ + photo: '', + irisScan: '', + fingerPrint: '' + }) + + const conditionalComponent = () => { + switch (page) { + case 0: + return <PhotoCapture formData={formData} setFormData={setFormData} /> + case 1: + return <Fingerprint formData={formData} setFormData={setFormData} /> + case 2: + return <IrisScan formData={formData} setFormData={setFormData} /> + default: + return <BiometricSelect page={page} setPage={setPage} /> + } + } + + const conditionalButton = () => { + switch (page) { + case 0: + return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton> + case 1: + return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton> + case 2: + return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton> + } + } + return ( + <> + {conditionalComponent()} + {conditionalButton()} + </> + ) +} + +export default Biometric diff --git a/client/src/pages/Update/Biometric/Biometric.module.css b/client/src/pages/Update/Biometric/Biometric.module.css new file mode 100644 index 0000000..c2bfd94 --- /dev/null +++ b/client/src/pages/Update/Biometric/Biometric.module.css @@ -0,0 +1,28 @@ +.input { + display: flex; + justify-content: center; + font-family: 'Barlow'; + font-size: var(--font-medium-s); + font-weight: bold; + } + + .input__container { + display: flex; + flex-direction: column; + } + + .input__edit{ + display: flex; + flex-direction: row; + } + + .input__field { + width: 300px; + margin: 10px 0px; + padding: 18px 10px; + border: 3px solid; + border-radius: 10px; + font-size: 1rem; + text-align: center; + } +
\ No newline at end of file diff --git a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx new file mode 100644 index 0000000..7eab595 --- /dev/null +++ b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import BiometricCard from '../../../components/BiometricCard/BiometricCard' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import { Link } from 'react-router-dom' + +const BiometricSelect = ({ page, setPage }) => { + return ( + <> + <Header subheading="Update" /> + <BiometricCard label="Photograph" onclick={() => setPage(0)} /> + <BiometricCard label="Fingerprint Scan" onclick={() => setPage(1)} /> + <BiometricCard label="Iris Scan" onclick={() => setPage(2)} /> + <Link to="/update/select-update"> + <SubmitButton /> + </Link> + </> + ) +} + +export default BiometricSelect diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx new file mode 100644 index 0000000..8ec9e82 --- /dev/null +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -0,0 +1,136 @@ +import React, { useState } from 'react' +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 UpdateSelect from '../UpdateSelect/UpdateSelect' + +const Demographic = () => { + const [page, setPage] = useState(0) + + const [formData, setFormData] = useState({ + name: '', + gender: '', + dob: new Date().toISOString().slice(0, 10), + mobile: '', + email: '', + country: '', + state: '', + district: '', + village: '', + houseNo: '', + street: '', + locality: '', + postOffice: '', + landmark: '', + pincode: '', + address: '' + }) + + function handleSubmit () { + if (page === 0) { + if (formData.name === '' || formData.name.length < 1) { + return alert('Please enter your name') + } else if (formData.gender === '') { + return alert('Please select your gender') + } else 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 === 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') + } else if (formData.state === '') { + return alert('Please select your state') + } else if (formData.district === '') { + return alert('Please select your district') + } else if (formData.village === '') { + return alert('Please enter your village') + } else if (formData.houseNo === '') { + return alert('Please enter your house number') + } else if (formData.street === '') { + return alert('Please enter your street') + } else if (formData.locality === '') { + return alert('Please enter your locality') + } else if (formData.postOffice === '') { + return alert('Please enter your post office') + } else if (formData.landmark === '') { + return alert('Please enter your landmark') + } else if (formData.pincode === '') { + return alert('Please enter your pincode') + } else if (!validPincode.test(formData.pincode)) { + return alert('Please enter valid pincode') + } else { + setFormData({ + ...formData, + address: `${formData.houseNo} ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label} ${formData.pincode}` + }) + setPage(page + 1) + } + } else if (page === 3) { + setPage(page + 1) + } else setPage(page + 1) + } + + const conditionalComponent = () => { + switch (page) { + case 0: + return <FormOne formData={formData} setFormData={setFormData} /> + case 1: + return <Address formData={formData} setFormData={setFormData} /> + case 2: + return <DocumentScanner formData={formData} setFormData={setFormData} /> + default: + return <UpdateSelect /> + } + } + + const conditionalButton = () => { + switch (page) { + case 0: + return <SubmitButton onClick={handleSubmit}> + Next + </SubmitButton> + case 1: + return <SubmitButton onClick={handleSubmit}> + Next + </SubmitButton> + case 2: + return <SubmitButton onClick={handleSubmit}> + Next + </SubmitButton> + default: + return <SubmitButton onClick={handleSubmit}> + Next + </SubmitButton> + } + } + return ( + <> + {conditionalComponent()} + {conditionalButton()} + </> + ) +} + +export default Demographic diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx new file mode 100644 index 0000000..f200497 --- /dev/null +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx @@ -0,0 +1,56 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +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' + +const DocumentScanner = () => { + return ( + <> + <Header subheading="Update" /> + <div className={styles.card__container}> + <CardScanner + image={`${process.env.PUBLIC_URL}/assets/images/document.svg`} + /> + </div> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Scan + </Button> + </Grid> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Reset + </Button> + </Grid> + </Grid> + <br></br> + <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 + </Typography> + </Grid> + </div> + <SubmitButton /> + </> + ) +} + +export default DocumentScanner diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } +
\ No newline at end of file diff --git a/client/src/pages/Update/FinalSlip/FinalSlip.jsx b/client/src/pages/Update/FinalSlip/FinalSlip.jsx new file mode 100644 index 0000000..9ac568a --- /dev/null +++ b/client/src/pages/Update/FinalSlip/FinalSlip.jsx @@ -0,0 +1,28 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import CardScanner from '../../../components/Card/CardScanner' +import styles from './FinalSlip.module.css' +import { Grid, Typography } from '@mui/material' + +const FinalSlip = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.card__container}> + <CardScanner + image={`${process.env.PUBLIC_URL}/assets/images/slip.svg`} + /> + </div> + <div> + <Grid container justifyContent="center"> + <Typography align="center" fontWeight={'Bold'}> + Thank you for your time.<br /> + Please collect your slip before leaving + </Typography> + </Grid> + </div> + </> + ) +} + +export default FinalSlip diff --git a/client/src/pages/Update/FinalSlip/FinalSlip.module.css b/client/src/pages/Update/FinalSlip/FinalSlip.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/client/src/pages/Update/FinalSlip/FinalSlip.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } +
\ No newline at end of file diff --git a/client/src/pages/Update/Fingerprint/Fingerprint.jsx b/client/src/pages/Update/Fingerprint/Fingerprint.jsx new file mode 100644 index 0000000..bb46556 --- /dev/null +++ b/client/src/pages/Update/Fingerprint/Fingerprint.jsx @@ -0,0 +1,57 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +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' + +const Fingerprint = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.card__container}> + <CardBiometrics + image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`} + /> + <CardBiometrics + image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`} + /> + </div> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Scan + </Button> + </Grid> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Reset + </Button> + </Grid> + </Grid> + <br></br> + <div> + <Grid container justifyContent="center"> + <Typography align="center"> + Please put your eyes inside the iris scanner. + <br /> + Wait for prompt and beep sound to remove your eyes + </Typography> + </Grid> + </div> + <SubmitButton /> + </> + ) +} + +export default Fingerprint diff --git a/client/src/pages/Update/Fingerprint/Fingerprint.module.css b/client/src/pages/Update/Fingerprint/Fingerprint.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/client/src/pages/Update/Fingerprint/Fingerprint.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } +
\ No newline at end of file diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx new file mode 100644 index 0000000..5861971 --- /dev/null +++ b/client/src/pages/Update/FormOne/FormOne.jsx @@ -0,0 +1,92 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +import UpdateInput from '../../../components/UpdateInput/UpdateInput' +import styles from './FormOne.module.css' +import EditButton from '../../../components/EditButton/EditButton' +import Gender from '../../../components/Gender/Gender' + +const FormOne = ({ formData, setFormData }) => { + const handleSubmit = () => { + } + + const [editable, setEditable] = React.useState(true) + + const handleEdit = () => { + setEditable(!editable) + } + + return ( + <><Header subheading="Update" /><form onSubmit={() => handleSubmit()}> + <div className={styles.formone}> + <UpdateInput + type="text" + id="fullName" + label="Full Name" + value={formData.name} + onChange={(e) => { + setFormData({ + ...formData, + name: e.target.value + }) + }} + placeholder="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" /> + + <div className={styles.formone__dob}> + <label htmlFor="dob">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' } /> + </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} /> + + </div> + </form></> + ) +} + +export default FormOne diff --git a/client/src/pages/Update/FormOne/FormOne.module.css b/client/src/pages/Update/FormOne/FormOne.module.css new file mode 100644 index 0000000..abde7ef --- /dev/null +++ b/client/src/pages/Update/FormOne/FormOne.module.css @@ -0,0 +1,47 @@ +.formone { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Barlow'; + font-size: var(--font-medium-s); +} + +.formone__radio { + display: flex; + align-items: center; +} + +.formone__resident { + display: flex; + align-items: center; + margin: 15px; +} + +.formone__resident input[type='radio'] { + width: 1.5rem; + height: 1.5rem; +} + +.formone__dob { + display: flex; + flex-direction: column; +} + +.formone__dob input[type='date']::-webkit-calendar-picker-indicator { + width: 30px; + height: 30px; + margin: 0; +} + +.formone__dob_input { + width: 300px; + margin: 10px 0px; + padding: 11px 10px; + border: 3px solid; + border-radius: 10px; +} + +.input__edit{ + display: flex; + flex-direction: row; +} diff --git a/client/src/pages/Update/IrisScan/IrisScan.jsx b/client/src/pages/Update/IrisScan/IrisScan.jsx new file mode 100644 index 0000000..c07e9b8 --- /dev/null +++ b/client/src/pages/Update/IrisScan/IrisScan.jsx @@ -0,0 +1,57 @@ +import React from 'react' +import Header from '../../../components/Header/Header' +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' + +const IrisScan = () => { + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.card__container}> + <CardBiometrics + image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`} + /> + <CardBiometrics + image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`} + /> + </div> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Scan + </Button> + </Grid> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + > + Reset + </Button> + </Grid> + </Grid> + <br></br> + <div> + <Grid container justifyContent="center"> + <Typography align="center"> + Please put your eyes inside the iris scanner. + <br /> + Wait for prompt and beep sound to remove your eyes + </Typography> + </Grid> + </div> + <SubmitButton /> + </> + ) +} + +export default IrisScan diff --git a/client/src/pages/Update/IrisScan/IrisScan.module.css b/client/src/pages/Update/IrisScan/IrisScan.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/client/src/pages/Update/IrisScan/IrisScan.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } +
\ No newline at end of file diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx new file mode 100644 index 0000000..c4960c2 --- /dev/null +++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx @@ -0,0 +1,88 @@ +/* eslint-disable multiline-ternary */ +import React, { useState } from 'react' +import Webcam from 'react-webcam' +import { useNavigate } from 'react-router-dom' +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' + +const PhotoCapture = () => { + const [photo, setPhoto] = useState() + + const navigate = useNavigate() + + const webcamRef = React.useRef(null) + + const capture = React.useCallback(() => { + const imageSrc = webcamRef.current.getScreenshot() + setPhoto(imageSrc) + }) + + return ( + <> + <Header subheading="Enrollment" /> + <div className={styles.card__container}> + {photo === '' ? ( + <Webcam + audio={false} + height={300} + ref={webcamRef} + screenshotFormat="image/jpeg" + width={500} + videoConstraints={{ + height: 300, + width: 500, + facingMode: 'user' + }} + /> + ) : ( + <img src={photo} /> + )} + </div> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + onClick={(e) => { + e.preventDefault() + capture() + }} + > + Capture + </Button> + </Grid> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + onClick={(e) => { + e.preventDefault() + setPhoto('') + }} + > + Reset + </Button> + </Grid> + </Grid> + <br></br> + <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 + </Typography> + </Grid> + </div> + <SubmitButton onClick={() => navigate('/enrollment/documents')} /> + </> + ) +} + +export default PhotoCapture diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Update/PhotoCapture/PhotoCapture.module.css new file mode 100644 index 0000000..a1ff9c0 --- /dev/null +++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + margin: 10px; +} diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx index 0b448cf..69b9224 100644 --- a/client/src/pages/Update/Update.jsx +++ b/client/src/pages/Update/Update.jsx @@ -1,7 +1,56 @@ import React 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 { Grid, Button } from '@mui/material' const Update = () => { - return <div>Update</div> + const navigate = useNavigate() + return ( + <><Header + subheading='Update' /> + <div className={styles.subheading__container}> + <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> + </Grid> + </Grid> + </div> + <div className={styles.subheading__container}> + <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> + </Grid> + </Grid> + </div> + </> + ) } export default Update diff --git a/client/src/pages/Update/Update.module.css b/client/src/pages/Update/Update.module.css index e69de29..421dcfd 100644 --- a/client/src/pages/Update/Update.module.css +++ b/client/src/pages/Update/Update.module.css @@ -0,0 +1,14 @@ +.subheading__container { + font-family: 'Barlow'; + display: flex; + flex-direction: column; + align-items: center; + font-weight: bolder; + margin: 20px; + padding: 20px; + } + +.subheading { + font-size: var(--font-medium); + font-weight: 400; + }
\ No newline at end of file diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx new file mode 100644 index 0000000..a903704 --- /dev/null +++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +import Card from '../../../components/Card/Card' +import Header from '../../../components/Header/Header' +import SubmitButton from '../../../components/SubmitButton/SubmitButton' +import styles from './UpdateSelect.module.css' + +const UpdateSelect = () => { + return ( + <> + <Header subheading="Mera Aadhaar Meri Pehchan" /> + <div className={styles.card__container}> + <Link to="/update/demographic"> + <Card + title="Demographic" + image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`} + /> + </Link> + <Link to="/update/biometric"> + <Card + title="Biometric" + image={`${process.env.PUBLIC_URL}/assets/images/update.svg`} + /> + </Link> + <Link to="/update/agreement"> + <SubmitButton /> + </Link> + </div> + </> + ) +} + +export default UpdateSelect diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.module.css b/client/src/pages/Update/UpdateSelect/UpdateSelect.module.css new file mode 100644 index 0000000..ec59f61 --- /dev/null +++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.module.css @@ -0,0 +1,5 @@ +.card__container { + display: flex; + justify-content: center; + } +
\ No newline at end of file |