From 665c51f5ea3b94cf491f8e915050d2f2ea3841c9 Mon Sep 17 00:00:00 2001
From: Florian Dupret <florian.dupret@gmail.com>
Date: Sat, 20 Mar 2021 09:29:45 +0100
Subject: [PATCH] Localize profile page

---
 frontend/src/locales/messages/en.json      | 14 +++++++++++--
 frontend/src/locales/messages/fr.json      | 16 +++++++++++++--
 frontend/src/mixins/validators.js          |  6 +++---
 frontend/src/pages/Admin/Profile/index.vue | 24 +++++++++++-----------
 4 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/frontend/src/locales/messages/en.json b/frontend/src/locales/messages/en.json
index 165e94798..dab8b0e4d 100644
--- a/frontend/src/locales/messages/en.json
+++ b/frontend/src/locales/messages/en.json
@@ -43,7 +43,8 @@
     "filter": "Filter",
     "yes": "Yes",
     "no": "No",
-    "token": "Token"
+    "token": "Token",
+    "field-required": "Field Required"
   },
   "page": {
     "home-page": "Home Page",
@@ -87,7 +88,16 @@
     "users": "Users",
     "groups": "Groups",
     "could-not-validate-credentials": "Could Not Validate Credentials",
-    "login": "Login"
+    "login": "Login",
+    "groups-can-only-be-set-by-administrators": "Groups can only be set by administrators",
+    "upload-photo": "Upload Photo",
+    "reset-password": "Reset Password",
+    "current-password": "Current Password",
+    "new-password": "New Password",
+    "confirm-password": "Confirm Password",
+    "password-must-match": "Password must match",
+    "e-mail-must-be-valid": "E-mail must be valid",
+    "use-8-characters-or-more-for-your-password": "Use 8 characters or more for your password"
   },
   "meal-plan": {
     "shopping-list": "Shopping List",
diff --git a/frontend/src/locales/messages/fr.json b/frontend/src/locales/messages/fr.json
index 8d837def3..db0e7c132 100644
--- a/frontend/src/locales/messages/fr.json
+++ b/frontend/src/locales/messages/fr.json
@@ -43,7 +43,8 @@
     "filter": "Filtrer",
     "no": "Non",
     "yes": "Oui",
-    "token": "Jeton"
+    "token": "Jeton",
+    "field-required": "Champ obligatoire"
   },
   "page": {
     "home-page": "Accueil",
@@ -85,7 +86,18 @@
     "group-name": "Nom du groupe",
     "link-id": "ID du lien",
     "groups": "Groupes",
-    "users": "Utilisateurs"
+    "users": "Utilisateurs",
+    "could-not-validate-credentials": "La vérification de vos identifiants a échoué",
+    "login": "Connexion",
+    "groups-can-only-be-set-by-administrators": "Les groupes sont assignés par les administrateurs",
+    "confirm-password": "Confirmer mot de passe",
+    "current-password": "Mot de passe actuel",
+    "e-mail-must-be-valid": "L'e-mail doit être valide",
+    "new-password": "Nouveau mot de passe",
+    "password-must-match": "Les mots de passe doivent correspondre",
+    "reset-password": "Réinitialiser le mot de passe",
+    "upload-photo": "Importer une photo",
+    "use-8-characters-or-more-for-your-password": "Utiliser au moins 8 caractères pour votre mot de passe"
   },
   "meal-plan": {
     "shopping-list": "Liste d'achats",
diff --git a/frontend/src/mixins/validators.js b/frontend/src/mixins/validators.js
index dc7bb314b..82a7e9526 100644
--- a/frontend/src/mixins/validators.js
+++ b/frontend/src/mixins/validators.js
@@ -4,12 +4,12 @@ export const validators = {
       emailRule: v =>
         !v ||
         /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
-        "E-mail must be valid",
+       this.$t('user.e-mail-must-be-valid'),
 
-      existsRule: value => !!value || "Field Required",
+      existsRule: value => !!value || this.$t('general.field-required'),
 
       minRule: v =>
-        v.length >= 8 || "Use 8 characters or more for your password",
+        v.length >= 8 || this.$t('user.use-8-characters-or-more-for-your-password'),
     };
   },
 };
diff --git a/frontend/src/pages/Admin/Profile/index.vue b/frontend/src/pages/Admin/Profile/index.vue
index afa556261..485791830 100644
--- a/frontend/src/pages/Admin/Profile/index.vue
+++ b/frontend/src/pages/Admin/Profile/index.vue
@@ -13,9 +13,9 @@
             >
             </v-progress-circular>
           </span>
-          Profile
+          {{$t('settings.profile')}}
           <v-spacer></v-spacer>
-          User ID: {{ user.id }}
+          {{$t('user.user-id-with-value', {id: user.id }) }}
         </v-card-title>
         <v-divider></v-divider>
         <v-card-text>
@@ -39,7 +39,7 @@
             <v-col cols="12" md="9">
               <v-form>
                 <v-text-field
-                  label="Full Name"
+                  :label="$t('user.full-name')"
                   required
                   v-model="user.fullName"
                   :rules="[existsRule]"
@@ -47,7 +47,7 @@
                 >
                 </v-text-field>
                 <v-text-field
-                  label="Email"
+                  :label="$t('user.email')"
                   :rules="[emailRule]"
                   validate-on-blur
                   required
@@ -55,11 +55,11 @@
                 >
                 </v-text-field>
                 <v-text-field
-                  label="Group"
+                  :label="$t('user.group')"
                   readonly
                   v-model="user.group"
                   persistent-hint
-                  hint="Group groups can only be set by administrators"
+                  :hint="$t('user.groups-can-only-be-set-by-administrators')"
                 >
                 </v-text-field>
               </v-form>
@@ -70,7 +70,7 @@
         <v-card-actions>
           <UploadBtn
             icon="mdi-image-area"
-            text="Upload Photo"
+            :text="$t('user.upload-photo')"
             :url="userProfileImage"
             file-name="profile_image"
           />
@@ -86,7 +86,7 @@
     <v-col cols="12" md="4" sm="12">
       <v-card height="100%">
         <v-card-title class="headline">
-          Reset Password
+          {{$t('user.reset-password')}}
           <v-spacer></v-spacer>
         </v-card-title>
         <v-divider></v-divider>
@@ -95,7 +95,7 @@
             <v-text-field
               v-model="password.current"
               prepend-icon="mdi-lock"
-              label="Current Password"
+              :label="$t('user.current-password')"
               :rules="[existsRule]"
               validate-on-blur
               :type="showPassword ? 'text' : 'password'"
@@ -104,7 +104,7 @@
             <v-text-field
               v-model="password.newOne"
               prepend-icon="mdi-lock"
-              label="New Password"
+              :label="$t('user.new-password')"
               :rules="[minRule]"
               :type="showPassword ? 'text' : 'password'"
               @click:append="showPassword.newOne = !showPassword.newOne"
@@ -112,9 +112,9 @@
             <v-text-field
               v-model="password.newTwo"
               prepend-icon="mdi-lock"
-              label="Confirm Password"
+              :label="$t('user.confirm-password')"
               :rules="[
-                password.newOne === password.newTwo || 'Password must match',
+                password.newOne === password.newTwo || $t('user.password-must-match'),
               ]"
               validate-on-blur
               :type="showPassword ? 'text' : 'password'"