| <!DOCTYPE html> |
| <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="styles1.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="559075240222-sm43oblaej1asne102574d6r4li6qnpn.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> |
| |
| </div> |
| <p>Don't have an account? <a href="register.html">Register here</a></p> |
| </div> |
|
|
| <script> |
| |
| |
| function getDeviceId() { |
| let deviceId = localStorage.getItem("deviceId"); |
| if (!deviceId) { |
| |
| deviceId = 'device_' + new Date().getTime() + '_' + Math.random().toString(36).substr(2, 9); |
| |
| 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()); |
| |
| 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); |
| window.location.href = "https://thevera-botveraai.static.hf.space"; |
| } else { |
| alert(data.message); |
| } |
| }) |
| .catch(error => { |
| console.error('Error:', error); |
| alert('An error occurred during login.'); |
| }); |
| }); |
| |
| |
| function handleCredentialResponse(response) { |
| const userObject = jwt_decode(response.credential); |
| console.log("User Info from Google: ", userObject); |
| const deviceId = getDeviceId(); |
| console.log("Device ID: ", deviceId); |
| |
| |
| const googleLoginData = { |
| name: userObject.name, |
| email: userObject.email, |
| username: userObject.given_name + '_' + Math.random().toString(36).substr(2, 9), |
| google_id: userObject.sub, |
| device_id: deviceId |
| }; |
| |
| |
| 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 = "https://thevera-botveraai.static.hf.space"; |
| } else { |
| alert(data.message); |
| } |
| }) |
| .catch(error => { |
| console.error('Error:', error); |
| alert('An error occurred during 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> |
|
|
