guardian · tjsilver · May 27, 2025 · May 22, 2025 · May 27, 2025 · May 27, 2025
diff --git a/app/controllers/PasskeyController.scala b/app/controllers/PasskeyController.scala
@@ -122,7 +122,13 @@ class PasskeyController(
         _ <- PasskeyDB.insert(request.user, credRecord, passkeyName)
         _ <- PasskeyChallengeDB.delete(request.user)
         _ = logger.info(s"Registered passkey for user ${request.user.username}")
-      } yield Redirect("/user-account")
+      } yield {
+        val message =
+          if (passkeyName.nonEmpty)
+            s"Passkey '$passkeyName' was registered successfully"
+          else "Passkey was registered successfully"
+        Redirect("/user-account").flashing("success" -> message)
+      }
     )
   }
 
@@ -156,9 +162,19 @@ class PasskeyController(
               JanusException.missingFieldInRequest(request.user, "passkeyId")
             )
         }
+        passkeyName <- request.body
+          .get("passkeyName")
+          .map(values => Success(values.head))
+          .getOrElse(Success(""))
         _ <- PasskeyDB.deleteById(request.user, passkeyId)
         _ = logger.info(s"Deleted passkey for user ${request.user.username}")
-      } yield Redirect("/user-account")
+      } yield {
+        val message =
+          if (passkeyName.nonEmpty)
+            s"Passkey '$passkeyName' was successfully deleted"
+          else "Passkey was successfully deleted"
+        Redirect("/user-account").flashing("success" -> message)
+      }
     )
   }
 

diff --git a/app/views/userAccount.scala.html b/app/views/userAccount.scala.html
@@ -81,4 +81,12 @@ <h4 class="orange-text">Passkey name</h4>
             <a href="#!" id="submit-button" class="waves-effect waves-light btn orange">Save</a>
         </div>
     </div>
+
+    <!-- Flash messages passed via data attributes to be handled by JavaScript -->
+    <div id="flash-message" 
+         style="display: none;"
+         data-success="@request.flash.get("success").getOrElse("")"
+         data-info="@request.flash.get("info").getOrElse("")"
+         data-error="@request.flash.get("error").getOrElse("")">
+    </div>
 }
diff --git a/frontend/janus.js b/frontend/janus.js
@@ -1,7 +1,6 @@
 import DOMPurify from 'dompurify';
 import M from 'materialize-css';
-import {setUpDeletePasskeyButtons, setUpProtectedLinks, setUpRegisterPasskeyButton} from './passkeys.js';
-
+import {displayFlashMessages, setUpDeletePasskeyButtons, setUpProtectedLinks, setUpRegisterPasskeyButton} from './passkeys.js';
 
 document.addEventListener('DOMContentLoaded', function() {
     "use strict";
@@ -300,4 +299,14 @@ document.addEventListener('DOMContentLoaded', function() {
     // setupAuthButtons('.auth-button');
     const protectedLinks = document.querySelectorAll('.passkey-protected');
     setUpProtectedLinks(protectedLinks);
+
+    const flashMessage = document.getElementById('flash-message');
+    if (flashMessage) {
+        const flashMessages = {
+            success: flashMessage.dataset.success,
+            info: flashMessage.dataset.info,
+            error: flashMessage.dataset.error
+        };
+        displayFlashMessages(flashMessages);
+    }
 });
diff --git a/frontend/passkeys.js b/frontend/passkeys.js
@@ -1,6 +1,11 @@
 import DOMPurify from 'dompurify';
 import M from 'materialize-css';
 
+/**
+ * Registers a new passkey for the current user
+ * @param {string} csrfToken - CSRF token for security verification
+ * @returns {Promise<void>} A promise that resolves when registration completes
+ */
 export async function registerPasskey(csrfToken) {
     try {
         const regOptionsResponse = await fetch('/passkey/registration-options', {
@@ -30,6 +35,10 @@ export async function registerPasskey(csrfToken) {
     }
 }
 
+/**
+ * Sets up click event listener for the passkey registration button
+ * @param {string} selector - CSS selector for the register button
+ */
 export function setUpRegisterPasskeyButton(selector) {
     const registerButton = document.querySelector(selector);
     if (!registerButton) { return }
@@ -43,6 +52,12 @@ export function setUpRegisterPasskeyButton(selector) {
     });
 }
 
+/**
+ * Authenticates a user with a passkey and redirects to the target URL
+ * @param {string} targetHref - URL to redirect to after successful authentication
+ * @param {string} csrfToken - CSRF token for security verification
+ * @returns {Promise<void>} A promise that resolves when authentication completes
+ */
 export async function authenticatePasskey(targetHref, csrfToken) {
     try {
         const authOptionsResponse = await fetch('/passkey/auth-options', {
@@ -65,6 +80,11 @@ export async function authenticatePasskey(targetHref, csrfToken) {
     }
 }
 
+/**
+ * Deletes a passkey from the user's account
+ * @param {string} passkeyId - ID of the passkey to delete
+ * @param {string} csrfToken - CSRF token for security verification
+ */
 export function deletePasskey(passkeyId, csrfToken) {
     try {   
         createAndSubmitForm('/passkey/delete', {
@@ -77,6 +97,10 @@ export function deletePasskey(passkeyId, csrfToken) {
     }
 }   
 
+/**
+ * Sets up click event listeners for passkey deletion buttons
+ * @param {string} selector - CSS selector for delete buttons
+ */
 export function setUpDeletePasskeyButtons(selector) {
     const deleteButtons = document.querySelectorAll(selector);
     if (!deleteButtons.length) {
@@ -103,20 +127,27 @@ export function setUpDeletePasskeyButtons(selector) {
 
             if (confirm(`Are you sure you want to delete the passkey "${passkeyName}"?`)) {
                 deletePasskey(passkeyId, csrfToken);
+            } else {
+                M.toast({ html: 'Passkey deletion cancelled', classes: 'rounded orange' });
             }
         });
     });
 }
 
+/**
+ * Creates and submits a form with the provided data
+ * @param {string} targetHref - Form submission URL
+ * @param {Object} formData - Data to include in the form
+ */
 function createAndSubmitForm(targetHref, formData) {
     const form = document.createElement('form');
     form.setAttribute('method', 'post');
-    form.setAttribute('action', targetHref);
+    form.setAttribute('action', DOMPurify.sanitize(targetHref));
 
     Object.entries(formData).forEach(([name, value]) => {
         const input = document.createElement('input');
         input.setAttribute('type', 'hidden');
-        input.setAttribute('name', name);
+        input.setAttribute('name', DOMPurify.sanitize(name));
         input.setAttribute('value', DOMPurify.sanitize(value));
         form.appendChild(input);
     });
@@ -125,6 +156,10 @@ function createAndSubmitForm(targetHref, formData) {
     form.submit();
 }
 
+/**
+ * Sets up protected links that require passkey authentication
+ * @param {NodeList|HTMLElement[]} links - Collection of link elements to protect
+ */
 export function setUpProtectedLinks(links) {
     if (!links.length) {
         return;
@@ -142,6 +177,34 @@ export function setUpProtectedLinks(links) {
     });
 }
 
+/**
+ * Displays flash messages from the server as toasts
+ * @param {Object} flashMessages Object containing flash messages by type
+ */
+export function displayFlashMessages(flashMessages) {
+    if (!flashMessages) { 
+        return 
+    }
+    if (flashMessages.success) {
+        M.toast({
+            html: flashMessages.success,
+            classes: 'green lighten-1 rounded',
+        });
+    }
+    if (flashMessages.info) {
+        M.toast({
+            html: flashMessages.info,
+            classes: 'blue lighten-1 rounded',
+        });
+    }
+    if (flashMessages.error) {
+        M.toast({
+            html: flashMessages.error,
+            classes: 'red lighten-1 rounded',
+        });
+    }
+}
+
 /**
  * Prompts the user to name a passkey via a modal dialog
  * @returns {Promise<string>} A promise that resolves with the passkey name
@@ -225,7 +288,9 @@ function getPasskeyNameFromUser() {
             input.classList.remove('invalid');
             errorMessage.style.display = 'none';
             modalInstance.close();
+            M.toast({html: 'Passkey registration cancelled', classes: 'rounded orange'});
             reject(new Error('Passkey registration cancelled'));
+
         };
 
         const handleKeyPress = (e) => {