Merge pull request #11 from JBB0807/auth

Logout calls back-end, auth for student, bug fix

.env

@@ -1,2 +1,2 @@
-VITE_AUTH_URL="http://localhost:8080/auth/google"
+#VITE_AUTH_URL="http://localhost:8080"
-#VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev/auth/google"
+VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"

.env.development

@@ -0,0 +1,2 @@
+VITE_AUTH_URL="http://localhost:8080"
+#VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev"

src/components/Navbar.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import "../scss/styles.scss";
 import "../scss/components/_navbar.scss";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+const authUrl = import.meta.env.VITE_AUTH_URL;
 
 const Navbar = () => {
   const [glitchEffect, setGlitchEffect] = useState(false);
@@ -9,23 +11,9 @@ const Navbar = () => {
   const [user, setUser] = useState(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const menuRef = useRef(null);
-  const navigate = useNavigate();
 
-  const handleLogout = () => {
+  async function handleLogout() {
-    // Implement client-side logout without calling the backend
+    window.open(`${authUrl}/auth/logout`, "_self");
-    // This clears the user state in the frontend
-    setUser(null);
-
-    // Clear any authentication cookies if they exist
-    document.cookie.split(";").forEach((cookie) => {
-      const [name] = cookie.trim().split("=");
-      document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
-    });
-
-    // Redirect to home page
-    navigate("/");
-
-    console.log("Logged out successfully");
   };
 
   useEffect(() => {
@@ -51,7 +39,7 @@ const Navbar = () => {
 
     document.addEventListener("mousedown", handleClickOutside);
     async function fetchUser() {
-      const res = await fetch("http://localhost:8080/auth/current_user", {
+      const res = await fetch(`${authUrl}/auth/current_user`, {
         credentials: "include", // very important
       });
       if (res.ok) {

src/pages/SignIn.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import "@fortawesome/fontawesome-free/css/all.min.css";
 
+const authUrl = import.meta.env.VITE_AUTH_URL;
+
 function SignInForm() {
   const [state, setState] = React.useState({
-    email: "",
+    assignmentID: "",
     password: "",
   });
   const handleChange = (evt) => {
@@ -17,15 +19,33 @@ function SignInForm() {
   const handleOnSubmit = (evt) => {
     evt.preventDefault();
 
-    const { email, password } = state;
+    const { assignmentId, password } = state;
-    alert(`You are login with email: ${email} and password: ${password}`);
+    console.log(`You are loggind in with email: ${assignmentId} and password: ${password}`);
 
-    for (const key in state) {
+    console.log("Submitting login request with state:", state);
-      setState({
+    fetch(`${authUrl}/auth/student/login`, {
-        ...state,
+      method: "POST",
-        [key]: "",
+      headers: {
+      "Content-Type": "application/json",
+      },
+      body: JSON.stringify(state),
+      credentials: "include",
+    })
+      .then((response) => {
+      console.log("Received response:", response);
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.json();
+      })
+      .then((data) => {
+      console.log("Success:", data);
+      window.location.href = "/";
+      })
+      .catch((error) => {
+      console.error("Error occurred during login:", error);
+      alert("Login failed!");
       });
-    }
   };
 
   return (
@@ -39,10 +59,10 @@ function SignInForm() {
         </div> */}
 
         <input
-          type="email"
+          type="assignmentId"
-          placeholder="Student Name"
+          placeholder="Assignment ID"
-          name="email"
+          name="assignmentId"
-          value={state.email}
+          value={state.assignmentId}
           onChange={handleChange}
         />
         <input

src/pages/SignUp.jsx

@@ -19,9 +19,9 @@ function SignUpForm() {
   const handleOnSubmit = (evt) => {
     evt.preventDefault();
 
-    const { name, email, password } = state;
+    const { assignmentID, password } = state;
     alert(
-      `You are signed in with name: ${name} email: ${email} and password: ${password}`
+      `You are signed in with assignmentID: ${assignmentID} and password: ${password}`
     );
 
     for (const key in state) {
@@ -34,7 +34,7 @@ function SignUpForm() {
 
   const googleAuth = () => {
     
-    window.open(authUrl, "_self");
+    window.open(`${authUrl}/auth/google`, "_self");
   };
 
   return (