fsylvain/RenewCMS
1
1 Fork 0
Code Issues Pull Requests Packages Projects Releases 31 Wiki Activity

feat(SPA): i18n internationzalization, english and french

Browse Source
This commit is contained in:
fsylvain committed 2026-10-03 01:53:49 +02:00
1 parent 7f1e8e572d
commit 721311a643
88 files changed
+4438 -1148
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/views/AcceptInviteView.vue
+78 -38
View File
@@ -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 PasswordStrengthHint from '@/components/PasswordStrengthHint.vue'
import ResultPanel from '@/components/ResultPanel.vue'
@@ -19,7 +21,7 @@ const route = useRoute()
const router = useRouter()
const api = useApi()
const session = useSessionStore()
const toast = useToast()
const toast = useLocalizedToast()
const code = typeof route.query.c === 'string' ? route.query.c : ''
@@ -40,22 +42,29 @@ const passwordValid = computed(() => password.value.length >= 8)
const usernameError = computed(() => {
if (usernameTaken.value) {
return USERNAME_TAKEN_MESSAGE
return t(USERNAME_TAKEN_MESSAGE)
}
return usernameTouched.value && !usernameValid.value ? USERNAME_RULE_MESSAGE : ''
return usernameTouched.value && !usernameValid.value ? t(USERNAME_RULE_MESSAGE) : ''
})
const passwordRules = computed(() => [{ label: 'At least 8 characters', met: passwordValid.value }])
const passwordRules = computed(() => [
{
get label() {
return t('At least 8 characters')
},
met: passwordValid.value,
},
])
const formValid = computed(() => usernameValid.value && passwordValid.value)
const showForm = computed(() => state.value === 'form')
const pageTitle = computed(() => (showForm.value ? 'Accept your invite' : ''))
const pageTitle = computed(() => (showForm.value ? t('Accept your invite') : ''))
const pageDescription = computed(() =>
showForm.value
? 'Choose a username and password to finish setting up your account.'
? t('Choose a username and password to finish setting up your account.')
: undefined,
)
@@ -63,11 +72,20 @@ function goToLogin() {
router.push('/login')
}
const invalidActions = [{ label: 'Go to log in', onClick: goToLogin }]
const invalidActions = [
{
get label() {
return t('Go to log in')
},
onClick: goToLogin,
},
]
const expiredActions = [
{
label: 'Go to log in',
get label() {
return t('Go to log in')
},
color: 'neutral' as const,
variant: 'outline' as const,
onClick: goToLogin,
@@ -117,12 +135,16 @@ async function loadInvite() {
async function handleSuccess() {
state.value = 'success'
toast.add({
toast.add(() => ({
color: 'success',
icon: 'i-lucide-circle-check',
title: 'Welcome to RenewCMS',
description: `You're logged in as ${username.value}.`,
})
get title() {
return t('Welcome to RenewCMS')
},
get description() {
return t("You're logged in as {0}.", [username.value])
},
}))
await Promise.all([session.retry(), wait(VERIFIED_REDIRECT_DELAY_MS)])
await router.push('/home')
}
@@ -187,8 +209,8 @@ onMounted(() => {
<UAlert
color="error"
icon="i-lucide-circle-x"
title="Couldn't create the account"
description="Something went wrong on the server. Try again in a moment."
:title="t('Couldn\'t create the account')"
:description="t('Something went wrong on the server. Try again in a moment.')"
variant="soft"
:close="false"
role="alert"
@@ -202,16 +224,20 @@ onMounted(() => {
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" />
<p class="text-xl/7 font-semibold text-highlighted">Checking your invite…</p>
<p class="text-base text-muted">This only takes a moment.</p>
<p class="text-xl/7 font-semibold text-highlighted">
{{ t('Checking your invite…') }}
</p>
<p class="text-base text-muted">
{{ t('This only takes a moment.') }}
</p>
</div>
<div v-else-if="state === 'failed'" class="flex flex-col gap-4.5">
<UAlert
color="error"
icon="i-lucide-circle-x"
title="Couldn't check your invite"
description="Something went wrong on the server. Try again in a moment."
:title="t('Couldn\'t check your invite')"
:description="t('Something went wrong on the server. Try again in a moment.')"
variant="soft"
:close="false"
role="alert"
@@ -224,7 +250,7 @@ onMounted(() => {
:ui="{ base: controlClass }"
@click="loadInvite"
>
Try again
{{ t('Try again') }}
</UButton>
</div>
@@ -232,12 +258,20 @@ onMounted(() => {
v-else-if="state === 'invalid'"
tone="error"
icon="i-lucide-link-2-off"
title="This invite link doesn't work"
description="It may be incomplete, or it may already have been used. If you already set up your account, log in instead."
:title="t('This invite link doesn\'t work')"
:description="
t(
'It may be incomplete, or it may already have been used. If you already set up your account, log in instead.',
)
"
:actions="invalidActions"
>
<p class="text-sm text-pretty text-muted">
Open the link from your email again, or copy the full address into your browser.
{{
t(
'Open the link from your email again, or copy the full address into your browser.',
)
}}
</p>
</ResultPanel>
@@ -245,8 +279,12 @@ onMounted(() => {
v-else-if="state === 'expired'"
tone="error"
icon="i-lucide-clock"
title="This invite has expired"
description="Invites work once, for 3 days. Ask the person who invited you to send a new one."
:title="t('This invite has expired')"
:description="
t(
'Invites work once, for 3 days. Ask the person who invited you to send a new one.',
)
"
:actions="expiredActions"
/>
@@ -254,8 +292,8 @@ onMounted(() => {
v-else-if="state === 'success'"
tone="success"
icon="i-lucide-circle-check"
title="Your account is ready"
description="Taking you to your dashboard…"
:title="t('Your account is ready')"
:description="t('Taking you to your dashboard…')"
:actions="[]"
/>
@@ -266,7 +304,7 @@ onMounted(() => {
@submit="onSubmit"
>
<UFormField
label="Email"
:label="t('Email')"
name="email"
help="From your invitation."
:size="controlSize"
@@ -288,9 +326,9 @@ onMounted(() => {
</UFormField>
<UFormField
label="Username"
:label="t('Username')"
name="username"
:error="usernameError || undefined"
:error="translate(usernameError) || undefined"
:size="controlSize"
>
<template v-if="usernameError" #error="{ error }">
@@ -299,11 +337,11 @@ onMounted(() => {
name="i-lucide-circle-alert"
class="size-3.5 shrink-0 text-error"
/>
{{ error }}
{{ t(error) }}
</span>
</template>
<template v-else #help>
Letters and numbers, 3 to 20 characters. You'll use it to log in.
{{ t("Letters and numbers, 3 to 20 characters. You'll use it to log in.") }}
</template>
<template #hint>
<span
@@ -317,7 +355,7 @@ onMounted(() => {
</template>
<UInput
v-model="username"
placeholder="e.g. lea"
:placeholder="t('e.g. lea')"
autocomplete="username"
:disabled="submitting"
variant="outline"
@@ -331,7 +369,7 @@ onMounted(() => {
/>
</UFormField>
<UFormField label="Password" name="password" :size="controlSize">
<UFormField :label="t('Password')" name="password" :size="controlSize">
<template #help>
<PasswordStrengthHint
:rules="passwordRules"
@@ -361,7 +399,9 @@ onMounted(() => {
size="sm"
square
class="size-8 justify-center text-toned"
:aria-label="passwordShown ? 'Hide password' : 'Show password'"
:aria-label="
passwordShown ? t('Hide password') : t('Show password')
"
:aria-pressed="passwordShown"
@click="passwordShown = !passwordShown"
/>
@@ -377,19 +417,19 @@ onMounted(() => {
:loading="submitting"
:disabled="submitting"
>
{{ submitting ? 'Creating account…' : 'Accept invite' }}
{{ submitting ? t('Creating account…') : t('Accept invite') }}
</UButton>
</UForm>
</template>
<template v-if="showForm" #footer>
<span class="flex flex-wrap items-center gap-1.5">
Already have an account?
{{ t('Already have an account?') }}
<RouterLink
to="/login"
class="font-medium text-highlighted underline underline-offset-3"
>
Log in
{{ t('Log in') }}
</RouterLink>
</span>
</template>