Add TOTP for Admin login

This commit is contained in:
Ettore
2026-05-10 16:38:12 +02:00
parent c4355eb371
commit 9f703c1bfa
8 changed files with 264 additions and 17 deletions

View File

@@ -97,6 +97,12 @@
<label for="admin-password">Password</label>
<input id="admin-password" type="password" autocomplete="current-password" />
</div>
<div class="field hidden" id="otp-field">
<label for="admin-otp">Authenticator code</label>
<input id="admin-otp" type="text" inputmode="numeric" pattern="[0-9]{6}"
autocomplete="one-time-code" maxlength="6" placeholder="6-digit code"
style="font-family:monospace;font-size:1.3rem;letter-spacing:.2em;text-align:center" />
</div>
<p id="login-error" class="error-msg hidden"></p>
<button type="submit" class="btn btn-primary btn-full" style="margin-top:.25rem">Sign in</button>
</form>
@@ -531,6 +537,33 @@
</div>
</div>
<!-- ── TOTP setup modal ──────────────────────────────────────────────────── -->
<div id="totp-modal" class="modal-backdrop hidden">
<div class="modal" style="max-width:360px;text-align:center">
<h3>Set up Two-Factor Authentication</h3>
<div id="totp-step-scan">
<p style="color:var(--text-muted);font-size:.88rem;margin:.75rem 0 1rem">
Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.), then enter the 6-digit code to confirm.
</p>
<div style="display:flex;justify-content:center;background:#fff;padding:.75rem;border-radius:8px;margin-bottom:1rem">
<canvas id="totp-qr-canvas" style="max-width:100%;height:auto;display:block"></canvas>
</div>
<p id="totp-uri-fallback" style="font-size:.72rem;color:var(--text-muted);word-break:break-all;margin-bottom:1rem"></p>
<div class="field">
<label for="totp-confirm-code">Verification code</label>
<input id="totp-confirm-code" type="text" inputmode="numeric" pattern="[0-9]{6}"
maxlength="6" placeholder="000000"
style="font-family:monospace;font-size:1.4rem;letter-spacing:.25em;text-align:center" />
</div>
<p id="totp-error" class="error-msg hidden"></p>
<div class="modal-actions">
<button type="button" id="totp-cancel" class="btn btn-ghost">Cancel</button>
<button type="button" id="totp-confirm-btn" class="btn btn-primary">Enable 2FA</button>
</div>
</div>
</div>
</div>
<!-- ── Toast ───────────────────────────────────────────────────────────── -->
<div id="toast" class="toast hidden" aria-live="assertive"></div>