feat(webauthn): show help message regarding username and non-discoverable credentials

The username is required for non-resident keys, but it's not necessary for discoverable credentials like Passkeys.

1 files changed, 13 insertions, 3 deletions

diff --git a/internal/ui/static/js/webauthn_handler.js b/internal/ui/static/js/webauthn_handler.js
index 32752d54..60a6a25c 100644
--- a/internal/ui/static/js/webauthn_handler.js
+++ b/internal/ui/static/js/webauthn_handler.js
@@ -5,10 +5,20 @@ class WebAuthnHandler {
 
     static showErrorMessage(errorMessage) {
         console.log("webauthn error: " + errorMessage);
-        const alertElement = document.getElementById("webauthn-error");
+
+        const alertElement = document.getElementById("webauthn-error-alert");
         if (alertElement) {
-            alertElement.textContent += " (" + errorMessage + ")";
-            alertElement.classList.remove("hidden");
+            alertElement.remove();
+        }
+
+        const alertTemplateElement = document.getElementById("webauthn-error");
+        if (alertTemplateElement) {
+            const clonedElement = alertTemplateElement.content.cloneNode(true);
+            const errorMessageElement = clonedElement.getElementById("webauthn-error-message");
+            if (errorMessageElement) {
+                errorMessageElement.textContent = errorMessage;
+            }
+            alertTemplateElement.parentNode.insertBefore(clonedElement, alertTemplateElement);
         }
     }