Add-passkey form: one line, "Passkey label" placeholder, shorter label

Switches from the stacked .form pattern to .field-row, same as the
other single-line forms (input + fit-width button); the visible
"Label" span becomes a placeholder/aria-label instead, and the button
reads "Add passkey" rather than "Add a passkey".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-05 00:57:47 +01:00
co-authored by Claude Sonnet 5
parent d1de9f50f5
commit 9505d20e0d
+11 -7
View File
@@ -199,16 +199,20 @@ async function onRemovePasskey(passkey: Passkey) {
</li> </li>
</ul> </ul>
<form class="form form--new-card" @submit.prevent="onAddPasskey"> <form class="field-row form--new-card" @submit.prevent="onAddPasskey">
<label> <input
<span>Label</span> v-model="newLabel"
<input v-model="newLabel" class="field" type="text" maxlength="100" /> class="field field--compact"
</label> type="text"
<p v-if="addError" class="form-error">{{ addError }}</p> maxlength="100"
placeholder="Passkey label"
aria-label="Passkey label"
/>
<button type="submit" :disabled="adding"> <button type="submit" :disabled="adding">
{{ adding ? 'Waiting for your passkey' : 'Add a passkey' }} {{ adding ? 'Waiting for your passkey' : 'Add passkey' }}
</button> </button>
</form> </form>
<p v-if="addError" class="form-error">{{ addError }}</p>
</template> </template>
</section> </section>
</section> </section>