summaryrefslogtreecommitdiff
path: root/client/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/pages')
-rw-r--r--client/src/pages/Enrollment/Scanner/Scanner.jsx139
-rw-r--r--client/src/pages/Enrollment/Scanner/Scanner.module.css18
-rw-r--r--client/src/pages/Update/Otp/Otp.jsx3
-rw-r--r--client/src/pages/Update/Otp/Otp.module.css6
-rw-r--r--client/src/pages/Update/Update.jsx1
5 files changed, 163 insertions, 4 deletions
diff --git a/client/src/pages/Enrollment/Scanner/Scanner.jsx b/client/src/pages/Enrollment/Scanner/Scanner.jsx
new file mode 100644
index 0000000..fb015fe
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.jsx
@@ -0,0 +1,139 @@
+/* eslint-disable multiline-ternary */
+import React 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 './Scanner.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import { t } from 'i18next'
+import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
+
+const Scanner = () => {
+ const navigate = useNavigate()
+ const { userData, setUserData } = userContext()
+ const webcamRef = React.useRef(null)
+
+ const capture = React.useCallback(() => {
+ const imageSrc = webcamRef.current.getScreenshot()
+ setUserData({ ...userData, photo: imageSrc })
+ })
+
+ const description = [
+ 'ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS',
+ 'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO',
+ 'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
+ ]
+
+ const svgIcon = () => (
+ <svg
+ width="100%"
+ height="100%"
+ className="svg"
+ viewBox="0 0 300 200"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlnsXlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
+ <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
+ <circle cx="50%" cy="50%" r="70" />
+ </mask>
+ </defs>
+ <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
+ </svg>
+ )
+
+ return (
+ <>
+ <Header subheading={t('ENROLLMENT')} />
+ <AudioAutoplay
+ audio={`${process.env.PUBLIC_URL}/assets/audios/photograph`}
+ />
+ <PopUpModal
+ title="CAPTURE_YOUR_PHOTO"
+ image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
+ description={
+ <>
+ <ul>
+ {description.map((item) => (
+ <li className="list__item" key="id">
+ {t(item)}
+ </li>
+ ))}
+ </ul>
+ </>
+ }
+ />
+ <div className={styles.card__container}>
+ <div className={styles.webcam__container}>
+ <Webcam
+ audio={false}
+ height={400}
+ ref={webcamRef}
+ screenshotFormat="image/jpeg"
+ width={600}
+ videoConstraints={{
+ height: 400,
+ width: 600,
+ facingMode: 'user'
+ }}
+ />
+ <div className={styles.overlay__container}>
+ {svgIcon()}
+ </div>
+ </div>
+ <img id="img" src={userData.photo} />
+ </div>
+ <Grid container columnSpacing={10} justifyContent="center">
+ <Grid item>
+ <Button
+ color="primary"
+ size="large"
+ type="submit"
+ variant="contained"
+ sx={{ fontSize: '1.5rem', padding: '10px 30px' }}
+ onClick={(e) => {
+ e.preventDefault()
+ capture()
+ }}
+ >
+ {t('CAPTURE')}
+ </Button>
+ </Grid>
+ <Grid item>
+ <Button
+ color="primary"
+ size="large"
+ type="submit"
+ variant="contained"
+ sx={{ fontSize: '1.5rem', padding: '10px 48px' }}
+ onClick={(e) => {
+ e.preventDefault()
+ setUserData({ ...userData, photo: '' })
+ }}
+ >
+ {t('RESET')}
+ </Button>
+ </Grid>
+ </Grid>
+ <br></br>
+ <div>
+ <Grid container justifyContent="center">
+ <Typography align="center" sx={{ fontSize: '1.25rem' }}>
+ {t('PLEASE_LOOK_INTO_THE_CAMERA')}
+ <br></br>
+ {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')}
+ <br></br>
+ {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')}
+ </Typography>
+ </Grid>
+ </div>
+ <SubmitButton onClick={() => navigate('/enrollment/documents')} />
+ </>
+ )
+}
+
+export default Scanner
diff --git a/client/src/pages/Enrollment/Scanner/Scanner.module.css b/client/src/pages/Enrollment/Scanner/Scanner.module.css
new file mode 100644
index 0000000..4a82e8e
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.module.css
@@ -0,0 +1,18 @@
+.card__container {
+ display: flex;
+ justify-content: center;
+ margin: 10px;
+}
+
+.webcam__container {
+ position: relative;
+}
+
+.overlay__container {
+ position: absolute ;
+ width: 100%;
+ top: 0 ;
+ right: 0 ;
+ bottom: 0 ;
+ left: 0;
+} \ No newline at end of file
diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
index bf1b38d..6925613 100644
--- a/client/src/pages/Update/Otp/Otp.jsx
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -120,7 +120,7 @@ const Otp = () => {
type="submit"
variant="contained"
disabled={disabled}
- sx={{ marginTop: '1rem' }}
+ sx={{ margin: '20px 0px', fontSize: '1.5rem', padding: '10px 30px' }}
onClick={() => {
mutateOTP.mutate()
setDisabled(true)
@@ -145,6 +145,7 @@ const Otp = () => {
size="large"
type="submit"
variant="contained"
+ sx={{ margin: '20px 0px', fontSize: '1.5rem', padding: '10px 30px' }}
onClick={() => {
verifyOTP()
}}
diff --git a/client/src/pages/Update/Otp/Otp.module.css b/client/src/pages/Update/Otp/Otp.module.css
index b88d5d4..209d997 100644
--- a/client/src/pages/Update/Otp/Otp.module.css
+++ b/client/src/pages/Update/Otp/Otp.module.css
@@ -9,11 +9,11 @@
}
.subheading {
- font-size: var(--font-medium);
- font-weight: 400;
+ font-size: 2rem;
}
.subsubheading {
- font-size: var(--font-medium-s);
+ font-size: 1.75rem;
+ font-weight: 400;
margin: 10px 0px;
}
diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx
index 577573d..cd9cd86 100644
--- a/client/src/pages/Update/Update.jsx
+++ b/client/src/pages/Update/Update.jsx
@@ -46,6 +46,7 @@ const Update = () => {
size="large"
type="submit"
variant="contained"
+ sx={{ margin: '20px 0px', fontSize: '1.5rem', padding: '10px 30px' }}
onClick={() => {
if (!validAadhaar.test(aadhaarNumber)) {
toast.error(t('Please enter a valid aadhaar number'))
Powered by cgit, Gruvboxed by Blaster4385.