Implemented phase 6 for the POC prototype in the Website service.

Services/Website/Resources/Static/js/passkey.js

@@ -25,14 +25,23 @@ if (form && supported) {
   };
 
   button.hidden = false;
+
+  // The word for a browser without passkeys is on the page by default; this one has them.
+  for (const notice of document.querySelectorAll("[data-passkey-unsupported]")) {
+    notice.hidden = true;
+  }
+
   button.addEventListener("click", async () => {
     button.disabled = true;
     status.textContent = "";
 
     try {
-      // On the account screen the button adds a passkey to the account signed in; on the sign-in screen it signs in or joins.
-      const adding = button.dataset.passkey === "add";
-      const start = adding ? { add: true } : { email: form.querySelector("[name=email]").value };
+      // The button adds a passkey on the account screen, replaces them all from a recovery link, and otherwise signs in or joins.
+      const start = button.dataset.passkey === "add"
+        ? { add: true }
+        : button.dataset.passkey === "recover"
+          ? { recover: form.querySelector("[name=recover]").value }
+          : { email: form.querySelector("[name=email]").value };
       const { mode, options } = await post("/sign-in/passkey/options", start);
       let credential;
 
@@ -55,8 +64,9 @@ if (form && supported) {
 
       window.location.assign(location);
     } catch (error) {
-      // Dismissing the browser's prompt is not an error worth a message.
-      status.textContent = error.name === "NotAllowedError" ? "" : error.message;
+      status.textContent = error.name === "NotAllowedError"
+        ? "That didn't go through: the passkey prompt was cancelled. Nothing was created or changed — try again."
+        : error.message;
       button.disabled = false;
     }
   });