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>
</ul>
<form class="form form--new-card" @submit.prevent="onAddPasskey">
<label>
<span>Label</span>
<input v-model="newLabel" class="field" type="text" maxlength="100" />
</label>
<p v-if="addError" class="form-error">{{ addError }}</p>
<form class="field-row form--new-card" @submit.prevent="onAddPasskey">
<input
v-model="newLabel"
class="field field--compact"
type="text"
maxlength="100"
placeholder="Passkey label"
aria-label="Passkey label"
/>
<button type="submit" :disabled="adding">
{{ adding ? 'Waiting for your passkey' : 'Add a passkey' }}
{{ adding ? 'Waiting for your passkey' : 'Add passkey' }}
</button>
</form>
<p v-if="addError" class="form-error">{{ addError }}</p>
</template>
</section>
</section>