127 lines
5.5 KiB
HTML
127 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html lang="{{LANG_CODE}}" class="h-full">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>{{T_SIGNIN}} — {{T_TITLE}}</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="/admin/assets/tailwindcss.js"></script>
|
|
<script src="/admin/assets/htmx.min.js"></script>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="h-full bg-slate-950 text-slate-100 flex items-center justify-center">
|
|
<main class="w-full max-w-sm px-6">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-2xl font-semibold">{{T_TITLE}}</h1>
|
|
<p class="text-slate-400 text-sm mt-1">{{T_SUBTITLE}}</p>
|
|
</div>
|
|
|
|
<form
|
|
class="space-y-4 bg-slate-900 border border-slate-800 rounded-lg p-6 shadow-xl"
|
|
hx-post="/admin/login"
|
|
hx-target="#err"
|
|
hx-swap="innerHTML"
|
|
hx-on::before-swap="
|
|
/* The auth handler returns 401 with an HTML error fragment for
|
|
bad credentials / disabled / not-admin / bad-TOTP. HTMX skips
|
|
the swap on 4xx by default, so force it back on. */
|
|
if (event.detail.xhr.status >= 400 && event.detail.xhr.status < 500) {
|
|
event.detail.shouldSwap = true;
|
|
event.detail.isError = false;
|
|
}
|
|
"
|
|
hx-on::after-request="
|
|
const xhr = event.detail.xhr;
|
|
if (event.detail.successful && (xhr.responseText || '').trim() === '') {
|
|
/* Empty 2xx body = real login. The TOTP-required path returns 2xx
|
|
with an HTML prompt fragment, which we MUST NOT redirect away
|
|
from. */
|
|
window.location.href = '/admin/';
|
|
}
|
|
"
|
|
>
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-400 mb-1" for="username">{{T_USERNAME}}</label>
|
|
<input
|
|
id="username" name="username" type="text" required autocomplete="username"
|
|
class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm focus:outline-none focus:border-sky-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-medium text-slate-400 mb-1" for="password">{{T_PASSWORD}}</label>
|
|
<input
|
|
id="password" name="password" type="password" required autocomplete="current-password"
|
|
class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm focus:outline-none focus:border-sky-500"
|
|
/>
|
|
</div>
|
|
|
|
<div id="tfa-section" class="hidden">
|
|
<label class="block text-xs font-medium text-slate-400 mb-1" for="tfaCode">{{T_TOTP_LABEL}}</label>
|
|
<input
|
|
id="tfaCode" name="tfaCode" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code"
|
|
class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm tracking-widest text-center focus:outline-none focus:border-sky-500"
|
|
/>
|
|
<input id="secret" name="secret" type="hidden" />
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-sky-600 hover:bg-sky-500 text-white text-sm font-medium rounded px-4 py-2 transition"
|
|
>
|
|
{{T_SIGNIN}}
|
|
</button>
|
|
|
|
<div id="err" class="text-sm text-rose-400 min-h-[1.25em]"></div>
|
|
</form>
|
|
|
|
<!-- OIDC providers (rendered only when /admin/oidc/providers is non-empty) -->
|
|
<div id="oidc-block" class="mt-6 hidden">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="flex-1 h-px bg-slate-800"></div>
|
|
<span class="text-xs text-slate-500">{{T_OR}}</span>
|
|
<div class="flex-1 h-px bg-slate-800"></div>
|
|
</div>
|
|
<div id="oidc-buttons" class="space-y-2"></div>
|
|
</div>
|
|
|
|
<div class="mt-6 text-center">
|
|
<label class="text-[10px] uppercase tracking-wide text-slate-600 mr-2">{{T_LANGUAGE}}</label>
|
|
<select
|
|
class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300"
|
|
onchange="document.cookie='admin_lang='+this.value+'; path=/; max-age=31536000; samesite=strict'; window.location.reload();"
|
|
>
|
|
<option value="en"{{LANG_SEL_EN}}>English</option>
|
|
<option value="de"{{LANG_SEL_DE}}>Deutsch</option>
|
|
<option value="es"{{LANG_SEL_ES}}>Español</option>
|
|
<option value="fr"{{LANG_SEL_FR}}>Français</option>
|
|
<option value="ro"{{LANG_SEL_RO}}>Română</option>
|
|
</select>
|
|
</div>
|
|
<p class="mt-4 text-center text-[10px] text-slate-600">v{{APP_VERSION}}</p>
|
|
</main>
|
|
|
|
<script>
|
|
// Fetch enabled providers and render one button each. The button just
|
|
// navigates to /admin/login/oidc/<name>, which 302s the browser to the
|
|
// IdP. After the IdP redirects to /oidc/callback, the server sets our
|
|
// session cookie and redirects to /admin/.
|
|
var SIGNIN_WITH = {{T_SIGNIN_WITH_JSON}};
|
|
fetch('/admin/oidc/providers').then(r => r.json()).then(list => {
|
|
if (!Array.isArray(list) || list.length === 0) return;
|
|
const block = document.getElementById('oidc-block');
|
|
const root = document.getElementById('oidc-buttons');
|
|
list.forEach(p => {
|
|
const a = document.createElement('a');
|
|
a.href = '/admin/login/oidc/' + encodeURIComponent(p.name);
|
|
a.className = 'block w-full text-center bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm rounded px-4 py-2 transition';
|
|
a.textContent = SIGNIN_WITH + ' ' + (p.display_name || p.name);
|
|
root.appendChild(a);
|
|
});
|
|
block.classList.remove('hidden');
|
|
}).catch(() => { /* silently hide block on any error */ });
|
|
</script>
|
|
</body>
|
|
</html>
|