diff --git a/.env b/.env index 0d0092a..ddf3a43 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ -VITE_AUTH_URL="http://localhost:8080/auth/google" -#VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev/auth/google" \ No newline at end of file +#VITE_AUTH_URL="http://localhost:8080" +VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev" \ No newline at end of file diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..7dc9c2c --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +VITE_AUTH_URL="http://localhost:8080" +#VITE_AUTH_URL="https://byte-camp-auth-service.fly.dev" \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index f507995..537cb27 100644 --- a/src/components/Navbar.jsx +++ b/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 = () => { - // Implement client-side logout without calling the backend - // 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"); + async function handleLogout() { + window.open(`${authUrl}/auth/logout`, "_self"); }; 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) { diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx index 9976eb5..ff2372e 100644 --- a/src/pages/SignIn.jsx +++ b/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; - alert(`You are login with email: ${email} and password: ${password}`); + const { assignmentId, password } = state; + console.log(`You are loggind in with email: ${assignmentId} and password: ${password}`); - for (const key in state) { - setState({ - ...state, - [key]: "", + console.log("Submitting login request with state:", state); + fetch(`${authUrl}/auth/student/login`, { + method: "POST", + 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() { */} { 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 (