summaryrefslogtreecommitdiff
path: root/client/src/pages
diff options
context:
space:
mode:
authorrohan09-raj <rajrohan1914@gmail.com>2022-08-23 14:39:22 +0530
committerrohan09-raj <rajrohan1914@gmail.com>2022-08-23 14:39:22 +0530
commitffd2c78b86111a5d1f7914e7dab4ffc946cb5287 (patch)
treea9e672e566668e89a71d947c5aac30dca1d8c3d1 /client/src/pages
parent0602eb75a81966770c9fbc09b7685522e5b94d0c (diff)
check status feature
Diffstat (limited to 'client/src/pages')
-rw-r--r--client/src/pages/CheckStatus/CheckStatus.jsx130
-rw-r--r--client/src/pages/CheckStatus/CheckStatus.module.css43
-rw-r--r--client/src/pages/CheckStatus/EnrollmentStatus.jsx70
-rw-r--r--client/src/pages/CheckStatus/EnrollmentStatus.module.css20
-rw-r--r--client/src/pages/CheckStatus/StatusOtp.jsx192
-rw-r--r--client/src/pages/CheckStatus/StatusOtp.module.css19
-rw-r--r--client/src/pages/CheckStatus/UpdateStatus.jsx70
-rw-r--r--client/src/pages/CheckStatus/UpdateStatus.module.css20
-rw-r--r--client/src/pages/Enrollment/Agreement/Agreement.jsx12
-rw-r--r--client/src/pages/Enrollment/Enrollment.jsx34
-rw-r--r--client/src/pages/Enrollment/FormOne/FormOne.jsx4
-rw-r--r--client/src/pages/Error/Error.jsx6
-rw-r--r--client/src/pages/Error/Error.module.css1
-rw-r--r--client/src/pages/Home/Home.jsx6
-rw-r--r--client/src/pages/Update/Address/Address.jsx27
-rw-r--r--client/src/pages/Update/Agreement/Agreement.jsx24
-rw-r--r--client/src/pages/Update/Biometric/Biometric.jsx69
-rw-r--r--client/src/pages/Update/BiometricSelect/BiometricSelect.jsx17
-rw-r--r--client/src/pages/Update/DocumentScanner/DocumentScanner.jsx28
-rw-r--r--client/src/pages/Update/Fingerprint/Fingerprint.jsx12
-rw-r--r--client/src/pages/Update/FormOne/FormOne.jsx30
-rw-r--r--client/src/pages/Update/IrisScan/IrisScan.jsx12
-rw-r--r--client/src/pages/Update/Otp/Otp.jsx22
-rw-r--r--client/src/pages/Update/PhotoCapture/PhotoCapture.jsx29
-rw-r--r--client/src/pages/Update/UpdateSelect/UpdateSelect.jsx17
25 files changed, 879 insertions, 35 deletions
diff --git a/client/src/pages/CheckStatus/CheckStatus.jsx b/client/src/pages/CheckStatus/CheckStatus.jsx
new file mode 100644
index 0000000..1732d21
--- /dev/null
+++ b/client/src/pages/CheckStatus/CheckStatus.jsx
@@ -0,0 +1,130 @@
+/* eslint-disable multiline-ternary */
+import React from 'react'
+import Header from '../../components/Header/Header'
+import { Grid, Button } from '@mui/material'
+import Input from '../../components/Input/Input'
+import { useTranslation } from 'react-i18next'
+import { validAadhaar } from '../../constants/RegEx'
+import { ToastContainer, toast } from 'react-toastify'
+import { userContext } from '../../context/User'
+
+import styles from './CheckStatus.module.css'
+import { useNavigate } from 'react-router-dom'
+
+const CheckStatus = () => {
+ const { t } = useTranslation()
+ const [status, setStatus] = React.useState('enrollment')
+ const { aadhaarNumber, setAadhaarNumber, eidNumber, setEidNumber } =
+ userContext()
+ const navigate = useNavigate()
+
+ console.log(eidNumber, aadhaarNumber)
+
+ return (
+ <>
+ <ToastContainer
+ autoClose={1000}
+ hideProgressBar={true}
+ theme={'colored'}
+ />
+ <Header subheading={t('STATUS')} />
+ <div className={styles.status}>
+ <div className={styles.formone__radio}>
+ <span className={styles.formone__status}>
+ <input
+ type="radio"
+ id="enrollment"
+ name="status"
+ value={status}
+ onChange={() => {
+ setStatus('enrollment')
+ }}
+ required
+ />
+ <label htmlFor="enrollment">{t('ENROLLMENT_STATUS')}</label>
+ </span>
+ <span className={styles.formone__status}>
+ <input
+ type="radio"
+ id="update"
+ name="status"
+ value={status}
+ onChange={() => {
+ setStatus('update')
+ }}
+ required
+ />
+ <label htmlFor="update">{t('UPDATE_STATUS')}</label>
+ </span>
+ </div>
+ </div>
+ <div>
+ {status === 'enrollment' ? (
+ <div className={styles.subheading__container}>
+ <h3 className={styles.subheading}>
+ {t('PROVIDE_YOUR_EID_NUMBER')}
+ </h3>
+ <Input
+ type="text"
+ id="eidNumber"
+ value={eidNumber}
+ onChange={(e) => setEidNumber(e.target.value)}
+ placeholder={`${t('ENTER_YOUR_EID_NUMBER')}`}
+ required
+ />
+ <Grid container columnSpacing={10} justifyContent="center">
+ <Grid item>
+ <Button
+ color="primary"
+ size="large"
+ type="submit"
+ variant="contained"
+ onClick={() => {
+ navigate('/status/otp')
+ }}
+ >
+ {t('SUBMIT')}
+ </Button>
+ </Grid>
+ </Grid>
+ </div>
+ ) : (
+ <div className={styles.subheading__container}>
+ <h3 className={styles.subheading}>
+ {t('PROVIDE_YOUR_AADHAAR_NUMBER')}
+ </h3>
+ <Input
+ type="number"
+ id="aadhaarNumber"
+ value={aadhaarNumber}
+ onChange={(e) => setAadhaarNumber(e.target.value)}
+ placeholder={`${t('ENTER_YOUR_AADHAAR_NUMBER')}`}
+ required
+ />
+ <Grid container columnSpacing={10} justifyContent="center">
+ <Grid item>
+ <Button
+ color="primary"
+ size="large"
+ type="submit"
+ variant="contained"
+ onClick={() => {
+ if (!validAadhaar.test(aadhaarNumber)) {
+ toast.error(t('PLEASE_ENTER_VALID_AADHAAR'))
+ } else {
+ navigate('/status/otp')
+ }
+ }}
+ >
+ {t('SUBMIT')}
+ </Button>
+ </Grid>
+ </Grid>
+ </div>
+ )}
+ </div>
+ </>
+ )
+}
+
+export default CheckStatus
diff --git a/client/src/pages/CheckStatus/CheckStatus.module.css b/client/src/pages/CheckStatus/CheckStatus.module.css
new file mode 100644
index 0000000..800d969
--- /dev/null
+++ b/client/src/pages/CheckStatus/CheckStatus.module.css
@@ -0,0 +1,43 @@
+.status {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.formone__radio {
+ display: flex;
+ align-items: center;
+}
+
+.formone__status {
+ display: flex;
+ align-items: center;
+ margin: 15px;
+ cursor: pointer;
+}
+
+.formone__status input[type='radio'] {
+ width: 1.5rem;
+ height: 1.5rem;
+ cursor: pointer;
+}
+
+.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;
+}
+
+.formone__status label {
+ margin-left: 10px;
+}
diff --git a/client/src/pages/CheckStatus/EnrollmentStatus.jsx b/client/src/pages/CheckStatus/EnrollmentStatus.jsx
new file mode 100644
index 0000000..9ae0026
--- /dev/null
+++ b/client/src/pages/CheckStatus/EnrollmentStatus.jsx
@@ -0,0 +1,70 @@
+/* eslint-disable multiline-ternary */
+import React from 'react'
+import Header from '../../components/Header/Header'
+import { useTranslation } from 'react-i18next'
+import styles from './EnrollmentStatus.module.css'
+import { Button } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { userContext } from '../../context/User'
+
+const EnrollmentStatus = () => {
+ const { t } = useTranslation()
+ const navigate = useNavigate()
+
+ const { setAadhaarNumber, setEidNumber, userData } = userContext()
+
+ return (
+ <>
+ <Header subheading={t('ENROLLMENT_STATUS')} />
+ <div className={styles.status__container}>
+ <h3 className={styles.status__title}>{t('STATUS')}</h3>
+ {!userData?.verified ? (
+ <>
+ <img
+ src={`${process.env.PUBLIC_URL}/assets/images/pending.svg`}
+ alt=""
+ height="200px"
+ width="200px"
+ />
+ <h1 className={styles.status}>{t('PENDING')}</h1>
+ <p className={styles.status__content}>
+ {t('YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE')}
+ </p>
+ <p className={styles.status__content}>
+ {t('PLEASE_HAVE_PATIENCE')}
+ </p>
+ </>
+ ) : (
+ <>
+ <img
+ src={`${process.env.PUBLIC_URL}/assets/images/approved.svg`}
+ alt=""
+ height="200px"
+ width="200px"
+ />
+ <h1 className={styles.status}>{t('APPROVED')}</h1>
+ <p className={styles.status__content}>
+ {t('YOUR_AADHAAR_STATUS_IS_APPROVED')}
+ </p>
+ <p className={styles.status__content}>
+ {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')}
+ </p>
+ </>
+ )}
+ <Button
+ variant="contained"
+ onClick={() => {
+ setAadhaarNumber(null)
+ setEidNumber(null)
+ navigate('/')
+ }}
+ sx={{ margin: '30px' }}
+ >
+ {t('BACK_TO_HOME')}
+ </Button>
+ </div>
+ </>
+ )
+}
+
+export default EnrollmentStatus
diff --git a/client/src/pages/CheckStatus/EnrollmentStatus.module.css b/client/src/pages/CheckStatus/EnrollmentStatus.module.css
new file mode 100644
index 0000000..b4b56a2
--- /dev/null
+++ b/client/src/pages/CheckStatus/EnrollmentStatus.module.css
@@ -0,0 +1,20 @@
+.status__container {
+ font-family: 'Barlow', sans-serif;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.status__title {
+ font-size: var(--font-medium);
+}
+
+.status {
+ font-size: var(--font-medium-lm);
+ margin-bottom: 20px;
+}
+
+.status__content {
+ font-size: var(--font-medium-sm);
+}
diff --git a/client/src/pages/CheckStatus/StatusOtp.jsx b/client/src/pages/CheckStatus/StatusOtp.jsx
new file mode 100644
index 0000000..d7d62d1
--- /dev/null
+++ b/client/src/pages/CheckStatus/StatusOtp.jsx
@@ -0,0 +1,192 @@
+import React, { useState, useEffect } from 'react'
+import Header from '../../components/Header/Header'
+import Input from '../../components/Input/Input'
+import { Button } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { userContext } from '../../context/User'
+import { useQuery, useMutation } from 'react-query'
+import { getUserByAadhaar, sendOTP, getUser } from '../../services/apiservice'
+import SubmitButton from '../../components/SubmitButton/SubmitButton'
+import { toast, ToastContainer } from 'react-toastify'
+import PopUpModal from '../../components/Modal/Modal'
+
+import styles from './StatusOtp.module.css'
+
+const StatusOtp = () => {
+ const navigate = useNavigate()
+ const { t } = useTranslation()
+ const [otp, setOtp] = useState()
+ const [disabled, setDisabled] = useState(false)
+ const [finalDisable, setFinalDisable] = useState(false)
+ const [unverified, setUnverified] = useState(true)
+ const [show, setShow] = useState(false)
+ const {
+ aadhaarNumber,
+ eidNumber,
+ userData,
+ setUserData,
+ oriUserData,
+ setOriUserData
+ } = userContext()
+
+ const mutateOTP = useMutation(() =>
+ sendOTP({ mobile: `+91${userData?.mobile}` })
+ )
+
+ const verifyOTP = () => {
+ if (mutateOTP?.data?.data?.otpCode === Number(otp)) {
+ setFinalDisable(true)
+ setDisabled(true)
+ setShow(false)
+ setUnverified(false)
+ toast.success(t('OTP_VERIFIED!'))
+ } else {
+ toast.error(t('INCORRECT_OTP'))
+ }
+ }
+
+ const sendResendOTP = () => {
+ setTimeout(() => {
+ if (finalDisable === false) {
+ console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+ setDisabled(false)
+ }
+ }, 30000)
+ }
+
+ useEffect(() => {
+ setUserData(oriUserData)
+ }, [oriUserData])
+
+ if (aadhaarNumber) {
+ const isLongEnough = aadhaarNumber?.toString().length > 11
+ 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)
+ }
+ } else if (eidNumber) {
+ const { isLoading, isError, data } = useQuery('user', async () => {
+ const response = await getUser(eidNumber)
+ return response
+ })
+
+ if (isLoading) {
+ return <div>{t('loading')}</div>
+ }
+
+ if (isError) {
+ return <div>{t('error')}</div>
+ }
+
+ if (data) {
+ setOriUserData(data?.data)
+ }
+ }
+
+ return (
+ <>
+ <ToastContainer
+ autoClose={1000}
+ hideProgressBar={true}
+ theme={'colored'}
+ />
+ <Header subheading={`${t('STATUS')}`} />
+ <PopUpModal
+ title="Verify your mobile number"
+ image={`${process.env.PUBLIC_URL}/assets/images/otp.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">Click on &quot;SEND OTP&quot;</li>
+ <li className="list__item">
+ You will recieve an OTP on your entered mobile number
+ </li>
+ <li className="list__item">
+ You can &quot;RESEND&quot; the OTP after 30 seconds, if you
+ haven&apos;t received it yet.
+ </li>
+ <li className="list__item">
+ Click on &quot;VERIFY OTP&quot; to verify your mobile number
+ </li>
+ </ul>
+ </>
+ }
+ />
+ <div className={styles.subheading__container}>
+ <h3 className={styles.subheading}>{t('ENTER_OTP')}</h3>
+ <p className={styles.subsubheading}>
+ {t('SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER')}
+ </p>
+ <Button
+ color="primary"
+ size="large"
+ type="submit"
+ variant="contained"
+ Otp
+ disabled={disabled}
+ sx={{ marginTop: '1rem' }}
+ onClick={() => {
+ mutateOTP.mutate()
+ setDisabled(true)
+ setShow(true)
+ sendResendOTP()
+ }}
+ >
+ {show ? t('RESEND') : t('SEND_OTP')}
+ </Button>
+ {show && (
+ <>
+ <Input
+ type="text"
+ id="otp"
+ value={otp}
+ onChange={(e) => setOtp(e.target.value)}
+ maxLength="6"
+ placeholder={t('ENTER_OTP')}
+ />
+ <Button
+ color="primary"
+ size="large"
+ type="submit"
+ variant="contained"
+ onClick={() => {
+ verifyOTP()
+ }}
+ >
+ {t('VERIFY_OTP')}
+ </Button>
+ </>
+ )}
+ </div>
+ <SubmitButton
+ onClick={() => {
+ if (unverified) {
+ toast.error(t('PLEASE_VERIFY_OTP'))
+ } else {
+ if (aadhaarNumber) {
+ navigate('/status/update')
+ } else if (eidNumber) {
+ navigate('/status/enrollment')
+ }
+ }
+ }}
+ />
+ </>
+ )
+}
+
+export default StatusOtp
diff --git a/client/src/pages/CheckStatus/StatusOtp.module.css b/client/src/pages/CheckStatus/StatusOtp.module.css
new file mode 100644
index 0000000..b88d5d4
--- /dev/null
+++ b/client/src/pages/CheckStatus/StatusOtp.module.css
@@ -0,0 +1,19 @@
+.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;
+}
+
+.subsubheading {
+ font-size: var(--font-medium-s);
+ margin: 10px 0px;
+}
diff --git a/client/src/pages/CheckStatus/UpdateStatus.jsx b/client/src/pages/CheckStatus/UpdateStatus.jsx
new file mode 100644
index 0000000..431f9d5
--- /dev/null
+++ b/client/src/pages/CheckStatus/UpdateStatus.jsx
@@ -0,0 +1,70 @@
+/* eslint-disable multiline-ternary */
+import React from 'react'
+import Header from '../../components/Header/Header'
+import { useTranslation } from 'react-i18next'
+import styles from './EnrollmentStatus.module.css'
+import { Button } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { userContext } from '../../context/User'
+
+const UpdateStatus = () => {
+ const { t } = useTranslation()
+ const navigate = useNavigate()
+
+ const { setAadhaarNumber, setEidNumber, userData } = userContext()
+
+ return (
+ <>
+ <Header subheading={t('UPDATE_STATUS')} />
+ <div className={styles.status__container}>
+ <h3 className={styles.status__title}>{t('STATUS')}</h3>
+ {userData?.isUpdating ? (
+ <>
+ <img
+ src={`${process.env.PUBLIC_URL}/assets/images/pending.svg`}
+ alt=""
+ height="200px"
+ width="200px"
+ />
+ <h1 className={styles.status}>{t('PENDING')}</h1>
+ <p className={styles.status__content}>
+ {t('YOUR_AADHAAR_UPDATE_STATUS_IS_IN_PENDING_STATE')}
+ </p>
+ <p className={styles.status__content}>
+ {t('PLEASE_HAVE_PATIENCE')}
+ </p>
+ </>
+ ) : (
+ <>
+ <img
+ src={`${process.env.PUBLIC_URL}/assets/images/approved.svg`}
+ alt=""
+ height="200px"
+ width="200px"
+ />
+ <h1 className={styles.status}>{t('APPROVED')}</h1>
+ <p className={styles.status__content}>
+ {t('YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED')}
+ </p>
+ <p className={styles.status__content}>
+ {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')}
+ </p>
+ </>
+ )}
+ <Button
+ variant="contained"
+ onClick={() => {
+ setAadhaarNumber(null)
+ setEidNumber(null)
+ navigate('/')
+ }}
+ sx={{ margin: '30px' }}
+ >
+ {t('BACK_TO_HOME')}
+ </Button>
+ </div>
+ </>
+ )
+}
+
+export default UpdateStatus
diff --git a/client/src/pages/CheckStatus/UpdateStatus.module.css b/client/src/pages/CheckStatus/UpdateStatus.module.css
new file mode 100644
index 0000000..b4b56a2
--- /dev/null
+++ b/client/src/pages/CheckStatus/UpdateStatus.module.css
@@ -0,0 +1,20 @@
+.status__container {
+ font-family: 'Barlow', sans-serif;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.status__title {
+ font-size: var(--font-medium);
+}
+
+.status {
+ font-size: var(--font-medium-lm);
+ margin-bottom: 20px;
+}
+
+.status__content {
+ font-size: var(--font-medium-sm);
+}
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx
index 9dedb56..13b46ba 100644
--- a/client/src/pages/Enrollment/Agreement/Agreement.jsx
+++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx
@@ -60,7 +60,17 @@ const Agreement = ({ unverified, setUnverified }) => {
description={
<>
<ul>
- <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+ <li className="list__item">Click on &quot;SEND OTP&quot;</li>
+ <li className="list__item">
+ You will recieve an OTP on your entered mobile number
+ </li>
+ <li className="list__item">
+ You can &quot;RESEND&quot; the OTP after 30 seconds, if you
+ haven&apos;t received it yet.
+ </li>
+ <li className="list__item">
+ Click on &quot;VERIFY OTP&quot; to verify your mobile number
+ </li>
</ul>
</>
}
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 53d64d5..35a599f 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren */
import React, { useState, useEffect } from 'react'
import Address from './Address/Address'
import Agreement from './Agreement/Agreement'
@@ -37,7 +38,7 @@ const Enrollment = () => {
const [model, setModel] = useState()
- async function loadModel () {
+ async function loadModel() {
try {
const model = await cocoSsd.load()
setModel(model)
@@ -55,7 +56,7 @@ const Enrollment = () => {
}, [])
let predictions = []
- async function predictionFunction () {
+ async function predictionFunction() {
predictions = await model.detect(document.getElementById('img'))
if (predictions.length > 0) {
console.log(predictions)
@@ -140,21 +141,26 @@ const Enrollment = () => {
}
} else if (page === 3) {
predictionFunction()
- if (predictions.length === 0) {
- toast.warning(t('PLEASE_WAIT'), {
+ if (predictions.length === 0) {
+ toast.warning(t('PLEASE_WAIT'), {
timeout: 1000
- })
- }
+ })
+ }
setTimeout(() => {
if (predictions.length > 0) {
- if (!userData.photo) {
- toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH'))
- } else if (predictions[0].class === 'person' && predictions[0].score > 0.5) {
- setPage(page + 1)
- } else {
- toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
- }
- }
+ if (!userData.photo) {
+ toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH'))
+ } else if (
+ predictions[0].class === 'person' &&
+ predictions[0].score > 0.8
+ ) {
+ setPage(page + 1)
+ } else {
+ toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+ }
+ } else {
+ toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+ }
}, 1000)
} else if (page === 4) {
if (!userData.documents.POI) {
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index 3fd5a21..fb37457 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -88,7 +88,9 @@ const FormOne = () => {
}}
required
/>
- <label htmlFor="indian">{t('NON_RESIDENTIAL_INDIAN')}</label>
+ <label htmlFor="non-resident-indian">
+ {t('NON_RESIDENTIAL_INDIAN')}
+ </label>
</span>
</div>
diff --git a/client/src/pages/Error/Error.jsx b/client/src/pages/Error/Error.jsx
index 5d06226..dc4732c 100644
--- a/client/src/pages/Error/Error.jsx
+++ b/client/src/pages/Error/Error.jsx
@@ -1,13 +1,19 @@
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
+import { initialUserData } from '../../constants/userData'
+import { userContext } from '../../context/User'
import styles from './Error.module.css'
const Error = ({ message }) => {
const navigate = useNavigate()
+ const { setUserData, setOriUserData, setAadhaarNumber } = userContext()
useEffect(() => {
setTimeout(() => {
+ setUserData(initialUserData)
+ setOriUserData(initialUserData)
+ setAadhaarNumber('')
navigate('/')
}, 3000)
}, [])
diff --git a/client/src/pages/Error/Error.module.css b/client/src/pages/Error/Error.module.css
index d66c6b7..d58d354 100644
--- a/client/src/pages/Error/Error.module.css
+++ b/client/src/pages/Error/Error.module.css
@@ -11,6 +11,7 @@
font-family: 'Barlow', sans-serif;
font-weight: 400;
font-size: var(--font-large);
+ text-align: center;
}
.error__image {
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index 4c9d620..9771877 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -33,6 +33,12 @@ const Home = ({ page, setPage }) => {
image={`${process.env.PUBLIC_URL}/assets/images/update.svg`}
/>
</Link>
+ <Link to="/status">
+ <Card
+ title={t('CHECK_STATUS')}
+ image={`${process.env.PUBLIC_URL}/assets/images/status.svg`}
+ />
+ </Link>
</div>
</>
)
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 20a97f7..0af60a5 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -4,10 +4,10 @@ import UpdateInput from '../../../components/UpdateInput/UpdateInput'
import { State, City } from 'country-state-city'
import EditButton from '../../../components/EditButton/EditButton'
import Select from 'react-select'
-
-import styles from './Address.module.css'
+import PopUpModal from '../../../components/Modal/Modal'
import { useTranslation } from 'react-i18next'
import { userContext } from '../../../context/User'
+import styles from './Address.module.css'
const Address = () => {
const { userData, setUserData } = userContext()
@@ -58,6 +58,29 @@ const Address = () => {
return (
<>
<Header subheading={t('UPDATE')} />
+ <PopUpModal
+ title="Fill your information"
+ image={`${process.env.PUBLIC_URL}/assets/images/address.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">
+ Update the required details in the relevant fields by clicking
+ the edit button
+ </li>
+ <li className="list__item">
+ If required, select the state you belong to. from the dropdown
+ list
+ </li>
+ <li className="list__item">
+ If required, select the district you belong to. from the
+ dropdown list. This won&apos;t show any options until you have
+ selected the state
+ </li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.address}>
<div className={styles.address__container}>
<UpdateInput
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index e49bbe6..22ffa80 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -11,6 +11,7 @@ import { sendOTP, updateUser, sendMessage } from '../../../services/apiservice'
import { userContext } from '../../../context/User'
import { useMutation } from 'react-query'
import { ToastContainer, toast } from 'react-toastify'
+import PopUpModal from '../../../components/Modal/Modal'
import 'react-toastify/dist/ReactToastify.css'
const Agreement = () => {
@@ -24,7 +25,7 @@ const Agreement = () => {
const { userData } = userContext()
const updateUse = useMutation(
- () => updateUser(userData._id, { ...userData }),
+ () => updateUser(userData._id, { ...userData, isUpdating: true }),
{
onSuccess: () => {
setConfirm.mutate({
@@ -80,6 +81,27 @@ const Agreement = () => {
theme={'colored'}
/>
<Header subheading={t('ENROLLMENT')} />
+ <PopUpModal
+ title="Verify your mobile number"
+ image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">Click on &quot;SEND OTP&quot;</li>
+ <li className="list__item">
+ You will recieve an OTP on your entered mobile number
+ </li>
+ <li className="list__item">
+ You can &quot;RESEND&quot; the OTP after 30 seconds, if you
+ haven&apos;t received it yet.
+ </li>
+ <li className="list__item">
+ Click on &quot;VERIFY OTP&quot; to verify your mobile number
+ </li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.card__container}>
<CardAgreement
image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
index 275df89..10b2776 100644
--- a/client/src/pages/Update/Biometric/Biometric.jsx
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+/* eslint-disable space-before-function-paren */
+import React, { useState, useEffect } from 'react'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
import PhotoCapture from '../PhotoCapture/PhotoCapture'
import Fingerprint from '../Fingerprint/Fingerprint'
@@ -6,11 +7,47 @@ import IrisScan from '../IrisScan/IrisScan'
import BiometricSelect from '../BiometricSelect/BiometricSelect'
import BackButton from '../../../components/BackButton/BackButton'
import { userContext } from '../../../context/User'
+import * as cocoSsd from '@tensorflow-models/coco-ssd'
+import * as tf from '@tensorflow/tfjs'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useTranslation } from 'react-i18next'
const Biometric = () => {
+ const { t } = useTranslation()
const [page, setPage] = useState(4)
const { userData, oriUserData, setUserData } = userContext()
+ const [model, setModel] = useState()
+
+ async function loadModel() {
+ try {
+ const model = await cocoSsd.load()
+ setModel(model)
+ console.log('setloadedModel')
+ } catch (err) {
+ console.log(err)
+ console.log('failed load model')
+ }
+ }
+
+ useEffect(() => {
+ tf.ready().then(() => {
+ loadModel()
+ })
+ }, [])
+
+ let predictions = []
+ async function predictionFunction() {
+ predictions = await model.detect(document.getElementById('img'))
+ console.log(predictions)
+ if (predictions.length > 0) {
+ console.log(predictions)
+ console.log(predictions[0])
+ }
+ return predictions
+ }
+
const conditionalComponent = () => {
switch (page) {
case 0:
@@ -32,10 +69,29 @@ const Biometric = () => {
}
const handleSubmit = () => {
- if (!userData.photo) {
- setUserData({ ...userData, photo: oriUserData.photo })
+ predictionFunction()
+ if (predictions.length === 0) {
+ toast.warning(t('PLEASE_WAIT'), {
+ timeout: 1000
+ })
}
- setPage(4)
+ console.log('befoer start')
+ setTimeout(() => {
+ if (predictions.length > 0) {
+ if (!userData.photo) {
+ setUserData({ ...userData, photo: oriUserData.photo })
+ } else if (
+ predictions[0].class === 'person' &&
+ predictions[0].score > 0.8
+ ) {
+ setPage(4)
+ } else {
+ toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+ }
+ } else {
+ toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+ }
+ }, 1000)
}
const conditionalButton = () => {
@@ -65,6 +121,11 @@ const Biometric = () => {
}
return (
<>
+ <ToastContainer
+ autoClose={1000}
+ hideProgressBar={true}
+ theme={'colored'}
+ />
{conditionalComponent()}
{conditionalButton()}
</>
diff --git a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
index b7be260..a942aef 100644
--- a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
+++ b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
@@ -3,6 +3,7 @@ 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 PopUpModal from '../../../components/Modal/Modal'
import { useTranslation } from 'react-i18next'
const BiometricSelect = ({ page, setPage }) => {
@@ -10,6 +11,22 @@ const BiometricSelect = ({ page, setPage }) => {
return (
<>
<Header subheading={t('UPDATE')} />
+ <PopUpModal
+ title="Select the option to be edited"
+ image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">
+ Click on the edit button to update the required biometrics
+ </li>
+ <li className="list__item">
+ You can edit your Photograph/Fingerprints/Iris Scans
+ </li>
+ </ul>
+ </>
+ }
+ />
<BiometricCard label={t('PHOTOGRAPH')} onclick={() => setPage(0)} />
<BiometricCard label={t('FINGERPRINT_SCAN')} onclick={() => setPage(1)} />
<BiometricCard label={t('IRIS_SCAN')} onclick={() => setPage(2)} />
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index 89c9479..c4f8ad6 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -4,7 +4,7 @@ import Webcam from 'react-webcam'
import Header from '../../../components/Header/Header'
import styles from './DocumentScanner.module.css'
import { Button, Typography, StepLabel, Step, Stepper } from '@mui/material'
-import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import PopUpModal from '../../../components/Modal/Modal'
import { useTranslation } from 'react-i18next'
import { userContext } from '../../../context/User'
import { toast } from 'react-toastify'
@@ -199,7 +199,31 @@ const DocumentScanner = () => {
return (
<>
<Header subheading={t('UPDATE')} />
- <SubmitButton />
+ <PopUpModal
+ title="Scan your documents"
+ image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">
+ Consists of 3 steps :
+ <ul>
+ <li>Proof of Identity: </li>
+ <li>Proof of Address: </li>
+ <li>Proof of Date of Birth: </li>
+ </ul>
+ </li>
+ <li className="list__item">
+ Ensure that your documents are in the center of the frame
+ </li>
+ <li className="list__item">
+ You won&apos;t be able to proceed until you have scanned all the
+ required documents
+ </li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.stepper__container}>
<div className={styles.box}>
<Stepper activeStep={activeStep} sx={{ width: '60%' }}>
diff --git a/client/src/pages/Update/Fingerprint/Fingerprint.jsx b/client/src/pages/Update/Fingerprint/Fingerprint.jsx
index cda36d5..933e944 100644
--- a/client/src/pages/Update/Fingerprint/Fingerprint.jsx
+++ b/client/src/pages/Update/Fingerprint/Fingerprint.jsx
@@ -5,12 +5,24 @@ import styles from './Fingerprint.module.css'
import { Button, Grid, Typography } from '@mui/material'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
import { useTranslation } from 'react-i18next'
+import PopUpModal from '../../../components/Modal/Modal'
const Fingerprint = () => {
const { t } = useTranslation()
return (
<>
<Header subheading={t('UPDATE')} />
+ <PopUpModal
+ title="Scan your Fingerprints"
+ image={`${process.env.PUBLIC_URL}/assets/images/fingerprint_scan.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.card__container}>
<CardBiometrics
image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`}
diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx
index d5fb8ba..2c61fb9 100644
--- a/client/src/pages/Update/FormOne/FormOne.jsx
+++ b/client/src/pages/Update/FormOne/FormOne.jsx
@@ -6,6 +6,7 @@ import EditButton from '../../../components/EditButton/EditButton'
import Gender from '../../../components/Gender/Gender'
import { useTranslation } from 'react-i18next'
import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
const FormOne = () => {
const { userData, setUserData } = userContext()
@@ -34,6 +35,35 @@ const FormOne = () => {
return (
<>
<Header subheading={t('UPDATE')} />
+ <PopUpModal
+ title="Fill your information"
+ image={`${process.env.PUBLIC_URL}/assets/images/id.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">
+ Select your residency by selecting the appropriate checkbox
+ </li>
+ <li className="list__item">
+ Enter your full name without any title or salutation
+ </li>
+ <li className="list__item">
+ Select your gender by clicking on the appropriate card
+ </li>
+ <li className="list__item">
+ Select your date of birth from the provided calender
+ </li>
+ <li className="list__item">
+ Enter your 10 digit mobile number without any prefix or country
+ code
+ </li>
+ <li className="list__item">
+ Enter your email address in proper format
+ </li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.formone}>
<UpdateInput
type="text"
diff --git a/client/src/pages/Update/IrisScan/IrisScan.jsx b/client/src/pages/Update/IrisScan/IrisScan.jsx
index e00a0a7..05a34b3 100644
--- a/client/src/pages/Update/IrisScan/IrisScan.jsx
+++ b/client/src/pages/Update/IrisScan/IrisScan.jsx
@@ -5,12 +5,24 @@ import styles from './IrisScan.module.css'
import { Button, Grid, Typography } from '@mui/material'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
import { useTranslation } from 'react-i18next'
+import PopUpModal from '../../../components/Modal/Modal'
const IrisScan = () => {
const { t } = useTranslation()
return (
<>
<Header subheading={t('UPDATE')} />
+ <PopUpModal
+ title="Scan your Iris"
+ image={`${process.env.PUBLIC_URL}/assets/images/iris_scan.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.card__container}>
<CardBiometrics
image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`}
diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
index bce6ef7..75a4d73 100644
--- a/client/src/pages/Update/Otp/Otp.jsx
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -9,6 +9,7 @@ import { useQuery, useMutation } from 'react-query'
import { getUserByAadhaar, sendOTP } from '../../../services/apiservice'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
import { toast, ToastContainer } from 'react-toastify'
+import PopUpModal from '../../../components/Modal/Modal'
import styles from './Otp.module.css'
@@ -80,6 +81,27 @@ const Otp = () => {
theme={'colored'}
/>
<Header subheading={`${t('UPDATE')}`} />
+ <PopUpModal
+ title="Verify your mobile number"
+ image={`${process.env.PUBLIC_URL}/assets/images/otp.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">Click on &quot;SEND OTP&quot;</li>
+ <li className="list__item">
+ You will recieve an OTP on your entered mobile number
+ </li>
+ <li className="list__item">
+ You can &quot;RESEND&quot; the OTP after 30 seconds, if you
+ haven&apos;t received it yet.
+ </li>
+ <li className="list__item">
+ Click on &quot;VERIFY OTP&quot; to verify your mobile number
+ </li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.subheading__container}>
<h3 className={styles.subheading}>{t('ENTER_OTP')}</h3>
<p className={styles.subsubheading}>
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index 8e483a6..25f8572 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -8,10 +8,11 @@ import styles from './PhotoCapture.module.css'
import { Button, Grid, Typography } from '@mui/material'
import { useTranslation } from 'react-i18next'
import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
const PhotoCapture = () => {
const { t } = useTranslation()
- const { userData, setUserData, oriUserData } = userContext()
+ const { userData, setUserData } = userContext()
const navigate = useNavigate()
@@ -22,8 +23,6 @@ const PhotoCapture = () => {
setUserData({ ...userData, photo: imageSrc })
})
- console.log(oriUserData.photo)
-
const handleSubmit = () => {
console.log(userData.photo)
if (userData.photo) {
@@ -31,11 +30,29 @@ const PhotoCapture = () => {
}
}
- console.log(userData?.photo)
-
return (
<>
<Header subheading={t('UPDATE')} />
+ <PopUpModal
+ title="Update your photo"
+ image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
+ description={
+ <>
+ <ul>
+ <li className="list__item">
+ Ensure that your photo is clear and in focus
+ </li>
+ <li className="list__item">
+ Also, ensure that you are in the center of your photo
+ </li>
+ <li className="list__item">
+ You won&apos;t be able to proceed until you have captured a
+ clear and centered photo
+ </li>
+ </ul>
+ </>
+ }
+ />
<div className={styles.card__container}>
{userData?.photo === '' ? (
<Webcam
@@ -51,7 +68,7 @@ const PhotoCapture = () => {
}}
/>
) : (
- <img src={userData?.photo} />
+ <img id="img" src={userData?.photo} />
)}
</div>
<Grid container columnSpacing={10} justifyContent="center">
diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
index 3c2edb3..3b6a717 100644
--- a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
+++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
@@ -1,13 +1,16 @@
import { t } from 'i18next'
import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
import Card from '../../../components/Card/Card'
import Header from '../../../components/Header/Header'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { userContext } from '../../../context/User'
import styles from './UpdateSelect.module.css'
const UpdateSelect = () => {
+ const { userData, oriUserData } = userContext()
+ const navigate = useNavigate()
return (
<>
<Header subheading={t('UPDATE')} />
@@ -24,9 +27,15 @@ const UpdateSelect = () => {
image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
/>
</Link>
- <Link to="/update/agreement">
- <SubmitButton />
- </Link>
+ <SubmitButton
+ onClick={() => {
+ if (userData === oriUserData) {
+ navigate('/no-update')
+ } else {
+ navigate('/update/agreement')
+ }
+ }}
+ />
</div>
</>
)