2026-05-24 07:18:54 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>GoTermix — Sign in</title>
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
|
|
|
<link rel="stylesheet" href="/static/app.css" />
|
|
|
|
|
<style>
|
|
|
|
|
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
2026-05-24 08:37:27 +00:00
|
|
|
.totp-digits {
|
|
|
|
|
letter-spacing: 0.3em; font-size: 20px; text-align: center;
|
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
|
|
}
|
2026-05-24 07:18:54 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="m-card" style="max-width:360px;width:100%;margin:16px;">
|
|
|
|
|
<div class="auth-card">
|
|
|
|
|
<div class="auth-logo"><em>>_</em> GoTermix</div>
|
|
|
|
|
|
2026-05-24 08:37:27 +00:00
|
|
|
<!-- Step 1: credentials -->
|
|
|
|
|
<div id="credSection">
|
|
|
|
|
<div class="auth-sub">Authentication required</div>
|
|
|
|
|
|
|
|
|
|
<label class="m-label" for="fUser">Username</label>
|
|
|
|
|
<input class="m-input" type="text" id="fUser"
|
|
|
|
|
autofocus autocomplete="username"
|
|
|
|
|
placeholder="username" spellcheck="false"
|
|
|
|
|
maxlength="64">
|
|
|
|
|
|
|
|
|
|
<label class="m-label" for="fPass">Password</label>
|
|
|
|
|
<input class="m-input" type="password" id="fPass"
|
|
|
|
|
autocomplete="current-password"
|
|
|
|
|
placeholder="password"
|
|
|
|
|
maxlength="1024">
|
|
|
|
|
</div>
|
2026-05-24 07:18:54 +00:00
|
|
|
|
2026-05-24 08:37:27 +00:00
|
|
|
<!-- Step 2: TOTP (hidden until server returns mfa_required) -->
|
|
|
|
|
<div id="totpSection" style="display:none;">
|
|
|
|
|
<div class="auth-sub">Two-factor authentication</div>
|
|
|
|
|
<label class="m-label" for="fTOTP">Authenticator code</label>
|
|
|
|
|
<input class="m-input totp-digits" type="text" id="fTOTP"
|
|
|
|
|
inputmode="numeric" pattern="[0-9]{6}"
|
|
|
|
|
autocomplete="one-time-code"
|
|
|
|
|
placeholder="000000"
|
|
|
|
|
maxlength="6">
|
|
|
|
|
<div style="font-size:11px;color:#4b5563;margin-bottom:14px;">
|
|
|
|
|
Enter the 6-digit code from your authenticator app.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-05-24 07:18:54 +00:00
|
|
|
|
|
|
|
|
<div class="auth-err" id="authErr"></div>
|
|
|
|
|
|
|
|
|
|
<button class="auth-btn" id="authBtn" onclick="doLogin()">
|
|
|
|
|
<div class="auth-spin"></div>
|
|
|
|
|
<span class="btn-text">Sign in</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const CSRF_TOKEN = "[[CSRF_TOKEN]]";
|
|
|
|
|
const NEXT = "[[NEXT]]";
|
|
|
|
|
|
2026-05-24 08:37:27 +00:00
|
|
|
let mfaRequired = false;
|
|
|
|
|
let savedUsername = '';
|
|
|
|
|
let savedPassword = '';
|
|
|
|
|
|
|
|
|
|
// ── Keyboard nav ─────────────────────────────────────────────────────
|
2026-05-24 07:18:54 +00:00
|
|
|
document.getElementById('fUser').addEventListener('keydown', e => {
|
|
|
|
|
if (e.key === 'Enter') document.getElementById('fPass').focus();
|
|
|
|
|
});
|
|
|
|
|
document.getElementById('fPass').addEventListener('keydown', e => {
|
|
|
|
|
if (e.key === 'Enter') doLogin();
|
|
|
|
|
});
|
2026-05-24 08:37:27 +00:00
|
|
|
document.getElementById('fTOTP').addEventListener('keydown', e => {
|
|
|
|
|
if (e.key === 'Enter') doLogin();
|
|
|
|
|
});
|
|
|
|
|
// Auto-submit when 6 digits entered
|
|
|
|
|
document.getElementById('fTOTP').addEventListener('input', e => {
|
|
|
|
|
const v = e.target.value.replace(/\D/g, '');
|
|
|
|
|
e.target.value = v;
|
|
|
|
|
if (v.length === 6) doLogin();
|
|
|
|
|
});
|
2026-05-24 07:18:54 +00:00
|
|
|
|
2026-05-24 08:37:27 +00:00
|
|
|
// ── Login flow ────────────────────────────────────────────────────────
|
2026-05-24 07:18:54 +00:00
|
|
|
async function doLogin() {
|
2026-05-24 08:37:27 +00:00
|
|
|
const btn = document.getElementById('authBtn');
|
|
|
|
|
document.getElementById('authErr').classList.remove('show');
|
|
|
|
|
|
|
|
|
|
if (mfaRequired) {
|
|
|
|
|
const code = document.getElementById('fTOTP').value.trim();
|
|
|
|
|
if (code.length !== 6) { showErr('Enter 6-digit code'); return; }
|
|
|
|
|
await submitAuth(savedUsername, savedPassword, code);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-24 07:18:54 +00:00
|
|
|
const username = document.getElementById('fUser').value.trim();
|
|
|
|
|
const password = document.getElementById('fPass').value;
|
|
|
|
|
if (!username || !password) { showErr('Enter username and password'); return; }
|
|
|
|
|
|
2026-05-24 08:37:27 +00:00
|
|
|
savedUsername = username;
|
|
|
|
|
savedPassword = password;
|
|
|
|
|
await submitAuth(username, password, '');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function submitAuth(username, password, totpCode) {
|
|
|
|
|
const btn = document.getElementById('authBtn');
|
2026-05-24 07:18:54 +00:00
|
|
|
btn.disabled = true; btn.classList.add('busy');
|
|
|
|
|
|
|
|
|
|
const form = new URLSearchParams();
|
|
|
|
|
form.append('username', username);
|
|
|
|
|
form.append('password', password);
|
|
|
|
|
form.append('csrf_token', CSRF_TOKEN);
|
2026-05-24 08:37:27 +00:00
|
|
|
if (totpCode) form.append('totp_code', totpCode);
|
2026-05-24 07:18:54 +00:00
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const res = await fetch('/auth', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: form,
|
|
|
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
|
|
|
});
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
if (data.ok) {
|
|
|
|
|
window.location.href = NEXT || '/';
|
2026-05-24 08:37:27 +00:00
|
|
|
} else if (data.mfa_required) {
|
|
|
|
|
showTOTPStep();
|
2026-05-24 07:18:54 +00:00
|
|
|
} else {
|
|
|
|
|
showErr(data.error || 'Authentication failed');
|
2026-05-24 08:37:27 +00:00
|
|
|
if (mfaRequired) {
|
|
|
|
|
document.getElementById('fTOTP').value = '';
|
|
|
|
|
document.getElementById('fTOTP').focus();
|
|
|
|
|
}
|
2026-05-24 07:18:54 +00:00
|
|
|
}
|
|
|
|
|
} catch (_) {
|
|
|
|
|
showErr('Network error — try again');
|
|
|
|
|
} finally {
|
|
|
|
|
btn.disabled = false; btn.classList.remove('busy');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-24 08:37:27 +00:00
|
|
|
function showTOTPStep() {
|
|
|
|
|
mfaRequired = true;
|
|
|
|
|
document.getElementById('credSection').style.display = 'none';
|
|
|
|
|
document.getElementById('totpSection').style.display = 'block';
|
|
|
|
|
document.getElementById('authBtn').querySelector('.btn-text').textContent = 'Verify';
|
|
|
|
|
setTimeout(() => document.getElementById('fTOTP').focus(), 60);
|
|
|
|
|
}
|
|
|
|
|
|
2026-05-24 07:18:54 +00:00
|
|
|
function showErr(msg) {
|
|
|
|
|
const e = document.getElementById('authErr');
|
|
|
|
|
e.textContent = msg; e.classList.add('show');
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
