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