51 lines
2.0 KiB
HTML
51 lines
2.0 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block title %}Log ind{% endblock %}
|
||
|
|
{% block content %}
|
||
|
|
<div style="max-width:400px;margin:60px auto;">
|
||
|
|
<div class="card">
|
||
|
|
<h1 style="text-align:center;">⚡ Pokedexter</h1>
|
||
|
|
<p style="text-align:center;color:var(--text-muted);margin-bottom:20px;">Log ind for at fortsætte</p>
|
||
|
|
<form id="login-form">
|
||
|
|
<div style="margin-bottom:12px;">
|
||
|
|
<label style="display:block;margin-bottom:4px;font-size:0.9rem;">Brugernavn</label>
|
||
|
|
<input type="text" name="username" required autocomplete="username">
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom:20px;">
|
||
|
|
<label style="display:block;margin-bottom:4px;font-size:0.9rem;">Adgangskode</label>
|
||
|
|
<input type="password" name="password" required autocomplete="current-password">
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary" style="width:100%;">Log ind</button>
|
||
|
|
<p id="login-error" style="color:var(--accent);margin-top:12px;text-align:center;display:none;"></p>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const form = e.target;
|
||
|
|
const data = { username: form.username.value, password: form.password.value };
|
||
|
|
const errEl = document.getElementById('login-error');
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await fetch('/api/login', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(data),
|
||
|
|
redirect: 'manual',
|
||
|
|
});
|
||
|
|
if (res.ok) {
|
||
|
|
window.location.href = '/';
|
||
|
|
} else {
|
||
|
|
const err = await res.json();
|
||
|
|
errEl.textContent = err.detail || 'Login fejlede';
|
||
|
|
errEl.style.display = 'block';
|
||
|
|
}
|
||
|
|
} catch(e) {
|
||
|
|
errEl.textContent = 'Kunne ikke forbinde til serveren';
|
||
|
|
errEl.style.display = 'block';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|