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,62 @@
+{% extends "base.html" %}
+{% block title %}Enable Two-Factor{% endblock %}
+{% block content %}
+<div class="row justify-content-center mt-3">
+  <div class="col-md-8 col-lg-6">
+    <h3 class="mb-3"><i class="bi bi-shield-lock"></i> Enable two-factor authentication</h3>
+
+    <div class="card shadow-sm mb-3">
+      <div class="card-body">
+        <ol class="mb-3 ps-3">
+          <li class="mb-1">Install an authenticator app (Google Authenticator, Authy, 1Password, …).</li>
+          <li class="mb-1">Scan the QR code below, or enter the setup key manually.</li>
+          <li>Enter the 6-digit code the app shows to confirm and finish.</li>
+        </ol>
+
+        <div class="text-center mb-3">
+          <div class="d-inline-block p-2 bg-white border rounded" style="width:220px;height:220px;">
+            {{ qr_svg | safe }}
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label small text-muted mb-1">Manual setup key</label>
+          <div class="input-group">
+            <input type="text" class="form-control font-monospace" id="secretKey"
+                   value="{{ secret }}" readonly>
+            <button class="btn btn-outline-secondary" type="button" onclick="copySecret()">
+              <i class="bi bi-clipboard"></i>
+            </button>
+          </div>
+        </div>
+
+        <form method="POST" action="{{ url_for('auth.mfa_setup') }}">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+          <label class="form-label fw-semibold">Enter the 6-digit code to confirm</label>
+          <div class="input-group input-group-lg mb-3">
+            <input type="text" name="code" class="form-control text-center"
+                   inputmode="numeric" autocomplete="one-time-code" autofocus
+                   placeholder="123456" style="letter-spacing:.4em;">
+            <button type="submit" class="btn btn-primary">
+              <i class="bi bi-check2-circle"></i> Enable
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <a href="{{ url_for('auth.profile') }}" class="btn btn-outline-secondary">
+      <i class="bi bi-x-lg"></i> Cancel
+    </a>
+  </div>
+</div>
+
+<script>
+function copySecret() {
+  var el = document.getElementById('secretKey');
+  el.select();
+  el.setSelectionRange(0, 99999);
+  navigator.clipboard.writeText(el.value);
+}
+</script>
+{% endblock %}