feat: add passwordless passkey-only account UI (#53)

Add UI support for passwordless registration, password removal,
set-password mode, and auth methods display. New auth-methods.js
utility, passwordless toggle on registration page, set-password
mode on change-password page, and auth methods card with remove
password flow on profile page.

Author: devondragon

src/main/resources/application.yml

@@ -123,7 +123,7 @@ user:
     bcryptStrength: 12 # The bcrypt strength to use for password hashing.  The higher the number, the longer it takes to hash the password.  The default is 12.  The minimum is 4.  The maximum is 31.
     testHashTime: true # If true, the test hash time will be logged to the console on startup.  This is useful for determining the optimal bcryptStrength value.
     defaultAction: deny # The default action for all requests.  This can be either deny or allow.
-    unprotectedURIs: /,/index.html,/favicon.ico,/apple-touch-icon-precomposed.png,/css/*,/js/*,/js/user/*,/js/event/*,/js/utils/*,/img/**,/user/registration,/user/resendRegistrationToken,/user/resetPassword,/user/registrationConfirm,/user/changePassword,/user/savePassword,/oauth2/authorization/*,/login,/user/login,/user/login.html,/swagger-ui.html,/swagger-ui/**,/v3/api-docs/**,/event/,/event/list.html,/event/**,/about.html,/error,/error.html,/webauthn/authenticate/**,/login/webauthn # A comma delimited list of URIs that should not be protected by Spring Security if the defaultAction is deny.
+    unprotectedURIs: /,/index.html,/favicon.ico,/apple-touch-icon-precomposed.png,/css/*,/js/*,/js/user/*,/js/event/*,/js/utils/*,/img/**,/user/registration,/user/registration/passwordless,/user/resendRegistrationToken,/user/resetPassword,/user/registrationConfirm,/user/changePassword,/user/savePassword,/oauth2/authorization/*,/login,/user/login,/user/login.html,/swagger-ui.html,/swagger-ui/**,/v3/api-docs/**,/event/,/event/list.html,/event/**,/about.html,/error,/error.html,/webauthn/authenticate/**,/login/webauthn # A comma delimited list of URIs that should not be protected by Spring Security if the defaultAction is deny.
     protectedURIs: /protected.html # A comma delimited list of URIs that should be protected by Spring Security if the defaultAction is allow.
     disableCSRFdURIs: /no-csrf-test # A comma delimited list of URIs that should not be protected by CSRF protection. This may include API endpoints that need to be called without a CSRF token.
 

src/main/resources/static/js/user/auth-methods.js

@@ -0,0 +1,37 @@
+/**
+ * Auth methods utility - fetches and caches the user's authentication methods.
+ */
+import { getCsrfToken, getCsrfHeaderName } from '/js/user/webauthn-utils.js';
+
+let cachedAuthMethods = null;
+
+/**
+ * Fetch the user's authentication methods from the server.
+ * Caches the result for the page load unless forceRefresh is true.
+ */
+export async function getAuthMethods(forceRefresh = false) {
+    if (cachedAuthMethods && !forceRefresh) {
+        return cachedAuthMethods;
+    }
+
+    const response = await fetch('/user/auth-methods', {
+        headers: {
+            [getCsrfHeaderName()]: getCsrfToken()
+        }
+    });
+
+    if (!response.ok) {
+        throw new Error('Failed to fetch auth methods');
+    }
+
+    const json = await response.json();
+    cachedAuthMethods = json.data;
+    return cachedAuthMethods;
+}
+
+/**
+ * Invalidate the cached auth methods so the next call fetches fresh data.
+ */
+export function invalidateAuthMethodsCache() {
+    cachedAuthMethods = null;
+}

src/main/resources/static/js/user/register.js

@@ -12,6 +12,9 @@ import {
     initPasswordStrengthMeter,
     initPasswordRequirements,
 } from "/js/utils/password-validation.js";
+import { isWebAuthnSupported } from "/js/user/webauthn-utils.js";
+
+let isPasswordlessMode = false;
 
 document.addEventListener("DOMContentLoaded", () => {
     const form = document.querySelector("#registerForm");
@@ -24,6 +27,42 @@ document.addEventListener("DOMContentLoaded", () => {
 
     form.addEventListener("submit", (event) => handleRegistration(event));
 
+    // Show registration mode toggle if WebAuthn is supported
+    if (isWebAuthnSupported()) {
+        const toggleContainer = document.querySelector("#registrationModeToggle");
+        if (toggleContainer) {
+            toggleContainer.classList.remove("d-none");
+        }
+    }
+
+    // Registration mode toggle handlers
+    const modePasswordBtn = document.querySelector("#modePassword");
+    const modePasswordlessBtn = document.querySelector("#modePasswordless");
+    const passwordFieldsDiv = document.querySelector("#passwordFields");
+    const passwordlessInfo = document.querySelector("#passwordlessInfo");
+
+    if (modePasswordBtn && modePasswordlessBtn) {
+        modePasswordBtn.addEventListener("click", () => {
+            isPasswordlessMode = false;
+            modePasswordBtn.classList.add("active");
+            modePasswordlessBtn.classList.remove("active");
+            passwordFieldsDiv.classList.remove("d-none");
+            passwordlessInfo.classList.add("d-none");
+            passwordField.setAttribute("required", "");
+            matchPasswordField.setAttribute("required", "");
+        });
+
+        modePasswordlessBtn.addEventListener("click", () => {
+            isPasswordlessMode = true;
+            modePasswordlessBtn.classList.add("active");
+            modePasswordBtn.classList.remove("active");
+            passwordFieldsDiv.classList.add("d-none");
+            passwordlessInfo.classList.remove("d-none");
+            passwordField.removeAttribute("required");
+            matchPasswordField.removeAttribute("required");
+        });
+    }
+
     // Real-time password matching validation
     [passwordField, matchPasswordField].forEach((field) => {
         field.addEventListener("input", () => {
@@ -56,6 +95,61 @@ async function handleRegistration(event) {
     signUpButton.disabled = true;
     clearErrors();
 
+    // Validate terms and conditions
+    const termsCheckbox = document.querySelector("#terms");
+    if (!termsCheckbox.checked) {
+        alert("You must agree to the Terms and Conditions to register.");
+        signUpButton.disabled = false;
+        return;
+    }
+
+    if (isPasswordlessMode) {
+        // Passwordless registration - minimal payload
+        const firstName = document.querySelector("#firstName").value;
+        const lastName = document.querySelector("#lastName").value;
+        const email = document.querySelector("#email").value;
+
+        const payload = { firstName, lastName, email };
+
+        try {
+            const response = await fetch("/user/registration/passwordless", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    [document.querySelector("meta[name='_csrf_header']").content]:
+                        document.querySelector("meta[name='_csrf']").content,
+                },
+                body: JSON.stringify(payload),
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                window.location.href = data.redirectUrl;
+            } else if (data.errors) {
+                const errorMessages = Object.entries(data.errors)
+                    .map(([field, message]) => `${field}: ${message}`)
+                    .join("<br>");
+                showMessage(globalError, errorMessages, "alert-danger");
+            } else {
+                const errorMessage =
+                    data.messages?.join(" ") || data.message || "Registration failed. Please try again.";
+                showMessage(globalError, errorMessage, "alert-danger");
+            }
+        } catch (error) {
+            console.error("Request failed:", error);
+            showMessage(
+                globalError,
+                "An unexpected error occurred. Please try again later.",
+                "alert-danger"
+            );
+        } finally {
+            signUpButton.disabled = false;
+        }
+        return;
+    }
+
+    // Standard password registration
     const password = document.querySelector("#password").value;
     const matchPassword = document.querySelector("#matchPassword").value;
 
@@ -69,14 +163,6 @@ async function handleRegistration(event) {
         return;
     }
 
-    // Validate terms and conditions
-    const termsCheckbox = document.querySelector("#terms");
-    if (!termsCheckbox.checked) {
-        alert("You must agree to the Terms and Conditions to register.");
-        signUpButton.disabled = false;
-        return;
-    }
-
     // Prepare JSON payload
     const formData = Object.fromEntries(new FormData(form).entries());
 

src/main/resources/static/js/user/update-password.js

@@ -4,15 +4,43 @@ import {
     initPasswordStrengthMeter,
     initPasswordRequirements,
 } from "/js/utils/password-validation.js";
+import { getAuthMethods } from "/js/user/auth-methods.js";
 
-document.addEventListener("DOMContentLoaded", () => {
+let isSetPasswordMode = false;
+
+document.addEventListener("DOMContentLoaded", async () => {
     const form = document.querySelector("#updatePasswordForm");
     const globalMessage = document.querySelector("#globalMessage");
     const currentPasswordField = document.querySelector("#currentPassword");
     const newPasswordField = document.querySelector("#newPassword");
     const confirmPasswordField = document.querySelector("#confirmPassword");
     const confirmPasswordError = document.querySelector("#confirmPasswordError");
 
+    // Check if user has a password; if not, switch to "set password" mode
+    try {
+        const auth = await getAuthMethods();
+        if (!auth.hasPassword) {
+            const currentPasswordSection = document.querySelector("#currentPasswordSection");
+            if (currentPasswordSection) {
+                currentPasswordSection.classList.add("d-none");
+            }
+            if (currentPasswordField) {
+                currentPasswordField.removeAttribute("required");
+            }
+            const setPasswordInfo = document.querySelector("#setPasswordInfo");
+            if (setPasswordInfo) {
+                setPasswordInfo.classList.remove("d-none");
+            }
+            const pageTitle = document.querySelector("#pageTitle");
+            if (pageTitle) {
+                pageTitle.textContent = "Set a Password";
+            }
+            isSetPasswordMode = true;
+        }
+    } catch (error) {
+        console.error("Failed to check auth methods:", error);
+    }
+
     // Initialize password strength meter for new password field
     const passwordStrength = document.getElementById("password-strength");
     const strengthLevel = document.getElementById("strengthLevel");
@@ -28,7 +56,6 @@ document.addEventListener("DOMContentLoaded", () => {
         event.preventDefault();
         clearErrors();
 
-        const currentPassword = currentPasswordField.value;
         const newPassword = newPasswordField.value;
         const confirmPassword = confirmPasswordField.value;
 
@@ -38,6 +65,43 @@ document.addEventListener("DOMContentLoaded", () => {
             return;
         }
 
+        if (isSetPasswordMode) {
+            // Set password mode - no old password needed
+            const requestData = {
+                newPassword: newPassword,
+                confirmPassword: confirmPassword,
+            };
+
+            try {
+                const response = await fetch("/user/setPassword", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        [document.querySelector("meta[name='_csrf_header']").content]:
+                            document.querySelector("meta[name='_csrf']").content,
+                    },
+                    body: JSON.stringify(requestData),
+                });
+
+                const data = await response.json();
+
+                if (response.ok && data.success) {
+                    showMessage(globalMessage, data.messages.join(" "), "alert-success");
+                    form.reset();
+                } else {
+                    const errorMessage = data.messages?.join(" ") || "Unable to set your password.";
+                    showMessage(globalMessage, errorMessage, "alert-danger");
+                }
+            } catch (error) {
+                console.error("Request failed:", error);
+                showMessage(globalMessage, "An unexpected error occurred. Please try again later.", "alert-danger");
+            }
+            return;
+        }
+
+        // Standard update password mode
+        const currentPassword = currentPasswordField.value;
+
         // Prepare JSON payload
         const requestData = {
             oldPassword: currentPassword,