fix: visuals reference matching overhaul and better workflow

web/src/views/LoginView.vue

@@ -11,7 +11,6 @@ interface AlertState {
 	icon: string
 	title: string
 	description: string
-	closable: boolean
 }
 
 const wrongCredentialsAlert: AlertState = {
@@ -19,7 +18,6 @@ const wrongCredentialsAlert: AlertState = {
 	icon: 'i-lucide-circle-x',
 	title: "That username and password don't match",
 	description: 'Check both and try again. Passwords are case-sensitive.',
-	closable: false,
 }
 
 const tooManyAttemptsAlert: AlertState = {
@@ -27,7 +25,6 @@ const tooManyAttemptsAlert: AlertState = {
 	icon: 'i-lucide-timer',
 	title: 'Too many attempts',
 	description: 'For your security, wait a moment before trying again.',
-	closable: false,
 }
 
 const serverErrorAlert: AlertState = {
@@ -35,7 +32,6 @@ const serverErrorAlert: AlertState = {
 	icon: 'i-lucide-circle-x',
 	title: "Couldn't reach RenewCMS",
 	description: 'Check your connection and try again.',
-	closable: false,
 }
 
 const sessionExpiredAlert: AlertState = {
@@ -44,7 +40,6 @@ const sessionExpiredAlert: AlertState = {
 	title: 'Your session expired',
 	description:
 		'Log in again to pick up where you left off. Unsaved changes are kept on this device.',
-	closable: true,
 }
 
 const passwordChangedAlert: AlertState = {
@@ -52,7 +47,6 @@ const passwordChangedAlert: AlertState = {
 	icon: 'i-lucide-circle-check',
 	title: 'Password changed',
 	description: 'Log in with your new password.',
-	closable: true,
 }
 
 const route = useRoute()
@@ -205,14 +199,13 @@ onMounted(async () => {
 				:title="alert.title"
 				:description="alert.description"
 				variant="soft"
-				:close="alert.closable"
+				:close="false"
 				:role="alertRole"
-				@close="alert = null"
 			/>
 		</template>
 
-		<template #default="{ controlSize, controlClass }">
-			<UForm :state="{ username, password }" class="flex flex-col gap-4" @submit="onSubmit">
+		<template #default="{ controlSize, controlClass, inputClass }">
+			<UForm :state="{ username, password }" class="flex flex-col gap-4.5" @submit="onSubmit">
 				<UFormField
 					label="Username"
 					name="username"
@@ -221,7 +214,10 @@ onMounted(async () => {
 				>
 					<template v-if="usernameError" #error="{ error }">
 						<span class="flex items-center gap-1.5">
-							<UIcon name="i-lucide-circle-alert" class="text-error shrink-0" />
+							<UIcon
+								name="i-lucide-circle-alert"
+								class="size-3.5 shrink-0 text-error"
+							/>
 							{{ error }}
 						</span>
 					</template>
@@ -229,12 +225,12 @@ onMounted(async () => {
 						v-model="username"
 						placeholder="Your username"
 						autocomplete="username"
-						:disabled="submitting"
+						:disabled="submitDisabled"
 						variant="outline"
 						color="primary"
 						:highlight="!!usernameError"
 						:size="controlSize"
-						:ui="{ base: controlClass }"
+						:ui="{ base: inputClass, trailing: 'pe-1' }"
 						class="w-full"
 					/>
 				</UFormField>
@@ -255,7 +251,10 @@ onMounted(async () => {
 					</template>
 					<template v-if="passwordError" #error="{ error }">
 						<span class="flex items-center gap-1.5">
-							<UIcon name="i-lucide-circle-alert" class="text-error shrink-0" />
+							<UIcon
+								name="i-lucide-circle-alert"
+								class="size-3.5 shrink-0 text-error"
+							/>
 							{{ error }}
 						</span>
 					</template>
@@ -263,12 +262,15 @@ onMounted(async () => {
 						v-model="password"
 						:type="passwordShown ? 'text' : 'password'"
 						autocomplete="current-password"
-						:disabled="submitting"
+						:disabled="submitDisabled"
 						variant="outline"
 						color="primary"
 						:highlight="!!passwordError"
 						:size="controlSize"
-						:ui="{ base: controlClass }"
+						:ui="{
+							base: `${inputClass} ${passwordShown ? '' : 'tracking-[2px]'}`,
+							trailing: 'pe-1',
+						}"
 						class="w-full"
 					>
 						<template #trailing>
@@ -278,6 +280,7 @@ onMounted(async () => {
 								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"
@@ -300,12 +303,15 @@ onMounted(async () => {
 		</template>
 
 		<template v-if="registrationOpen" #footer>
-			<p>
+			<span class="flex flex-wrap items-center gap-1.5">
 				First time here?
-				<RouterLink to="/register" class="text-primary"
-					>Create the owner account</RouterLink
+				<RouterLink
+					to="/register"
+					class="font-medium text-highlighted underline underline-offset-3"
 				>
-			</p>
+					Create the owner account
+				</RouterLink>
+			</span>
 		</template>
 	</AuthShell>
 </template>