sapphic.moe
changed the id property from handle to username and added autocomplete="username" so password managers like 1password can play nicely
+6
-3
src/components/login.tsx
+6
-3
src/components/login.tsx
···
62
62
63
63
return (
64
64
<form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}>
65
-
<label for="handle" class="hidden">
65
+
<label for="username" class="hidden">
66
66
Add account
67
67
</label>
68
68
<div class="dark:bg-dark-100 dark:shadow-dark-700 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400">
69
69
<label
70
-
for="handle"
70
+
for="username"
71
71
class="iconify lucide--user-round-plus shrink-0 text-neutral-500 dark:text-neutral-400"
72
72
></label>
73
73
<input
74
74
type="text"
75
75
spellcheck={false}
76
76
placeholder="user.bsky.social"
77
-
id="handle"
77
+
id="username"
78
+
name="username"
79
+
autocomplete="username"
80
+
aria-label="Your AT Protocol handle"
78
81
class="grow py-1 select-none placeholder:text-sm focus:outline-none"
79
82
onInput={(e) => setLoginInput(e.currentTarget.value)}
80
83
/>