feat(SPA): i18n internationzalization, english and french

web/src/views/VerifyView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { t, translate } from '@/i18n'
+
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useToast } from '@nuxt/ui/composables'
+import { useLocalizedToast } from '@/i18n/presentation'
 import AuthShell from '@/components/AuthShell.vue'
 import ResultPanel from '@/components/ResultPanel.vue'
 import { ApiError, useApi } from '@/composables/useApi'
@@ -28,36 +30,52 @@ interface AlertState {
 const wrongCredentialsAlert: AlertState = {
 	tone: 'error',
 	icon: 'i-lucide-circle-x',
-	title: "That username and password don't match",
-	description: 'Check both and try again. Passwords are case-sensitive.',
+	get title() {
+		return t("That username and password don't match")
+	},
+	get description() {
+		return t('Check both and try again. Passwords are case-sensitive.')
+	},
 }
 
 const tooManyAttemptsAlert: AlertState = {
 	tone: 'info',
 	icon: 'i-lucide-timer',
-	title: 'Too many attempts',
-	description: 'For your security, wait a moment before trying again.',
+	get title() {
+		return t('Too many attempts')
+	},
+	get description() {
+		return t('For your security, wait a moment before trying again.')
+	},
 }
 
 const serverErrorAlert: AlertState = {
 	tone: 'error',
 	icon: 'i-lucide-circle-x',
-	title: "Couldn't reach RenewCMS",
-	description: 'Check your connection and try again.',
+	get title() {
+		return t("Couldn't reach RenewCMS")
+	},
+	get description() {
+		return t('Check your connection and try again.')
+	},
 }
 
 const cancelFailedAlert: AlertState = {
 	tone: 'error',
 	icon: 'i-lucide-circle-x',
-	title: "Couldn't cancel registration",
-	description: 'Something went wrong on the server. Try again in a moment.',
+	get title() {
+		return t("Couldn't cancel registration")
+	},
+	get description() {
+		return t('Something went wrong on the server. Try again in a moment.')
+	},
 }
 
 const route = useRoute()
 const router = useRouter()
 const api = useApi()
 const session = useSessionStore()
-const toast = useToast()
+const toast = useLocalizedToast()
 const retryAfter = useRetryAfter()
 
 const state = ref<VerifyState>('missing')
@@ -71,39 +89,35 @@ const loginSubmitting = ref(false)
 const loginAlert = ref<AlertState | null>(null)
 
 const shellTitle = computed(() =>
-	state.value === 'noSession' ? 'Log in to finish verifying' : '',
+	state.value === 'noSession' ? t('Log in to finish verifying') : '',
 )
 const shellDescription = computed(() =>
 	state.value === 'noSession'
-		? "You opened this link somewhere you're not logged in. Log in here and we'll verify your account right after."
+		? t(
+				"You opened this link somewhere you're not logged in. Log in here and we'll verify your account right after.",
+			)
 		: undefined,
 )
 
 const usernameError = ref('')
 const passwordError = ref('')
 
-const loginSubmitDisabled = computed(
-	() => loginSubmitting.value || retryAfter.active.value,
-)
+const loginSubmitDisabled = computed(() => loginSubmitting.value || retryAfter.active.value)
 
 const loginSubmitLabel = computed(() => {
 	if (loginSubmitting.value) {
-		return 'Logging in…'
+		return t('Logging in…')
 	}
 	if (retryAfter.active.value) {
-		return `Try again in ${retryAfter.formatted.value}`
+		return t('Try again in {0}', [retryAfter.formatted.value])
 	}
-	return 'Log in and verify'
+	return t('Log in and verify')
 })
 
 async function focusPassword() {
 	await nextTick()
 	await nextTick()
-	document
-		.querySelector<HTMLInputElement>(
-			'input[autocomplete="current-password"]',
-		)
-		?.focus()
+	document.querySelector<HTMLInputElement>('input[autocomplete="current-password"]')?.focus()
 }
 
 async function performVerify(code: string) {
@@ -116,12 +130,16 @@ async function performVerify(code: string) {
 			onForbidden: 'passthrough',
 		})
 		state.value = 'success'
-		toast.add({
+		toast.add(() => ({
 			color: 'success',
 			icon: 'i-lucide-circle-check',
-			title: 'Your account is verified',
-			description: 'Welcome to RenewCMS.',
-		})
+			get title() {
+				return t('Your account is verified')
+			},
+			get description() {
+				return t('Welcome to RenewCMS.')
+			},
+		}))
 		await Promise.all([session.retry(), wait(VERIFIED_REDIRECT_DELAY_MS)])
 		await router.push('/home')
 		return
@@ -160,10 +178,8 @@ function handleLoginError(error: unknown) {
 }
 
 function validateLogin() {
-	usernameError.value =
-		username.value.trim().length < 3 ? 'Use at least 3 characters.' : ''
-	passwordError.value =
-		password.value.length === 0 ? 'Enter your password.' : ''
+	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
 }
 
@@ -203,7 +219,7 @@ async function cancelAndStartOver() {
 			onForbidden: 'passthrough',
 		})
 		await router.push('/register')
-		toast.add(registrationCancelledToast)
+		toast.add(() => registrationCancelledToast)
 	} catch {
 		cancelAlert.value = cancelFailedAlert
 	} finally {
@@ -224,14 +240,18 @@ async function logOutFromInvalid() {
 
 const invalidActions = computed(() => [
 	{
-		label: 'Cancel registration and start over',
+		get label() {
+			return t('Cancel registration and start over')
+		},
 		color: 'primary' as const,
 		variant: 'solid' as const,
 		disabled: invalidActionsDisabled.value,
 		onClick: cancelAndStartOver,
 	},
 	{
-		label: 'Log out',
+		get label() {
+			return t('Log out')
+		},
 		color: 'neutral' as const,
 		variant: 'outline' as const,
 		disabled: invalidActionsDisabled.value,
@@ -245,7 +265,9 @@ function goToLogin() {
 
 const missingCodeActions = [
 	{
-		label: 'Go to log in',
+		get label() {
+			return t('Go to log in')
+		},
 		color: 'neutral' as const,
 		variant: 'outline' as const,
 		onClick: goToLogin,
@@ -294,22 +316,21 @@ onMounted(() => {
 				role="status"
 				class="flex flex-col items-center gap-4 py-10 text-center"
 			>
-				<UIcon
-					name="i-lucide-loader-2"
-					class="size-8 animate-spin text-highlighted"
-				/>
+				<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…
+					{{ t('Verifying your account…') }}
+				</p>
+				<p class="text-base text-muted">
+					{{ t('This only takes a moment.') }}
 				</p>
-				<p class="text-base text-muted">This only takes a moment.</p>
 			</div>
 
 			<ResultPanel
 				v-else-if="state === 'success'"
 				tone="success"
 				icon="i-lucide-shield-check"
-				title="Your account is verified"
-				description="Taking you to your dashboard…"
+				:title="t('Your account is verified')"
+				:description="t('Taking you to your dashboard…')"
 				:actions="[]"
 			/>
 
@@ -317,12 +338,12 @@ onMounted(() => {
 				v-else-if="state === 'invalid'"
 				tone="error"
 				icon="i-lucide-link-2-off"
-				title="This verification link doesn't work"
-				description="It may have expired (links last 2 hours) or already been used."
+				:title="t('This verification link doesn\'t work')"
+				:description="t('It may have expired (links last 2 hours) or already been used.')"
 				:actions="invalidActions"
 			>
 				<p class="text-sm text-pretty text-muted">
-					Cancel your registration and start over to get a new link.
+					{{ t('Cancel your registration and start over to get a new link.') }}
 				</p>
 			</ResultPanel>
 
@@ -330,8 +351,12 @@ onMounted(() => {
 				v-else-if="state === 'missing'"
 				tone="error"
 				icon="i-lucide-link-2-off"
-				title="This link is incomplete"
-				description="The verification code is missing. Open the link from your email again, or copy the full address into your browser."
+				:title="t('This link is incomplete')"
+				:description="
+					t(
+						'The verification code is missing. Open the link from your email again, or copy the full address into your browser.',
+					)
+				"
 				:actions="missingCodeActions"
 			/>
 
@@ -342,9 +367,9 @@ onMounted(() => {
 				@submit="onLoginSubmit"
 			>
 				<UFormField
-					label="Username"
+					:label="t('Username')"
 					name="username"
-					:error="usernameError || undefined"
+					:error="translate(usernameError) || undefined"
 					:size="controlSize"
 				>
 					<template v-if="usernameError" #error="{ error }">
@@ -353,13 +378,13 @@ onMounted(() => {
 								name="i-lucide-circle-alert"
 								class="size-3.5 shrink-0 text-error"
 							/>
-							{{ error }}
+							{{ t(error) }}
 						</span>
 					</template>
 					<UInput
 						v-model="username"
 						:highlight="!!usernameError"
-						placeholder="Your username"
+						:placeholder="t('Your username')"
 						autocomplete="username"
 						:disabled="loginSubmitDisabled"
 						variant="outline"
@@ -371,9 +396,9 @@ onMounted(() => {
 				</UFormField>
 
 				<UFormField
-					label="Password"
+					:label="t('Password')"
 					name="password"
-					:error="passwordError || undefined"
+					:error="translate(passwordError) || undefined"
 					:size="controlSize"
 				>
 					<template v-if="passwordError" #error="{ error }">
@@ -382,7 +407,7 @@ onMounted(() => {
 								name="i-lucide-circle-alert"
 								class="size-3.5 shrink-0 text-error"
 							/>
-							{{ error }}
+							{{ t(error) }}
 						</span>
 					</template>
 					<UInput
@@ -402,20 +427,14 @@ onMounted(() => {
 					>
 						<template #trailing>
 							<UButton
-								:icon="
-									passwordShown
-										? 'i-lucide-eye-off'
-										: 'i-lucide-eye'
-								"
+								:icon="passwordShown ? 'i-lucide-eye-off' : 'i-lucide-eye'"
 								variant="ghost"
 								color="neutral"
 								size="sm"
 								square
 								class="size-8 justify-center text-toned"
 								:aria-label="
-									passwordShown
-										? 'Hide password'
-										: 'Show password'
+									passwordShown ? t('Hide password') : t('Show password')
 								"
 								:aria-pressed="passwordShown"
 								@click="passwordShown = !passwordShown"