website: redesign part 34

website_next/wallets/start/persistent.js

@@ -0,0 +1,71 @@
+import { createResetButton } from "./reset/index.js";
+
+/**
+ * @typedef {"create" | "unlock"} StartMode
+ *
+ * @typedef {Object} PersistentOptions
+ * @property {StartMode} mode
+ * @property {(password: string, button: HTMLButtonElement, status: HTMLElement) => boolean | void | Promise<boolean | void>} onPassword
+ * @property {() => void} [onReset]
+ */
+
+/**
+ * @param {PersistentOptions} options
+ */
+export function createPersistentVault(options) {
+  const persistent = document.createElement("section");
+  const title = document.createElement("h2");
+  const text = document.createElement("p");
+  const form = document.createElement("form");
+  const password = document.createElement("input");
+  const submit = document.createElement("button");
+  const status = document.createElement("output");
+  const unlock = options.mode === "unlock";
+
+  title.append("Persistent vault");
+  text.append(
+    unlock
+      ? "Unlock the encrypted vault saved in this browser."
+      : "Create an encrypted vault saved in this browser.",
+  );
+  password.name = "password";
+  password.type = "password";
+  password.autocomplete = unlock ? "current-password" : "new-password";
+  password.autofocus = true;
+  password.placeholder = unlock ? "Password" : "Set password";
+  password.required = true;
+  submit.type = "submit";
+  submit.append(unlock ? "Unlock" : "Create");
+  form.append(password, submit);
+
+  function clearInvalid() {
+    password.removeAttribute("aria-invalid");
+  }
+
+  password.addEventListener("input", clearInvalid);
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    clearInvalid();
+    void (async () => {
+      const valid = await options.onPassword(password.value, submit, status);
+
+      if (valid === false) {
+        password.setAttribute("aria-invalid", "true");
+        password.focus({ preventScroll: true });
+      }
+    })();
+  });
+
+  persistent.append(title, text, form);
+
+  if (options.onReset) {
+    persistent.append(createResetButton(options.onReset));
+  }
+
+  persistent.append(status);
+
+  return {
+    element: persistent,
+    password,
+  };
+}