From 6c867e639e565262bbf71342f953456a7d0b7f7a Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Fri, 19 Aug 2022 22:53:02 +0530 Subject: Refine UI --- client/src/components/Card/CardAgreement.jsx | 2 +- .../src/components/Card/CardAgreement.module.css | 2 +- .../src/pages/Enrollment/Agreement/Agreement.jsx | 1 + .../Enrollment/DocumentScanner/DocumentScanner.jsx | 175 ++++++++++----------- .../DocumentScanner/DocumentScanner.module.css | 40 +++++ 5 files changed, 126 insertions(+), 94 deletions(-) (limited to 'client/src') diff --git a/client/src/components/Card/CardAgreement.jsx b/client/src/components/Card/CardAgreement.jsx index da35c91..77bb1a0 100644 --- a/client/src/components/Card/CardAgreement.jsx +++ b/client/src/components/Card/CardAgreement.jsx @@ -10,7 +10,7 @@ const CardAgreement = ({ title, image }) => { <>
- + {t('I_HEREBY_CONFIRM_THE_IDENTITY_AND_ADDRESS')}
diff --git a/client/src/components/Card/CardAgreement.module.css b/client/src/components/Card/CardAgreement.module.css index c9bdae8..c6b76cb 100644 --- a/client/src/components/Card/CardAgreement.module.css +++ b/client/src/components/Card/CardAgreement.module.css @@ -27,5 +27,5 @@ } .card__image { - padding-bottom: 32px; + height: 80%; } diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx index cf74d46..d3a5b90 100644 --- a/client/src/pages/Enrollment/Agreement/Agreement.jsx +++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx @@ -68,6 +68,7 @@ const Agreement = ({ unverified, setUnverified }) => { type="submit" variant="contained" disabled={disabled} + sx={{ marginTop: '1rem' }} onClick={() => { mutate() setDisabled(true) diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx index 20ea7d2..86f53f4 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -3,15 +3,7 @@ import React, { useState } from 'react' import Webcam from 'react-webcam' import Header from '../../../components/Header/Header' import styles from './DocumentScanner.module.css' -import { - Button, - Grid, - Typography, - StepLabel, - Step, - Stepper, - Box -} from '@mui/material' +import { Button, Typography, StepLabel, Step, Stepper } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' @@ -45,15 +37,15 @@ const DocumentScanner = () => { DOB: doccu.DOB }) }) - + console.log(activeStep) const handleNext = () => { if (activeStep === steps.length - 1) { setUserData({ ...userData, documents: documents }) } if ( - !userData.documents.POI || - !userData.documents.POA || - !userData.documents.DOB + (!documents.POI && activeStep === 0) || + (!documents.POA && activeStep === 1) || + (!documents.DOB && activeStep === 2) ) { toast.error(t('SCAN_YOUR_DOCUMENT')) } else { @@ -68,67 +60,85 @@ const DocumentScanner = () => { const WebcamComponent = ({ doc }) => { return ( <> -
- {documents[doc] === '' ? ( - + +
+ {documents[doc] === '' ? ( + + ) : ( + + )} +
+ +
+
+ +
- - - - - - - -

- +
{t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')} - +
) @@ -139,8 +149,8 @@ const DocumentScanner = () => {
- - +
+ {steps.map((label, index) => { const stepProps = {} const labelProps = {} @@ -157,14 +167,9 @@ const DocumentScanner = () => { })} {activeStep === steps.length ? ( - - - {t('ALL_STEPS_COMPLETED')} - - - - - + + {t('ALL_STEPS_COMPLETED')} + ) : ( {activeStep === 0 ? ( @@ -174,23 +179,9 @@ const DocumentScanner = () => { ) : ( activeStep === 2 && )} - - - - - )} - +
) diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css index 58baaa8..11cd176 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css @@ -1,6 +1,7 @@ .card__container { display: flex; justify-content: center; + align-items: center; margin: 20px; } @@ -8,3 +9,42 @@ display: flex; justify-content: center; } + +.button__container { + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.button { + background: transparent; + border: none; +} + +.image { + height: 50px; + width: 50px; +} + +.image:hover { + cursor: pointer; + transform: scale(1.1); +} + +.image:active { + transform: scale(0.98); +} + +.box { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; +} + +.container { + display: flex; + align-items: center; +} \ No newline at end of file -- cgit From 856728cfae03da554d4db91b0635a53f1c9f915c Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Fri, 19 Aug 2022 23:51:13 +0530 Subject: DeShit the api --- client/src/pages/Enrollment/Enrollment.jsx | 18 ++++++++++++------ client/src/services/apiservice.js | 5 +++++ server/controllers/message.js | 29 +++++++++++++++++++++++++++++ server/controllers/otp.js | 17 ----------------- server/index.js | 4 ++-- server/routes/message.js | 9 +++++++++ server/routes/otp.js | 8 -------- server/services/twilio.js | 4 ++-- 8 files changed, 59 insertions(+), 35 deletions(-) create mode 100644 server/controllers/message.js delete mode 100644 server/controllers/otp.js create mode 100644 server/routes/message.js delete mode 100644 server/routes/otp.js (limited to 'client/src') diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index f180667..e0cfd84 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -33,7 +33,9 @@ const Enrollment = () => { const navigate = useNavigate() const [unverified, setUnverified] = useState(true) - const { mutate } = useMutation((payload) => createUser(payload)) + const pushUser = useMutation((payload) => createUser(payload)) + + // const setConfirm = useMutation((payload) => sendMessage(payload)) const handleSubmit = () => { if (page === 0) { @@ -107,9 +109,7 @@ const Enrollment = () => { } else if (page === 6) { setPage(page + 1) } else if (page === 7) { - setPage(page + 1) - } else if (page === 8) { - mutate( + pushUser.mutate( { indianResident: userData.indianResident, name: userData.name, @@ -127,11 +127,17 @@ const Enrollment = () => { }, { onSuccess: () => { - setUserData(initialUserData) - navigate('/') + // setConfirm.mutate({ + // mobile: `+91${userData.mobile}`, + // id: pushUser.data._id + // }) + setPage(page + 1) } } ) + } else if (page === 8) { + setUserData(initialUserData) + navigate('/') } } diff --git a/client/src/services/apiservice.js b/client/src/services/apiservice.js index 0aa9337..e989c01 100644 --- a/client/src/services/apiservice.js +++ b/client/src/services/apiservice.js @@ -23,3 +23,8 @@ export const sendOTP = async (payload) => { const response = await apiClient.post('/otp', payload) return response } + +export const sendMessage = async (payload) => { + const response = await apiClient.post('/message', payload) + return response +} diff --git a/server/controllers/message.js b/server/controllers/message.js new file mode 100644 index 0000000..efba38b --- /dev/null +++ b/server/controllers/message.js @@ -0,0 +1,29 @@ +import generateOTP from '../utils/otp'; +import sendSMS from '../services/twilio'; + +const sendOTP = async (req, res) => { + const {mobile} = req.body; + + try { + const otp = generateOTP(); + const message = `Your OTP for Aadhaar verification is : ${otp}`; + sendSMS(mobile, message); + res.status(200).json({message: 'OTP sent successfully', otpCode: otp}); + } catch (error) { + res.status(404).json({message: error}); + } +}; + +const sendMessage = async (req, res) => { + const {mobile, id} = req.body; + + try { + const message = `Your request for aadhaar card has been successfully submitted. Please use the id: ${id} for future reference.`; + sendSMS(mobile, message); + res.status(200).json({message: 'Message sent successfully'}); + } catch (error) { + res.status(404).json({message: error}); + } +}; + +export default {sendOTP, sendMessage}; \ No newline at end of file diff --git a/server/controllers/otp.js b/server/controllers/otp.js deleted file mode 100644 index 5b4bd82..0000000 --- a/server/controllers/otp.js +++ /dev/null @@ -1,17 +0,0 @@ -import generateOTP from '../utils/otp'; -import sendMessage from '../services/twilio'; - -const sendOTP = async (req, res) => { - const {mobile} = req.body; - - try { - const otp = generateOTP(); - const message = `Your OTP for Aadhaar verification is : ${otp}`; - sendMessage(mobile, message); - res.status(200).json({message: 'OTP sent successfully', otpCode: otp}); - } catch (error) { - res.status(404).json({message: error}); - } -}; - -export default {sendOTP}; diff --git a/server/index.js b/server/index.js index 2ccd121..2a1bb1b 100644 --- a/server/index.js +++ b/server/index.js @@ -6,7 +6,7 @@ import dotenv from 'dotenv'; import userRoutes from './routes/users.js'; import healthRoutes from './routes/health.js'; -import otpRoutes from './routes/otp.js'; +import messageRoutes from './routes/message.js'; const app = Express(); dotenv.config(); @@ -17,7 +17,7 @@ app.use(cors()); app.use('/', healthRoutes); app.use('/', userRoutes); -app.use('/', otpRoutes); +app.use('/', messageRoutes); const CONNECTION_URL = process.env.CONNECTION_URL; const PORT = process.env.PORT; diff --git a/server/routes/message.js b/server/routes/message.js new file mode 100644 index 0000000..0062838 --- /dev/null +++ b/server/routes/message.js @@ -0,0 +1,9 @@ +import Express from 'express'; +import message from '../controllers/message'; + +const router = Express.Router(); + +router.post('/otp', message.sendOTP); +router.post('/message', message.sendMessage); + +export default router; diff --git a/server/routes/otp.js b/server/routes/otp.js deleted file mode 100644 index b73240e..0000000 --- a/server/routes/otp.js +++ /dev/null @@ -1,8 +0,0 @@ -import Express from 'express'; -import otp from '../controllers/otp'; - -const router = Express.Router(); - -router.post('/otp', otp.sendOTP); - -export default router; diff --git a/server/services/twilio.js b/server/services/twilio.js index f95cc5f..69eac16 100644 --- a/server/services/twilio.js +++ b/server/services/twilio.js @@ -3,7 +3,7 @@ import twilio from 'twilio'; const accountSid = process.env.TWILIO_ACCOUNT_SID; const authToken = process.env.TWILIO_AUTH_TOKEN; -const sendMessage = (phone, message) => { +const sendSMS = (phone, message) => { const client = twilio(accountSid, authToken); client.messages .create({ @@ -14,4 +14,4 @@ const sendMessage = (phone, message) => { .then((message) => console.log(message.sid)); }; -export default sendMessage; +export default sendSMS; -- cgit