65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
|
|
<div class="flex justify-center py-8">
|
|
<div class="w-full max-w-md p-8 space-y-6 bg-white rounded-xl shadow-lg">
|
|
<h1 class="text-2xl font-bold text-center text-gray-800">Secure Access</h1>
|
|
<form id="login-form" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
|
|
<input id="email" type="email" required class="w-full border rounded-lg p-2 login-input" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
|
<input id="password" type="password" required class="w-full border rounded-lg p-2 login-input" />
|
|
</div>
|
|
<button type="submit" class="w-full bg-blue-500 text-blue-100 py-2 rounded-lg login-button">Sign In</button>
|
|
<p id="error" class="text-sm text-red-600 mt-2 hidden"></p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Firebase App (the core Firebase SDK) -->
|
|
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-app-compat.js"></script>
|
|
|
|
<!-- Firebase Auth -->
|
|
<script src="https://www.gstatic.com/firebasejs/12.4.0/firebase-auth-compat.js"></script>
|
|
|
|
<script>
|
|
// Initialize Firebase configuration from template
|
|
window.FIREBASE_CONFIG = {{ firebase_config|tojson }};
|
|
|
|
// Initialize Firebase app and auth
|
|
const app = firebase.initializeApp(window.FIREBASE_CONFIG || {});
|
|
const auth = firebase.auth();
|
|
|
|
// Get form and input elements
|
|
const form = document.getElementById('login-form');
|
|
const email = document.getElementById('email');
|
|
const password = document.getElementById('password');
|
|
const err = document.getElementById('error');
|
|
|
|
// Handle form submission
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
err.classList.add('hidden');
|
|
try {
|
|
const cred = await auth.signInWithEmailAndPassword(email.value, password.value);
|
|
const idToken = await cred.user.getIdToken();
|
|
const res = await fetch('/session_login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ idToken })
|
|
});
|
|
if(!res.ok){
|
|
throw new Error('Session exchange failed');
|
|
}
|
|
window.location.href = '/';
|
|
} catch (e) {
|
|
err.textContent = e.message || 'Authentication failed';
|
|
err.classList.remove('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |