fix: changed frontend workflow and fixed login reference matching for real

web/src/components/__tests__/AppLogo.spec.ts

@@ -30,13 +30,12 @@ describe('AppLogo renders the brand mark as inline SVG, and theme-switches', ()
 		expect(svg.attributes('height')).toBe('48')
 	})
 
-	it('has no stroke by default, and a dark-mode 1px chalk-600 edge on the black square', () => {
+	it('has no edge stroke, in light mode or in dark mode', () => {
 		const wrapper = mount(AppLogo)
 
 		const square = wrapper.find('rect')
 		expect(square.attributes('fill')).toBe('#111111')
-		expect(square.classes()).toContain('dark:stroke-(--color-chalk-600)')
-		expect(square.classes()).toContain('dark:stroke-1')
 		expect(square.attributes('stroke')).toBeUndefined()
+		expect(square.classes().some((c) => c.includes('stroke'))).toBe(false)
 	})
 })

web/src/components/__tests__/AuthShell.spec.ts

@@ -1,7 +1,12 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import uiPlugin from '@nuxt/ui/vue-plugin'
 import AuthShell from '../AuthShell.vue'
+import { resetAuthShellNavigation } from '@/composables/useAuthShellNavigation'
+
+beforeEach(() => {
+	resetAuthShellNavigation()
+})
 
 function mountShell(props: Record<string, unknown>, slots: Record<string, unknown> = {}) {
 	return mount(AuthShell, {
@@ -25,7 +30,7 @@ describe('AuthShell renders its title as the page heading and sets the document
 })
 
 describe('AuthShell renders its notice and footer slots', () => {
-	it('renders the notice slot in an alert above the title and the footer slot outside the card', () => {
+	it('renders the notice slot as-is inside the card, after the title, and the footer slot outside the card', () => {
 		const wrapper = mountShell(
 			{ title: 'Log in' },
 			{
@@ -34,14 +39,19 @@ describe('AuthShell renders its notice and footer slots', () => {
 			},
 		)
 
-		const alertDescription = wrapper.find('[data-slot="description"]')
-		expect(alertDescription.text()).toBe('Your session expired.')
+		const notice = wrapper.find('span')
+		expect(notice.text()).toBe('Your session expired.')
+		expect(wrapper.findAll('[data-slot="root"][data-orientation]').length).toBe(1)
+
+		const card = wrapper.find('[data-testid="auth-card"]')
+		expect(card.element.contains(notice.element)).toBe(true)
 
 		const html = wrapper.html()
-		expect(html.indexOf('Your session expired.')).toBeLessThan(html.indexOf('<h1'))
+		expect(html.indexOf('<h1')).toBeLessThan(html.indexOf('Your session expired.'))
 
 		const footerLink = wrapper.find('a[href="/register/reset/request"]')
 		expect(footerLink.exists()).toBe(true)
 		expect(footerLink.text()).toBe('Forgot password?')
+		expect(card.element.contains(footerLink.element)).toBe(false)
 	})
 })

web/src/components/__tests__/authShellLoginConformance.spec.ts

@@ -1,10 +1,11 @@
-import { describe, it, expect, afterEach } from 'vitest'
+import { describe, it, expect, afterEach, beforeEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
 import uiPlugin from '@nuxt/ui/vue-plugin'
 import router from '@/router'
 import AuthShell from '@/components/AuthShell.vue'
 import LoginView from '@/views/LoginView.vue'
+import { resetAuthShellNavigation } from '@/composables/useAuthShellNavigation'
 
 function stubMatchMedia(belowSm: boolean) {
 	window.matchMedia = ((query: string) => ({
@@ -43,6 +44,10 @@ async function mountLogin() {
 	return wrapper
 }
 
+beforeEach(() => {
+	resetAuthShellNavigation()
+})
+
 afterEach(async () => {
 	currentWrapper?.unmount()
 	currentWrapper = null
@@ -133,7 +138,7 @@ describe('The page sits on the muted background from sm up, and the card keeps i
 })
 
 describe('Below sm, AuthShell drops the muted background, the card border and the card padding', () => {
-	it('uses the default background, an unbordered full-width card with 20px padding, and xl controls', async () => {
+	it('uses the default background, an unbordered full-width card with the board padding split, and xl controls', async () => {
 		stubMatchMedia(true)
 		const wrapper = mount(AuthShell, {
 			props: { title: 'Log in', description: 'Welcome back.' },
@@ -147,6 +152,7 @@ describe('Below sm, AuthShell drops the muted background, the card border and th
 		const main = wrapper.find('main')
 		expect(main.classes()).toContain('bg-default')
 		expect(main.classes()).not.toContain('bg-muted')
+		expect(main.classes()).not.toContain('pt-[12vh]')
 
 		const card = wrapper.find('[data-testid="auth-card"]')
 		expect(card.classes()).not.toContain('max-w-[400px]')
@@ -156,7 +162,9 @@ describe('Below sm, AuthShell drops the muted background, the card border and th
 		expect(button.attributes('data-size')).toBe('xl')
 
 		const container = wrapper.find('[data-slot="container"]')
-		expect(container.classes()).toContain('p-5')
+		expect(container.classes()).toContain('pt-2')
+		expect(container.classes()).toContain('px-5')
+		expect(container.classes()).toContain('pb-0')
 	})
 })
 

web/src/components/__tests__/loginCardConformance.spec.ts

@@ -0,0 +1,243 @@
+import { describe, it, expect, afterEach, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import router from '@/router'
+import AuthShell from '@/components/AuthShell.vue'
+import LoginView from '@/views/LoginView.vue'
+import { resetAuthShellNavigation } from '@/composables/useAuthShellNavigation'
+
+function stubMatchMedia(belowSm: boolean) {
+	window.matchMedia = ((query: string) => ({
+		matches: belowSm,
+		media: query,
+		onchange: null,
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		addListener: () => {},
+		removeListener: () => {},
+		dispatchEvent: () => false,
+	})) as unknown as typeof window.matchMedia
+}
+
+function mockResponse(status: number, body: unknown = null) {
+	return {
+		ok: status >= 200 && status < 300,
+		status,
+		headers: { get: () => null },
+		json: async () => body,
+	} as unknown as Response
+}
+
+let currentWrapper: Awaited<ReturnType<typeof mount>> | null = null
+
+async function mountLogin(path = '/login') {
+	setActivePinia(createPinia())
+	global.fetch = (() => mockResponse(200, { open: false })) as unknown as typeof fetch
+	await router.push(path)
+	const wrapper = mount(LoginView, {
+		attachTo: document.body,
+		global: { plugins: [router, uiPlugin] },
+	})
+	currentWrapper = wrapper
+	await flushPromises()
+	return wrapper
+}
+
+beforeEach(() => {
+	resetAuthShellNavigation()
+})
+
+afterEach(async () => {
+	currentWrapper?.unmount()
+	currentWrapper = null
+	await router.push('/login')
+	resetAuthShellNavigation()
+})
+
+describe('Card padding and control heights at sm and up', () => {
+	it('pads the card 40px on every side and sizes controls at 40px, 14px text', async () => {
+		stubMatchMedia(false)
+		const wrapper = await mountLogin()
+
+		const container = wrapper.find('[data-slot="container"]')
+		expect(container.classes()).toContain('p-10')
+		expect(container.classes()).not.toContain('pt-2')
+
+		const usernameInput = wrapper.find('input[placeholder="Your username"]')
+		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		const submitButton = wrapper.find('button[type="submit"]')
+
+		for (const el of [usernameInput, passwordInput, submitButton]) {
+			expect(el.classes()).toContain('!h-10')
+			expect(el.classes()).toContain('!text-sm')
+		}
+
+		const title = wrapper.find('[data-slot="title"]')
+		expect(title.classes()).toContain('text-xl')
+		expect(title.classes()).toContain('font-semibold')
+		expect(title.classes()).toContain('leading-7')
+	})
+})
+
+describe('Card padding and control heights below sm', () => {
+	it('splits card/footer padding and sizes controls at 44px, 16px text', async () => {
+		stubMatchMedia(true)
+		const wrapper = await mountLogin()
+
+		const container = wrapper.find('[data-slot="container"]')
+		expect(container.classes()).toContain('pt-2')
+		expect(container.classes()).toContain('px-5')
+		expect(container.classes()).toContain('pb-0')
+
+		const footer = wrapper.find('footer')
+		expect(footer.classes()).toContain('pt-0')
+		expect(footer.classes()).toContain('px-5')
+		expect(footer.classes()).toContain('pb-6')
+
+		const usernameInput = wrapper.find('input[placeholder="Your username"]')
+		const passwordInput = wrapper.find('input[autocomplete="current-password"]')
+		const submitButton = wrapper.find('button[type="submit"]')
+
+		for (const el of [usernameInput, passwordInput, submitButton]) {
+			expect(el.classes()).toContain('!h-11')
+			expect(el.classes()).toContain('!text-base')
+		}
+	})
+})
+
+describe('"Forgot password?" is underlined and muted', () => {
+	it('uses the muted toned color, underline and 3px offset, no other emphasis', async () => {
+		const wrapper = await mountLogin()
+
+		const link = wrapper.find('a[href="/register/reset/request"]')
+		expect(link.classes()).toContain('text-toned')
+		expect(link.classes()).toContain('underline')
+		expect(link.classes()).toContain('underline-offset-[3px]')
+		expect(link.classes()).not.toContain('text-primary')
+		expect(link.classes()).not.toContain('font-bold')
+		expect(link.classes()).not.toContain('font-semibold')
+	})
+})
+
+describe('A field error shows the circle-alert icon with no extra focus halo', () => {
+	it('precedes both field errors with the error-colored icon, and keeps a single error ring when focused', async () => {
+		const wrapper = await mountLogin()
+
+		await wrapper.find('input[placeholder="Your username"]').setValue('ma')
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
+
+		const fieldRoots = wrapper.findAll('[data-slot="root"][data-orientation]')
+		const usernameError = fieldRoots[0]!.find('[data-slot="error"]')
+		const passwordError = fieldRoots[1]!.find('[data-slot="error"]')
+
+		for (const error of [usernameError, passwordError]) {
+			const icon = error.find('svg')
+			expect(icon.exists()).toBe(true)
+			expect(icon.html()).toContain('M12 8v4m0 4h.01')
+			expect(icon.classes()).toContain('text-error')
+		}
+
+		const usernameInput = wrapper.find('input[placeholder="Your username"]')
+		await usernameInput.trigger('focus')
+
+		expect(usernameInput.classes()).toContain('ring-error')
+		expect(usernameInput.classes()).toContain('focus-visible:ring-error')
+		expect(usernameInput.classes()).not.toContain('ring-primary')
+		expect(usernameInput.classes()).not.toContain('focus-visible:ring-primary')
+	})
+})
+
+describe('The theme select is right-aligned in the footer with no chevron', () => {
+	it('renders as the last child, showing only the mode icon and label', async () => {
+		const wrapper = await mountLogin()
+
+		const footer = wrapper.find('footer')
+		const select = footer.find('button[aria-haspopup="listbox"]')
+		expect(select.exists()).toBe(true)
+
+		const children = Array.from(footer.element.children)
+		expect(children[children.length - 1]).toBe(select.element)
+
+		expect(select.text()).toContain('System')
+
+		const trailing = select.find('[data-slot="trailing"]')
+		expect(trailing.classes()).toContain('hidden')
+	})
+})
+
+describe('The alert renders inside the card, under the description', () => {
+	it.each([
+		{
+			path: '/login?redirect=/article/12/edit&reason=expired',
+			state: 'Session expired',
+			text: 'Your session expired',
+		},
+		{
+			path: '/login?reason=password-changed',
+			state: 'Password changed',
+			text: 'Password changed',
+		},
+	])(
+		'places the $state alert inside the card, after the title/description, before Username',
+		async ({ path, text }) => {
+			const wrapper = await mountLogin(path)
+
+			const card = wrapper.find('[data-testid="auth-card"]')
+			const alerts = wrapper.findAll('[role="alert"], [role="status"]')
+			expect(alerts.length).toBe(1)
+			const alert = alerts[0]!
+			expect(card.element.contains(alert.element)).toBe(true)
+			expect(alert.text()).toContain(text)
+
+			const rootsInCard = card.findAll('[data-slot="root"][data-orientation]')
+			expect(rootsInCard.some((root) => root.classes().includes('bg-primary'))).toBe(false)
+
+			const usernameInput = wrapper.find('input[placeholder="Your username"]')
+			const html = card.html()
+			expect(html.indexOf('Welcome back')).toBeGreaterThan(-1)
+			expect(html.indexOf('Welcome back')).toBeLessThan(html.indexOf(text))
+			expect(html.indexOf(text)).toBeLessThan(html.indexOf('Username'))
+			expect(card.element.contains(usernameInput.element)).toBe(true)
+
+			expect(alert.classes().some((c) => /^bg-(info|success)\/10$/.test(c))).toBe(true)
+		},
+	)
+})
+
+describe('The h1 is not focused on first load', () => {
+	it('leaves focus on the document body after AuthShell mounts', () => {
+		const wrapper = mount(AuthShell, {
+			props: { title: 'Log in', description: 'Welcome back.' },
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+
+		const heading = wrapper.find('h1')
+		expect(heading.element).not.toBe(document.activeElement)
+		wrapper.unmount()
+	})
+})
+
+describe('Focus moves to the h1 only on an in-app navigation between public screens', () => {
+	it('does not focus the first AuthShell mount, but focuses the second', () => {
+		const first = mount(AuthShell, {
+			props: { title: 'Log in', description: 'Welcome back.' },
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+		expect(first.find('h1').element).not.toBe(document.activeElement)
+		first.unmount()
+
+		const second = mount(AuthShell, {
+			props: { title: 'Forgot password?', description: 'Reset it.' },
+			attachTo: document.body,
+			global: { plugins: [uiPlugin] },
+		})
+
+		expect(second.find('h1').element).toBe(document.activeElement)
+		expect(second.find('h1').classes()).toContain('outline-none')
+		second.unmount()
+	})
+})