From ec423572aaf8ecf80a409fd9a03d73b5d31e444f Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Sat, 13 Aug 2022 21:40:17 +0530
Subject: Implemented update UI

---
 .../src/pages/Update/PhotoCapture/PhotoCapture.jsx | 88 ++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 client/src/pages/Update/PhotoCapture/PhotoCapture.jsx

(limited to 'client/src/pages/Update/PhotoCapture/PhotoCapture.jsx')

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