From ffd2c78b86111a5d1f7914e7dab4ffc946cb5287 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Tue, 23 Aug 2022 14:39:22 +0530 Subject: check status feature --- client/src/pages/Update/Address/Address.jsx | 27 ++++++++- client/src/pages/Update/Agreement/Agreement.jsx | 24 +++++++- client/src/pages/Update/Biometric/Biometric.jsx | 69 ++++++++++++++++++++-- .../Update/BiometricSelect/BiometricSelect.jsx | 17 ++++++ .../Update/DocumentScanner/DocumentScanner.jsx | 28 ++++++++- .../src/pages/Update/Fingerprint/Fingerprint.jsx | 12 ++++ client/src/pages/Update/FormOne/FormOne.jsx | 30 ++++++++++ client/src/pages/Update/IrisScan/IrisScan.jsx | 12 ++++ client/src/pages/Update/Otp/Otp.jsx | 22 +++++++ .../src/pages/Update/PhotoCapture/PhotoCapture.jsx | 29 +++++++-- .../src/pages/Update/UpdateSelect/UpdateSelect.jsx | 17 ++++-- 11 files changed, 268 insertions(+), 19 deletions(-) (limited to 'client/src/pages/Update') 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 ( <>
+ +
    +
  • + Update the required details in the relevant fields by clicking + the edit button +
    • +
  • + If required, select the state you belong to. from the dropdown + list +
    • +
  • + If required, select the district you belong to. from the + dropdown list. This won't show any options until you have + selected the state +
    • +
+ + } + />
{ @@ -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'} />
+ +
    +
  • Click on "SEND OTP"
    • +
  • + You will recieve an OTP on your entered mobile number +
    • +
  • + You can "RESEND" the OTP after 30 seconds, if you + haven't received it yet. +
    • +
  • + Click on "VERIFY OTP" to verify your mobile number +
    • +
+ + } + />
{ + 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 ( <> + {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 ( <>
+ +
    +
  • + Click on the edit button to update the required biometrics +
    • +
  • + You can edit your Photograph/Fingerprints/Iris Scans +
    • +
+ + } + /> setPage(0)} /> setPage(1)} /> 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 ( <>
- + +
    +
  • + Consists of 3 steps : +
      +
    • Proof of Identity:
      • +
    • Proof of Address:
      • +
    • Proof of Date of Birth:
      • +
    +
    • +
  • + Ensure that your documents are in the center of the frame +
    • +
  • + You won't be able to proceed until you have scanned all the + required documents +
    • +
+ + } + />
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 ( <>
+ +
    +
  • INSTRUCTIONS TO BE ADDED
    • +
+ + } + />
{ const { userData, setUserData } = userContext() @@ -34,6 +35,35 @@ const FormOne = () => { return ( <>
+ +
    +
  • + Select your residency by selecting the appropriate checkbox +
    • +
  • + Enter your full name without any title or salutation +
    • +
  • + Select your gender by clicking on the appropriate card +
    • +
  • + Select your date of birth from the provided calender +
    • +
  • + Enter your 10 digit mobile number without any prefix or country + code +
    • +
  • + Enter your email address in proper format +
    • +
+ + } + />
{ const { t } = useTranslation() return ( <>
+ +
    +
  • INSTRUCTIONS TO BE ADDED
    • +
+ + } + />
{ theme={'colored'} />
+ +
    +
  • Click on "SEND OTP"
    • +
  • + You will recieve an OTP on your entered mobile number +
    • +
  • + You can "RESEND" the OTP after 30 seconds, if you + haven't received it yet. +
    • +
  • + Click on "VERIFY OTP" to verify your mobile number +
    • +
+ + } + />

{t('ENTER_OTP')}

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 ( <>

+ +
    +
  • + Ensure that your photo is clear and in focus +
    • +
  • + Also, ensure that you are in the center of your photo +
    • +
  • + You won't be able to proceed until you have captured a + clear and centered photo +
    • +
+ + } + />
{userData?.photo === '' ? ( { }} /> ) : ( - + )}
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 ( <>
@@ -24,9 +27,15 @@ const UpdateSelect = () => { image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`} /> - - - + { + if (userData === oriUserData) { + navigate('/no-update') + } else { + navigate('/update/agreement') + } + }} + />
) -- cgit