From 0987587a72b9a7242ad1be6a8e15786e5e2b2c9d Mon Sep 17 00:00:00 2001
From: jeremy bayse <jeremy.bayse@gmail.com>
Date: Mon, 22 Jun 2026 13:37:54 +0200
Subject: [PATCH] i18n: s'appuyer sur le fichier fr.json pour l'edition du
 profil et la page de connexion

---
 app/Http/Middleware/HandleInertiaRequests.php  |  8 ++++++++
 resources/js/Pages/Auth/Login.vue              | 12 ++++++------
 resources/js/Pages/Profile/Edit.vue            |  4 ++--
 .../Pages/Profile/Partials/DeleteUserForm.vue  | 18 +++++++++---------
 .../Profile/Partials/UpdatePasswordForm.vue    | 14 +++++++-------
 .../Partials/UpdateProfileInformationForm.vue  | 18 +++++++++---------
 resources/js/app.js                            | 11 +++++++++++
 7 files changed, 52 insertions(+), 33 deletions(-)
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index eb18a57..a486f9c 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -50,6 +50,14 @@ class HandleInertiaRequests extends Middleware
                     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 [];
+            },
         ];
     }
 }
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 0612a0e..57477df 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -31,7 +31,7 @@ const submit = () => {
 
 <template>
     <GuestLayout>
-        <Head title="Connexion" />
+        <Head :title="__('Log in')" />
 
         <div v-if="status" class="mb-4 text-sm font-medium text-green-600">
             {{ status }}
@@ -39,7 +39,7 @@ const submit = () => {
 
         <form @submit.prevent="submit">
             <div>
-                <InputLabel for="email" value="Email" />
+                <InputLabel for="email" :value="__('Email')" />
 
                 <TextInput
                     id="email"
@@ -55,7 +55,7 @@ const submit = () => {
             </div>
 
             <div class="mt-4">
-                <InputLabel for="password" value="Mot de Passe" />
+                <InputLabel for="password" :value="__('Password')" />
 
                 <TextInput
                     id="password"
@@ -73,7 +73,7 @@ const submit = () => {
                 <label class="flex items-center">
                     <Checkbox name="remember" v-model:checked="form.remember" />
                     <span class="ms-2 text-sm text-gray-600 dark:text-gray-400"
-                        >Se souvenir de moi</span
+                        >{{ __('Remember me') }}</span
                     >
                 </label>
             </div>
@@ -84,7 +84,7 @@ const submit = () => {
                     :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"
                 >
-                    Mot de passe oublié ?
+                    {{ __('Forgot your password?') }}
                 </Link>
 
                 <PrimaryButton
@@ -92,7 +92,7 @@ const submit = () => {
                     :class="{ 'opacity-25': form.processing }"
                     :disabled="form.processing"
                 >
-                    Se connecter
+                    {{ __('Log in') }}
                 </PrimaryButton>
             </div>
         </form>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index d8c8c6e..81f810f 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -16,14 +16,14 @@ defineProps({
 </script>
 
 <template>
-    <Head title="Profil" />
+    <Head :title="__('Profile')" />
 
     <AuthenticatedLayout>
         <template #header>
             <h2
                 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200"
             >
-                Profil
+                {{ __('Profile') }}
             </h2>
         </template>
 
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index b54b8ca..41d8255 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -42,32 +42,32 @@ const closeModal = () => {
     <section class="space-y-6">
         <header>
             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                Supprimer le Compte
+                {{ __('Delete Account') }}
             </h2>
 
             <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>
         </header>
 
-        <DangerButton @click="confirmUserDeletion">Supprimer le Compte</DangerButton>
+        <DangerButton @click="confirmUserDeletion">{{ __('Delete Account') }}</DangerButton>
 
         <Modal :show="confirmingUserDeletion" @close="closeModal">
             <div class="p-6">
                 <h2
                     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>
 
                 <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>
 
                 <div class="mt-6">
                     <InputLabel
                         for="password"
-                        value="Mot de Passe"
+                        :value="__('Password')"
                         class="sr-only"
                     />
 
@@ -77,7 +77,7 @@ const closeModal = () => {
                         v-model="form.password"
                         type="password"
                         class="mt-1 block w-3/4"
-                        placeholder="Mot de Passe"
+                        :placeholder="__('Password')"
                         @keyup.enter="deleteUser"
                     />
 
@@ -86,7 +86,7 @@ const closeModal = () => {
 
                 <div class="mt-6 flex justify-end">
                     <SecondaryButton @click="closeModal">
-                        Annuler
+                        {{ __('Cancel') }}
                     </SecondaryButton>
 
                     <DangerButton
@@ -95,7 +95,7 @@ const closeModal = () => {
                         :disabled="form.processing"
                         @click="deleteUser"
                     >
-                        Supprimer le Compte
+                        {{ __('Delete Account') }}
                     </DangerButton>
                 </div>
             </div>
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index 1baddc7..d97a729 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -37,17 +37,17 @@ const updatePassword = () => {
     <section>
         <header>
             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                Mettre à jour le Mot de Passe
+                {{ __('Update Password') }}
             </h2>
 
             <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>
         </header>
 
         <form @submit.prevent="updatePassword" class="mt-6 space-y-6">
             <div>
-                <InputLabel for="current_password" value="Mot de Passe Actuel" />
+                <InputLabel for="current_password" :value="__('Current Password')" />
 
                 <TextInput
                     id="current_password"
@@ -65,7 +65,7 @@ const updatePassword = () => {
             </div>
 
             <div>
-                <InputLabel for="password" value="Nouveau Mot de Passe" />
+                <InputLabel for="password" :value="__('New Password')" />
 
                 <TextInput
                     id="password"
@@ -82,7 +82,7 @@ const updatePassword = () => {
             <div>
                 <InputLabel
                     for="password_confirmation"
-                    value="Confirmer le Mot de Passe"
+                    :value="__('Confirm Password')"
                 />
 
                 <TextInput
@@ -100,7 +100,7 @@ const updatePassword = () => {
             </div>
 
             <div class="flex items-center gap-4">
-                <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                <PrimaryButton :disabled="form.processing">{{ __('Save') }}</PrimaryButton>
 
                 <Transition
                     enter-active-class="transition ease-in-out"
@@ -112,7 +112,7 @@ const updatePassword = () => {
                         v-if="form.recentlySuccessful"
                         class="text-sm text-gray-600 dark:text-gray-400"
                     >
-                        Enregistré.
+                        {{ __('Saved.') }}
                     </p>
                 </Transition>
             </div>
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 24dfd2b..ecdc359 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -26,11 +26,11 @@ const form = useForm({
     <section>
         <header>
             <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                Informations du Profil
+                {{ __('Profile Information') }}
             </h2>
 
             <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>
         </header>
 
@@ -39,7 +39,7 @@ const form = useForm({
             class="mt-6 space-y-6"
         >
             <div>
-                <InputLabel for="name" value="Nom" />
+                <InputLabel for="name" :value="__('Name')" />
 
                 <TextInput
                     id="name"
@@ -55,7 +55,7 @@ const form = useForm({
             </div>
 
             <div>
-                <InputLabel for="email" value="Email" />
+                <InputLabel for="email" :value="__('Email')" />
 
                 <TextInput
                     id="email"
@@ -71,14 +71,14 @@ const form = useForm({
 
             <div v-if="mustVerifyEmail && user.email_verified_at === null">
                 <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
                         :href="route('verification.send')"
                         method="post"
                         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"
                     >
-                        Cliquez ici pour renvoyer l'email de vérification.
+                        {{ __('Click here to re-send the verification email.') }}
                     </Link>
                 </p>
 
@@ -86,12 +86,12 @@ const form = useForm({
                     v-show="status === 'verification-link-sent'"
                     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 class="flex items-center gap-4">
-                <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                <PrimaryButton :disabled="form.processing">{{ __('Save') }}</PrimaryButton>
 
                 <Transition
                     enter-active-class="transition ease-in-out"
@@ -103,7 +103,7 @@ const form = useForm({
                         v-if="form.recentlySuccessful"
                         class="text-sm text-gray-600 dark:text-gray-400"
                     >
-                        Enregistré.
+                        {{ __('Saved.') }}
                     </p>
                 </Transition>
             </div>
diff --git a/resources/js/app.js b/resources/js/app.js
index a2a2839..21c7868 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -19,6 +19,17 @@ createInertiaApp({
         return createApp({ render: () => h(App, props) })
             .use(plugin)
             .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);
     },
     progress: {
