Merge pull request #21 from Blaster4385/develop

Yo Man

admin/src/index.css

@@ -12,6 +12,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
   width: 100%;
+  background: url('../public/assets/images/background.png') no-repeat center center
+    fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
 }
 
 code {

admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Accordion from '../../components/Accordion/Accordion';
 import Button from '../../components/Button/Button';
 import Header from '../../components/Header/Header';
@@ -7,11 +7,12 @@ import {
   getUnverifiedUsers,
   updateUser,
 } from '../../services/apiservice';
-import {useQuery, useMutation} from 'react-query';
-import {useNavigate} from 'react-router-dom';
+import { useQuery, useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 import BackButton from '../../components/BackButton/BackButton';
-import {sendMessage} from '../../services/apiservice';
+import { sendMessage } from '../../services/apiservice';
 import Spinner from '../../components/Spinner/Spinner';
+import TextField from '@mui/material/TextField';
 
 import styles from './EnrollmentRequests.module.css';
 import MessageModal from '../../components/Modal/MessageModal';
@@ -20,11 +21,11 @@ const EnrollmentRequests = () => {
   const navigate = useNavigate();
   const [open, setOpen] = React.useState(false);
   const [message, setMessage] = React.useState('');
-  const {data, refetch, isLoading} = useQuery('unverified', getUnverifiedUsers);
+  const { data, refetch, isLoading } = useQuery('unverified', getUnverifiedUsers);
 
   const deleteUse = useMutation((payload) => deleteUser(payload));
 
-  const updateUse = useMutation((id) => updateUser(id, {verified: true}), {
+  const updateUse = useMutation((id) => updateUser(id, { verified: true }), {
     onSuccess: () => {
       refetch();
     },
@@ -47,6 +48,21 @@ const EnrollmentRequests = () => {
     });
   };
 
+  const [inputText, setInputText] = useState("");
+
+  const inputHandler = (e) => {
+    const lowerCase = e.target.value.toLowerCase();
+    setInputText(lowerCase);
+  };
+
+  const filteredData = data?.data?.filter((el) => {
+    if (inputText === '') {
+      return el;
+    } else {
+      return el.name.toLowerCase().includes(inputText);
+    }
+  })
+
   if (isLoading) {
     return <Spinner heading='Admin' />;
   }
@@ -54,11 +70,17 @@ const EnrollmentRequests = () => {
   return (
     <div className={styles.unverified_users}>
       <Header subheading='Admin' />
+      <h1 className={styles.unverified_users__heading}>Search</h1>
+      <input
+        className={styles.input__search}
+        onChange={inputHandler}
+        placeholder="Enter name of user to search"
+      />
       <BackButton onClick={() => navigate('/')} />
       <h1 className={styles.unverified_users__heading}>Enrollment Requests</h1>
       <div className={styles.accordion}>
-        {data?.data.length !== 0 ? (
-          data?.data.map((item) => (
+        {data?.data?.length !== 0 ? (
+          filteredData?.map((item) => (
             <div className={styles.unverified_users__accordion} key={item._id}>
               <Accordion name={item.name} user={item} />
               <Button

admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css

@@ -26,3 +26,13 @@
   margin: 20px;
   text-align: center;
 }
+
+.input__search {
+  width: 400px;
+  height: 60px;
+  margin: 10px 0px 30px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1.25rem;
+}

admin/src/pages/UpdateRequests/UpdateRequests.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Accordion from '../../components/Accordion/Accordion';
 import Button from '../../components/Button/Button';
 import Header from '../../components/Header/Header';
@@ -7,15 +7,15 @@ import {
   getUpdatingUsers,
   updateUser,
 } from '../../services/apiservice';
-import {useQuery, useMutation} from 'react-query';
-import {useNavigate} from 'react-router-dom';
+import { useQuery, useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
 import styles from './UpdateRequests.module.css';
 import BackButton from '../../components/BackButton/BackButton';
 import Spinner from '../../components/Spinner/Spinner';
 
 const UpdateRequests = () => {
   const navigate = useNavigate();
-  const {data, isLoading, isError, refetch} = useQuery(
+  const { data, isLoading, isError, refetch } = useQuery(
     'updating',
     getUpdatingUsers
   );
@@ -25,12 +25,27 @@ const UpdateRequests = () => {
     },
   });
 
-  const updateUse = useMutation((id) => updateUser(id, {verified: true}), {
+  const updateUse = useMutation((id) => updateUser(id, { verified: true }), {
     onSuccess: () => {
       refetch();
     },
   });
 
+  const [inputText, setInputText] = useState("");
+
+  const inputHandler = (e) => {
+    const lowerCase = e.target.value.toLowerCase();
+    setInputText(lowerCase);
+  };
+
+  const filteredData = data?.data?.filter((el) => {
+    if (inputText === '') {
+      return el;
+    } else {
+      return el.name.toLowerCase().includes(inputText);
+    }
+  })
+
   if (isLoading) {
     return <Spinner heading='Admin' />;
   }
@@ -42,25 +57,29 @@ const UpdateRequests = () => {
   return (
     <div className={styles.unverified_users}>
       <Header subheading='Admin' />
+      <h1 className={styles.unverified_users__heading}>Search</h1>
+      <input
+        className={styles.input__search}
+        onChange={inputHandler}
+        placeholder="Enter name of user to search"
+      />
       <BackButton onClick={() => navigate('/')} />
       <h1 className={styles.unverified_users__heading}>Update Requests</h1>
       <div className={styles.accordion}>
         {data?.data.length !== 0 ? (
-          data?.data.map((item) => (
+          filteredData?.map((item) => (
             <div className={styles.unverified_users__accordion} key={item._id}>
               <Accordion name={item.name} user={item} />
-              <div>
-                <Button
-                  title='Accept'
-                  color='green'
-                  onClick={() => updateUse.mutate(item._id)}
-                />
-                <Button
-                  title='Reject'
-                  color='red'
-                  onClick={() => deleteUse.mutate(item._id)}
-                />
-              </div>
+              <Button
+                title='Accept'
+                color='green'
+                onClick={() => updateUse.mutate(item._id)}
+              />
+              <Button
+                title='Reject'
+                color='red'
+                onClick={() => deleteUse.mutate(item._id)}
+              />
             </div>
           ))
         ) : (

admin/src/pages/UpdateRequests/UpdateRequests.module.css

@@ -26,3 +26,13 @@
   margin: 20px;
   text-align: center;
 }
+
+.input__search {
+  width: 400px;
+  height: 60px;
+  margin: 10px 0px 30px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1.25rem;
+}

admin/src/pages/VerifiedUsers/VerifiedUsers.jsx

@@ -1,21 +1,42 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Accordion from '../../components/Accordion/Accordion';
 import Header from '../../components/Header/Header';
-import {getVerifiedUsers} from '../../services/apiservice';
-import {useQuery} from 'react-query';
+import { getVerifiedUsers } from '../../services/apiservice';
+import { useQuery } from 'react-query';
 
 import styles from './VerifiedUsers.module.css';
 
 const VerifiedUsers = () => {
-  const {data} = useQuery('verified', getVerifiedUsers);
+  const { data } = useQuery('verified', getVerifiedUsers);
+
+  const [inputText, setInputText] = useState("");
+
+  const inputHandler = (e) => {
+    const lowerCase = e.target.value.toLowerCase();
+    setInputText(lowerCase);
+  };
+
+  const filteredData = data?.data?.filter((el) => {
+    if (inputText === '') {
+      return el;
+    } else {
+      return el.name.toLowerCase().includes(inputText);
+    }
+  })
 
   return (
     <div className={styles.verified_users}>
       <Header subheading='Admin' />
+      <h1 className={styles.unverified_users__heading}>Search</h1>
+      <input
+        className={styles.input__search}
+        onChange={inputHandler}
+        placeholder="Enter name of user to search"
+      />
       <h1 className={styles.verified_users__heading}>Verified Users</h1>
       <div className='accordion'>
         {data?.data.length !== 0 ? (
-          data?.data.map((item) => (
+          filteredData?.map((item) => (
             <div>
               <Accordion name={item.name} user={item} />
             </div>

admin/src/pages/VerifiedUsers/VerifiedUsers.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
 
 .verified_users__heading {
@@ -12,3 +13,13 @@
   margin: 20px;
   text-align: center;
 }
+
+.input__search {
+  width: 400px;
+  height: 60px;
+  margin: 10px 0px 30px;
+  padding: 18px 10px;
+  border: 3px solid;
+  border-radius: 10px;
+  font-size: 1.25rem;
+}

client/src/components/BackButton/BackButton.jsx

@@ -1,8 +1,10 @@
 import { Typography } from '@mui/material'
 import React from 'react'
 import styles from './BackButton.module.css'
+import { useTranslation } from 'react-i18next'
 
 const BackButton = ({ onClick, onChange }) => {
+  const { t } = useTranslation()
   return (
     <>
       <button
@@ -17,7 +19,7 @@ const BackButton = ({ onClick, onChange }) => {
             src={`${process.env.PUBLIC_URL}/assets/images/back.svg`}
             alt=""
           />
-          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Back</Typography>
+          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>{t('BACK')}</Typography>
         </div>
       </button>
     </>

client/src/components/BiometricCard/BiometricCard.module.css

@@ -16,11 +16,12 @@
   }
   
   .input__field {
-    width: 300px;
-    margin: 10px 0px;
+    width: 500px;
+    height: 80px;
+    margin: 40px 0px;
     padding: 18px 10px;
     border: 3px solid;
     border-radius: 10px;
-    font-size: 1rem;
+    font-size: 1.5rem;
     text-align: center;
   }

client/src/components/LanguageSelect/locales/en/translation.json

@@ -143,5 +143,6 @@
   "APPROVED": "Approved",
   "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "Your Aadhaar update status is approved",
   "ENTER_YOUR_EID_NUMBER": "Enter your EID number",
-  "PENDING": "Pending"
+  "PENDING": "Pending",
+  "SAVE_&_NEXT": "Save & Next"
 }

client/src/components/LanguageSelect/locales/hi/translation.json

@@ -142,5 +142,6 @@
   "YOUR_AADHAAR_STATUS_IS_APPROVED": "आपका आधार नामांकन अनुरोध स्वीकृत हो गया है",
   "PENDING": "लंबित",
   "YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE": "आपका आधार नामांकन अनुरोध प्रक्रिया में है",
-  "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें"
+  "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें",
+  "SAVE_&_NEXT": "सहेजें और अगला"
 }

client/src/components/LanguageSelect/locales/te/translation.json

@@ -143,5 +143,6 @@
   "APPROVED": "ఆమోదించబడింది",
   "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "మీ ఆధార్ అప్‌డేట్ స్థితి ఆమోదించబడింది",
   "ENTER_YOUR_EID_NUMBER": "మీ EID నంబర్‌ని నమోదు చేయండి",
-  "PENDING": "పెండింగ్‌లో ఉంది"
+  "PENDING": "పెండింగ్‌లో ఉంది",
+  "SAVE_&_NEXT": "భద్రపరచు & తదుపరి"
 }

client/src/components/SubmitButton/SubmitButton.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import styles from './SubmitButton.module.css'
 import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 
 const SubmitButton = ({ onClick, onChange, disabled }) => {
+  const { t } = useTranslation()
   return (
     <>
       <button
@@ -13,12 +15,12 @@ const SubmitButton = ({ onClick, onChange, disabled }) => {
         disabled={disabled}
       >
         <div className={styles.submit__content}>
-        <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Save & Next</Typography>
-        <img
-          className={styles.submit__image}
-          src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
-          alt=""
-        />
+          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>{t('SAVE_&_NEXT')}</Typography>
+          <img
+            className={styles.submit__image}
+            src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
+            alt=""
+          />
         </div>
       </button>
     </>

client/src/i18nextInit.js

@@ -4,6 +4,7 @@ import Backend from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import translationEN from '../src/components/LanguageSelect/locales/en/translation.json'
 import translationHI from '../src/components/LanguageSelect/locales/hi/translation.json'
+import translationTE from '../src/components/LanguageSelect/locales/te/translation.json'
 
 const fallbackLng = ['en']
 const availableLanguages = ['en', 'hi']
@@ -14,6 +15,9 @@ const resources = {
   },
   hi: {
     translation: translationHI
+  },
+  te: {
+    translation: translationTE
   }
 }
 

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

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;
+}

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

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;
 }

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'))

server/controllers/users.js

@@ -1,4 +1,5 @@
 import UserDetails from '../models/users';
+import sendSMS from '../services/twilio';
 import generateAadhaar from '../utils/aadhaar';
 
 const createUser = async (req, res) => {
@@ -86,8 +87,6 @@ const getUnverifiedUsers = async (req, res) => {
 
 const updateUser = async (req, res) => {
   const {id} = req.params;
-
-  console.log(id, req.body);
   try {
     const user = await UserDetails.findByIdAndUpdate(
       id,
@@ -99,6 +98,8 @@ const updateUser = async (req, res) => {
       await UserDetails.findByIdAndUpdate(id, {
         $set: {aadhaarNumber: generateAadhaar()},
       });
+
+      sendSMS(user,mobile, `Dear ${user.name}, your Aadhaar Number is ${user.aadhaarNumber} for the EID ${user._id}.`);
     }
 
     res.status(200).json({message: 'User Updated Successfully'});