chg: usr: add modern Webauthn authentication #4

templates/Security/profile_security.html.twig

@@ -0,0 +1,53 @@
+{% extends 'Game/index.html.twig' %}
+
+{% block title %} - Security Settings{% endblock %}
+
+{% block body %}
+  <div class="profile-page">
+    <div class="profile-header">
+      <div class="profile-avatar">
+        {{ app.user.username|slice(0, 2)|upper }}
+      </div>
+      <div class="profile-info">
+        <h1 class="profile-name">{{ app.user.username }}</h1>
+        <p class="profile-role">
+          <i class="fa fa-lock"></i> Security Settings
+        </p>
+      </div>
+    </div>
+
+    <div class="profile-actions">
+      <a href="{{ path('MineSeekerBundle_profile') }}" class="profile-action-btn">
+        <i class="fa fa-chevron-left"></i> Back to Profile
+      </a>
+    </div>
+
+    <div class="profile-section">
+      <h2 class="profile-section__title">
+        <i class="fa fa-key"></i> Passkeys (WebAuthn)
+      </h2>
+      <p class="profile-section__description">
+        Passkeys provide a secure, passwordless way to sign in to your account. Manage your registered passkeys below.
+      </p>
+
+      <div id="passkey-manager-root"
+           data-credentials="{{ credentials|json_encode|e('html') }}"
+           data-api-routes="{{ {
+             registrationBegin: path('api_webauthn_registration_begin'),
+             registrationComplete: path('api_webauthn_registration_complete'),
+             credentials: path('api_webauthn_credentials'),
+           }|json_encode|e('html') }}"
+      ></div>
+    </div>
+  </div>
+{% endblock %}
+
+{% block stylesheets %}
+  {{ parent() }}
+  {{ vite_entry_link_tags('passkeyStyle') }}
+{% endblock %}
+
+{% block javascripts %}
+  {{ parent() }}
+  {{ vite_entry_script_tags('passkey') }}
+{% endblock %}