fix: visuals reference matching overhaul and better workflow

web/src/views/VerifyView.vue

@@ -7,6 +7,7 @@ import ResultPanel from '@/components/ResultPanel.vue'
 import { ApiError, useApi } from '@/composables/useApi'
 import { useRetryAfter } from '@/composables/useRetryAfter'
 import { registrationCancelledToast } from '@/lib/registrationToasts'
+import { VERIFIED_REDIRECT_DELAY_MS, wait } from '@/lib/verifiedRedirect'
 import { useSessionStore } from '@/stores/session'
 
 type VerifyState =
@@ -52,8 +53,6 @@ const cancelFailedAlert: AlertState = {
 	description: 'Something went wrong on the server. Try again in a moment.',
 }
 
-const VERIFICATION_SUCCESS_DELAY_MS = 800
-
 const route = useRoute()
 const router = useRouter()
 const api = useApi()
@@ -78,13 +77,10 @@ const shellDescription = computed(() =>
 		: undefined,
 )
 
-const loginSubmitDisabled = computed(
-	() =>
-		username.value.length === 0 ||
-		password.value.length === 0 ||
-		loginSubmitting.value ||
-		retryAfter.active.value,
-)
+const usernameError = ref('')
+const passwordError = ref('')
+
+const loginSubmitDisabled = computed(() => loginSubmitting.value || retryAfter.active.value)
 
 const loginSubmitLabel = computed(() => {
 	if (loginSubmitting.value) {
@@ -96,10 +92,6 @@ const loginSubmitLabel = computed(() => {
 	return 'Log in and verify'
 })
 
-function wait(ms: number) {
-	return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
 async function focusPassword() {
 	await nextTick()
 	await nextTick()
@@ -116,14 +108,14 @@ async function performVerify(code: string) {
 			onForbidden: 'passthrough',
 		})
 		state.value = 'success'
-		await Promise.all([session.retry(), wait(VERIFICATION_SUCCESS_DELAY_MS)])
-		await router.push('/home')
 		toast.add({
 			color: 'success',
 			icon: 'i-lucide-circle-check',
 			title: 'Your account is verified',
 			description: 'Welcome to RenewCMS.',
 		})
+		await Promise.all([session.retry(), wait(VERIFIED_REDIRECT_DELAY_MS)])
+		await router.push('/home')
 		return
 	} catch (error) {
 		if (error instanceof ApiError && error.status === 401) {
@@ -159,10 +151,19 @@ function handleLoginError(error: unknown) {
 	loginAlert.value = serverErrorAlert
 }
 
+function validateLogin() {
+	usernameError.value = username.value.trim().length < 3 ? 'Use at least 3 characters.' : ''
+	passwordError.value = password.value.length === 0 ? 'Enter your password.' : ''
+	return !usernameError.value && !passwordError.value
+}
+
 async function onLoginSubmit() {
 	if (loginSubmitDisabled.value) {
 		return
 	}
+	if (!validateLogin()) {
+		return
+	}
 	loginAlert.value = null
 	loginSubmitting.value = true
 	try {
@@ -274,14 +275,15 @@ onMounted(() => {
 			/>
 		</template>
 
-		<template #default="{ controlSize, controlClass }">
+		<template #default="{ controlSize, controlClass, inputClass }">
 			<div
 				v-if="state === 'verifying' || state === 'noSessionRetrying'"
 				role="status"
-				class="flex flex-col items-center gap-4 py-10"
+				class="flex flex-col items-center gap-4 py-10 text-center"
 			>
-				<UIcon name="i-lucide-loader-2" class="h-8 w-8 animate-spin text-primary" />
-				<p class="text-toned text-sm">Verifying your account…</p>
+				<UIcon name="i-lucide-loader-2" class="size-8 animate-spin text-highlighted" />
+				<p class="text-xl/7 font-semibold text-highlighted">Verifying your account…</p>
+				<p class="text-base text-muted">This only takes a moment.</p>
 			</div>
 
 			<ResultPanel
@@ -301,7 +303,7 @@ onMounted(() => {
 				description="It may have expired (links last 2 hours) or already been used."
 				:actions="invalidActions"
 			>
-				<p class="text-toned text-sm">
+				<p class="text-sm text-pretty text-muted">
 					Cancel your registration and start over to get a new link.
 				</p>
 			</ResultPanel>
@@ -318,33 +320,66 @@ onMounted(() => {
 			<UForm
 				v-else-if="state === 'noSession'"
 				:state="{ username, password }"
-				class="flex flex-col gap-4"
+				class="flex flex-col gap-4.5"
 				@submit="onLoginSubmit"
 			>
-				<UFormField label="Username" name="username" :size="controlSize">
+				<UFormField
+					label="Username"
+					name="username"
+					:error="usernameError || undefined"
+					:size="controlSize"
+				>
+					<template v-if="usernameError" #error="{ error }">
+						<span class="flex items-center gap-1.5">
+							<UIcon
+								name="i-lucide-circle-alert"
+								class="size-3.5 shrink-0 text-error"
+							/>
+							{{ error }}
+						</span>
+					</template>
 					<UInput
 						v-model="username"
+						:highlight="!!usernameError"
 						placeholder="Your username"
 						autocomplete="username"
-						:disabled="loginSubmitting"
+						:disabled="loginSubmitDisabled"
 						variant="outline"
 						color="primary"
 						:size="controlSize"
-						:ui="{ base: controlClass }"
+						:ui="{ base: inputClass, trailing: 'pe-1' }"
 						class="w-full"
 					/>
 				</UFormField>
 
-				<UFormField label="Password" name="password" :size="controlSize">
+				<UFormField
+					label="Password"
+					name="password"
+					:error="passwordError || undefined"
+					:size="controlSize"
+				>
+					<template v-if="passwordError" #error="{ error }">
+						<span class="flex items-center gap-1.5">
+							<UIcon
+								name="i-lucide-circle-alert"
+								class="size-3.5 shrink-0 text-error"
+							/>
+							{{ error }}
+						</span>
+					</template>
 					<UInput
 						v-model="password"
+						:highlight="!!passwordError"
 						:type="passwordShown ? 'text' : 'password'"
 						autocomplete="current-password"
-						:disabled="loginSubmitting"
+						:disabled="loginSubmitDisabled"
 						variant="outline"
 						color="primary"
 						:size="controlSize"
-						:ui="{ base: controlClass }"
+						:ui="{
+							base: `${inputClass} ${passwordShown ? '' : 'tracking-[2px]'}`,
+							trailing: 'pe-1',
+						}"
 						class="w-full"
 					>
 						<template #trailing>
@@ -354,6 +389,7 @@ onMounted(() => {
 								color="neutral"
 								size="sm"
 								square
+								class="size-8 justify-center text-toned"
 								:aria-label="passwordShown ? 'Hide password' : 'Show password'"
 								:aria-pressed="passwordShown"
 								@click="passwordShown = !passwordShown"