nahakubuilder/gotermix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added mfa

Browse Source
This commit is contained in:
BlobTheBuilder
2026-05-24 08:37:27 +00:00
parent a1d9ed86e1
commit 3ab54f812a
10 changed files with 398 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internals/web/login.html
+80 -17
View File
@@ -7,8 +7,11 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/static/app.css" />
<style>
/* login page overrides — no tab bar or toolbar offsets */
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.totp-digits {
letter-spacing: 0.3em; font-size: 20px; text-align: center;
font-variant-numeric: tabular-nums;
}
</style>
</head>
<body>
@@ -16,19 +19,37 @@
<div class="m-card" style="max-width:360px;width:100%;margin:16px;">
<div class="auth-card">
<div class="auth-logo"><em>&gt;_</em> GoTermix</div>
<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">
<!-- Step 1: credentials -->
<div id="credSection">
<div class="auth-sub">Authentication required</div>
<label class="m-label" for="fPass">Password</label>
<input class="m-input" type="password" id="fPass"
autocomplete="current-password"
placeholder="password"
maxlength="1024">
<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>
<!-- 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>
<div class="auth-err" id="authErr"></div>
@@ -43,27 +64,57 @@
const CSRF_TOKEN = "[[CSRF_TOKEN]]";
const NEXT = "[[NEXT]]";
let mfaRequired = false;
let savedUsername = '';
let savedPassword = '';
// ── Keyboard nav ─────────────────────────────────────────────────────
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();
});
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();
});
// ── Login flow ────────────────────────────────────────────────────────
async function doLogin() {
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;
}
const username = document.getElementById('fUser').value.trim();
const password = document.getElementById('fPass').value;
const btn = document.getElementById('authBtn');
if (!username || !password) { showErr('Enter username and password'); return; }
savedUsername = username;
savedPassword = password;
await submitAuth(username, password, '');
}
async function submitAuth(username, password, totpCode) {
const btn = document.getElementById('authBtn');
btn.disabled = true; btn.classList.add('busy');
document.getElementById('authErr').classList.remove('show');
const form = new URLSearchParams();
form.append('username', username);
form.append('password', password);
form.append('csrf_token', CSRF_TOKEN);
if (totpCode) form.append('totp_code', totpCode);
try {
const res = await fetch('/auth', {
@@ -74,8 +125,14 @@ async function doLogin() {
const data = await res.json();
if (data.ok) {
window.location.href = NEXT || '/';
} else if (data.mfa_required) {
showTOTPStep();
} else {
showErr(data.error || 'Authentication failed');
if (mfaRequired) {
document.getElementById('fTOTP').value = '';
document.getElementById('fTOTP').focus();
}
}
} catch (_) {
showErr('Network error — try again');
@@ -84,11 +141,17 @@ async function doLogin() {
}
}
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);
}
function showErr(msg) {
const e = document.getElementById('authErr');
e.textContent = msg; e.classList.add('show');
document.getElementById('fPass').value = '';
document.getElementById('fPass').focus();
}
</script>
</body>