Merge pull request #25 from JBB0807/login-sprint4

improve login page, adapt the style from the home page, remove unecce…

src/pages/LoginPage.jsx

@@ -29,6 +29,10 @@ const LoginPage = () => {
           <SignInForm />
           <div className="overlay-container">
             <div className="overlay">
+              {/* Cyberpunk grid and scanline effects */}
+              <div className="grid-background"></div>
+              <div className="scanline"></div>
+              
               <div className="overlay-panel overlay-left">
                 <h1>Welcome Back!</h1>
                 <p>Please login with your personal info</p>

src/pages/SignIn.jsx

@@ -20,31 +20,33 @@ function SignInForm() {
     evt.preventDefault();
 
     const { qrNumber, password } = state;
-    console.log(`You are loggind in with email: ${qrNumber} and password: ${password}`);
+    console.log(
+      `You are loggind in with email: ${qrNumber} and password: ${password}`
+    );
 
     console.log("Submitting login request with state:", state);
     fetch(`${authUrl}/auth/student/login`, {
       method: "POST",
       headers: {
-      "Content-Type": "application/json",
+        "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();
+        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 = "/";
+        console.log("Success:", data);
+        window.location.href = "/";
       })
       .catch((error) => {
-      console.error("Error occurred during login:", error);
-      alert("Login failed!");
+        console.error("Error occurred during login:", error);
+        alert("Login failed!");
       });
   };
 
@@ -52,11 +54,6 @@ function SignInForm() {
     <div className="form-container sign-in-container">
       <form onSubmit={handleOnSubmit}>
         <h1>Student</h1>
-        {/* <div className="social-container">
-          <a href="#" className="social">
-            <i className="fab fa-google-plus-g" />
-          </a>
-        </div> */}
 
         <input
           type="number"

src/pages/SignUp.jsx

@@ -40,33 +40,11 @@ function SignUpForm() {
       <form onSubmit={handleOnSubmit}>
         <h1>Instructor</h1>
         <div className="social-container">
-          <a href="#" className="social" onClick={googleAuth}>
+          <a href="#" className="social google-signin" onClick={googleAuth}>
             <i className="fab fa-google-plus-g" />
           </a>
         </div>
-        <span>or use your email for registration</span>
-        <input
-          type="text"
-          name="name"
-          value={state.name}
-          onChange={handleChange}
-          placeholder="Name"
-        />
-        <input
-          type="email"
-          name="email"
-          value={state.email}
-          onChange={handleChange}
-          placeholder="Email"
-        />
-        <input
-          type="password"
-          name="password"
-          value={state.password}
-          onChange={handleChange}
-          placeholder="Password"
-        />
-        <button>Sign in</button>
+        <p>Sign in with your Google account</p>
       </form>
     </div>
   );