Add fingerprint authentication for students

src/components/fingerprint-scanner.js

@@ -2,29 +2,40 @@ import { Box, Typography, Button } from "@mui/material";
 import FingerprintImg from "../images/fp_3.png";
 import { useAppContext } from "../context/appContext";
 import { useNavigate } from "react-router-dom";
-import { useEffect } from "react";
+import { useEffect,useState } from "react";
 import { socket } from "../utils/socket"
 
-const FingerprintScanner = ({ isStudent, setIsBioLogin, examId }) => {
+const FingerprintScanner = ({ isStudent, setIsBioLogin, examId, setPerson1, setMessage1, setOpen }) => {
   const { loginSupervisor, loginStudent } = useAppContext();
   const navigate = useNavigate();
+  console.log(setPerson1)
 
-  // TODO - call this when fingerprint scanning finished
   const handleLogIn = (fingerprint) => {
-    // TODO - Get fingerprint from the input scanner device
+    const typedArray = new Uint8Array(fingerprint['1']['buffer']);
+    const temp = [...typedArray];
+    const fingerData = {fingerprint:{bioSubType:fingerprint['1']['bioSubType'], buffer:{data: temp}}, eventId:Number(examId)}
     if (!isStudent) {
-      loginSupervisor(fingerprint);
+      loginSupervisor(fingerData);
+      console.log("Here");
     } else {
-      loginStudent(fingerprint);
+      const data = loginStudent(fingerData);
+      console.log(data);
+      setPerson1(data.person);
+      setMessage1(data.message);
+      setOpen(true);
     }
   };
 
   useEffect(() => {
     socket.on("fingerprintData", async (fingerprintData) => {
-      handleLogIn(fingerprintData)
+      if (fingerprintData.success === undefined){
+        handleLogIn(fingerprintData)
+
+      }else{
+        console.log("fingerprint not successfull")
+      }
     });
 
-    requestFingerprint()
   }, []);
 
   async function requestFingerprint() {
@@ -41,6 +52,17 @@ const FingerprintScanner = ({ isStudent, setIsBioLogin, examId }) => {
         alt="fingerprint"
         style={{ margin: "10%" }}
       />
+      {isStudent && (
+        <Button
+          variant="contained"
+          sx={submitButtonStyle}
+          onClick={
+            requestFingerprint
+          }
+        >
+          SCAN FINGERPRINT
+        </Button>
+      )}
       {isStudent && (
         <Button
           variant="contained"
@@ -86,3 +108,10 @@ const formContainerStyle = {
   backgroundColor: "#FFFFFF",
   borderRadius: "3%",
 };
+
+const submitButtonStyle = {
+  mt: 3,
+  mb: 2,
+  margin: 2,
+  width: "75%",
+};

src/components/student-details-modal.js

@@ -73,7 +73,7 @@ const StudentDetailsModal = ({ person, open, onClose, message }) => {
             />
             <div sx={detailsContainerStyles}>
               <Typography variant="h5">{person.name}</Typography>
-              <Typography variant="h6">{person.index}</Typography>
+              <Typography variant="h6">{person.index_number}</Typography>
             </div>
           </Box>
         )}

src/context/appContext.js

@@ -117,26 +117,34 @@ const AppProvider = ({ children }) => {
 
     try {
       const { data } = await authFetch.post(
-        "/student/exam-attendance-attendance/mark-exam-attendance",
-        logInData
+        "/student/exam-attendance/mark-exam-attendance",
+          logInData
       );
-
+      return {
+        message:null,
+        person:data.data
+      };
       // TODO
-      if (true) {
-        dispatch({
-          type: LOGIN_STUDENT_SUCCESS,
-        });
-        successToast("Login successful");
-      } else {
-        errorToast("Login failed");
-      }
+      // if (true) {
+      //   dispatch({
+      //     type: LOGIN_STUDENT_SUCCESS,
+      //   });
+      //   successToast("Login successful");
+      // } else {
+      //   errorToast("Login failed");
+      // }
     } catch (error) {
+      // errorToast("Login failed");
       dispatch({
         type: LOGIN_STUDENT_ERROR,
         payload: {
           msg: error.response.data.msg,
         },
       });
+      return {
+        message:"Login Failed!",
+        person:null
+      };
     }
   };
 

src/index.js

@@ -7,11 +7,10 @@ import { AppProvider } from './context/appContext'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <AppProvider>
       <App />
     </AppProvider>
-  </React.StrictMode>
+
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/attendance-marking-page.js

@@ -18,15 +18,22 @@ export default function AttendanceMarkingPage({isStudent}) {
   const handleFlip = () => {
     setIsBioLogin(!isBioLogin)
   }
-
-  const person = {
-      name:"Yasiru Lakshan",
-      index:"190331A",
-      profilePicture:profileImage
-  }
+  const [person, setPerson] = useState(null);
+  const [message, setMessage] = useState(null);
+  // const person = {
+  //     name:"Yasiru Lakshan",
+  //     index:"190331A",
+  //     profilePicture:profileImage
+  // }
+  console.log(person, message)
 
   const location = useLocation();
-
+  const setPersonFunc = (param) => {
+    setPerson(param);
+  }
+  const setMessageFunc = (param) => {
+    setMessage(param);
+  }
   return (
     <Box style={containerStyle}>
       <Typography variant="h3" style={headingStyle}>
@@ -35,9 +42,9 @@ export default function AttendanceMarkingPage({isStudent}) {
         {!isBioLogin ? (
           <CustomLoginPage handleFlip={handleFlip} setOpen={setOpen} examId={location.state.examId}/>
         ) : (
-          <FingerprintScanner isStudent={true} setIsBioLogin={handleFlip} setOpen={setOpen} examId={location.state.examId}/>
+          <FingerprintScanner isStudent={true} setIsBioLogin={handleFlip} setOpen={(state)=>{setOpen(state)}} examId={location.state.examId} setPerson1={setPersonFunc} setMessage1={setMessageFunc}/>
         )}
-      <StudentDetailsModal person={person} open={open} onClose={onModalClose}/>
+      <StudentDetailsModal message={message} open={open} onClose={onModalClose} person={person}/>
     </Box>
 
   );

src/utils/socket.js

@@ -1,5 +1,4 @@
 import { io } from "socket.io-client";
 
-const URL = process.env.REACT_APP_SOCKET_HOST;
-
+const URL = "http://localhost:7291";
 export const socket = io(URL);