feat(SPA): i18n internationzalization, english and french

web/src/components/InviteUserModal.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { t, translate } from '@/i18n'
+
 import { computed, nextTick, ref, watch } from 'vue'
 import { ApiError } from '@/composables/useApi'
 import { useUsers, type CreatedInvite } from '@/composables/useUsers'
@@ -24,18 +26,18 @@ const formAlert = ref<'' | 'invalid' | 'rateLimited' | 'failed'>('')
 
 const emailValid = computed(() => EMAIL_PATTERN.test(email.value))
 const emailError = computed(
-	() => serverError.value || (touched.value && !emailValid.value ? INVALID_EMAIL_MESSAGE : ''),
+	() => serverError.value || (touched.value && !emailValid.value ? t(INVALID_EMAIL_MESSAGE) : ''),
 )
 
 const alertMessage = computed(() => {
 	if (formAlert.value === 'invalid') {
-		return "Something in the form isn't valid. Check the highlighted fields."
+		return t("Something in the form isn't valid. Check the highlighted fields.")
 	}
 	if (formAlert.value === 'rateLimited') {
-		return 'Too many invites. Wait a moment, then try again.'
+		return t('Too many invites. Wait a moment, then try again.')
 	}
 	if (formAlert.value === 'failed') {
-		return "Couldn't send the invite. Try again in a moment."
+		return t("Couldn't send the invite. Try again in a moment.")
 	}
 	return ''
 })
@@ -82,7 +84,9 @@ function onBlur() {
 }
 
 function messageForConflict(error: ApiError) {
-	return error.body === PENDING_INVITE_MESSAGE ? PENDING_INVITE_MESSAGE : HAS_ACCOUNT_MESSAGE
+	return error.body === PENDING_INVITE_MESSAGE
+		? t(PENDING_INVITE_MESSAGE)
+		: t(HAS_ACCOUNT_MESSAGE)
 }
 
 function showFailure(error: unknown) {
@@ -143,8 +147,12 @@ function onCancel() {
 <template>
 	<UModal
 		:open="open"
-		title="Invite a user"
-		description="We'll email them a link to choose a username and password. The link expires after 3 days."
+		:title="t('Invite a user')"
+		:description="
+			t(
+				'We\'ll email them a link to choose a username and password. The link expires after 3 days.',
+			)
+		"
 		:dismissible="!submitting"
 		:close="{ color: 'neutral', variant: 'ghost', class: 'text-muted' }"
 		@update:open="onOpenChange"
@@ -173,9 +181,9 @@ function onCancel() {
 				/>
 				<UForm :state="{ email }" class="flex flex-col gap-4" @submit="onSubmit">
 					<UFormField
-						label="Email"
+						:label="t('Email')"
 						name="email"
-						:error="emailError || undefined"
+						:error="translate(emailError) || undefined"
 						:ui="{ error: 'mt-1.5 text-xs/5' }"
 					>
 						<template v-if="emailError" #error="{ error }">
@@ -184,7 +192,7 @@ function onCancel() {
 									name="i-lucide-circle-alert"
 									class="size-3.5 shrink-0 text-error"
 								/>
-								{{ error }}
+								{{ t(error) }}
 							</span>
 						</template>
 						<UInput
@@ -215,7 +223,7 @@ function onCancel() {
 					:disabled="submitting"
 					@click="onCancel"
 				>
-					Cancel
+					{{ t('Cancel') }}
 				</UButton>
 				<UButton
 					block
@@ -225,7 +233,7 @@ function onCancel() {
 					:disabled="submitting"
 					@click="onSubmit"
 				>
-					{{ submitting ? 'Sending…' : 'Send invite' }}
+					{{ submitting ? t('Sending…') : t('Send invite') }}
 				</UButton>
 			</div>
 		</template>