i18n: s'appuyer sur le fichier fr.json pour l'edition du profil et la page de connexion

This commit is contained in:
jeremy bayse
2026-06-22 13:37:54 +02:00
parent 6d730a4363
commit 0987587a72
7 changed files with 52 additions and 33 deletions
@@ -50,6 +50,14 @@ class HandleInertiaRequests extends Middleware
return false; return false;
} }
}), }),
'translations' => function () {
$locale = app()->getLocale();
$file = lang_path("{$locale}.json");
if (file_exists($file)) {
return json_decode(file_get_contents($file), true);
}
return [];
},
]; ];
} }
} }
+6 -6
View File
@@ -31,7 +31,7 @@ const submit = () => {
<template> <template>
<GuestLayout> <GuestLayout>
<Head title="Connexion" /> <Head :title="__('Log in')" />
<div v-if="status" class="mb-4 text-sm font-medium text-green-600"> <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
{{ status }} {{ status }}
@@ -39,7 +39,7 @@ const submit = () => {
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div> <div>
<InputLabel for="email" value="Email" /> <InputLabel for="email" :value="__('Email')" />
<TextInput <TextInput
id="email" id="email"
@@ -55,7 +55,7 @@ const submit = () => {
</div> </div>
<div class="mt-4"> <div class="mt-4">
<InputLabel for="password" value="Mot de Passe" /> <InputLabel for="password" :value="__('Password')" />
<TextInput <TextInput
id="password" id="password"
@@ -73,7 +73,7 @@ const submit = () => {
<label class="flex items-center"> <label class="flex items-center">
<Checkbox name="remember" v-model:checked="form.remember" /> <Checkbox name="remember" v-model:checked="form.remember" />
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400" <span class="ms-2 text-sm text-gray-600 dark:text-gray-400"
>Se souvenir de moi</span >{{ __('Remember me') }}</span
> >
</label> </label>
</div> </div>
@@ -84,7 +84,7 @@ const submit = () => {
:href="route('password.request')" :href="route('password.request')"
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800" class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
> >
Mot de passe oublié ? {{ __('Forgot your password?') }}
</Link> </Link>
<PrimaryButton <PrimaryButton
@@ -92,7 +92,7 @@ const submit = () => {
:class="{ 'opacity-25': form.processing }" :class="{ 'opacity-25': form.processing }"
:disabled="form.processing" :disabled="form.processing"
> >
Se connecter {{ __('Log in') }}
</PrimaryButton> </PrimaryButton>
</div> </div>
</form> </form>
+2 -2
View File
@@ -16,14 +16,14 @@ defineProps({
</script> </script>
<template> <template>
<Head title="Profil" /> <Head :title="__('Profile')" />
<AuthenticatedLayout> <AuthenticatedLayout>
<template #header> <template #header>
<h2 <h2
class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200" class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200"
> >
Profil {{ __('Profile') }}
</h2> </h2>
</template> </template>
@@ -42,32 +42,32 @@ const closeModal = () => {
<section class="space-y-6"> <section class="space-y-6">
<header> <header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
Supprimer le Compte {{ __('Delete Account') }}
</h2> </h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Une fois votre compte supprimé, toutes ses ressources et données seront définitivement effacées. Avant de supprimer votre compte, veuillez télécharger toutes les données ou informations que vous souhaitez conserver. {{ __("Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.") }}
</p> </p>
</header> </header>
<DangerButton @click="confirmUserDeletion">Supprimer le Compte</DangerButton> <DangerButton @click="confirmUserDeletion">{{ __('Delete Account') }}</DangerButton>
<Modal :show="confirmingUserDeletion" @close="closeModal"> <Modal :show="confirmingUserDeletion" @close="closeModal">
<div class="p-6"> <div class="p-6">
<h2 <h2
class="text-lg font-medium text-gray-900 dark:text-gray-100" class="text-lg font-medium text-gray-900 dark:text-gray-100"
> >
Êtes-vous sûr de vouloir supprimer votre compte ? {{ __('Are you sure you want to delete your account?') }}
</h2> </h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Une fois votre compte supprimé, toutes ses ressources et données seront définitivement effacées. Veuillez saisir votre mot de passe pour confirmer que vous souhaitez supprimer définitivement votre compte. {{ __("Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.") }}
</p> </p>
<div class="mt-6"> <div class="mt-6">
<InputLabel <InputLabel
for="password" for="password"
value="Mot de Passe" :value="__('Password')"
class="sr-only" class="sr-only"
/> />
@@ -77,7 +77,7 @@ const closeModal = () => {
v-model="form.password" v-model="form.password"
type="password" type="password"
class="mt-1 block w-3/4" class="mt-1 block w-3/4"
placeholder="Mot de Passe" :placeholder="__('Password')"
@keyup.enter="deleteUser" @keyup.enter="deleteUser"
/> />
@@ -86,7 +86,7 @@ const closeModal = () => {
<div class="mt-6 flex justify-end"> <div class="mt-6 flex justify-end">
<SecondaryButton @click="closeModal"> <SecondaryButton @click="closeModal">
Annuler {{ __('Cancel') }}
</SecondaryButton> </SecondaryButton>
<DangerButton <DangerButton
@@ -95,7 +95,7 @@ const closeModal = () => {
:disabled="form.processing" :disabled="form.processing"
@click="deleteUser" @click="deleteUser"
> >
Supprimer le Compte {{ __('Delete Account') }}
</DangerButton> </DangerButton>
</div> </div>
</div> </div>
@@ -37,17 +37,17 @@ const updatePassword = () => {
<section> <section>
<header> <header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
Mettre à jour le Mot de Passe {{ __('Update Password') }}
</h2> </h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Assurez-vous que votre compte utilise un mot de passe long et aléatoire pour rester sécurisé. {{ __('Ensure your account is using a long, random password to stay secure.') }}
</p> </p>
</header> </header>
<form @submit.prevent="updatePassword" class="mt-6 space-y-6"> <form @submit.prevent="updatePassword" class="mt-6 space-y-6">
<div> <div>
<InputLabel for="current_password" value="Mot de Passe Actuel" /> <InputLabel for="current_password" :value="__('Current Password')" />
<TextInput <TextInput
id="current_password" id="current_password"
@@ -65,7 +65,7 @@ const updatePassword = () => {
</div> </div>
<div> <div>
<InputLabel for="password" value="Nouveau Mot de Passe" /> <InputLabel for="password" :value="__('New Password')" />
<TextInput <TextInput
id="password" id="password"
@@ -82,7 +82,7 @@ const updatePassword = () => {
<div> <div>
<InputLabel <InputLabel
for="password_confirmation" for="password_confirmation"
value="Confirmer le Mot de Passe" :value="__('Confirm Password')"
/> />
<TextInput <TextInput
@@ -100,7 +100,7 @@ const updatePassword = () => {
</div> </div>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton> <PrimaryButton :disabled="form.processing">{{ __('Save') }}</PrimaryButton>
<Transition <Transition
enter-active-class="transition ease-in-out" enter-active-class="transition ease-in-out"
@@ -112,7 +112,7 @@ const updatePassword = () => {
v-if="form.recentlySuccessful" v-if="form.recentlySuccessful"
class="text-sm text-gray-600 dark:text-gray-400" class="text-sm text-gray-600 dark:text-gray-400"
> >
Enregistré. {{ __('Saved.') }}
</p> </p>
</Transition> </Transition>
</div> </div>
@@ -26,11 +26,11 @@ const form = useForm({
<section> <section>
<header> <header>
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100"> <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
Informations du Profil {{ __('Profile Information') }}
</h2> </h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400"> <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Mettez à jour les informations de profil et l'adresse email de votre compte. {{ __("Update your account's profile information and email address.") }}
</p> </p>
</header> </header>
@@ -39,7 +39,7 @@ const form = useForm({
class="mt-6 space-y-6" class="mt-6 space-y-6"
> >
<div> <div>
<InputLabel for="name" value="Nom" /> <InputLabel for="name" :value="__('Name')" />
<TextInput <TextInput
id="name" id="name"
@@ -55,7 +55,7 @@ const form = useForm({
</div> </div>
<div> <div>
<InputLabel for="email" value="Email" /> <InputLabel for="email" :value="__('Email')" />
<TextInput <TextInput
id="email" id="email"
@@ -71,14 +71,14 @@ const form = useForm({
<div v-if="mustVerifyEmail && user.email_verified_at === null"> <div v-if="mustVerifyEmail && user.email_verified_at === null">
<p class="mt-2 text-sm text-gray-800 dark:text-gray-200"> <p class="mt-2 text-sm text-gray-800 dark:text-gray-200">
Votre adresse email n'est pas vérifiée. {{ __('Your email address is unverified.') }}
<Link <Link
:href="route('verification.send')" :href="route('verification.send')"
method="post" method="post"
as="button" as="button"
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800" class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
> >
Cliquez ici pour renvoyer l'email de vérification. {{ __('Click here to re-send the verification email.') }}
</Link> </Link>
</p> </p>
@@ -86,12 +86,12 @@ const form = useForm({
v-show="status === 'verification-link-sent'" v-show="status === 'verification-link-sent'"
class="mt-2 text-sm font-medium text-green-600 dark:text-green-400" class="mt-2 text-sm font-medium text-green-600 dark:text-green-400"
> >
Un nouveau lien de vérification a été envoyé à votre adresse email. {{ __('A new verification link has been sent to your email address.') }}
</div> </div>
</div> </div>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton> <PrimaryButton :disabled="form.processing">{{ __('Save') }}</PrimaryButton>
<Transition <Transition
enter-active-class="transition ease-in-out" enter-active-class="transition ease-in-out"
@@ -103,7 +103,7 @@ const form = useForm({
v-if="form.recentlySuccessful" v-if="form.recentlySuccessful"
class="text-sm text-gray-600 dark:text-gray-400" class="text-sm text-gray-600 dark:text-gray-400"
> >
Enregistré. {{ __('Saved.') }}
</p> </p>
</Transition> </Transition>
</div> </div>
+11
View File
@@ -19,6 +19,17 @@ createInertiaApp({
return createApp({ render: () => h(App, props) }) return createApp({ render: () => h(App, props) })
.use(plugin) .use(plugin)
.use(ZiggyVue) .use(ZiggyVue)
.mixin({
methods: {
__(key, replace = {}) {
let translation = this.$page.props.translations?.[key] || key;
Object.keys(replace).forEach(r => {
translation = translation.replace(`:${r}`, replace[r]);
});
return translation;
}
}
})
.mount(el); .mount(el);
}, },
progress: { progress: {