July 4 - Implement TOTP 2FA

2026-07-04 13:40:03 -04:00
parent 07226b4878
commit d87c889ca2
23 changed files with 1336 additions and 10 deletions
@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+{% block title %}Two-Factor Verification{% endblock %}
+{% block content %}
+<div class="row justify-content-center mt-4">
+  <div class="col-md-5 col-lg-4">
+    <div class="card shadow-sm">
+      <div class="card-body p-4">
+        <div class="text-center mb-3">
+          <i class="bi bi-shield-lock fs-1 text-primary"></i>
+          <h4 class="mt-2 mb-1">Two-factor verification</h4>
+          <p class="text-muted small mb-0">
+            Enter the 6-digit code from your authenticator app.
+          </p>
+        </div>
+
+        <form method="POST" action="{{ url_for('auth.mfa_challenge') }}">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+
+          <div class="mb-3">
+            <input type="text" name="code" class="form-control form-control-lg text-center"
+                   inputmode="numeric" autocomplete="one-time-code" autofocus
+                   placeholder="123456" style="letter-spacing:.4em;">
+          </div>
+
+          <div class="form-check mb-3">
+            <input class="form-check-input" type="checkbox" name="recovery" id="useRecovery" value="1">
+            <label class="form-check-label small" for="useRecovery">
+              I'll use a recovery code instead
+            </label>
+          </div>
+
+          <button type="submit" class="btn btn-primary w-100">
+            <i class="bi bi-check2-circle"></i> Verify
+          </button>
+        </form>
+
+        <div class="text-center mt-3">
+          <a href="{{ url_for('auth.login') }}" class="small text-muted">Back to login</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// When "use recovery code" is toggled, relax the numeric hints for the code box.
+(function () {
+  var chk = document.getElementById('useRecovery');
+  var box = document.querySelector('input[name="code"]');
+  if (!chk || !box) return;
+  chk.addEventListener('change', function () {
+    if (chk.checked) {
+      box.setAttribute('inputmode', 'text');
+      box.setAttribute('placeholder', 'xxxx-xxxx');
+      box.style.letterSpacing = '.15em';
+    } else {
+      box.setAttribute('inputmode', 'numeric');
+      box.setAttribute('placeholder', '123456');
+      box.style.letterSpacing = '.4em';
+    }
+  });
+})();
+</script>
+{% endblock %}