Files
vela-platform/backend/templates/login.html

61 lines
2.3 KiB
HTML

{% extends "base.html" %}
{% block title %}Login — Vela Platform{% endblock %}
{% block content %}
<div class="row justify-content-center mt-5">
<div class="col-md-5 col-lg-4">
<div class="card shadow">
<div class="card-body p-4">
<div class="text-center mb-4">
<span style="font-size: 2.5rem;">🏔️</span>
<h4 class="mt-2">Vela Platform</h4>
</div>
<form id="loginForm">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username"
placeholder="Enter username" required autofocus>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password"
placeholder="Enter password" required>
</div>
<div id="loginError" class="alert alert-danger d-none py-2"></div>
<button type="submit" class="btn btn-primary w-100">Sign In</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const errorEl = document.getElementById('loginError');
errorEl.classList.add('d-none');
const formData = new FormData(form);
try {
const resp = await fetch('/api/auth/login', {
method: 'POST',
body: formData,
});
if (!resp.ok) {
const data = await resp.json();
errorEl.textContent = data.detail || 'Login failed';
errorEl.classList.remove('d-none');
return;
}
const data = await resp.json();
setToken(data.token);
window.location.href = '/';
} catch (err) {
errorEl.textContent = 'Network error. Please try again.';
errorEl.classList.remove('d-none');
}
});
</script>
{% endblock %}