chg: usr: add modern Webauthn authentication #4

templates/Security/login.html.twig

@@ -4,7 +4,6 @@
 
 {% block body %}
   <div class="auth-page">
-
     {% for message in app.flashes('success') %}
       <div class="auth-flash auth-flash--success">
         <i class="fa fa-check-circle"></i> {{ message }}
@@ -63,10 +62,16 @@
           </div>
         </div>
 
-        <label class="auth-remember">
-          <input type="checkbox" name="_remember_me"/>
-          <span>Remember me</span>
-        </label>
+        <div class="auth-below-password">
+          <label class="auth-remember">
+            <input type="checkbox" name="_remember_me"/>
+            <span>Remember me</span>
+          </label>
+
+          <p class="auth-forgot-password">
+            <a href="{{ path('MineSeekerBundle_forgot_password') }}">Forgot your password?</a>
+          </p>
+        </div>
 
         <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"/>
 
@@ -75,21 +80,28 @@
         </button>
       </form>
 
-      <p class="auth-switch">
-        <a href="{{ path('MineSeekerBundle_forgot_password') }}">Forgot your password?</a>
-      </p>
+      <div class="auth-divider">
+        <span>or</span>
+      </div>
+
+      <div id="passkey-login-root"
+           data-api-routes="{{ {
+             authenticationBegin: path('api_webauthn_authentication_begin'),
+             authenticationComplete: path('api_webauthn_authentication_complete'),
+           }|json_encode|e('html') }}"
+      ></div>
 
       <p class="auth-switch">
         No account yet?
         <a href="{{ path('MineSeekerBundle_register') }}">Create one</a>
       </p>
     </div>
-
   </div>
 {% endblock %}
 
 {% block javascripts %}
   {{ parent() }}
+
   <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
   <script>
     document.querySelector('.auth-form').addEventListener('submit', function (e) {
@@ -102,5 +114,8 @@
         });
       });
     });
+
   </script>
+
+  {{ vite_entry_script_tags('passkey') }}
 {% endblock %}