fix(login): passkey setup when pressing "Enter" key on login form (#9485)

# Which Problems Are Solved

When registering passkeys or u2f methods as second factor, some users
pressed the "Enter" key, rather than clicking the submit button. This
method has bypassed the execution of the device registration and
encoding scripts, resulting in the form being submitted without the
necessary encoded values.

# How the Problems Are Solved

This PR ensures that device registration is always executed and the
required information are submitted in the form regardless of pressing
"Enter" or clicking the button.

# Additional Changes

None

# Additional Context

- closes #6592
- closes #2910

internal/api/ui/login/static/resources/scripts/webauthn.js

@@ -1,4 +1,4 @@
-function checkWebauthnSupported(button, func) {
+function checkWebauthnSupported(func, optionalClickId) {
   let support = document.getElementsByClassName("wa-support");
   let noSupport = document.getElementsByClassName("wa-no-support");
   if (!window.PublicKeyCredential) {
@@ -10,7 +10,13 @@ function checkWebauthnSupported(button, func) {
     }
     return;
   }
-  document.getElementById(button).addEventListener("click", func);
+
+  // if id is provided add click event only, otherwise call the function directly
+  if (optionalClickId) {
+    document.getElementById(optionalClickId).addEventListener("click", func);
+  } else {
+    func();
+  }
 }
 
 function webauthnError(error) {

internal/api/ui/login/static/resources/scripts/webauthn_login.js

@@ -1,6 +1,6 @@
 document.addEventListener(
   "DOMContentLoaded",
-  checkWebauthnSupported("btn-login", login)
+  checkWebauthnSupported(login, "btn-login"),
 );
 
 async function login() {

internal/api/ui/login/static/resources/scripts/webauthn_register.js

@@ -1,6 +1,14 @@
 document.addEventListener(
   "DOMContentLoaded",
-  checkWebauthnSupported("btn-register", registerCredential)
+  () => {
+    const form = document.getElementsByTagName("form")[0];
+    if (form) {
+      form.addEventListener("submit", (event) => {
+        event.preventDefault(); // Prevent the default form submission
+        checkWebauthnSupported(registerCredential);
+      });
+    }
+  }
 );
 
 async function registerCredential() {
@@ -8,7 +16,7 @@ async function registerCredential() {
 
   let opt;
   try {
-    opt = JSON.parse(atob(document.getElementsByName("credentialCreationData")[0].value));
+    opt = JSON.parse(window.atob(document.getElementsByName("credentialCreationData")[0].value));
   } catch (e) {
     webauthnError({ message: "Failed to parse credential creation data." });
     return;

internal/api/ui/login/static/templates/mfa_init_u2f.html

@@ -37,7 +37,7 @@
         </a>
 
         <span class="fill-space"></span>
-        <a id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "InitMFAU2F.RegisterTokenButtonText"}}</a>
+        <button type="submit" id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "InitMFAU2F.RegisterTokenButtonText"}}</button>
     </div>
 </form>
 

internal/api/ui/login/static/templates/passwordless_registration.html

@@ -40,7 +40,7 @@
     <div class="lgn-actions">
         <span class="fill-space"></span>
         {{if not .Disabled}}
-        <a id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "PasswordlessRegistration.RegisterTokenButtonText"}}</a>
+        <button type="submit" id="btn-register" class="lgn-raised-button lgn-primary wa-support">{{t "PasswordlessRegistration.RegisterTokenButtonText"}}</button>
         {{end}}
     </div>
 </form>