Blaster4385/aadhaar-kiosk-web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #6 from Blaster4385/develop

Browse source 
Fix this shit
This commit is contained in:
Rohan Raj Gupta 2022-08-17 17:58:38 +05:30 committed by GitHub
commit fba27fbc54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 213 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/package.json
View file

@ -7,26 +7,20 @@
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"country-state-city": "^3.0.1",
"i18next": "^21.9.0",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-http-backend": "^1.4.1",
"i18next-xhr-backend": "^3.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-form-with-constraints": "^0.19.1",
"react-hook-form": "^7.34.0",
"react-i18next": "^11.18.4",
"react-query": "^3.39.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-select": "^5.4.0",
"react-webcam": "^7.0.1",
"web-vitals": "^2.1.4"
"react-toastify": "^9.0.8",
"react-webcam": "^7.0.1"
},
"scripts": {
"start": "react-scripts start",

2
client/src/components/Header/Header.jsx
View file

@ -4,7 +4,7 @@ import styles from './Header.module.css'
const Header = ({ subheading }) => {
return (
<header className={styles.header}>
<img src={`${process.env.PUBLIC_URL}/favicon.ico`} />
<img src={`${process.env.PUBLIC_URL}/favicon.ico`} className={styles.header__image}/>
<h3 className={styles.header__subheading}>{subheading}</h3>
</header>
)

5
client/src/components/Header/Header.module.css
View file

@ -13,3 +13,8 @@
font-size: var(--font-medium);
font-weight: 400;
}
.header__image {
width: 150px;
height: 150px;
}

75
client/src/components/LanguageSelect/locales/hi/translation.json
View file

@ -1,4 +1,77 @@
{
"AADHAAR": "आधार",
"MERA_AADHAAR_MERI_PEHCHAN": "मेरा आधार मेरी पहचान",
"ENROLLMENT": "उपस्थिति पंजी",
"UPDATE": "अद्यतन"
"UPDATE": "अद्यतन",
"INDIAN_RESIDENT": "भारतीय निवासी",
"NON_RESIDENTIAL_INDIAN": "गैर-आवासीय भारतीय",
"FULL_NAME": "पूरा नाम",
"ENTER_YOUR_FULL_NAME": "अपना पूरा नाम भरें",
"MALE": "पुरुष",
"FEMALE": "मादा",
"OTHER": "अन्य",
"DATE_OF_BIRTH": "जन्म की तारीख",
"MOBILE": "मोबाइल",
"ENTER_YOUR_MOBILE_NUMBER": "अपना मोबाइल नंबर दर्ज करें",
"EMAIL": "ईमेल",
"ENTER_YOUR_EMAIL_ID": "अपना ईमेल आईडी दर्ज करें",
"COUNTRY": "देश",
"STATE": "राज्य",
"DISTRICT": "जिला",
"VILLAGE_TOWN": "गाँव / नगर",
"ENTER_YOUR_VILLAGE_TOWN": "अपना गांव / कस्बा दर्ज करें",
"HOUSE_NUMBER_APARTMENT": "हाउस नंबर / अपार्टमेंट",
"ENTER_YOUR_HOUSE_NUMBER_APARTMENT": "अपना घर नंबर/अपार्टमेंट दर्ज करें",
"STREET_ROAD": "सड़क / सड़क",
"ENTER_YOUR_STREET_ROAD": "अपनी गली / सड़क दर्ज करें",
"AREA_LOCALITY": "क्षेत्र / इलाका",
"ENTER_YOUR_AREA_LOCALITY": "अपना क्षेत्र / इलाका दर्ज करें",
"POST_OFFICE": "डाकघर",
"ENTER_YOUR_AREA_POST_OFFICE": "अपना क्षेत्र डाकघर दर्ज करें",
"LANDMARK": "लैंडमार्क",
"ENTER_ANY_NEAREST_LANDMARK": "कोई भी निकटतम लैंडमार्क दर्ज करें",
"PINCODE": "पिनकोड",
"ENTER_YOUR_AREA_PINCODE": "अपना क्षेत्र पिनकोड दर्ज करें",
"CAPTURE": "कैप्चर",
"RESET": "रीसेट",
"PLEASE_LOOK_INTO_THE_CAMERA": "कृपया कैमरे में देखें",
"CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO": "फ़ोटो कैप्चर करने के लिए कैप्चर करें क्लिक करें",
"CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO": "कैप्चर की गई फ़ोटो को निकालने के लिए रीसेट करें क्लिक करें",
"PROOF_OF_IDENTITY": "पहचान का प्रमाण",
"PROOF_OF_ADDRESS": "पते का प्रमाण",
"PROOF_OF_DOB": "जन्म तिथि का प्रमाण",
"SCAN": "स्कैन",
"KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS": "कृपया अपने दस्तावेज़ों की तस्वीर क्लिक करें",
"ALL_STEPS_COMPLETED": "सभी चरण पूरे हुए - आपका काम पूरा हो गया",
"BACK": "पीछे",
"FINISH": "फिनिश",
"NEXT": "अगला",
"PLEASE_PUT_YOUR_EYES_INSIDE_THE_IRIS_SCANNER": "कृपया अपनी आंखें आईरिस स्कैनर के अंदर रखें।.",
"WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_EYES": "अपनी आंखों को हटाने के लिए संकेत और बीप ध्वनि की प्रतीक्षा करें",
"THANK_YOU_FOR_YOUR_TIME": "आपके समय के लिए धन्यवाद",
"ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE": "कृपया सुनिश्चित करें कि आपको जाने से पहले एक पुष्टिकरण संदेश प्राप्त हुआ है",
"PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER": "कृपया अपनी उंगलियों को एक-एक करके फ़िंगरप्रिंट स्कैनर पर रखें",
"WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS": "अपनी उंगलियों को हटाने के लिए संकेत और बीप ध्वनि की प्रतीक्षा करें",
"PLEASE_VERIFY_YOUR_IDENTITY": "कृपया अपने पंजीकृत मोबाइल नंबर xxxxxxxx15 पर ओटीपी प्राप्त करके अपनी पहचान सत्यापित करें",
"SEND_OTP": "ओटीपी भेजें",
"RESEND": "फिर से भेजें",
"PLEASE_SELECT_YOUR_RESIDENCY": "कृपया अपना निवास चुनें",
"PLEASE_ENTER_VALID_EMAIL": "कृपया मान्य ईमेल दर्ज करें",
"PLEASE_SELECT_YOUR_COUNTRY": "कृपया अपना देश चुनें",
"PLEASE_SELECT_YOUR_STATE": "कृपया अपना राज्य चुनें",
"PLEASE_SELECT_YOUR_DISTRICT": "कृपया अपना जिला चुनें",
"PLEASE_ENTER_YOUR_VILLAGE": "कृपया अपने गांव में प्रवेश करें",
"PLEASE_ENTER_YOUR_HOUSE_NUMBER": "कृपया अपने घर का नंबर दर्ज करें",
"PLEASE_ENTER_YOUR_STREET": "कृपया अपनी गली में प्रवेश करें",
"PLEASE_ENTER_YOUR_LOCALITY": "कृपया अपना इलाका दर्ज करें",
"PLEASE_ENTER_YOUR_AREA_POST_OFFICE": "कृपया अपने क्षेत्र के डाकघर में प्रवेश करें",
"PLEASE_ENTER_NEAREST_LANDMARK": "कृपया निकटतम लैंडमार्क दर्ज करें",
"PLEASE_ENTER_YOUR_AREA_PINCODE": "कृपया अपने क्षेत्र का पिनकोड दर्ज करें",
"PLEASE_ENTER_VALID_PINCODE": "कृपया मान्य पिनकोड दर्ज करें",
"I_HEREBY_CONFIRM_THE_IDENTITY_AND_ADDRESS": "मैं ___________ की पहचान और पते को सत्य, सही और सटीक होने की पुष्टि करता हूं",
"PHOTOGRAPH": "फोटोग्राफ",
"FINGERPRINT_SCAN": "फिंगरप्रिंट स्कैन",
"IRIS_SCAN": "आइरिस स्कैन",
"DEMOGRAPHIC": "जनसांख्यिकीय",
"BIOMETRIC": "बायोमेट्रिक"
}

28
client/src/context/User.js Normal file
View file

@ -0,0 +1,28 @@
import React, { createContext, useState, useContext } from 'react'
export const UserContext = createContext()
export const Context = ({ children }) => {
const [aadhaarNumber, setAadhaarNumber] = useState(null)
const [userData, setUserData] = useState({})
const initialUser = {
aadhaarNumber,
setAadhaarNumber,
userData,
setUserData
}
return (
<UserContext.Provider value={initialUser}>{children}</UserContext.Provider>
)
}
export const userContext = () => {
const context = useContext(UserContext)
if (!context) {
throw new Error(`userContext context can only
be used in a component wrapped with UserContext`)
}
return context
}

5
client/src/index.js
View file

@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from 'react-query'
import './index.css'
import App from './App'
import './i18nextInit'
import { Context } from './context/User'
const queryClient = new QueryClient()
@ -13,7 +14,9 @@ root.render(
<React.StrictMode>
<BrowserRouter>
<QueryClientProvider client={queryClient}>
<App />
<Context>
<App />
</Context>
</QueryClientProvider>
</BrowserRouter>
</React.StrictMode>

41
client/src/pages/Enrollment/Enrollment.jsx
View file

@ -19,6 +19,8 @@ import {
} from '../../constants/RegEx'
import { createUser } from '../../services/apiservice'
import { useTranslation } from 'react-i18next'
import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
const Enrollment = () => {
const { t } = useTranslation()
@ -55,51 +57,51 @@ const Enrollment = () => {
const handleSubmit = () => {
if (page === 0) {
if (formData.indianResident === '') {
return alert(t('PLEASE_SELECT_YOUR_RESIDENCY'))
toast.error(t('PLEASE_SELECT_YOUR_RESIDENCY'))
} else if (formData.name === '' || formData.name.length < 1) {
return alert(t('PLEASE_ENTER_YOUR_NAME'))
toast.error(t('PLEASE_ENTER_YOUR_NAME'))
} else if (!validString.test(formData.name)) {
return alert(t('PLEASE_ENTER_VALID_NAME'))
toast.error(t('PLEASE_ENTER_VALID_NAME'))
} else if (formData.gender === '') {
return alert(t('PLEASE_SELECT_YOUR_GENDER'))
toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
} else {
setPage(page + 1)
}
} else if (page === 1) {
if (formData.mobile === '') {
return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
} else if (!validMobileNumber.test(formData.mobile)) {
return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
} else if (formData.email === '') {
return alert(t('PLEASE_ENTER_YOUR_EMAIL'))
toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
} else if (!validEmail.test(formData.email)) {
return alert(t('PLEASE_ENTER_VALID_EMAIL'))
toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
} else {
setPage(page + 1)
}
} else if (page === 2) {
if (formData.country === '') {
return alert(t('PLEASE_SELECT_YOUR_COUNTRY'))
toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
} else if (formData.state === '') {
return alert(t('PLEASE_SELECT_YOUR_STATE'))
toast.error(t('PLEASE_SELECT_YOUR_STATE'))
} else if (formData.district === '') {
return alert(t('PLEASE_SELECT_YOUR_DISTRICT'))
toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
} else if (formData.village === '') {
return alert(t('PLEASE_ENTER_YOUR_VILLAGE'))
toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
} else if (formData.houseNo === '') {
return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
} else if (formData.street === '') {
return alert(t('PLEASE_ENTER_YOUR_STREET'))
toast.error(t('PLEASE_ENTER_YOUR_STREET'))
} else if (formData.locality === '') {
return alert(t('PLEASE_ENTER_YOUR_LOCALITY'))
toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
} else if (formData.postOffice === '') {
return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
} else if (formData.landmark === '') {
return alert(t('PLEASE_ENTER_NEAREST_LANDMARK'))
toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
} else if (formData.pincode === '') {
return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
} else if (!validPincode.test(formData.pincode)) {
return alert(t('PLEASE_ENTER_VALID_PINCODE'))
toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
} else {
setFormData({
...formData,
@ -188,6 +190,7 @@ const Enrollment = () => {
}
return (
<>
<ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} />
{conditionalComponent()}
{conditionalButton()}
</>

96
client/src/pages/Update/Demographic/Demographic.jsx
View file

@ -1,4 +1,6 @@
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { useQuery } from 'react-query'
import { getUserByAadhaar } from '../../../services/apiservice'
import Address from '../Address/Address'
import DocumentScanner from '../DocumentScanner/DocumentScanner'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
@ -11,15 +13,22 @@ import {
} from '../../../constants/RegEx'
import UpdateSelect from '../UpdateSelect/UpdateSelect'
import { useTranslation } from 'react-i18next'
import { userContext } from '../../../context/User'
import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
const Demographic = () => {
const { t } = useTranslation()
const { aadhaarNumber, userData, setUserData } = userContext()
const [page, setPage] = useState(0)
const isLongEnough = aadhaarNumber?.toString().length > 11
const [formData, setFormData] = useState({
name: '',
gender: '',
dob: new Date().toISOString().slice(0, 10),
dob: '',
mobile: '',
email: '',
country: '',
@ -31,52 +40,94 @@ const Demographic = () => {
locality: '',
postOffice: '',
landmark: '',
pincode: '',
address: ''
pincode: ''
// address: userData?.address
})
useEffect(() => {
setFormData({
...formData,
...userData
})
}, [userData])
// Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
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) {
setUserData(data?.data)
}
const address = userData?.address
console.log(address)
console.log(
'Aadhaar: ',
aadhaarNumber,
'Islong: ',
isLongEnough,
'User: ',
userData
)
const handleSubmit = () => {
if (page === 0) {
if (formData.name === '' || formData.name.length < 1) {
return alert(t('PLEASE_ENTER_YOUR_NAME'))
toast.error(t('PLEASE_ENTER_YOUR_NAME'))
} else if (!validString.test(formData.name)) {
return alert(t('PLEASE_ENTER_VALID_NAME'))
toast.error(t('PLEASE_ENTER_VALID_NAME'))
} else if (formData.gender === '') {
return alert(t('PLEASE_SELECT_YOUR_GENDER'))
toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
} else if (formData.mobile === '') {
return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
} else if (!validMobileNumber.test(formData.mobile)) {
return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
} else if (formData.email === '') {
return alert(t('PLEASE_ENTER_YOUR_EMAIL'))
toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
} else if (!validEmail.test(formData.email)) {
return alert(t('PLEASE_ENTER_VALID_EMAIL'))
toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
} else {
setPage(page + 1)
}
} else if (page === 1) {
if (formData.country === '') {
return alert(t('PLEASE_SELECT_YOUR_COUNTRY'))
toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
} else if (formData.state === '') {
return alert(t('PLEASE_SELECT_YOUR_STATE'))
toast.error(t('PLEASE_SELECT_YOUR_STATE'))
} else if (formData.district === '') {
return alert(t('PLEASE_SELECT_YOUR_DISTRICT'))
toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
} else if (formData.village === '') {
return alert(t('PLEASE_ENTER_YOUR_VILLAGE'))
toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
} else if (formData.houseNo === '') {
return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
} else if (formData.street === '') {
return alert(t('PLEASE_ENTER_YOUR_STREET'))
toast.error(t('PLEASE_ENTER_YOUR_STREET'))
} else if (formData.locality === '') {
return alert(t('PLEASE_ENTER_YOUR_LOCALITY'))
toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
} else if (formData.postOffice === '') {
return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
} else if (formData.landmark === '') {
return alert(t('PLEASE_ENTER_NEAREST_LANDMARK'))
toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
} else if (formData.pincode === '') {
return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
} else if (!validPincode.test(formData.pincode)) {
return alert(t('PLEASE_ENTER_VALID_PINCODE'))
toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
} else {
setFormData({
...formData,
@ -116,6 +167,7 @@ const Demographic = () => {
}
return (
<>
<ToastContainer autoClose={1000} hideProgressBar={true} theme={'colored'} />
{conditionalComponent()}
{conditionalButton()}
</>

15
client/src/pages/Update/Update.jsx
View file

@ -1,24 +1,15 @@
import React, { useState } from 'react'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '../../components/Header/Header'
import styles from './Update.module.css'
import Input from '../../components/Input/Input'
// import { useQuery } from 'react-query'
import { Grid, Button } from '@mui/material'
// import { getUserByAadhaar } from '../../services/apiservice'
// import { validAadhaar } from '../../components/RegEx/RegEx'
import { userContext } from '../../context/User'
const Update = () => {
const [aadhaarNumber, setAadhaarNumber] = useState()
const { aadhaarNumber, setAadhaarNumber } = userContext()
const navigate = useNavigate()
// console.log(aadhaarNumber)
// const user = useQuery(['user', aadhaarNumber], () =>
// getUserByAadhaar(aadhaarNumber)
// )
// console.log(user.data.data)
return (
<>
<Header subheading="Update" />