fix: more complete log in username error messages

web/src/i18n/messages.ts

@@ -54,6 +54,9 @@ export const messages = {
 	'Logging in…': 'Connexion…',
 	'Try again in {0}': 'Réessayez dans {0}',
 	'Use at least 3 characters.': 'Utilisez au moins 3 caractères.',
+	'Use your username, not your email address.':
+		"Utilisez votre nom d'utilisateur, pas votre adresse e-mail.",
+	'Use 20 characters or fewer.': 'Utilisez 20 caractères au maximum.',
 	'Enter your password.': 'Saisissez votre mot de passe.',
 	'Hide password': 'Masquer le mot de passe',
 	'Show password': 'Afficher le mot de passe',

web/src/views/LoginView.vue

@@ -134,8 +134,22 @@ function focusFirstInvalid() {
 	}
 }
 
+function usernameProblem(value: string) {
+	const trimmed = value.trim()
+	if (trimmed.includes('@')) {
+		return 'Use your username, not your email address.'
+	}
+	if (trimmed.length < 3) {
+		return 'Use at least 3 characters.'
+	}
+	if (trimmed.length > 20) {
+		return 'Use 20 characters or fewer.'
+	}
+	return ''
+}
+
 function validate() {
-	usernameError.value = username.value.trim().length < 3 ? 'Use at least 3 characters.' : ''
+	usernameError.value = usernameProblem(username.value)
 	passwordError.value = password.value.length === 0 ? 'Enter your password.' : ''
 	return !usernameError.value && !passwordError.value
 }

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

@@ -133,6 +133,25 @@ describe('Validation errors — nothing is sent for a short username and an empt
 	})
 })
 
+describe('Validation errors — specific username messages', () => {
+	it.each([
+		['marta@example.com', 'Use your username, not your email address.'],
+		['a'.repeat(21), 'Use 20 characters or fewer.'],
+	])('explains why %s is rejected without calling the API', async (value, message) => {
+		const login = vi.fn(() => mockResponse(200))
+		const wrapper = await mountLogin('/login', {
+			'POST /v1/auth/login': login,
+		})
+
+		await wrapper.find('input[placeholder="Your username"]').setValue(value)
+		await wrapper.find('form').trigger('submit')
+		await flushPromises()
+
+		expect(login).not.toHaveBeenCalled()
+		expect(wrapper.text()).toContain(message)
+	})
+})
+
 describe('Submitting — fields and button are disabled while the request is in flight', () => {
 	it('disables the fields and shows the loading label', async () => {
 		let resolveLogin: (() => void) | null = null