File size: 3,157 Bytes
7de903a 4eb4613 7de903a 96818d3 377330e 81e21b2 a27c02f 7de903a af96d88 7de903a 4eb4613 315ed6b 656d2b8 4eb4613 3951be4 4131df5 9e7ad0e 4131df5 d764965 4eb4613 81e21b2 8f17915 175e58b 81e21b2 175e58b 8f17915 81e21b2 7f8d861 3951be4 7f8d861 81e21b2 7de903a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="/static/style2.css">
<script src="https://apis.google.com/js/platform.js" async defer></script> <!-- Google Platform Library -->
<meta name="google-signin-client_id" content="526344692420-4sc5t4ie33n4p365cm25urna72u7stpb.apps.googleusercontent.com"> <!-- Replace with your Client ID -->
</head>
<body>
<footer>
<!-- Footer content -->
<p>Copyright © Your Website</p>
</footer>
<div class="background-container">
<div class="color-overlay"></div>
<h1>Login</h1>
{% if error_message %}
<p style="color: red;">{{ error_message }}</p>
{% endif %}
<form method="post" action="/login" id="login-form">
<label for="username">User name:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<!-- Hidden field for the reCAPTCHA token -->
<input type="hidden" id="recaptcha_token" name="recaptcha_token" value="">
<div class="recaptcha-container">
<div class="g-recaptcha"
data-sitekey="6LeSJgwpAAAAAD9UlPdC911k8UgD6Uh3068xXgGj"
data-callback="setRecaptchaToken"></div></div>
<br>
<button type="submit">Login</button>
</form>
<!-- Google Sign-in Button -->
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
function onSignIn(googleUser) {
var id_token = googleUser.getAuthResponse().id_token;
fetch('/verify-google-token', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ token: id_token })
})
.then(response => {
if (response.redirected) {
// Follow the redirect from the server
window.location.href = response.url;
} else {
return response.json();
}
})
.then(data => {
// Handle response data if needed
console.log(data);
})
.catch(error => console.error('Error:', error));
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function setRecaptchaToken(token) {
document.getElementById('recaptcha_token').value = token;
}
document.getElementById('login-form').addEventListener('submit', function(event) {
var token = document.getElementById('recaptcha_token').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (!(token && email && password)) {
event.preventDefault(); // Prevent form submission
alert("Please fill in all required fields.");
}
// If fields are filled, form will proceed to submit
// reCAPTCHA validation will be handled automatically by Google's script
});
</script>
</div>
</body>
</html>
|