The account label (the passkey's name/displayName in the user's password manager) is no longer forced to the app name. AccountGate adds a "Name this passkey" field on the create flow; an empty value falls back to referenceApp.name.
- commit
- 94ba5fd0c48cc6338a7e9b7d9e11dab8ade043b6
- parent
- 3cee1f3a847284b6bf7bc903df21cd8e62807f70
- author
- Dami <dami.etoile@gmail.com>
| M | apps/ | 18 | +++++++++++++++++- |
| M | apps/ | 13 | +++++++++++++ |
| M | package/ | 4 | ++-- |
@@ -1,4 +1,5 @@
11 import { useCallback, useEffect, useState } from "preact/hooks";2+import { referenceApp } from "../app.ts";23 import { AuthError } from "../_lofi/auth.ts";34 import {45 createPasskeyAccount,@@ -44,6 +45,9 @@ export default function AccountGate() {
4445 const [session, setSession] = useState<Session | null>(null);4546 const [busy, setBusy] = useState<"create" | "signin" | "signout" | null>(null);4647 const [error, setError] = useState<string | null>(null);48+ // The nickname the user gives their passkey — it becomes the credential's name49+ // in their password manager, so they can tell which account a key unlocks.50+ const [label, setLabel] = useState("");4751 4852 useEffect(() => {4953 let active = true;@@ -138,11 +142,23 @@ export default function AccountGate() {
138142 Your passkey is your account. Create one, or sign in with an existing one — the same key139143 reaches the same data on every device it can.140144 </p>145+ <div class="account-field">146+ <label for="passkey-label">Name this passkey</label>147+ <input148+ id="passkey-label"149+ value={label}150+ onInput={(event) => setLabel(event.currentTarget.value)}151+ placeholder={referenceApp.name}152+ autocomplete="off"153+ disabled={busy !== null}154+ />155+ <p class="account-note">Shown in your password manager. Defaults to the app name.</p>156+ </div>141157 <div class="account-actions">142158 <button143159 type="button"144160 disabled={disabled}145- onClick={() => run("create", () => createPasskeyAccount())}161+ onClick={() => run("create", () => createPasskeyAccount(label.trim() || undefined))}146162 >147163 {busy === "create" ? "Creating…" : "Create passkey account"}148164 </button>@@ -219,6 +219,19 @@ ul {
219219 margin: 0.25rem 0 1rem;220220 }221221 222+.account-field {223+ margin: 0.75rem 0 0.25rem;224+}225+226+.account-field input {227+ max-width: 24rem;228+ width: 100%;229+}230+231+.account-field .account-note {232+ margin: 0.35rem 0 0;233+}234+222235 .account-actions {223236 display: flex;224237 flex-wrap: wrap;@@ -36,13 +36,13 @@
3636 "src/_lofi/use-device-capabilities.ts": "f7c7b2321b400d8076a5347e0f1ff2924623535979d48a2d94a69f825b93841e",3737 "src/app.ts": "c0ddd4f1994c19ca49de5a7c545b9306d9dbe8cfc7579bd9c71d6459965764f3",3838 "src/env.d.ts": "b44daed05ec5cdfacfd8d8acf7866974b5f6b8db923ab53bd244419093c719da",39- "src/islands/AccountGate.tsx": "50e7cd25920989caf587fe94f5af143b2dfce7142c62af3e94adb37dc0fca682",39+ "src/islands/AccountGate.tsx": "e6de6be7148f12b5b113109a70efa12c6fe3020a1a3ce6b5f522fe96cb75898e",4040 "src/islands/TaskList.tsx": "81d7fc95248baf4f51e1d53374d7b4700bf165049e846fdcc2694cbeb873652c",4141 "src/islands/use-tasks.ts": "95573b22d5dd1e0e8303ae4536df9a4f0cb27f0c1243aa6c70a6366cc6b7530f",4242 "src/pages/index.astro": "9c1a7446045fb89acd2a0f0c3bad89244871556fb39ddf2669b4a2a495a8208f",4343 "src/permissions.ts": "dcb00b7f0576d04ad527b8892b8096573b107c3130ed6d835243251c406a38b7",4444 "src/schema.ts": "f2c555b088ded8eea2653f5d955fc9aae69dfd588e891adf509e99052f1e9949",45- "src/styles/global.css": "b61e6ab48bf483c946fec010be5a099c74e71dd752d41262668f76f6e82f1cda",45+ "src/styles/global.css": "27e98368f3fa1c57befc038cc9bf36f800fef192e368f4c393327ac96bfdd448",4646 "tests/auth_e2e_test.ts": "87dc3eb441eeaa96fc82b15df90bf4108096506217e5bfae907b483a3e75b4bf",4747 "tests/author-boundary_test.ts": "529bbd81977294398f4c48a3616d10cdcf0fe5f7c83b705365ad80124ab1a0f1",4848 "tests/convergence_e2e_test.ts": "71ec0ac935c25ff0722905e5b195c730f32a3b886dd4172e11d9e0e80f19cb38",