fix: visuals reference matching overhaul and better workflow

web/src/views/__tests__/LoginView.spec.ts

@@ -199,6 +199,12 @@ describe('Too many attempts — the button is disabled with a live countdown', (
 		expect(button.text()).toBe('Try again in 0:42')
 		expect((button.element as HTMLButtonElement).disabled).toBe(true)
 
+		const fields = () => [
+			wrapper.find('input[placeholder="Your username"]').element as HTMLInputElement,
+			wrapper.find('input[autocomplete="current-password"]').element as HTMLInputElement,
+		]
+		expect(fields().map((field) => field.disabled)).toEqual([true, true])
+
 		await vi.advanceTimersByTimeAsync(42000)
 		await flushPromises()
 
@@ -206,6 +212,7 @@ describe('Too many attempts — the button is disabled with a live countdown', (
 		expect((wrapper.find('button[type="submit"]').element as HTMLButtonElement).disabled).toBe(
 			false,
 		)
+		expect(fields().map((field) => field.disabled)).toEqual([false, false])
 		vi.useRealTimers()
 	})
 })

web/src/views/__tests__/PendingView.spec.ts

@@ -239,7 +239,7 @@ describe('Cancelled — 200 navigates to /register with a toast', () => {
 	})
 })
 
-describe('Already verified — 403 refreshes the session and navigates to /home with a toast', () => {
+describe('Already verified — 403 shows the verified panel and toast, then navigates to /home', () => {
 	it('awaits session.retry, navigates to /home and shows the info toast', async () => {
 		const { wrapper } = await mountPending({
 			'DELETE /v1/auth/register': () => mockResponse(403),
@@ -263,13 +263,20 @@ describe('Already verified — 403 refreshes the session and navigates to /home
 		overlayMock.resolveOpen(true)
 		await flushPromises()
 
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/home'))
+		expect(wrapper.text()).toContain("You're verified")
+		expect(wrapper.text()).toContain('Taking you to your dashboard…')
 		expect(toastAdd).toHaveBeenCalledWith({
 			color: 'info',
 			icon: 'i-lucide-info',
 			title: 'Your account is already verified',
 			description: "There's nothing to cancel.",
 		})
+		expect(router.currentRoute.value.path).not.toBe('/home')
+
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/home'), {
+			timeout: 2000,
+		})
+		expect(toastAdd).toHaveBeenCalledTimes(1)
 		expect(pushSpy).not.toHaveBeenCalledWith('/register/pending')
 		pushSpy.mockRestore()
 	})

web/src/views/__tests__/VerifyView.spec.ts

@@ -98,10 +98,6 @@ describe('Success — 200 refreshes the session and navigates to /home with a to
 		expect(wrapper.text()).toContain('Your account is verified')
 		expect(wrapper.text()).toContain('Taking you to your dashboard…')
 		expect(router.currentRoute.value.path).toBe('/register/validate')
-
-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/home'), {
-			timeout: 2000,
-		})
 		expect(toastAdd).toHaveBeenCalledWith({
 			color: 'success',
 			icon: 'i-lucide-circle-check',
@@ -109,6 +105,11 @@ describe('Success — 200 refreshes the session and navigates to /home with a to
 			description: 'Welcome to RenewCMS.',
 		})
 
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/home'), {
+			timeout: 2000,
+		})
+		expect(toastAdd).toHaveBeenCalledTimes(1)
+
 		const session = useSessionStore()
 		expect(session.session).toEqual({ verified: true })
 	})
@@ -233,22 +234,23 @@ describe('No session — the inline log-in form replaces the spinner', () => {
 	})
 })
 
-describe('No session — submit is disabled until both fields are filled', () => {
-	it('enables the submit button once both fields have a value', async () => {
+describe('No session — empty fields are caught on submit, as on Log in', () => {
+	it('keeps the submit button enabled and shows both field errors without calling login', async () => {
+		const login = vi.fn(() => mockResponse(200))
 		const { wrapper } = await mountVerify('/register/validate?c=abc123', {
 			'POST /v1/auth/verify': () => mockResponse(401),
+			'POST /v1/auth/login': login,
 		})
 
-		expect((wrapper.find('button[type="submit"]').element as HTMLButtonElement).disabled).toBe(
-			true,
-		)
+		const submit = wrapper.find('button[type="submit"]')
+		expect((submit.element as HTMLButtonElement).disabled).toBe(false)
 
-		await wrapper.find('input[placeholder="Your username"]').setValue('marta')
-		await wrapper.find('input[autocomplete="current-password"]').setValue('limewash2026')
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
 
-		expect((wrapper.find('button[type="submit"]').element as HTMLButtonElement).disabled).toBe(
-			false,
-		)
+		expect(wrapper.text()).toContain('Use at least 3 characters.')
+		expect(wrapper.text()).toContain('Enter your password.')
+		expect(login).not.toHaveBeenCalled()
 	})
 })