summaryrefslogtreecommitdiff
path: root/client/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/pages')
-rw-r--r--client/src/pages/Home/Home.jsx2
-rw-r--r--client/src/pages/Update/Address/Address.jsx20
-rw-r--r--client/src/pages/Update/Agreement/Agreement.jsx2
-rw-r--r--client/src/pages/Update/Biometric/Biometric.jsx38
-rw-r--r--client/src/pages/Update/Demographic/Demographic.jsx26
-rw-r--r--client/src/pages/Update/DocumentScanner/DocumentScanner.jsx54
-rw-r--r--client/src/pages/Update/Otp/Otp.jsx73
-rw-r--r--client/src/pages/Update/Otp/Otp.module.css14
-rw-r--r--client/src/pages/Update/PhotoCapture/PhotoCapture.jsx26
-rw-r--r--client/src/pages/Update/Update.jsx29
-rw-r--r--client/src/pages/Update/Update.module.css22
11 files changed, 221 insertions, 85 deletions
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index 354b2e9..4539120 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -4,6 +4,7 @@ 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 PopUpModal from '../../components/Modal/Modal'
import styles from './Home.module.css'
const Home = ({ page, setPage }) => {
@@ -11,6 +12,7 @@ const Home = ({ page, setPage }) => {
return (
<>
<Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} />
+ <PopUpModal />
<LanguageSelect />
<div className={styles.card__container}>
<Link to="/enrollment">
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 94e60d0..9159508 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -55,6 +55,8 @@ const Address = () => {
setEditable2(!editable2)
}
+ console.log(userData.address.village)
+
return (
<>
<Header subheading={t('ENROLLMENT')} />
@@ -68,7 +70,7 @@ const Address = () => {
id="state"
name="state"
options={updatedStates('IN')}
- value={userData.address.state}
+ defaultValue={userData.address.state}
isDisabled={editable1}
isSearchable={!editable1}
onChange={(e) => {
@@ -97,7 +99,7 @@ const Address = () => {
id="city"
name="city"
options={updatedCities('IN', userData.address.state.isoCode)}
- value={userData.address.district}
+ defaultValue={userData.address.district}
isDisabled={editable2}
isSearchable={!editable2}
onChange={(e) => {
@@ -121,7 +123,7 @@ const Address = () => {
<UpdateInput
id="town"
label={t('VILLAGE_TOWN')}
- value={userData.address.village}
+ defaultValue={userData.address.village}
type="text"
onChange={(e) => {
setUserData({
@@ -139,7 +141,7 @@ const Address = () => {
<UpdateInput
id="houseNo"
label={t('HOUSE_NUMBER_APARTMENT')}
- value={userData.address.houseNo}
+ defaultValue={userData.address.houseNo}
type="text"
onChange={(e) => {
setUserData({
@@ -155,7 +157,7 @@ const Address = () => {
<UpdateInput
id="street"
label={t('STREET_ROAD')}
- value={userData.address.street}
+ defaultValue={userData.address.street}
type="text"
onChange={(e) => {
setUserData({
@@ -171,7 +173,7 @@ const Address = () => {
<UpdateInput
id="locality"
label={t('AREA_LOCALITY')}
- value={userData.address.locality}
+ defaultValue={userData.address.locality}
type="text"
onChange={(e) => {
setUserData({
@@ -187,7 +189,7 @@ const Address = () => {
<UpdateInput
id="postOffice"
label={t('POST_OFFICE')}
- value={userData.address.postOffice}
+ defaultValue={userData.address.postOffice}
type="text"
onChange={(e) => {
setUserData({
@@ -205,7 +207,7 @@ const Address = () => {
<UpdateInput
id="landmark"
label={t('LANDMARK')}
- value={userData.address.landmark}
+ defaultValue={userData.address.landmark}
type="text"
onChange={(e) => {
setUserData({
@@ -221,7 +223,7 @@ const Address = () => {
<UpdateInput
id="pincode"
label={t('PINCODE')}
- value={userData.address.pincode}
+ defaultValue={userData.address.pincode}
type="text"
onChange={(e) => {
setUserData({
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index 91dade7..804561b 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -13,7 +13,7 @@ import { updateUser } from '../../../services/apiservice'
const Agreement = () => {
const { userData } = userContext()
- const updateUse = useMutation(() => updateUser(userData._id, ...userData))
+ const updateUse = useMutation(() => updateUser(userData._id, { ...userData }))
const { t } = useTranslation()
return (
diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
index c105ad8..72aa1b7 100644
--- a/client/src/pages/Update/Biometric/Biometric.jsx
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -4,9 +4,12 @@ import PhotoCapture from '../PhotoCapture/PhotoCapture'
import Fingerprint from '../Fingerprint/Fingerprint'
import IrisScan from '../IrisScan/IrisScan'
import BiometricSelect from '../BiometricSelect/BiometricSelect'
+import BackButton from '../../../components/BackButton/BackButton'
+import { userContext } from '../../../context/User'
const Biometric = () => {
const [page, setPage] = useState(4)
+ const { userData, oriUserData, setUserData } = userContext()
const [formData, setFormData] = useState({
photo: '',
@@ -27,14 +30,43 @@ const Biometric = () => {
}
}
+ const handleBack = () => {
+ if (!userData.photo) {
+ setUserData({ ...userData, photo: oriUserData.photo })
+ }
+ setPage(page - 1)
+ }
+
+ const handleSubmit = () => {
+ if (!userData.photo) {
+ setUserData({ ...userData, photo: oriUserData.photo })
+ }
+ setPage(page + 1)
+ }
+
const conditionalButton = () => {
switch (page) {
case 0:
- return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+ return (
+ <>
+ <SubmitButton onClick={() => handleSubmit()}> Next</SubmitButton>
+ <BackButton onClick={() => handleBack()} />
+ </>
+ )
case 1:
- return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+ return (
+ <>
+ <SubmitButton onClick={() => setPage(4)}> Next</SubmitButton>
+ <BackButton onClick={() => setPage(page - 1)} />
+ </>
+ )
case 2:
- return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+ return (
+ <>
+ <SubmitButton onClick={() => setPage(4)}> Next</SubmitButton>
+ <BackButton onClick={() => setPage(page - 1)} />
+ </>
+ )
}
}
return (
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 7638f39..61fe972 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -1,6 +1,4 @@
import React, { useState } from 'react'
-import { useQuery } from 'react-query'
-import { getUserByAadhaar } from '../../../services/apiservice'
import Address from '../Address/Address'
import DocumentScanner from '../DocumentScanner/DocumentScanner'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
@@ -19,32 +17,10 @@ import 'react-toastify/dist/ReactToastify.css'
const Demographic = () => {
const { t } = useTranslation()
- const { aadhaarNumber, userData, setUserData } = userContext()
+ const { userData } = userContext()
const [page, setPage] = useState(0)
- const isLongEnough = aadhaarNumber?.toString().length > 11
-
- // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
- const { isLoading, isError, data } = useQuery('user', async () => {
- if (isLongEnough) {
- const response = await getUserByAadhaar(aadhaarNumber)
- return response
- }
- })
-
- if (isLoading) {
- return <div>{t('loading')}</div>
- }
-
- if (isError) {
- return <div>{t('error')}</div>
- }
-
- if (data) {
- setUserData(data?.data)
- }
-
const handleSubmit = () => {
if (page === 0) {
if (userData.name === '' || userData.name.length < 1) {
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index 14fb769..f6fe0b5 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -17,13 +17,55 @@ import { useTranslation } from 'react-i18next'
import { userContext } from '../../../context/User'
const DocumentScanner = () => {
- const { userData, setUserData } = userContext()
+ const { userData, oriUserData, setUserData } = userContext()
const { t } = useTranslation()
- const steps = [
- t('PROOF_OF_IDENTITY'),
- t('PROOF_OF_ADDRESS'),
- t('PROOF_OF_DOB')
- ]
+
+ // JSON.stringify(oriUserData?.address) ===
+ let steps
+
+ // use conditional statements to compare userData and oriUserData to determine the steps
+ // 1st case: if only address is changed, then step=['POA']
+ // 2nd case: if only either name or gender is changed, then step=['POI']
+ // 3rd case: if only dob is changed, then step=['DOB']
+ // 4th case: If only address and name or gender is changed, then step=['POA', 'POI']
+ // 5th case: If only address and dob is changed, then step=['POA', 'DOB']
+ // 6th case: If only name or gender and dob is changed, then step=['POI', 'DOB']
+ // 7th case: If everything is changed, then step=['POA', 'POI', 'DOB']
+ if (
+ (userData.address !== oriUserData.address &&
+ userData.dob !== oriUserData.dob &&
+ userData.name !== oriUserData.name) ||
+ userData.gender !== oriUserData.gender
+ ) {
+ steps = ['POA', 'POI', 'DOB']
+ } else {
+ if (userData.address !== oriUserData.address) {
+ if (
+ userData.name !== oriUserData.name ||
+ userData.gender !== oriUserData.gender
+ ) {
+ steps = ['POA', 'POI']
+ } else if (userData.dob !== oriUserData.dob) {
+ steps = ['POA', 'DOB']
+ } else {
+ steps = ['POA']
+ }
+ } else if (
+ userData.name !== oriUserData.name ||
+ userData.gender !== oriUserData.gender
+ ) {
+ if (userData.dob !== oriUserData.dob) {
+ steps = ['POI', 'DOB']
+ } else {
+ steps = ['POI']
+ }
+ } else if (userData.dob !== oriUserData.dob) {
+ steps = ['DOB']
+ } else {
+ steps = []
+ }
+ }
+
const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' })
const [activeStep, setActiveStep] = React.useState(0)
diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
new file mode 100644
index 0000000..2728ba3
--- /dev/null
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react'
+import Header from '../../../components/Header/Header'
+import Input from '../../../components/Input/Input'
+import { Button, Grid } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
+import { useQuery } from 'react-query'
+import { getUserByAadhaar } from '../../../services/apiservice'
+import styles from './Otp.module.css'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const Otp = () => {
+ const navigate = useNavigate()
+ const { t } = useTranslation()
+ const { aadhaarNumber, setUserData, oriUserData, setOriUserData } =
+ userContext()
+
+ useEffect(() => {
+ setUserData(oriUserData)
+ }, [oriUserData])
+
+ const isLongEnough = aadhaarNumber?.toString().length > 11
+
+ // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
+ const { isLoading, isError, data } = useQuery('user', async () => {
+ if (isLongEnough) {
+ const response = await getUserByAadhaar(aadhaarNumber)
+ return response
+ }
+ })
+
+ if (isLoading) {
+ return <div>{t('loading')}</div>
+ }
+
+ if (isError) {
+ return <div>{t('error')}</div>
+ }
+
+ if (data) {
+ setOriUserData(data?.data)
+ }
+ return (
+ <>
+ <Header subheading="Update" />
+ <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={() => {}}
+ >
+ Verify OTP
+ </Button>
+ </Grid>
+ </Grid>
+ </div>
+ <SubmitButton onClick={() => navigate('/update/select-update')} />
+ </>
+ )
+}
+
+export default Otp
diff --git a/client/src/pages/Update/Otp/Otp.module.css b/client/src/pages/Update/Otp/Otp.module.css
new file mode 100644
index 0000000..261d7aa
--- /dev/null
+++ b/client/src/pages/Update/Otp/Otp.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;
+}
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index 0c4e9f2..8e483a6 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -1,5 +1,5 @@
/* eslint-disable multiline-ternary */
-import React, { useState } from 'react'
+import React from 'react'
import Webcam from 'react-webcam'
import { useNavigate } from 'react-router-dom'
import Header from '../../../components/Header/Header'
@@ -7,10 +7,11 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
import styles from './PhotoCapture.module.css'
import { Button, Grid, Typography } from '@mui/material'
import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
const PhotoCapture = () => {
const { t } = useTranslation()
- const [photo, setPhoto] = useState()
+ const { userData, setUserData, oriUserData } = userContext()
const navigate = useNavigate()
@@ -18,14 +19,25 @@ const PhotoCapture = () => {
const capture = React.useCallback(() => {
const imageSrc = webcamRef.current.getScreenshot()
- setPhoto(imageSrc)
+ setUserData({ ...userData, photo: imageSrc })
})
+ console.log(oriUserData.photo)
+
+ const handleSubmit = () => {
+ console.log(userData.photo)
+ if (userData.photo) {
+ navigate('/enrollment/documents')
+ }
+ }
+
+ console.log(userData?.photo)
+
return (
<>
<Header subheading={t('UPDATE')} />
<div className={styles.card__container}>
- {photo === '' ? (
+ {userData?.photo === '' ? (
<Webcam
audio={false}
height={300}
@@ -39,7 +51,7 @@ const PhotoCapture = () => {
}}
/>
) : (
- <img src={photo} />
+ <img src={userData?.photo} />
)}
</div>
<Grid container columnSpacing={10} justifyContent="center">
@@ -65,7 +77,7 @@ const PhotoCapture = () => {
variant="contained"
onClick={(e) => {
e.preventDefault()
- setPhoto('')
+ setUserData({ ...userData, photo: '' })
}}
>
{t('RESET')}
@@ -84,7 +96,7 @@ const PhotoCapture = () => {
</Typography>
</Grid>
</div>
- <SubmitButton onClick={() => navigate('/enrollment/documents')} />
+ <SubmitButton onClick={() => handleSubmit} />
</>
)
}
diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx
index eb0aa58..63343f1 100644
--- a/client/src/pages/Update/Update.jsx
+++ b/client/src/pages/Update/Update.jsx
@@ -1,13 +1,14 @@
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'
import { userContext } from '../../context/User'
+import { useNavigate } from 'react-router-dom'
const Update = () => {
const { aadhaarNumber, setAadhaarNumber } = userContext()
+
const navigate = useNavigate()
return (
@@ -30,29 +31,11 @@ const Update = () => {
size="large"
type="submit"
variant="contained"
+ onClick={() => {
+ navigate('/update/otp')
+ }}
>
- 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
+ Submit
</Button>
</Grid>
</Grid>
diff --git a/client/src/pages/Update/Update.module.css b/client/src/pages/Update/Update.module.css
index 421dcfd..261d7aa 100644
--- a/client/src/pages/Update/Update.module.css
+++ b/client/src/pages/Update/Update.module.css
@@ -1,14 +1,14 @@
.subheading__container {
- font-family: 'Barlow';
- display: flex;
- flex-direction: column;
- align-items: center;
- font-weight: bolder;
- margin: 20px;
- padding: 20px;
- }
+ 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
+ font-size: var(--font-medium);
+ font-weight: 400;
+}
Powered by cgit, Gruvboxed by Blaster4385.