Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Login</title> | |
| <link rel="stylesheet" href="log_reg_style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Login to Your Account</h2> | |
| <form id="loginForm"> | |
| <input type="text" name="username" placeholder="Email ID" required> | |
| <input type="password" name="password" placeholder="Password" required> | |
| <button type="submit">Login</button> | |
| </form> | |
| <div class="google-login"> | |
| <div id="g_id_onload" | |
| data-client_id="656266410653-sob8aisqv9l32a9nulqgm9peqgh7hsfk.apps.googleusercontent.com" | |
| data-callback="handleCredentialResponse" | |
| data-auto_select="false"> | |
| </div> | |
| <div class="g_id_signin" | |
| data-type="standard" | |
| data-shape="rectangular" | |
| data-theme="outline" | |
| data-text="sign_in_with" | |
| data-size="large"> | |
| </div> | |
| <!-- <button onclick="googleSignIn()">Sign in with Google</button> --> | |
| </div> | |
| <p>Don't have an account? <a href="register.html">Register here</a></p> | |
| </div> | |
| <script> | |
| // Function to generate and retrieve the device ID | |
| function getDeviceId() { | |
| let deviceId = localStorage.getItem("deviceId"); | |
| if (!deviceId) { | |
| // Generate a new unique ID | |
| deviceId = 'device_' + new Date().getTime() + '_' + Math.random().toString(36).substr(2, 9); | |
| // Store it in local storage | |
| localStorage.setItem("deviceId", deviceId); | |
| } | |
| return deviceId; | |
| } | |
| document.getElementById('loginForm').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(e.target); | |
| const data = Object.fromEntries(formData.entries()); | |
| // Send login data to the server | |
| fetch('https://thevera-botveradb.hf.space/login', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(data), | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| alert("Login successful!"); | |
| localStorage.setItem('authToken', data.token); // Store token in localStorage | |
| window.location.href = "index.html"; // Redirect to the dashboard | |
| } else { | |
| alert(data.message); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('An error occurred during login.'); | |
| }); | |
| }); | |
| // Google Sign-In functionality | |
| function handleCredentialResponse(response) { | |
| const userObject = jwt_decode(response.credential); | |
| console.log("User Info from Google: ", userObject); | |
| const deviceId = getDeviceId(); | |
| console.log("Device ID: ", deviceId); | |
| // Prepare the data for sending to the server | |
| const googleLoginData = { | |
| name: userObject.name, | |
| email: userObject.email, | |
| username: userObject.given_name + '_' + Math.random().toString(36).substr(2, 9), // Generate a unique username if needed | |
| google_id: userObject.sub, | |
| device_id: deviceId // Add the device ID from the local storage function | |
| }; | |
| // Send Google login data to the server | |
| fetch('https://thevera-botveradb.hf.space/register_google_user', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(googleLoginData), | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| localStorage.setItem('authToken', data.token); | |
| alert("Google login successful!"); | |
| window.location.href = "index.html"; // Redirect to the dashboard | |
| } else { | |
| alert(data.message); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('An error occurred during Google login.'); | |
| }); | |
| } | |
| // Load the JWT decode script for Google login | |
| function loadScript(src, callback) { | |
| let script = document.createElement("script"); | |
| script.src = src; | |
| script.async = true; | |
| script.onload = callback; | |
| document.head.appendChild(script); | |
| } | |
| loadScript("https://cdn.jsdelivr.net/npm/jwt-decode@3.1.2/build/jwt-decode.min.js", function() { | |
| console.log("JWT Decode script loaded"); | |
| }); | |
| </script> | |
| <script src="https://accounts.google.com/gsi/client" async defer></script> | |
| </body> | |
| </html> | |