Make the change-email form a single line, like the rename forms
Switches from the stacked .form pattern to .field-row: the input and its submit button now sit side by side, the button sized to fit its text rather than stretched full width -- matching the project rename and add-status forms. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -140,24 +140,27 @@ async function onRemovePasskey(passkey: Passkey) {
|
|||||||
We'll email a confirmation link to the new address; the change only
|
We'll email a confirmation link to the new address; the change only
|
||||||
takes effect once you open it.
|
takes effect once you open it.
|
||||||
</p>
|
</p>
|
||||||
<form class="form" @submit.prevent="onChangeEmail">
|
<form class="field-row" @submit.prevent="onChangeEmail">
|
||||||
<label>
|
<input
|
||||||
<span>New email</span>
|
v-model="newEmail"
|
||||||
<input v-model="newEmail" class="field" type="email" maxlength="255" required />
|
class="field field--compact"
|
||||||
<small v-if="changeError?.fieldError('email')" class="field-error">
|
type="email"
|
||||||
{{ changeError.fieldError('email') }}
|
maxlength="255"
|
||||||
</small>
|
required
|
||||||
</label>
|
placeholder="New email"
|
||||||
|
aria-label="New email"
|
||||||
<p v-if="changeError && Object.keys(changeError.details).length === 0" class="form-error">
|
/>
|
||||||
{{ changeError.message }}
|
|
||||||
</p>
|
|
||||||
<p v-if="changeMessage" class="muted">{{ changeMessage }}</p>
|
|
||||||
|
|
||||||
<button type="submit" :disabled="changing || cooldown > 0">
|
<button type="submit" :disabled="changing || cooldown > 0">
|
||||||
{{ changing ? 'Sending…' : cooldown > 0 ? `Wait ${cooldown}s` : 'Send confirmation link' }}
|
{{ changing ? 'Sending…' : cooldown > 0 ? `Wait ${cooldown}s` : 'Send confirmation link' }}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
<p v-if="changeError?.fieldError('email')" class="field-error">
|
||||||
|
{{ changeError.fieldError('email') }}
|
||||||
|
</p>
|
||||||
|
<p v-if="changeError && Object.keys(changeError.details).length === 0" class="form-error">
|
||||||
|
{{ changeError.message }}
|
||||||
|
</p>
|
||||||
|
<p v-if="changeMessage" class="muted">{{ changeMessage }}</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
Reference in New Issue
Block a user