new: usr: implement the 2FA authentication (TOTP and backup codes) #4

templates/Security/2fa_setup.html.twig

@@ -0,0 +1,63 @@
+{% extends 'Game/index.html.twig' %}
+
+{% block title %} - Enable Two-Factor Authentication{% endblock %}
+
+{% block body %}
+  <div class="auth-page">
+    <div class="auth-card auth-card--wide">
+      <h2 class="auth-title">Enable Two-Factor Authentication</h2>
+      <p class="auth-sub">Scan the QR code with your authenticator app</p>
+
+      <div class="twofa-setup">
+        <div class="twofa-setup__qr">
+          <img
+            src="{{ path('MineSeekerBundle_2fa_qr_code') }}"
+            alt="TOTP QR Code"
+            width="220"
+            height="220"
+          />
+        </div>
+
+        <div class="twofa-setup__manual">
+          <p class="twofa-setup__manual-label">Can't scan? Enter this key manually:</p>
+          <code class="twofa-setup__secret">{{ pending_secret }}</code>
+        </div>
+
+        <form class="auth-form" method="post" action="{{ path('MineSeekerBundle_2fa_enable') }}">
+          <input type="hidden" name="_token" value="{{ csrf_token('2fa_enable') }}"/>
+
+          <div class="auth-field">
+            <label for="auth-code" class="auth-label">Verification Code</label>
+            <div class="auth-input-wrap">
+              <i class="fa fa-shield auth-input-icon"></i>
+              <input
+                type="text"
+                id="auth-code"
+                name="_auth_code"
+                class="auth-input auth-input--code"
+                inputmode="numeric"
+                pattern="[0-9]*"
+                maxlength="6"
+                autocomplete="one-time-code"
+                autofocus
+                required
+                placeholder="000000"
+              />
+            </div>
+            <p class="auth-field-hint">Enter the 6-digit code from your app to confirm setup.</p>
+          </div>
+
+          <button type="submit" class="auth-submit">
+            <i class="fa fa-check"></i> Activate 2FA
+          </button>
+        </form>
+      </div>
+
+      <div class="auth-back">
+        <a href="{{ path('MineSeekerBundle_profile_security') }}">
+          <i class="fa fa-chevron-left"></i> Cancel
+        </a>
+      </div>
+    </div>
+  </div>
+{% endblock %}