Roman
c45f1b79fd
Le navigateur servait un CSS périmé après mise à jour (aucun invalidateur sur /static). Les liens CSS/JS portent désormais ?v=<mtime des fichiers statiques> : toute modification du design est visible immédiatement chez tous les clients, sans hard-refresh ni bump manuel de version.
53 lines
2.8 KiB
HTML
53 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Connexion — Ohm Stream</title>
|
|
<link rel="stylesheet" href="/static/css/style.css?v={{ asset_v }}">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body class="login-page">
|
|
<div class="login-card" x-data="{ mode: 'login', error: null }"
|
|
x-init="
|
|
window.addEventListener('htmx:responseError', e => {
|
|
error = e.detail.xhr.status === 401 ? 'Identifiants invalides'
|
|
: e.detail.xhr.status === 409 ? 'Nom d\'utilisateur déjà pris'
|
|
: 'Erreur ' + e.detail.xhr.status;
|
|
})">
|
|
<span class="logo">OHM<span style="color:var(--text);font-weight:400">STREAM</span></span>
|
|
<p class="login-sub">Ton centre de contrôle anime & séries</p>
|
|
|
|
<div class="login-tabs">
|
|
<div class="login-tab" :class="mode === 'login' && 'active'" @click="mode = 'login'; error = null">Connexion</div>
|
|
<div class="login-tab" :class="mode === 'register' && 'active'" @click="mode = 'register'; error = null">Inscription</div>
|
|
</div>
|
|
|
|
<div class="login-error" x-show="error" x-text="error" style="margin-bottom:0.8rem"></div>
|
|
|
|
<form x-show="mode === 'login'" hx-post="/auth/login" hx-swap="none">
|
|
<input class="input" name="username" placeholder="Nom d'utilisateur" required autocomplete="username">
|
|
<input class="input" name="password" type="password" placeholder="Mot de passe" required autocomplete="current-password">
|
|
<button class="btn" type="submit">Se connecter</button>
|
|
</form>
|
|
|
|
<form x-show="mode === 'register'" hx-post="/auth/register" hx-swap="none">
|
|
<input class="input" name="username" placeholder="Nom d'utilisateur (3+ caractères)" required minlength="3" autocomplete="username">
|
|
<input class="input" name="password" type="password" placeholder="Mot de passe (6+ caractères)" required minlength="6" autocomplete="new-password">
|
|
<button class="btn" type="submit">Créer mon compte</button>
|
|
<p style="font-size:0.75rem;color:var(--text-dim);text-align:center">Le premier compte créé est administrateur.</p>
|
|
</form>
|
|
</div>
|
|
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
|
<script>
|
|
// Redirection après login/register réussi (303 intercepté par htmx)
|
|
document.body.addEventListener('htmx:afterRequest', e => {
|
|
if (e.detail.successful && (e.detail.pathInfo.requestPath.startsWith('/auth/login') || e.detail.pathInfo.requestPath.startsWith('/auth/register'))) {
|
|
window.location.href = '/';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|