Add TOTP for Admin login
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user