global: private xpub support part 2

website_next/wallets/lock/index.js

@@ -0,0 +1,40 @@
+import { createElement } from "../dom.js";
+
+/**
+ * @typedef {Object} LockOptions
+ * @property {(password: string, button: HTMLButtonElement, status: HTMLElement) => void | Promise<void>} onUnlock
+ * @property {() => void} onReset
+ */
+
+/**
+ * @param {LockOptions} options
+ */
+export function createLock(options) {
+  const section = createElement("section", "wallets__unlock");
+  const form = createElement("form", "wallets__unlock-form");
+  const password = document.createElement("input");
+  const button = document.createElement("button");
+  const reset = document.createElement("button");
+  const status = createElement("p", "wallets__status");
+
+  password.name = "password";
+  password.type = "password";
+  password.autocomplete = "current-password";
+  password.placeholder = "Password";
+  password.required = true;
+  button.type = "submit";
+  button.append("Unlock");
+  reset.type = "button";
+  reset.className = "wallets__reset";
+  reset.append("Reset vault");
+  status.setAttribute("role", "status");
+  form.append(password, button);
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    void options.onUnlock(password.value, button, status);
+  });
+  reset.addEventListener("click", options.onReset);
+  section.append(form, reset, status);
+
+  return section;
+}

website_next/wallets/lock/style.css

@@ -0,0 +1,36 @@
+main.wallets {
+  .wallets__unlock {
+    display: grid;
+    gap: 1rem;
+    place-content: center;
+    min-height: 16rem;
+    text-align: center;
+
+    h2,
+    p {
+      margin: 0;
+    }
+  }
+
+  .wallets__unlock-form {
+    display: grid;
+    grid-template-columns: minmax(12rem, 18rem) auto;
+    gap: 0.75rem;
+    align-items: end;
+    justify-content: center;
+  }
+
+  .wallets__reset {
+    justify-self: center;
+    color: var(--gray);
+    background: transparent;
+  }
+}
+
+@media (max-width: 34rem) {
+  main.wallets {
+    .wallets__unlock-form {
+      grid-template-columns: 1fr;
+    }
+  }
+}