Fix pop up

frontend/src/components/Login/Login.js

@@ -5,26 +5,40 @@ import { useNavigate } from "react-router-dom";
 import axios from "axios";
 
 function Login() {
-  const [error, setError] = useState(""); // State for error message
+  const [error, setError] = useState("");
   const navigate = useNavigate();
 
-  // Call backend CAS for login
+  // call backend CAS for login
+  // const handleLogin = () => {
+  //   const casLoginUrl = `${process.env.REACT_APP_API_URL}/login`;
+
+  //   // Redirect the user to the CAS login page via backend
+  //   window.location.href = casLoginUrl;
+  // };
+
   const handleLogin = async () => {
     const casLoginUrl = `${process.env.REACT_APP_API_URL}/login`;
-
+  
     try {
-      // Make a request to check if the user exists (Optional, if you want to verify before redirect)
-      const response = await axios.post(casLoginUrl);
-      
-      // If the login was successful, proceed with the CAS login redirection
-      window.location.href = casLoginUrl;
+      // Make an HTTP request (GET or POST) to your backend to check if it's successful
+      const response = await fetch(casLoginUrl, { method: 'GET' }); // or POST depending on your backend
+  
+      if (response.ok) {
+        // If the response is OK, proceed to redirect to the CAS login page
+        window.location.href = casLoginUrl;
+      } else {
+        // If the response is not OK (i.e., failed), you can show an error
+        const errorData = await response.json();
+        console.log("Error:", errorData.message);
+        setError("User Not Found!\n Please try again or login as guest."); // Optionally set an error message in the state
+      }
     } catch (err) {
-      // Handle errors (e.g., user not found)
-      setError("User Not Found!\nPlease try again or continue as guest.");
+      console.error("Network error or backend failure:", err);
+      setError("Network error or backend failure");
     }
   };
 
-  // Redirect to home page without a JWT token
+  // redirect to home page without a jwt token
   const handleGuest = () => {
     navigate("/home");
   };
@@ -33,6 +47,7 @@ function Login() {
   const closeErrorPopup = () => {
     setError(""); // Reset the error message
   };
+  
 
   return (
     <div className="container">
@@ -40,7 +55,6 @@ function Login() {
         <div className="text">VT Corps Directory Log In Page</div>
         <div className="underline"></div>
       </div>
-
       {/* Conditionally render error message */}
       {error && (
         <div className="error-popup">
@@ -58,7 +72,6 @@ function Login() {
           </div>
         </div>
       )}
-
       <div className="inputs">
         <div className="home-auth">
           <button className="login-button" onClick={handleLogin}>
@@ -71,6 +84,7 @@ function Login() {
           </button>
         </div>
       </div>
+      {/* <div className="forgot-password">Forgot Password <span> Click here</span></div> */}
       <div className="submitTerms">
         I agree to terms of use
         <img src={user_icon} alt="" />