fix: login match design reference

web/src/views/LoginView.vue

@@ -68,7 +68,6 @@ const usernameError = ref('')
 const passwordError = ref('')
 const submitting = ref(false)
 const passwordShown = ref(false)
-const formEl = ref<HTMLFormElement | null>(null)
 
 const initialReason = typeof route.query.reason === 'string' ? route.query.reason : null
 
@@ -94,10 +93,10 @@ const submitLabel = computed(() => {
 
 const submitDisabled = computed(() => submitting.value || retryAfter.active.value)
 
-function focusField(selector: string) {
-	nextTick(() => {
-		formEl.value?.querySelector<HTMLInputElement>(selector)?.focus()
-	})
+async function focusField(selector: string) {
+	await nextTick()
+	await nextTick()
+	document.querySelector<HTMLInputElement>(selector)?.focus()
 }
 
 function focusPassword() {
@@ -212,52 +211,75 @@ onMounted(async () => {
 			/>
 		</template>
 
-		<form ref="formEl" class="flex flex-col gap-4" @submit.prevent="onSubmit">
-			<UFormField label="Username" name="username" :error="usernameError">
-				<UInput
-					v-model="username"
-					placeholder="Your username"
-					autocomplete="username"
-					:disabled="submitting"
-					class="w-full"
-				/>
-			</UFormField>
+		<template #default="{ controlSize }">
+			<UForm :state="{ username, password }" class="flex flex-col gap-4" @submit="onSubmit">
+				<UFormField
+					label="Username"
+					name="username"
+					:error="usernameError || undefined"
+					:size="controlSize"
+				>
+					<UInput
+						v-model="username"
+						placeholder="Your username"
+						autocomplete="username"
+						:disabled="submitting"
+						variant="outline"
+						color="primary"
+						:highlight="!!usernameError"
+						:size="controlSize"
+						class="w-full"
+					/>
+				</UFormField>
 
-			<UFormField name="password" :error="passwordError">
-				<template #label>
-					<div class="flex w-full items-center justify-between">
-						<span>Password</span>
+				<UFormField
+					label="Password"
+					name="password"
+					:error="passwordError || undefined"
+					:size="controlSize"
+				>
+					<template #hint>
 						<RouterLink to="/register/reset/request" class="text-primary text-sm">
 							Forgot password?
 						</RouterLink>
-					</div>
-				</template>
-				<UInput
-					v-model="password"
-					:type="passwordShown ? 'text' : 'password'"
-					autocomplete="current-password"
-					:disabled="submitting"
-					class="w-full"
-				>
-					<template #trailing>
-						<UButton
-							:icon="passwordShown ? 'i-lucide-eye-off' : 'i-lucide-eye'"
-							variant="ghost"
-							color="neutral"
-							size="sm"
-							square
-							:aria-label="passwordShown ? 'Hide password' : 'Show password'"
-							:aria-pressed="passwordShown"
-							@click="passwordShown = !passwordShown"
-						/>
 					</template>
-				</UInput>
-			</UFormField>
+					<UInput
+						v-model="password"
+						:type="passwordShown ? 'text' : 'password'"
+						autocomplete="current-password"
+						:disabled="submitting"
+						variant="outline"
+						color="primary"
+						:highlight="!!passwordError"
+						:size="controlSize"
+						class="w-full"
+					>
+						<template #trailing>
+							<UButton
+								:icon="passwordShown ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+								variant="ghost"
+								color="neutral"
+								size="sm"
+								square
+								:aria-label="passwordShown ? 'Hide password' : 'Show password'"
+								:aria-pressed="passwordShown"
+								@click="passwordShown = !passwordShown"
+							/>
+						</template>
+					</UInput>
+				</UFormField>
 
-			<UButton type="submit" block :loading="submitting" :disabled="submitDisabled">
-				{{ submitLabel }}
-			</UButton>
-		</form>
+				<UButton
+					type="submit"
+					block
+					:size="controlSize"
+					:loading="submitting"
+					:disabled="submitDisabled"
+				>
+					{{ submitLabel }}
+				</UButton>
+			</UForm>
+		</template>
 
 		<template v-if="registrationOpen" #footer>
 			<p>