Group F - Sprint 3 - Token Expiry, Notifications & Renewal

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.8.2",
     "bootstrap": "^5.3.5",
+    "client": "file:",
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^19.0.0",
@@ -42,6 +43,6 @@
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
-        ]
+    ]
   }
 }

client/src/pages/Home.js

@@ -34,10 +34,10 @@ function Home() {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log(`${formData.role} sign in attempted`, formData);
 
     const { email: ouEmail, password, role } = formData;
 
+
     if (!ouEmail || !password || !role) {
       return Swal.fire({
         icon: "warning",
@@ -61,25 +61,50 @@ function Home() {
       const data = await response.json();
 
       if (response.ok) {
-        Swal.fire({
-          icon: "success",
-          title: "Login Successful 🌟",
-          text: `Welcome back, ${role}!`,
-        });
-
-        // Redirect user based on role
-        if (role === "coordinator") {
-          navigate("/coordinator-dashboard");
-        } else if (role === "student") {
-          navigate("/student-dashboard");
-        } else if (role === "supervisor") {
+        const user = data.user;
+        if(role === "student"){
+           // Store only required fields
+        const limitedUserInfo = {
+          fullName: user.fullName,
+          id: user._id,
+          email:user.ouEmail
+        };
+
+        localStorage.setItem("ipmsUser", JSON.stringify(limitedUserInfo));
+        navigate("/student-dashboard");
+        }else if(role === "supervisor"){
+          Swal.fire({
+            icon: "success",
+            title: "Login Successful 🌟",
+            text: `Welcome back, ${role}!`,
+          });
           navigate("/supervisor-dashboard");
+        }else{
+          Swal.fire({
+            icon: "success",
+            title: "Login Successful 🌟",
+            text: `Welcome back, ${role}!`,
+          });
+          navigate("/coordinator-dashboard");
         }
+
+
+
+        // Swal.fire({
+        //   icon: "success",
+        //   title: "Login Successful",
+        //   text: `Welcome back, `,
+        // });
+
+
       } else {
         Swal.fire({
           icon: "error",
           title: "Login Failed",
-          text: data.message || "Something went wrong ",
+          html: data.message + " " + 
+        (data.renewalLink 
+         ? `Please click <a href="${data.renewalLink}" target="_blank" rel="noopener noreferrer">here</a> to request a new token.` 
+         : "Something went wrong."),
         });
       }
     } catch (error) {
@@ -126,6 +151,7 @@ function Home() {
                         role: r,
                       })
                     }
+
                   >
                     <Icon />
                     <p className="role-label">

client/src/pages/ProtectedRouteStudent.jsx

@@ -0,0 +1,16 @@
+// src/components/ProtectedRouteStudent.js
+import React from "react";
+import { Navigate } from "react-router-dom";
+
+const ProtectedRouteStudent = ({ children }) => {
+    const user = JSON.parse(localStorage.getItem("ipmsUser"));
+
+    // Check if user info is missing
+    if (!user || !user.id || !user.fullName) {
+      return <Navigate to="/" replace />;
+    }
+
+    return children;
+  };
+
+export default ProtectedRouteStudent;

client/src/pages/SignUp.js

@@ -15,6 +15,7 @@ function SignUp() {
   const [step, setStep] = useState(1);
   const [fullName, setFullName] = useState("");
   const [ouEmail, setOuEmail] = useState("");
+  const [soonerId, setSoonerId] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
@@ -61,12 +62,22 @@ function SignUp() {
       return;
     }
 
+    if (role=== "student" && !/^\d{9}$/.test(soonerId)) {
+      Swal.fire({
+        icon: "error",
+        title: "Invalid Sooner ID",
+        text: "Sooner ID must be a 9-digit number.",
+      });
+      return;
+    }
+
     try {
       const response = await axios.post(
         `${process.env.REACT_APP_API_URL}/api/token/request`,
         {
           fullName,
           ouEmail,
+          soonerId : role === "student" ? soonerId : "",
           password,
           semester,
           academicAdvisor: role === "student" ? academicAdvisor : "",
@@ -88,6 +99,7 @@ function SignUp() {
       // Clear form
       setFullName("");
       setOuEmail("");
+      setSoonerId("");
       setPassword("");
       setConfirmPassword("");
       setSemester("");
@@ -100,13 +112,22 @@ function SignUp() {
     } catch (error) {
       console.error("Error creating user:", error);
 
-      if (error.response && error.response.status === 400) {
+      if (error.response && error.response.status === 401) {
         Swal.fire({
           icon: "error",
           title: "Email Already Exists",
           text: "The provided email ID is already registered. Try logging in.",
         });
-      } else {
+      } 
+      else if(role=== "student" && error.response && error.response.status === 402){
+        Swal.fire({
+          icon: "error",
+          title: "Sooner ID Already Exists",
+          text: "The provided Sooner ID is already registered.",
+        });
+      }
+      else {
+        console.log("Error response:", error.response);
         Swal.fire({
           icon: "error",
           title: "Something went wrong",
@@ -255,6 +276,19 @@ function SignUp() {
                 required
               />
             </div>
+
+            {role === "student" && <div className="form-group">
+              <label htmlFor="soonerId">Sooner ID</label>
+              <input
+                type="text"
+                id="soonerId"
+                value={soonerId}
+                onChange={(e) => setSoonerId(e.target.value)}
+                placeholder="Enter your 9-digit Sooner ID"
+                required
+              />
+            </div>}
+
             <div className="password-row">
               <div className="form-group password-col">
                 <label htmlFor="password">New password</label>

client/src/pages/StudentDashboard.jsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import "../styles/StudentDashboard.css"; // Make sure you create this CSS
+
+const StudentDashboard = () => {
+  const navigate = useNavigate();
+
+  const user = JSON.parse(localStorage.getItem("ipmsUser"));
+  const ouEmail = user?.email;
+  const [approvalStatus, setApprovalStatus] = useState("not_submitted");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await fetch(`${process.env.REACT_APP_API_URL}/api/student`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ ouEmail }),
+        });
+
+        const data = await res.json();
+        setApprovalStatus(data.approvalStatus);
+      } catch (err) {
+        console.error("Error fetching internship data", err);
+      }
+    };
+
+    if (ouEmail) {
+      fetchData();
+    }
+  }, [ouEmail]);
+  console.log(approvalStatus);
+
+  return (
+    <div className="student-dashboard">
+      <div className="dashboard-header">
+        <h2>Welcome, {user.fullName}</h2>
+      </div>
+
+      <div className="dashboard-card">
+        {/* ------ FORM A1 Card ------ */}
+        <div className="card-section">
+          <div className="card-content">
+            <h3>Request Internship (FORM A1)</h3>
+            <p>Track your internship journey</p>
+
+            {approvalStatus === "not_submitted" && (
+              <p style={{ fontSize: "0.85rem", color: "#888" }}>
+                You have not submitted the form yet
+              </p>
+            )}
+
+            {(approvalStatus === "submitted" ||
+              approvalStatus === "pending manual review") && (
+              <p style={{ fontSize: "0.85rem", color: "#888" }}>
+                Your form is submitted and under review
+              </p>
+            )}
+
+            {approvalStatus === "approved" && (
+              <p style={{ fontSize: "0.85rem", color: "green" }}>Approved</p>
+            )}
+          </div>
+
+          <button
+            className="card-button"
+            onClick={() => {
+              if (
+                approvalStatus === "draft" ||
+                approvalStatus === "not_submitted"
+              ) {
+                navigate("/a1-form");
+              }
+            }}
+            disabled={
+              approvalStatus !== "draft" && approvalStatus !== "not_submitted"
+            }
+            style={{
+              backgroundColor:
+                approvalStatus !== "draft" && approvalStatus !== "not_submitted"
+                  ? "#ccc"
+                  : "",
+              cursor:
+                approvalStatus !== "draft" && approvalStatus !== "not_submitted"
+                  ? "not-allowed"
+                  : "pointer",
+            }}
+          >
+            {approvalStatus === "approved" ? "Track" : "Request Internship"}
+          </button>
+        </div>
+
+        {/* ------ FORM A2 Card ------ */}
+        <div className="card-section">
+          <div className="card-content">
+            <h3>Weekly Report (Form A2)</h3>
+
+            {approvalStatus === "not_submitted" && (
+              <p style={{ fontSize: "0.85rem", color: "#888" }}>
+                Please fill your Form A1 first
+              </p>
+            )}
+
+            {approvalStatus === "draft" && (
+              <p style={{ fontSize: "0.85rem", color: "#888" }}>
+                Finish your Form A1 first
+              </p>
+            )}
+
+            {(approvalStatus === "submitted" ||
+              approvalStatus === "pending manual review") && (
+              <p style={{ fontSize: "0.85rem", color: "#888" }}>
+                Wait for your Form A1 to be approved
+              </p>
+            )}
+          </div>
+
+          <button
+            className="card-button"
+            disabled={approvalStatus !== "approved"}
+            onClick={() => {
+              if (approvalStatus === "approved") {
+                navigate("/weekly-report");
+              }
+            }}
+            style={{
+              backgroundColor: approvalStatus !== "approved" ? "#ccc" : "",
+              cursor: approvalStatus !== "approved" ? "not-allowed" : "pointer",
+            }}
+          >
+            Request
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StudentDashboard;