From d3f551b1e801b2278d6bbf41886d278a4b858b5a Mon Sep 17 00:00:00 2001
From: iKAN2025 <142475176+iKAN2025@users.noreply.github.com>
Date: Sun, 8 Jun 2025 11:21:38 -0700
Subject: [PATCH] Update login.md

fix so enables dual login
---
 navigation/authentication/login.md | 393 +++++++++++++++++++----------
 1 file changed, 265 insertions(+), 128 deletions(-)

diff --git a/navigation/authentication/login.md b/navigation/authentication/login.md
index 8f69349..d4ed3fb 100644
--- a/navigation/authentication/login.md
+++ b/navigation/authentication/login.md
@@ -1,107 +1,124 @@
 ---
-layout: page 
+layout: page
 title: Login
 permalink: /login
 search_exclude: true
-show_reading_time: false 
+show_reading_time: false
 ---
-
 <style>
-.login-container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap; /* allows the cards to wrap onto the next line if the screen is too small */
-}
+    .submit-button {
+        width: 100%;
+        transition: all 0.3s ease;
+        position: relative;
+    }
+    .login-container {
+        display: flex;
+        /* Use flexbox for side-by-side layout */
+        justify-content: space-between;
+        /* Add space between the cards */
+        align-items: flex-start;
+        /* Align items to the top */
+        gap: 20px;
+        /* Add spacing between the cards */
+        flex-wrap: nowrap;
+        /* Prevent wrapping of the cards */
+    }
 
-.login-card {
-    margin-top: 0; /* remove the top margin */
-    width: 45%;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 20px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-    margin-bottom: 20px;
-    overflow-x: auto; /* Enable horizontal scrolling */
-}
+    .login-card,
+    .signup-card {
+        flex: 1 1 calc(50% - 20px);
+        max-width: 45%;
+        box-sizing: border-box;
+        background: #1e1e1e;
+        border-radius: 15px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        padding: 20px;
+        color: white;
+        overflow: hidden;
+    }
 
-.login-card h1 {
-    margin-bottom: 20px;
-}
+    .login-card h1 {
+        margin-bottom: 20px;
+    }
 
-.signup-card {
-    margin-top: 0; /* remove the top margin */
-    width: 45%;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 20px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-    margin-bottom: 20px;
-    overflow-x: auto; /* Enable horizontal scrolling */
-}
+    .signup-card h1 {
+        margin-bottom: 20px;
+    }
 
-.signup-card h1 {
-    margin-bottom: 20px;
-}
+    .form-group {
+        position: relative;
+        margin-bottom: 1.5rem;
+    }
 
+    input {
+        width: 100%;
+        box-sizing: border-box;
+    }
 </style>
-
+<br>
 <div class="login-container">
     <!-- Python Login Form -->
     <div class="login-card">
-        <h1 id="pythonTitle">User Login (Python/Flask)</h1>
-        <form id="pythonForm" onsubmit="pythonLogin(); return false;">
+        <h1 id="pythonTitle">User Login</h1>
+        <hr>
+        <form id="pythonForm" onsubmit="loginBoth(); return false;">
+            <div class="form-group">
+                <input type="text" id="uid" placeholder="GitHub ID" required>
+            </div>
+            <div class="form-group">
+                <input type="password" id="password" placeholder="Password" required>
+            </div>
             <p>
-                <label>
-                    GitHub ID:
-                    <input type="text" name="uid" id="uid" required>
-                </label>
-            </p>
-            <p>
-                <label>
-                    Password:
-                    <input type="password" name="password" id="password" required>
-                </label>
-            </p>
-            <p>
-                <button type="submit">Login</button>
+                <button type="submit" class="large primary submit-button">Login</button>
             </p>
             <p id="message" style="color: red;"></p>
         </form>
     </div>
     <div class="signup-card">
         <h1 id="signupTitle">Sign Up</h1>
+        <hr>
         <form id="signupForm" onsubmit="signup(); return false;">
+            <div class="form-group">
+                <input type="text" id="name" placeholder="Name" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="signupUid" placeholder="GitHub ID" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="signupSid" placeholder="Student ID" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="signupEmail" placeholder="Email" required>
+            </div>
+            <div class="form-group">
+                <input type="password" id="signupPassword" placeholder="Password" required>
+            </div>
             <p>
-                <label>
-                    Name:
-                    <input type="text" name="name" id="name" required>
-                </label>
-            </p>
-            <p>
-                <label>
-                    GitHub ID:
-                    <input type="text" name="signupUid" id="signupUid" required>
-                </label>
-            </p>
-            <p>
-                <label>
-                    Password:
-                    <input type="password" name="signupPassword" id="signupPassword" required>
+                <label class="switch">
+                    <span class="toggle">
+                        <input type="checkbox" name="kasmNeeded" id="kasmNeeded">
+                        <span class="slider"></span>
+                    </span>
+                    <span class="label-text">Kasm Server Needed</span>
                 </label>
+
             </p>
             <p>
-                <button type="submit">Sign Up</button>
+                <button type="submit" class="large primary submit-button">Sign Up</button>
             </p>
             <p id="signupMessage" style="color: green;"></p>
         </form>
     </div>
 </div>
-
 <script type="module">
-    import { login, pythonURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
-
+    import { login, pythonURI, javaURI, fetchOptions } from '{{site.baseurl}}/assets/js/api/config.js';
+    // Function to handle both Python and Java login simultaneously
+    window.loginBoth = function () {
+    javaLogin();  // Call Java login
+    pythonLogin();
+};
     // Function to handle Python login
-    window.pythonLogin = function() {
+    window.pythonLogin = function () {
         const options = {
             URL: `${pythonURI}/api/authenticate`,
             callback: pythonDatabase,
@@ -115,62 +132,102 @@ show_reading_time: false
         };
         login(options);
     }
-
-
-
-
-
-    // Function to handle signup
-    window.signup = function() {
-    const signupButton = document.querySelector(".signup-card button");
-
-    // Disable the button and change its color
-    signupButton.disabled = true;
-    signupButton.style.backgroundColor = '#d3d3d3'; // Light gray to indicate disabled state
-
-    const signupOptions = {
-        URL: `${pythonURI}/api/user`,
+    // Function to handle Java login
+    window.javaLogin = function () {
+    const loginURL = `${javaURI}/authenticate`;
+    const databaseURL = `${javaURI}/api/person/get`;
+    const signupURL = `${javaURI}/api/person/create`;
+    const userCredentials = JSON.stringify({
+        uid: document.getElementById("uid").value,
+        password: document.getElementById("password").value,
+    });
+    const loginOptions = {
+        ...fetchOptions,
         method: "POST",
-        cache: "no-cache",
-        body: {
-            name: document.getElementById("name").value,
-            uid: document.getElementById("signupUid").value,
-            password: document.getElementById("signupPassword").value,
-        }
+        body: userCredentials,
     };
-
-    fetch(signupOptions.URL, {
-        method: signupOptions.method,
-        headers: {
-            "Content-Type": "application/json"
-        },
-        body: JSON.stringify(signupOptions.body)
-    })
-    .then(response => {
-        if (!response.ok) {
-            throw new Error(`Signup failed: ${response.status}`);
-        }
-        return response.json();
-    })
-    .then(data => {
-        document.getElementById("signupMessage").textContent = "Signup successful!";
-        // Optionally redirect to login page or handle as needed
-        // window.location.href = '{{site.baseurl}}/profile';
-    })
-    .catch(error => {
-        console.error("Signup Error:", error);
-        document.getElementById("signupMessage").textContent = `Signup Error: ${error.message}`;
-        // Re-enable the button if there is an error
-        signupButton.disabled = false;
-        signupButton.style.backgroundColor = ''; // Reset to default color
-    });
-}
-
-
+    console.log("Attempting Java login...");
+    fetch(loginURL, loginOptions)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error("Invalid login");
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log("Login successful!", data);
+            window.location.href = '{{site.baseurl}}/profile';
+            // Fetch database after login success using fetchOptions
+            return fetch(databaseURL, fetchOptions);
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Spring server response: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log("Java database response:", data);
+        })
+        .catch(error => {
+            console.error("Login failed:", error.message);
+            // If login fails, attempt account creation
+            if (error.message === "Invalid login") {
+                alert("Login for Spring failed. Creating a new Java account...");
+                const signupData = JSON.stringify({
+                    uid: document.getElementById("uid").value,
+                    email: document.getElementById("uid").value + "@gmail.com",
+                    dob: "11-01-2024", // Static date, can be modified
+                    name: document.getElementById("uid").value,
+                    password: document.getElementById("password").value,
+                    kasmServerNeeded: false,
+                });
+                const signupOptions = {
+                    ...fetchOptions,
+                    method: "POST",
+                    body: signupData,
+                };
+                fetch(signupURL, signupOptions)
+                    .then(signupResponse => {
+                        if (!signupResponse.ok) {
+                            throw new Error("Account creation failed!");
+                        }
+                        return signupResponse.json();
+                    })
+                    .then(signupResult => {
+                        console.log("Account creation successful!", signupResult);
+                        alert("Account Creation Successful. Logging you into Flask/Spring!");
+                        // Retry login after account creation
+                        return fetch(loginURL, loginOptions);
+                    })
+                    .then(newLoginResponse => {
+                        if (!newLoginResponse.ok) {
+                            throw new Error("Login failed after account creation");
+                        }
+                        console.log("Login successful after account creation!");
+                        // Fetch database after successful login
+                        return fetch(databaseURL, fetchOptions);
+                    })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error(`Spring server response: ${response.status}`);
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        console.log("Java database response:", data);
+                    })
+                    .catch(newLoginError => {
+                        console.error("Error after account creation:", newLoginError.message);
+                    });
+            } else {
+                console.log("Logged in!");
+            }
+        });
+};
     // Function to fetch and display Python data
     function pythonDatabase() {
         const URL = `${pythonURI}/api/id`;
-
         fetch(URL, fetchOptions)
             .then(response => {
                 if (!response.ok) {
@@ -182,13 +239,93 @@ show_reading_time: false
                 window.location.href = '{{site.baseurl}}/profile';
             })
             .catch(error => {
-                console.error("Python Database Error:", error);
-                const errorMsg = `Python Database Error: ${error.message}`;
+                document.getElementById("message").textContent = `Error: ${error.message}`;
+            });
+    }
+    window.signup = function () {
+        const signupButton = document.querySelector(".signup-card button");
+        // Disable the button and change its color
+        signupButton.disabled = true;
+        signupButton.classList.add("disabled");
+        const signupOptionsPython = {
+            URL: `${pythonURI}/api/user`,
+            method: "POST",
+            cache: "no-cache",
+            body: {
+                name: document.getElementById("name").value,
+                uid: document.getElementById("signupUid").value,
+                email: document.getElementById("signupEmail").value,
+                password: document.getElementById("signupPassword").value,
+                kasm_server_needed: document.getElementById("kasmNeeded").checked,
+            }
+        };
+        const signupOptionsJava = {
+            URL: `${javaURI}/api/person/create`,
+            method: "POST",
+            cache: "no-cache",
+            headers: new Headers({
+                "Content-Type": "application/json"
+            }),
+            body: JSON.stringify({
+                uid: document.getElementById("signupUid").value,
+                sid: document.getElementById("signupSid").value,
+                email: document.getElementById("signupEmail").value,
+                dob: "11-01-2024",  // Static date for now, you can modify this
+                name: document.getElementById("name").value,
+                password: document.getElementById("signupPassword").value,
+                kasmServerNeeded: document.getElementById("kasmNeeded").checked,
+            })
+        };
+        fetch(signupOptionsJava.URL, signupOptionsJava)
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    document.getElementById("signupMessage").innerText = "Sign up successful!";
+                } else {
+                    document.getElementById("signupMessage").innerText = "Sign up failed: " + data.message;
+                }
+            })
+            .catch(error => {
+                document.getElementById("signupMessage").innerText = "Error: " + error.message;
+                console.error('Error during signup:', error);
+            });
+        fetch(signupOptionsPython.URL, {
+            method: signupOptionsPython.method,
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(signupOptionsPython.body)
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Signup failed on one or both backends: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                document.getElementById("signupMessage").textContent = "Signup successful!";
+                // Optionally redirect to login page or handle as needed
+                // window.location.href = '{{site.baseurl}}/profile';
+            })
+            .catch(error => {
+                console.error("Signup Error:", error);
+                document.getElementById("signupMessage").textContent = `Signup Error: ${error.message}`;
+                // Re-enable the button if there is an error
+                signupButton.disabled = false;
+                signupButton.style.backgroundColor = ''; // Reset to default color
+            });
+    }
+    function javaDatabase() {
+        const URL = `${javaURI}/api/person/get`;
+        fetch(URL, fetchOptions)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Spring server response: ${response.status}`);
+                }
+                return response.json();
+            })
+            .catch(error => {
+                console.error("Java Database Error:", error);
             });
     }
-
-    // Call relevant database functions on the page load
-    window.onload = function() {
-         pythonDatabase();
-    };
 </script>