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

Timestamp:

01/21/25 03:08:24 (2 weeks ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

0c6b92a

Message:

F4 Finalna Verzija

File:

• imaps-frontend/src/pages/Login/Login.jsx (modified) (5 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>