Changeset 79a0317 for imaps-frontend/src/pages/Login

Timestamp:

01/21/25 03:08:24 (4 days ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

0c6b92a

Message:

F4 Finalna Verzija

Location:

imaps-frontend/src/pages/Login

Files:

• Login.jsx (modified) (5 diffs)
• Login.module.css (modified) (7 diffs)

imaps-frontend/src/pages/Login/Login.jsx

@@ -6 +6 @@
 import HttpService from "../../scripts/net/HttpService.js";
 import {useAppContext} from "../../components/AppContext/AppContext.jsx";
-import config from "../../scripts/net/netconfig.js";
+import config, {API_BASE_URL} from "../../scripts/net/netconfig.js";
+import google_icon from "../../assets/Logo-google-icon-PNG.png"
+import github_icon from "../../assets/github-mark-white.png";
+import { v4 as uuidv4 } from 'uuid';
 
 const LoginPage = () => {
@@ -26 +29 @@
     const handleLogin = async () => {
         const httpService = new HttpService();
-        return httpService.post(config.auth.login, payload)
-
+        return httpService.post(config.auth.login, payload);
     };
-
 
     const login = async (e) => {
@@ -37 +38 @@
             .then(resp => {
                 if (resp.token) {
-                    navigate(targetPath)
+                    navigate(targetPath);
                     localStorage.setItem("token", resp.token);
                     setUsername(resp.username);
                     setIsAuthenticated(true);
-                    console.log("ROLES",resp.roles)
+                    console.log("ROLES", resp.roles);
                 } else {
                     setError("Invalid username or password.");
@@ -47 +48 @@
             }).catch(reason => {
             console.error("Login failed", reason);
-            setError("Login failed. Please try again.")
-        })
+            setError("Login failed. Please try again.");
+        });
+    };
 
-        // fetch("http://localhost:8080/api/auth/login", {
-        //   method: "POST",
-        //   headers: {
-        //     "Content-Type": "application/json",
-        //   },
-        //   body: JSON.stringify(payload),
-        // })
-        //   .then((response) => {
-        //     if (!response.ok) {
-        //       throw new Error("Login failed: resp = " + response.statusText);
-        //     }
-        //     return response.json();
-        //   })
-        //   .then((data) => {
-        //     if (data.token) {
-        //       navigate(targetPath);
-        //       handleLogin(data);
-        //     } else {
-        //       setError("Invalid username or password.");
-        //     }
-        //   })
-        //   .catch((error) => {
-        //     console.error("Login failed", error);
-        //     setError("Login failed. Please try again.");
-        //   });
+    const continueWithGitHub = async () => {
+        const httpService = new HttpService();
+        httpService.setResponseType('text');
+        const state = await httpService.get(config.auth.oauth.github.state)
+        const clientId = 'Iv23liqzhX5wMYNDHtnz';
+        const redirectUri = encodeURI(`${API_BASE_URL}/oauth/callback/github`);
+
+        const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${encodeURI(clientId)}&redirect_uri=${redirectUri}&state=${encodeURI(state)}&scope=user:email`;
+
+        window.location.href = githubAuthUrl;
+
+    };
+
+    const continueWithGoogle = async () => {
+        console.log("Continue with Google");
+        const httpService = new HttpService();
+        httpService.setResponseType('text');
+        const state = await httpService.get(config.auth.oauth.github.state)
+        const clientId = '1024418489231-ml40ukvqcg9ad1h5ejor5dm6ipt6p8fo.apps.googleusercontent.com';
+        const redirectUri = encodeURI(`${API_BASE_URL}/oauth/callback/google`);
+        const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${encodeURIComponent(clientId)}
+        &redirect_uri=${encodeURIComponent(redirectUri)}&state=${encodeURIComponent(state)}&response_type=code&scope=${encodeURIComponent("openid profile email")}`;
+        window.location.href = googleAuthUrl
     };
 
@@ -111 +111 @@
                     <button type="submit">Submit</button>
                 </form>
+                <div className={styles.or}>OR</div>
+                <div className={styles.socialButtons}>
+                    <button className={styles.socialButton} onClick={continueWithGoogle}>
+                        <img src={google_icon} alt="Facebook Icon" className={styles.socialIcon}/>
+                        Sign In With Google
+                    </button>
+                    <button className={styles.socialButton} onClick={continueWithGitHub}>
+                        <img src={github_icon} alt="GitHub Icon" className={styles.socialIcon}/>
+                        Sign In With GitHub
+                    </button>
+                </div>
                 <p>
                     Don't have an account? <Link to="/Signup"> Sign Up </Link>

imaps-frontend/src/pages/Login/Login.module.css

@@ -13 +13 @@
 
 .wrapper {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
+  justify-content: flex-end; /* Move content towards the right */
+  align-items: center; /* Center content vertically */
   height: 100vh;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.wrapper p {
-  font-size: 0.85rem;
-  margin-top: 1rem;
-}
+  margin-left: 30%;
+  padding: 2rem;
+}
+
+
 
 .form {
-  padding: 1.5rem;
-  -ms-flex-preferred-size: 100vw;
-  flex-basis: 100vw;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column; /* Stack form elements vertically */
+  align-items: center; /* Center form elements horizontally */
+  justify-content: center; /* Vertically center the form */
+  background-color: #fff;
+  border-radius: 8px; /* Rounded corners for the form */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow to form */
+  width: 100%;
+  max-width: 400px; /* Restrict the form width for better appearance */
 }
 
 .form .heading {
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   font-weight: bold;
   text-align: center;
+  margin-bottom: 1.5rem; /* Spacing between heading and form */
 }
 
 .or {
-  margin: 1rem 0;
+  margin-top: 1em;
+  text-align: center;
+  font-weight: bold;
+  color: #666;
 }
 
@@ -46 +53 @@
   display: block;
   margin: 1.25rem 0 1rem 0;
+  font-size: 0.95rem;
+  color: #333;
 }
 
@@ -51 +60 @@
   height: 40px;
   width: 100%;
+  max-width: 350px; /* Slightly larger max-width */
   padding: 15px;
   background-color: #f1f9ff;
   border: 2px solid #bce0fd;
   border-radius: 8px;
+  box-sizing: border-box;
+  font-size: 1rem; /* Make input text a bit larger */
 }
 
@@ -60 +72 @@
   height: 40px;
   width: 100%;
+  max-width: 350px;
+  margin-top: 1.5rem;
   background-color: #258de6;
   color: white;
@@ -65 +79 @@
   letter-spacing: 1px;
   border: none;
-  display: block;
-  margin: 0 auto;
-  font-weight: bold;
-  margin-top: 1.5rem;
+  font-weight: bold;
   border-radius: 8px;
+  font-size: 1rem; /* Increase font size for better readability */
+}
+
+.socialButtons {
+  display: flex;
+  flex-direction: column; /* Stack social buttons vertically */
+  align-items: center; /* Center them horizontally */
+}
+
+.socialButton {
+  display: inline-flex; /* Align text and image inline */
+  align-items: center; /* Vertically center content */
+  justify-content: flex-start; /* Align items to the left */
+  padding: 10px 15px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: bold;
+  transition: background-color 0.2s, transform 0.2s;
+  width: 100%;
+  max-width: 350px; /* Limit max width */
+}
+
+.socialButton img {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+
+.socialButton:hover {
+  filter: brightness(95%);
+}
+
+.socialButton:active {
+  transform: scale(0.98);
+}
+
+.socialButton:nth-child(2) {
+  background-color: #333; /* GitHub button */
+  color: white;
+}
+
+.socialButton:nth-child(1) {
+  background-color: #ffffff; /* Google button */
+  color: #000000;
+  box-shadow: 1px 2px #2f2525;
 }
 
 @media (min-width: 542px) {
   body {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
     justify-content: center;
   }
+
   .wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     height: 100vh;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
     align-items: center;
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-    padding: 1.5rem;
+    justify-content: flex-end; /* Keep the form to the right */
+    padding: 2rem;
     max-width: 1100px;
   }
+
   .form {
-    -ms-flex-preferred-size: auto;
     flex-basis: auto;
-  }
+    align-items: center; /* Center form in larger screens */
+    width: 100%;
+    max-width: 400px; /* Keep form max width consistent */
+  }
+
   .form input {
-    width: 250px;
-  }
+    width: 100%; /* Ensures the input expands fully */
+    max-width: 350px;
+  }
+
+  .illustration{
+    margin-right: 40%;
+  }
+
   .illustration img {
-    max-width: 80%;
+    max-width: 100%;
     height: auto;
   }
@@ -108 +169 @@
 
 @media (max-width: 680px) {
+  .wrapper {
+    flex-direction: column; /* Stack form and illustration vertically */
+    align-items: center; /* Center content horizontally */
+    padding: 1rem;
+  }
+
   .illustration {
-    display: none;
-  }
-}
-
-.signUp .illustration {
-  order: 2;
-  justify-self: flex-end;
-  margin-left: 2rem;
+    display: none; /* Hide the illustration on mobile */
+  }
+
+  .form {
+    width: 100%; /* Full width for mobile */
+    align-items: center; /* Center form elements horizontally */
+  }
+
+  .form input,
+  .form button,
+  .socialButton {
+    width: 100%; /* Full width for mobile */
+    max-width: 300px; /* Optional: Limit max width */
+  }
 }
 
@@ -126 +199 @@
   transform: scale(0.98);
 }
+
+.error {
+  color: red;
+  font-size: 0.9rem;
+  margin-top: 0.5rem;
+}