Skip to content

Commit 7d82220

Browse files
Vansh-BaghelVansh-Baghel
committed
Merge remote-tracking branch 'origin/verify' into verify
2 parents e52f3a3 + 05649ca commit 7d82220

File tree

9 files changed

+407
-32
lines changed

9 files changed

+407
-32
lines changed

‎server/package-lock.json‎

Lines changed: 44 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎server/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"description": "",
55
"main": "index.js",
66
"dependencies": {
7+
"@sendgrid/mail": "^7.7.0",
78
"axios": "^0.26.0",
89
"bcrypt": "^5.1.0",
910
"body-parser": "^1.19.2",

‎server/services/smsAPI.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
const TWILIO_ACCOUNT_SID = process.env.TWILIO_ACCOUNT_SID;
22
const AUTH_TOKEN = process.env.AUTH_TOKEN;
33
const SERVICE_ID = process.env.SERVICE_ID;
4+
const sgMail = require('@sendgrid/mail')
5+
sgMail.setApiKey(process.env.SENDGRID_API_KEY)
6+
47

58
console.log("Twilio params", {
69
TWILIO_ACCOUNT_SID,
@@ -28,4 +31,22 @@ exports.verifyOTP = (phone, code) => {
2831
.then(resolve)
2932
.catch(reject);
3033
})
34+
}
35+
36+
exports.sendMail = () => {
37+
const msg = {
38+
to: '[email protected]', // Change to your recipient
39+
from: '[email protected]', // Change to your verified sender
40+
subject: 'Sending with SendGrid is Fun',
41+
text: 'and easy to do anywhere, even with Node.js',
42+
html: '<strong>and easy to do anywhere, even with Node.js</strong>',
43+
}
44+
sgMail
45+
.send(msg)
46+
.then(() => {
47+
console.log('Email sent')
48+
})
49+
.catch((error) => {
50+
console.error(error)
51+
})
3152
}

‎src/components/TagList.jsx‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button } from 'flowbite-react';
12
import { useState } from 'react';
23

34
const TagList = () => {
@@ -22,32 +23,35 @@ const TagList = () => {
2223
};
2324

2425
return (
25-
<div className="flex flex-wrap gap-2 w-1/4">
26+
<div className="flex flex-col gap-2 w-[100%] px-[30px]">
2627

27-
<input
28-
type="text"
29-
value={inputValue}
30-
onChange={handleInputChange}
31-
onKeyDown={handleInputKeyDown}
32-
placeholder='Enter the input tag'
33-
className="block w-full rounded-md border-0 py-1.5 pl-4 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300"
34-
/>
35-
{tags.map((tag, index) => (
36-
<div
37-
key={index}
38-
className="flex items-center px-3 py-1 bg-slate-500 text-white rounded-md cursor-pointer"
39-
>
40-
<span className="mr-2">{tag}</span>
41-
<button
42-
className="text-sm font-bold text-white rounded-full "
43-
onClick={() => handleRemoveTag(index)}
44-
>
45-
&times;
46-
</button>
47-
</div>
48-
))}
28+
<div className='flex flex-row gap-x-[10px] items-center py-[10px]'>
29+
<input
30+
type="text"
31+
value={inputValue}
32+
onChange={handleInputChange}
33+
onKeyDown={handleInputKeyDown}
34+
placeholder='Enter the input tag'
35+
className="block rounded-md text-gray-900 border-[1px] border-[#DCE3EE] dark:border-[#232830] flex-grow"
36+
/>
37+
<Button className='ml-auto'>Share</Button>
38+
</div>
39+
40+
<div className='w-full h-auto flex flex-col flex-grow gap-y-[10px] pb-[20px]'>
41+
{tags.map((tag, index) => {
42+
return (
43+
<div className='flex flex-row items-center'>
44+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 mr-[8px]">
45+
<path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
46+
</svg>
47+
<div>{tag}</div>
48+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 ml-auto">
49+
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
50+
</svg>
51+
</div>
52+
)})}
53+
</div>
4954
</div>
50-
);
51-
};
55+
)}
5256

5357
export default TagList;

‎src/components/imageVerificationSingleEmployee.jsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React, { useState } from "react";
2+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3+
import { faImage } from "@fortawesome/free-solid-svg-icons";
4+
import Loader from "./loader";
5+
6+
const ImageVerificationSingleEmployee = () => {
7+
const [image, setImage] = useState(null);
8+
const [value, setValue] = useState(false);
9+
const [loading, setLoading] = useState(true);
10+
11+
const handleImageChange = (event) => {
12+
setImage(URL.createObjectURL(event.target.files[0]));
13+
};
14+
15+
// if(loading){
16+
// return <Loader></Loader>
17+
// }
18+
19+
return (
20+
<div className="flex flex-col items-center">
21+
<div className="relative mt-4 w-64 h-64">
22+
<input
23+
type="file"
24+
className="absolute inset-0 opacity-0 w-full h-full cursor-pointer bg-yellow-300"
25+
onChange={handleImageChange}
26+
/>
27+
{image ? (
28+
<img
29+
src={image}
30+
alt="Selected"
31+
className="w-full h-full object-cover"
32+
/>
33+
34+
) : (
35+
<div
36+
className="w-full h-full border-2 border-dashed border-[#DBE3EE] dark:border-gray-400 bg-[#F6F9FC] dark:bg-[#1F232D] rounded-lg flex justify-center items-center cursor-pointer"
37+
onClick={() => document.getElementById("imageUpload").click()}
38+
>
39+
<FontAwesomeIcon
40+
icon={faImage}
41+
size="3x"
42+
className="text-gray-400"
43+
/>
44+
</div>
45+
)}
46+
</div>
47+
<div className="mt-4">
48+
{image ? (
49+
<div>
50+
<div>
51+
{value ? (
52+
<div className=" border-2 border-dashed border-red-400 text-red-400 p-16 rounded-lg bg-[#F6F9FC] dark:bg-[#1F232D]">
53+
Employer image did not match the identity card image
54+
</div>
55+
) : (
56+
<div className=" border-2 border-dashed border-green-500 text-green-500 p-16 rounded-lg bg-[#F6F9FC] dark:bg-[#1F232D] ">
57+
Woah! the employee image matched with the identity card image
58+
</div>
59+
)}
60+
</div>
61+
</div>
62+
) : (
63+
<div>
64+
<div className="flex border-2 border-dashed border-[#DBE3EE] dark:border-gray-400 p-16 rounded-lg bg-[#F6F9FC] dark:bg-[#1F232D] text-[#9BA3AF] justify-center items-center">
65+
Upload an image to perform facial verification of employee
66+
</div>
67+
</div>
68+
)}
69+
</div>
70+
{/* <button
71+
onClick={() => {
72+
setLoading(false);
73+
// console.log(value);
74+
}}
75+
>
76+
Change color
77+
</button> */}
78+
</div>
79+
);
80+
};
81+
82+
export default ImageVerificationSingleEmployee;

‎src/components/otpVerificationSingleEmployee.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import React, { useState } from 'react'
22
import { Button } from 'flowbite-react'
33
import OtpInput from 'react-otp-input';
44

5-
const OTPVerificationSingleEmployee = ({otp, setOtp, verifyOTPHandler}) => {
5+
const OTPVerificationSingleEmployee = ({otp, setOtp, verifyOTPHandler, mobileNumber}) => {
6+
7+
console.log(otp, setOtp, mobileNumber)
68

79
return (
810
<div className='flex flex-col mt-[40px]'>
911
<div>
1012
<span className='text-[20px]'>We have sent you an OTP on</span><br/>
11-
<span className='text-gray-600 dark:text-gray-200 mt-[10px]'>+91 9137357003</span>
13+
<span className='text-gray-600 dark:text-gray-200 mt-[10px]'>+91 {mobileNumber}</span>
1214
</div>
1315

1416
<div className='flex flex-col justify-center items-center'>

‎src/pages/byLink.jsx‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,41 @@
1+
import TagList from '@/components/TagList'
2+
import { useAuth } from '@/context/AuthContext'
3+
import { Button } from 'flowbite-react'
14
import React from 'react'
25

36
const ByLink = () => {
7+
const { profile } = useAuth()
8+
console.log(profile)
49
return (
5-
<div>
6-
Verify By Link
10+
<div className='w-[70%] dark:text-white dark:bg-dark2 text-dark3'>
11+
<div className='flex flex-col justify-center text-[26px] font-medium h-[80px] pl-[40px] border-b-[1px] dark:border-[#232830] border-[#DCE3EE]'>
12+
<span></span>Verify by link
13+
<div className='text-[14px] font-normal'>send the intrested employee this link to verify their identity and background check</div>
14+
</div>
15+
16+
<div className='flex flex-row items-center w-[70%] mx-auto h-[70px] mt-[30px] rounded-lg border-[1px] border-[#DCE3EE] dark:border-[#232830]'>
17+
<div className='flex justify-center items-center w-[10%] h-full border-r-[1px] border-[#DCE3EE] dark:border-[#232830]'>
18+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#A9A9A9" className="w-7 h-7">
19+
<path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
20+
</svg>
21+
</div>
22+
<div className='flex flex-row items-center text-[16px] font-medium px-[20px] text-[#090D11] dark:text-[#D9D9D9]'>
23+
https://localhost:3000/verifyByLink/{profile.gstin}
24+
</div>
25+
<Button className='ml-auto mr-[25px]'>
26+
Copy Link
27+
</Button>
28+
</div>
29+
30+
<div className='flex flex-col w-[50%] max-h-[400px] mt-[40px] rounded-lg border-[1px] border-[#DCE3EE] dark:border-[#232830] mx-auto pb-20px box-border'>
31+
<div className='py-[15px] px-[30px] border-b-[1px] border-[#DCE3EE] dark:border-[#232830] '>
32+
<div className='text-[16px] font-medium'>Share this link Via Gmail</div>
33+
<div className='text-[12px]'>enter your friends' email address to send them link</div>
34+
</div>
35+
<div className='overflow-scroll'>
36+
<TagList/>
37+
</div>
38+
</div>
739
</div>
840
)
941
}

‎src/pages/singleEmployee.jsx‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,57 @@
11
import EmployeeVerificationForm from '@/components/employeeVerificationForm'
2+
import ImageVerificationSingleEmployee from '@/components/imageVerificationSingleEmployee'
23
import OTPVerificationSingleEmployee from '@/components/otpVerificationSingleEmployee'
4+
import { SERVER_URL } from '@/constants/config'
5+
import axios from 'axios'
36
import React, { useState } from 'react'
7+
import { toast } from 'react-toastify'
48

59
const SingleEmployee = () => {
610
const [stage, setStage] = useState('details') //details || verifyOTP || verifyImage
711
const [employeeData, setEmployeeData] = useState({})
12+
// const [employeeData, setEmployeeData] = useState({name: 'rupesh', gender: 'male', phone: '9137357003'})
813
const [otp, setOtp] = useState('');
14+
const [mobileNumber, setMobileNumber] = useState(null)
915

10-
const onProceedHandler = (formData) => {
16+
const onProceedHandler = async (formData) => {
1117
setEmployeeData(formData)
12-
setStage('verifyOTP')
18+
const mob = await getMobileNumberFromCardNumber(formData.cardNumber)
19+
setMobileNumber(mob)
20+
// sendOTP(mob)
21+
sendOTP(9137357003)
22+
// setStage('verifyOTP')
23+
}
24+
25+
const getMobileNumberFromCardNumber = async (cardNumber) => {
26+
// setMobileNumber(8383238282)
27+
return 8383238282
28+
}
29+
30+
const sendOTP = async (phoneNumber) => {
31+
axios
32+
.post(`${SERVER_URL}/apis/sendOTP`, { phone: phoneNumber })
33+
.then(() => setStage("verifyOTP"))
34+
.catch((err) => {
35+
console.error(err);
36+
toast.error("Some error sending OTP")
37+
});
1338
}
1439

1540
const verifyOTPHandler = () => {
1641
console.log(otp)
42+
43+
const phone = 9137357003
44+
axios
45+
.post(`${SERVER_URL}/apis/verifyOTP`, { phone: phone, code: otp })
46+
.then((res) => {
47+
if(res.data.success){
48+
toast.success("Verified OTP successfuly !");
49+
// props.postVerification();
50+
} else {
51+
toast.error("Invalid OTP !");
52+
}
53+
})
54+
1755
setStage('verifyImage')
1856
}
1957

@@ -102,7 +140,8 @@ const SingleEmployee = () => {
102140

103141
<div className='w-[60%] mx-auto'>
104142
{stage == 'details' && <EmployeeVerificationForm onProceedHandler={onProceedHandler}/>}
105-
{stage == 'verifyOTP' && <OTPVerificationSingleEmployee otp={otp} setOtp={setOtp} verifyOTPHandler={verifyOTPHandler}/>}
143+
{stage == 'verifyOTP' && <OTPVerificationSingleEmployee otp={otp} setOtp={setOtp} verifyOTPHandler={verifyOTPHandler} mobileNumber={mobileNumber}/>}
144+
{stage == 'verifyImage' && <ImageVerificationSingleEmployee/>}
106145
</div>
107146
</div>
108147
)

0 commit comments

Comments
 (0)