Merge branch 'redmine-issue/14651' into 'develop'

Resolve REDMINE_ISSUE-14651

See merge request onegeo-suite/sites/onegeo-suite-site-login-vuejs!27

.gitlab-ci.yml

@@ -35,12 +35,16 @@ build_development:
     - npm install --unsafe-perm
     - echo -e "
       NODE_ENV=development\n
-      VUE_APP_LOCALE=fr-FR\n
       DOMAIN=https://dev.pigma.neogeo.fr/fr\n
       VUE_APP_DOMAIN=https://dev.pigma.neogeo.fr/\n
       BASE_PATH=/\n
-      VUE_APP_NEXT_DEFAULT=/\n
       VUE_APP_BASE_PATH=${BASE_PATH}\n
+      VUE_APP_NEXT_DEFAULT=/\n
+      VUE_APP_LOCALE=fr-FR\n
+      VUE_APP_I18N_LOCALE=fr\n
+      VUE_APP_I18N_DEFAULT_LOCALE=fr\n
+      VUE_APP_I18N_FALLBACK_LOCALE=fr\n
+      VUE_APP_I18N_SUPPORTED_LOCALE=fr,en\n
       VUE_APP_LOGO=@/assets/logo.png\n
       VUE_APP_TITLE=Login - Pigma\n
       VUE_APP_CLIENT_NAME=PIGMA\n

README.md

@@ -10,7 +10,6 @@ npm install
 
 ```ìni
 NODE_ENV=development
-VUE_APP_LOCALE=fr-FR
 
 DOMAIN=http://127.0.0.0:80
 VUE_APP_DOMAIN=${DOMAIN}
@@ -20,6 +19,12 @@ VUE_APP_BASE_PATH=${BASE_PATH}
 
 VUE_APP_NEXT_DEFAULT=${BASE_PATH}
 
+VUE_APP_LOCALE=fr-FR
+VUE_APP_I18N_LOCALE=fr
+VUE_APP_I18N_DEFAULT_LOCALE=fr
+VUE_APP_I18N_FALLBACK_LOCALE=fr
+VUE_APP_I18N_SUPPORTED_LOCALE=fr,en
+
 # App title
 VUE_APP_TITLE=Onegeo-Suite
 

package.json

@@ -20,6 +20,7 @@
     "toastr": "^2.1.4",
     "vee-validate": "^3.4.9",
     "vue": "~2.6.11",
+    "vue-i18n": "^8.27.2",
     "vue-multiselect": "~2.1.6",
     "vue-recaptcha": "^1.3.0",
     "vue-router": "~3.2.0",

src/App.vue

 <template>
   <div id="app">
+    <LocaleChanger />
     <router-view id="page"/>
   </div>
 </template>
 
 <script>
+import LocaleChanger from '@/components/LocaleChanger.vue';
+
 export default {
 
+  components: {
+    LocaleChanger
+  }
+
 };
 </script>

src/app.less

@@ -10,6 +10,12 @@ body {
   height: 100%;
 }
 
+#locale-changer {
+  position: absolute;
+  top: 1rem;
+  right: 5rem;
+}
+
 #page {
   height: 100%;
   overflow-y: auto;

src/assets/locales/en.json

+{
+  "words": {
+    "username": "Username",
+    "password": "Password",
+    "firstname": "First name",
+    "lastname": "Last name",
+    "email": "E-mail address",
+    "phone": "Phone number",
+    "login": "Log in",
+    "logout": "Log out",
+    "validate": "Validate",
+    "cancel": "Cancel",
+    "retry": "Retry",
+    "accept": "Accept",
+    "decline": "Decline",
+    "save": "Save",
+    "goBack": "Go back",
+    "as": "as"
+  },
+  "errors": {
+    "required": "This field is required",
+    "email": "Please enter a valid email address",
+    "confirmPassword": "Passwords must be identical",
+    "regexPassword": "Your password must be at least 8 characters long, including at least one upper case, one lower case and one number."
+  },
+  "messages": {
+    "error": "An error has occured.",
+    "loginError": "Incorrect username and/or password",
+    "password": {
+      "success": "Your password has been changed."
+    },
+    "reinitPwdRequest": {
+      "success": "An e-mail has been sent to your mailbox to reset your password.",
+      "error": "No account found for this e-mail address."
+    },
+    "reinitPwdConfirm": {
+      "success": "Your password has been successfully reset. You will be redirected to the login page.",
+      "error": "Your token has expired. You must request a new one to change your password."
+    }
+  },
+  "multiselect": {
+    "noResult": "No results found",
+    "noOptions": "Enter the first characters..."
+  },
+  "importImage": {
+    "logo": "Add a logo",
+    "image": "Add an image",
+    "placeholder": "Upload file"
+  },
+  "organisationCreation": {
+    "title": "Create a new organisation",
+    "form": {
+      "name": "Organisation name",
+      "nameHelp": "Spelled out the entire name",
+      "acronym": "Acronym",
+      "siret": "Identification number",
+      "type": "Organisation type",
+      "typePlaceholder": "Select a type",
+      "logo": "Organisation logo",
+      "logoHelp": "Import a logo either in JPG or PNG format (maximum size: 2 MB)",
+      "web": "Website",
+      "phone": "Phone number",
+      "address": "Address",
+      "description": "Organisation description",
+      "group": {
+        "title": "Add this organisation to groups of organisations",
+        "help": "Adding this organisation to an organisation group will provide access to the data and data collections associated with that organisation group.",
+        "placeholder": "Add this organisation to groups of organisations"
+      }
+    }
+  },
+  "signin": {
+    "title": "Enter your {org} credentials",
+    "forgottenpassword": "Forgot your password",
+    "noaccount": "No account yet",
+    "warning": "You already had a {org} account and this is your first connection to the new platform? If so, for RGPD compliance reasons, you need to regenerate your password via the « Forgot your password? » link below. Please enter the email address linked to your {org} account. If you encounter a problem, please contact us at the following email address "
+  },
+  "forgottenPassword": {
+    "title": "Reset your password",
+    "message": "Please enter your account email address",
+    "placeholder": "Email address",
+    "confirmationButton": "Send reinitialization email"
+  },
+  "reinitPassword": {
+    "title": "Set a new Password",
+    "newLabel": "New password",
+    "confirmLabel": "Confirm password",
+    "passwordHelp": [
+      "Your password must be different from your personal information.",
+      "Your password must contain at least 8 characters.",
+      "Your password cannot be a commonly used password.",
+      "Your password cannot be entirely numerical."
+    ]
+  },
+  "signup": {
+    "title": "New account",
+    "subtitle": "Request an account",
+    "secondTitle": "A confirmation e-mail will be sent to your address",
+    "form": {
+      "personalDetails": {
+        "title": "Your personal details",
+        "reason": "Reason for registration"
+      },
+      "loginDetails": {
+        "title": "Your login details",
+        "usernameHelp": "The username is automatically generated from the first letter of your firstname and your lastname. It cannot be changed.",
+        "passwordHelp": [
+          "Your password must be different from your personal information.",
+          "Your password must contain at least 8 characters.",
+          "Your password cannot be a commonly used password.",
+          "Your password cannot be entirely numerical."
+        ]
+      },
+      "organisation": {
+        "title": "Organisation",
+        "subtitle": "Select your organisation from the list below.",
+        "placeholder": "Search for an organisation...",
+        "noOptions": "Enter an organisation's first characters to start the search",
+        "help": {
+          "text": "If you can't find it on the list, you can",
+          "link": " specify a new organisation."
+        }
+      }
+    }
+  },
+  "signupSuccess": {
+    "message": [
+      "A confirmation e-mail has just been sent to the address indicated on the form.",
+      "Please follow given instructions to finalize your account creation."
+    ]
+  },
+  "signout": {
+    "message": "You are now logged out.",
+    "toSignIn": "Go to login page"
+  },
+  "signoutFailed": {
+    "message": "An error occurred during signout."
+  },
+  "termsOfUse": {
+    "error": "An error has occurred. Please contact the site administrator.",
+    "download": "Download terms of use"
+  },
+  "profile": {
+    "title": "Existing account",
+    "subtitle": "Edit your account informations",
+    "form": {
+      "personalDetails": {
+        "title": "Your personal details",
+        "reason": "Reason for registration",
+        "organisation": {
+          "label": "Organisation(s)/Group(s)",
+          "noOrganisation": "You are not affiliated with any organisation.",
+          "help": "For any modification request, please contact"
+        }
+      },
+      "emailChange": {
+        "title": "Change your email address",
+        "label": "New email address",
+        "help": "You can request a change of your email address by entering a new address. A confirmation link will be sent to the new address."
+      },
+      "passwordChange": {
+        "title": "Change your password",
+        "oldLabel": "Old password",
+        "oldPlaceholder": "Old password",
+        "newLabel": "New password",
+        "newPlaceholder": "New password",
+        "confirmPlaceholder": "Confirm password",
+        "passwordHelp": [
+          "Your password must be different from your personal information.",
+          "Your password must contain at least 8 characters.",
+          "Your password cannot be a commonly used password.",
+          "Your password cannot be entirely numerical."
+        ]
+      }
+    }
+  },
+  "validationEmail": {
+    "message": "Your new email address has been validated.",
+    "goToLogin": "Go to login",
+    "error": "An error has occurred. Please contact the site administrator."
+  },
+  "validationRegistration": {
+    "messages": {
+      "success": [
+        "Thank you for your registration.",
+        "You will receive a notification when your account is enabled by the platform administrator."
+      ],
+      "error": "An error has occurred. Please contact the site administrator."
+    },
+    "confirmation": "To confirm your registration",
+    "clickHere": "Click here"
+  },
+  "footer": "Powered by",
+  "403": "Access Denied"
+}
\ No newline at end of file

src/assets/locales/fr.json

+{
+  "words": {
+    "username": "Nom d'utilisateur",
+    "password": "Mot de passe",
+    "firstname": "Prénom",
+    "lastname": "Nom",
+    "email": "Adresse e-mail",
+    "phone": "Numéro de téléphone",
+    "login": "Se connecter",
+    "logout": "Se déconnecter",
+    "validate": "Valider",
+    "cancel": "Annuler",
+    "retry": "Réessayer",
+    "accept": "Accepter",
+    "decline": "Refuser",
+    "save": "Sauvegarder",
+    "goBack": "Revenir",
+    "as": "en tant que"
+  },
+  "errors": {
+    "required": "Ce champ est requis",
+    "email": "Veuillez entrer une adresse e-mail valide",
+    "confirmPassword": "Les mots de passe doivent être identiques",
+    "regexPassword": "Votre mot de passe doit comporter au moins 8 caractères, dont au moins une majuscule, une minuscule et 1 chiffre."
+  },
+  "messages": {
+    "error": "Une erreur est survenue",
+    "loginError": "Nom d'utilisateur et/ou mot de passe incorrect(s)",
+    "password": {
+      "success": "Votre mot de passe a bien été modifié."
+    },
+    "reinitPwdRequest": {
+      "success": "Un e-mail vous a été envoyé sur votre messagerie pour réinitialiser votre mot de passe.",
+      "error": "Aucun compte trouvé pour cette adresse e-mail."
+    },
+    "reinitPwdConfirm": {
+      "success": "Votre mot de passe a bien été réinitialisé.  Vous allez être redirigé vers la page de connexion.",
+      "error": "Votre token a expiré. Vous devez en demander un nouveau pour changer votre mot de passe."
+    }
+  },
+  "multiselect": {
+    "noResult": "Aucun résultat.",
+    "noOptions": "Saississez les premiers caractères ..."
+  },
+  "importImage": {
+    "logo": "Ajouter un logo",
+    "image": "Ajouter un image",
+    "placeholder": "Importer un fichier"
+  },
+  "organisationCreation": {
+    "title": "Créer une nouvelle organisation",
+    "form": {
+      "name": "Nom de l'organisation",
+      "nameHelp": "Inscrivez le nom complet et en toutes lettres ; par ex. « Communauté des Communes Rurales de l'Entre-Deux-Mers »",
+      "acronym": "Sigle",
+      "siret": "Numéro SIRET",
+      "type": "Type d'organisation",
+      "typePlaceholder": "Sélectionnez un type",
+      "logo": "Logo de l'organisation",
+      "logoHelp": "Importez un logo au format JPG ou PNG (taille maximale : 2 Mo)",
+      "web": "Site internet",
+      "phone": "Numéro de téléphone",
+      "address": "Adresse postale",
+      "description": "description de l'organisation",
+      "group": {
+        "title": "Ajouter cette organisation à des groupe d'organisations",
+        "help": "L'ajout de cette organisation à un groupe d'organisation donnera accès aux données et collections de données associées à ce groupe d'organisation.",
+        "placeholder": "Ajouter cette organisation à des groupes d'organisations"
+      }
+    }
+  },
+  "signin": {
+    "title": "Saisissez vos identifiants {org}",
+    "forgottenpassword": "Mot de passe oublié",
+    "noaccount": "Pas encore de compte",
+    "warning": "Vous aviez déjà un compte {org} et il s’agit de votre première connexion sur la nouvelle plateforme ? Si tel est le cas, pour des raisons de conformité RGPD, il vous faut regénérer votre mot de passe via la fonction « Mot de passe oublié ? » disponible ci-dessous. Veuillez renseigner l’adresse mail liée à votre compte {org}. Si vous rencontrez un problème veuillez nous contacter à l’adresse mail suivante : "
+  },
+  "forgottenPassword": {
+    "title": "Réinitialisez votre mot de passe",
+    "message": "Veuillez indiquer l'adresse e-mail de votre compte",
+    "placeholder": "Adresse e-mail",
+    "confirmationButton": "Envoyer un e-mail de réinitialisation"
+
+  },
+  "reinitPassword": {
+    "title": "Choisissez un nouveau mot de passe",
+    "newLabel": "Nouveau mot de passe",
+    "confirmLabel": "Confirmez le mot de passe",
+    "passwordHelp": [
+      "Votre mot de passe ne peut pas ressembler à vos informations personnelles.",
+      "Votre mot de passe doit contenir au minimum 8 caractères.",
+      "Votre mot de passe ne peut pas être un mot de passe couramment utilisé.",
+      "Votre mot de passe ne peut pas être entièrement numérique."
+    ]
+  },
+  "signup": {
+    "title": "Nouveau compte",
+    "subtitle": "Sollicitez la création d'un compte",
+    "secondTitle": "Un e-mail de confirmation sera envoyé à l'adresse indiquée",
+    "form": {
+      "personalDetails": {
+        "title": "Vos informations personnelles",
+        "reason": "Motif de l'inscription"
+      },
+      "loginDetails": {
+        "title": "Vos identifiants",
+        "usernameHelp": "Le nom d'utilisateur est généré automatiquement à partir de la première lettre de votre prénom et de votre nom. Il n'est pas modifiable.",
+        "passwordHelp": [
+          "Votre mot de passe ne peut pas ressembler à vos informations personnelles.",
+          "Votre mot de passe doit contenir au minimum 8 caractères.",
+          "Votre mot de passe ne peut pas être un mot de passe couramment utilisé.",
+          "Votre mot de passe ne peut pas être entièrement numérique."
+        ]
+      },
+      "organisation": {
+        "title": "Organisation",
+        "subtitle": "Sélectionnez votre organisation dans la liste ci-dessous.",
+        "placeholder": "Recherchez une organisation ...",
+        "noOptions": "Saississez les premiers caractères d'une organisation pour lancer la recherche",
+        "help": {
+          "text": "Si celle-ci n'est pas dans la liste, vous pouvez",
+          "link": " indiquer une nouvelle organisation."
+        }
+      }
+    }
+  },
+  "signupSuccess": {
+    "message": [
+      "Un e-mail de confirmation vient d'être envoyé à l'adresse indiquée.",
+      "Merci de bien vouloir suivre les instructions données afin de finaliser la création de votre compte."
+    ]
+  },
+  "signout": {
+    "message": "Vous êtes maintenant déconnecté.",
+    "toSignIn": "Ouvrir la page de connexion"
+  },
+  "signoutFailed": {
+    "message": "Une erreur est survenue lors de la déconnexion."
+  },
+  "termsOfUse": {
+    "error": "Une erreur est survenue. Veuillez contacter l'administrateur du site.",
+    "download": "Télécharger les conditions d'utilisation"
+  },
+  "profile": {
+    "title": "Compte existant",
+    "subtitle": "Modifiez les informations relatives à votre compte",
+    "form": {
+      "personalDetails": {
+        "title": "Vos informations personnelles",
+        "reason": "Motif de l'inscription",
+        "organisation": {
+          "label": "Organisation(s)/Groupe(s)",
+          "noOrganisation": "Vous n'êtes rattaché à aucune organisation.",
+          "help": "Pour toute demande de modification, merci de contacter"
+        }
+      },
+      "emailChange": {
+        "title": "Changer votre adresse e-mail",
+        "label": "Nouvelle adresse e-mail",
+        "help": "Vous pouvez demander le changement de votre adresse mail en renseignant une nouvelle adresse. Un lien de confirmation vous sera envoyé sur la nouvelle adresse."
+      },
+      "passwordChange": {
+        "title": "Changer votre mot de passe",
+        "oldLabel": "Ancien mot de passe",
+        "oldPlaceholder": "Ancien mot de passe",
+        "newLabel": "Nouveau mot de passe",
+        "newPlaceholder": "Nouveau mot de passe",
+        "confirmPlaceholder": "Confirmez mot de passe",
+        "passwordHelp": [
+          "Votre mot de passe ne peut pas ressembler à vos informations personnelles.",
+          "Votre mot de passe doit contenir au minimum 8 caractères.",
+          "Votre mot de passe ne peut pas être un mot de passe couramment utilisé.",
+          "Votre mot de passe ne peut pas être entièrement numérique."
+        ]
+      }
+    }
+  },
+  "validationEmail": {
+    "message": "Votre nouvelle adresse e-mail est validée.",
+    "goToLogin": "Ouvrir la page de connexion",
+    "error": "Une erreur est survenue. Veuillez contacter l'administrateur du site."
+  },
+  "validationRegistration": {
+    "messages": {
+      "success": [
+        "Merci pour votre inscription.",
+        "Vous recevrez une notification lors de l'activation de votre compte par l'administrateur de la plateforme."
+      ],
+      "error": "Une erreur est survenue. Veuillez contacter l'administrateur du site."
+    },
+    "confirmation": "Pour confirmer votre inscription",
+    "clickHere": "Cliquez ici"
+  },
+  "footer": "Propulsé par",
+  "403": "Page non accessible"
+}
\ No newline at end of file

src/components/ImportImage.vue

@@ -25,10 +25,10 @@
     >
       <img
         src="@/assets/icons/file_document_sheet.svg"
-        alt="Icône fichier"
+        alt="File icon"
       />
-      <div v-if="type === 'logo'"><b-icon-plus />Ajouter un logo</div>
-      <div v-if="type === 'image'"><b-icon-plus />Ajouter une image</div>
+      <div v-if="type === 'logo'"><b-icon-plus />{{ $t('importImage.logo') }}</div>
+      <div v-if="type === 'image'"><b-icon-plus />{{ $t('importImage.image') }}</div>
     </div>
     <div>
       <input
@@ -36,7 +36,7 @@
         :hidden="!(fileExist || filePreview)"
         type="file"
         accept="image/*"
-        placeholder="Importer un fichier"
+        placeholder="$t('importImage.placeholder')"
         @change="previewFile"
       >
     </div>
@@ -44,7 +44,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 
 export default {
   name: 'ImportImage',

src/components/LocaleChanger.vue

+<template>
+  <div id="locale-changer">
+    <select v-model="$i18n.locale">
+      <option
+        v-for="(lang, i) in langs"
+        :key="`Lang${i}`"
+        :value="lang"
+      >
+        {{ lang }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  name: 'LocaleChanger',
+
+  data () {
+    return {
+      langs: ['fr', 'en'],
+    }
+  },
+
+  watch: {
+    '$i18n.locale': function(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        const to = this.$router.resolve({ params: { locale: newValue } })
+        this.$router.push(to.location);
+      }
+    }
+  }
+
+}
+</script>

src/components/OrganisationCreation.vue

 <template>
   <div>
     <b-button-close @click="$emit('cancel')" class="close"/>
-    <h6>Créer une nouvelle organisation</h6>
+    <h6>{{ $t('organisationCreation.title') }}</h6>
     <br>
     <form>
       <div class="form-row">
         <div class="form-group col-11">
           <ValidationProvider rules="required" v-slot="{ classes, errors }">
             <div class="control" :class="classes">
-              <label class="required">Nom de l'organisation</label>
-              <p>Inscrivez le nom complet et en toutes lettres ; par ex. « Communauté des Communes Rurales de l'Entre-Deux-Mers »</p>
+              <label class="required">{{ $t('organisationCreation.form.name') }}</label>
+              <p>{{ $t('organisationCreation.form.nameHelp') }}</p>
               <input
                 v-model="formData.name"
                 class="form-control"
@@ -24,7 +24,7 @@
       <div class="form-row">
         <div class="form-group col-6">
           <div class="control">
-            <label>Sigle</label>
+            <label>{{ $t('organisationCreation.form.acronym') }}</label>
             <input
               v-model="formData.sigle"
               class="form-control"
@@ -36,7 +36,7 @@
       </div>
       <div class="form-row">
         <div class="form-group col-6">
-          <label>Numéro SIRET</label>
+          <label>{{ $t('organisationCreation.form.siret') }}</label>
           <input
             v-model="formData.siret"
             class="form-control"
@@ -49,7 +49,7 @@
         <div class="form-group col-6">
           <ValidationProvider rules="required" v-slot="{ classes, errors }">
             <div class="control" :class="classes">
-              <label class="required">Type d'organisation</label>
+              <label class="required">{{ $t('organisationCreation.form.type') }}</label>
               <Multiselect
                 v-model="formData.type"
                 :options="organisationsTypes"
@@ -59,7 +59,7 @@
                 selectedLabel=""
                 deselectLabel=""
                 :searchable="false"
-                placeholder="Sélectionnez un type"
+                :placeholder="$t('organisationCreation.form.typePlaceholder')"
               />
               <span class="form-errors">{{ errors[0] }}</span>
             </div>
@@ -68,8 +68,8 @@
       </div>
       <div class="form-row">
         <div class="form-group col-6">
-          <label>Logo de l'organisation</label>
-          <p>Importez un logo au format JPG ou PNG (taille maximale : 2 Mo)</p>
+          <label>{{ $t('organisationCreation.form.logo') }}</label>
+          <p>{{ $t('organisationCreation.form.logoHelp') }}</p>
           <ValidationProvider ref="thumbnail" v-slot="{ classes, errors }">
             <div class="control" :class="classes">
               <ImportImage
@@ -85,7 +85,7 @@
       </div>
       <div class="form-row">
         <div class="form-group col-9">
-          <label>Site internet</label>
+          <label>{{ $t('organisationCreation.form.web') }}</label>
           <input
             v-model="formData.web"
             class="form-control"
@@ -98,7 +98,7 @@
       </div>
       <div class="form-row">
         <div class="form-group col-6">
-          <label>Numéro de téléphone</label>
+          <label>{{ $t('organisationCreation.form.phone') }}</label>
           <input
             v-model="formData.tel"
             class="form-control"
@@ -109,7 +109,7 @@
       </div>
       <div class="form-row">
         <div class="form-group col-11">
-          <label>Adresse postale</label>
+          <label>{{ $t('organisationCreation.form.address') }}</label>
           <textarea
             v-model="formData.postalAddress"
             class="form-control"
@@ -118,7 +118,7 @@
       </div>
       <div class="form-row">
         <div class="form-group col-11">
-          <label>Description de l'organisation</label>
+          <label>{{ $t('organisationCreation.form.description') }}</label>
           <textarea
             v-model="formData.description"
             class="form-control"
@@ -128,13 +128,14 @@
       <div class="form-row">
         <div class="form-group col-11">
           <label>
-            Ajouter cette organisation à des groupe d'organisations
+            {{ $t('organisationCreation.form.group.title') }}
           </label>
           <p>
-            L'ajout de cette organisation à un groupe d'organisation donnera accès aux données et collections de données associées à ce groupe d'organisation.
+            {{ $t('organisationCreation.form.group.help') }}
           </p>
           <SearchUsergroups
             :type="'group-of-organisation'"
+            :placeholder="$t('organisationCreation.form.group.placeholder')"
             @select="addOrgToSphere"
           />
           <div
@@ -166,11 +167,12 @@ import {
   mapActions
 } from 'vuex';
 
+import i18n from '@/i18n';
+
 import ImportImage from '@/components/ImportImage';
 import SearchUsergroups from '@/components/SearchUsergroups';
 
 import {
-  ValidationObserver,
   ValidationProvider,
   extend,
   configure
@@ -182,7 +184,7 @@ import {
 
 extend('required', {
   ...required,
-  message: 'Ce champ est requis'
+  message: () => i18n.t('errors.required')
 });
 
 configure({
@@ -196,7 +198,6 @@ export default {
   name: 'OrganisationCreation',
 
   components: {
-    ValidationObserver,
     ValidationProvider,
     ImportImage,
     SearchUsergroups

src/components/OrganisationSelector.vue

 <template>
   <div>
-    <h5>Organisation</h5>
+    <h5>{{ $tc('signup.form.organisation.title') }}</h5>
     <hr class="divider" />
     <div v-if="!showCreationForm">
-      <label>Sélectionnez votre organisation dans la liste ci-dessous.</label>
+      <label>{{ $tc('signup.form.organisation.subtitle') }}</label>
       <Multiselect
         v-model="organisation"
         style="margin-top: 0.5em;"
@@ -18,7 +18,7 @@
         selectedLabel=""
         deselectLabel=""
         :searchable="true"
-        placeholder="Recherchez une organisation ..."
+        :placeholder="$tc('signup.form.organisation.placeholder')"
         :showNoResults="true"
         :loading="loading"
         :clearOnSelect="false"
@@ -35,16 +35,16 @@
           </div>
         </template>
         <span slot="noResult">
-          Aucun résultat.
+          {{ $t('multiselect.noResult') }}
         </span>
         <span slot="noOptions">
-          Saississez les premiers caractères d'une organisation pour lancer la recherche
+          {{ $t('signup.form.organisation.noOptions') }}
         </span>
       </Multiselect>
       <label>
-        Si celle-ci n'est pas dans la liste, vous pouvez
+        {{ $t('signup.form.organisation.help.text') }}
         <b-link @click="showCreationForm = true">
-          indiquer une nouvelle organisation.
+          {{ $t('signup.form.organisation.help.link') }}
         </b-link>
       </label>
     </div>

src/components/SearchUsergroups.vue

@@ -32,10 +32,10 @@
         </div>
       </template>
       <span slot="noResult">
-        Aucun résultat.
+        {{ $t('multiselect.noResult') }}
       </span>
       <span slot="noOptions">
-        Saisissez les premiers caractères ...
+        {{ $t('multiselect.noOptions') }}
       </span>
     </Multiselect>
   </div>

src/i18n.js

+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+import en from '@/assets/locales/en.json';
+import fr from '@/assets/locales/fr.json';
+
+// const defaultImpl = VueI18n.prototype.getChoiceIndex;
+
+// VueI18n.prototype.getChoiceIndex = function(choice, choicesLength) {
+//   // this === VueI18n instance, so the locale property also exists here
+//   if (this.locale !== 'fr') {
+//     // proceed to the default implementation
+//     return defaultImpl.apply(this, arguments)
+//   }
+
+//   if (choice === 0) {
+//     return 0;
+//   }
+
+//   const teen = choice > 10 && choice < 20;
+//   const endsWithOne = choice % 10 === 1;
+
+//   if (!teen && endsWithOne) {
+//     return 1;
+//   }
+
+//   if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+//     return 2;
+//   }
+
+//   return (choicesLength < 4) ? 2 : 3;
+// }
+
+Vue.use(VueI18n);
+
+const dateTimeFormats = {
+  'en': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    }
+  },
+  'fr': {
+    short: {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric'
+    }
+  }
+};
+
+const numberFormats = {
+  'fr': {
+    currency: {
+      style: 'currency', currency: 'EUR'
+    }
+  }
+};
+
+const i18n = new VueI18n({
+  locale: process.env.VUE_APP_I18N_DEFAULT_LOCALE || 'fr',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'fr',
+  messages: { en, fr },
+  dateTimeFormats,
+  numberFormats
+});
+
+export default i18n;

src/main.js

@@ -13,12 +13,14 @@ Vue.use(BootstrapVueIcons);
 Vue.component('Multiselect', Multiselect);
 
 import App from '@/App.vue';
+import i18n from './i18n';
 import router from '@/router';
 import store from '@/store';
 
 Vue.config.productionTip = false;
 
 new Vue({
+  i18n,
   router,
   store,
   render: (h) => h(App),

src/router/index.js

 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import i18n from '@/i18n';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    redirect: { name: 'SignIn' },
+    path: '/:locale',
+    component: () => import('@/views/Base.vue'),
+    beforeEnter: (to, from, next) => {
+      const locale = to.params.locale;
+      const supported_locales = process.env.VUE_APP_I18N_SUPPORTED_LOCALE.split(',');
+      if (!supported_locales.includes(locale)) {
+        return next('fr');
+      }
+      if (i18n.locale !== locale) {
+        i18n.locale = locale;
+      }
+      return next();
+    },
+    children: [
+      {
+        path: '',
+        redirect: { name: 'SignIn' },
+      },
+      {
+        path: 'signin',
+        name: 'SignIn',
+        component: () => import('@/views/SignIn.vue'),
+      },
+      {
+        path: 'signup',
+        name: 'SignUp',
+        component: () => import('@/views/SignUp.vue'),
+      },
+      {
+        path: 'terms-of-use',
+        name: 'TermsOfUse',
+        component: () => import('@/views/TermsOfUse.vue'),
+      },
+      {
+        path: 'signout',
+        name: 'SignOut',
+        component: () => import('@/views/SignOut.vue'),
+      },
+      {
+        path: 'signout-failed',
+        name: 'SignOutFailed',
+        component: () => import('@/views/SignOutFailed.vue'),
+      },
+      {
+        path: 'signupsuccess',
+        name: 'SignUpSuccess',
+        component: () => import('@/views/SignUpSuccess.vue'),
+      },
+      {
+        path: 'validateregistration',
+        name: 'ValidationRegistration',
+        component: () => import('@/views/ValidationRegistration.vue'),
+      },
+      {
+        path: 'validate-email',
+        name: 'ValidationEmail',
+        component: () => import('@/views/ValidationEmail.vue'),
+      },
+      {
+        path: 'forgottenpwd',
+        name: 'ForgottenPassword',
+        component: () => import('@/views/ForgottenPassword.vue'),
+      },
+      {
+        path: 'reinitpwd',
+        name: 'ReinitPassword',
+        component: () => import('@/views/ReinitPassword.vue'),
+      },
+      {
+        path: 'profile',
+        name: 'UserProfile',
+        component: () => import('@/views/UserProfile.vue'),
+      },
+      {
+        path: '*',
+        name: 'NotFound',
+        component: () => import('@/views/NotFound.vue'),
+      },
+    ]
   },
   {
-    path: '/signin',
-    name: 'SignIn',
-    component: () => import('@/views/SignIn.vue'),
-  },
-  {
-    path: '/signup',
-    name: 'SignUp',
-    component: () => import('@/views/SignUp.vue'),
-  },
-  {
-    path: '/terms-of-use',
-    name: 'TermsOfUse',
-    component: () => import('@/views/TermsOfUse.vue'),
-  },
-  {
-    path: '/signout',
-    name: 'SignOut',
-    component: () => import('@/views/SignOut.vue'),
-  },
-  {
-    path: '/signout-failed',
-    name: 'SignOutFailed',
-    component: () => import('@/views/SignOutFailed.vue'),
-  },
-  {
-    path: '/signupsuccess',
-    name: 'SignUpSuccess',
-    component: () => import('@/views/SignUpSuccess.vue'),
-  },
-  {
-    path: '/validateregistration',
-    name: 'ValidationRegistration',
-    component: () => import('@/views/ValidationRegistration.vue'),
-  },
-  {
-    path: '/validate-email',
-    name: 'ValidationEmail',
-    component: () => import('@/views/ValidationEmail.vue'),
-  },
-  {
-    path: '/forgottenpwd',
-    name: 'ForgottenPassword',
-    component: () => import('@/views/ForgottenPassword.vue'),
-  },
-  {
-    path: '/reinitpwd',
-    name: 'ReinitPassword',
-    component: () => import('@/views/ReinitPassword.vue'),
-  },
-  {
-    path: '/profile',
-    name: 'UserProfile',
-    component: () => import('@/views/UserProfile.vue'),
-  },
-  {
-    path: '/*',
-    name: 'NotFound',
-    component: () => import('@/views/NotFound.vue'),
-  },
+    path: '*',
+    redirect() {
+      return process.env.VUE_APP_I18N_DEFAULT_LOCALE;
+    }
+  }
 ];
 
 const router = new VueRouter({

src/store/modules/forgotten-pwd.store.js

@@ -3,6 +3,7 @@ import { ErrorService } from '@/services/error-service.js';
 import Swal from "sweetalert2";
 import "sweetalert2/dist/sweetalert2.min.css";
 import router from '@/router';
+import i18n from '@/i18n';
 
 const state = {
   error: null,
@@ -23,9 +24,7 @@ const actions = {
         position: 'center',
         heightAuto: false,
         icon: 'success',
-        text: `
-          Un e-mail vous a été envoyé sur votre messagerie pour réinitialiser votre mot de passe.
-        `,
+        text: i18n.t('messages.reinitPwdRequest.success'),
         showConfirmButton: true,
         confirmButtonText: 'OK',
         confirmButtonColor: '#187CC6'
@@ -38,7 +37,7 @@ const actions = {
     if (response.status === 404) {
       commit('SET_ERROR', {
         response: response,
-        message: 'Aucun compte trouvé pour cette adresse e-mail.'
+        message: i18n.t('messages.reinitPwdRequest.error')
       });
     }
   },
@@ -50,9 +49,7 @@ const actions = {
         position: 'center',
         heightAuto: false,
         icon: 'success',
-        text: `Votre mot de passe a bien été réinitialisé.
-          Vous allez être redirigé vers la page de connexion.
-        `,
+        text: i18n.t('messages.reinitPwdConfirm.success'),
         showConfirmButton: true,
         confirmButtonText: 'OK',
         confirmButtonColor: '#187CC6'
@@ -66,9 +63,7 @@ const actions = {
         position: 'center',
         heightAuto: false,
         icon: 'error',
-        text: `Votre token a expiré. Vous devez en demander un nouveau 
-          pour changer votre mot de passe.
-        `,
+        text: i18n.t('messages.reinitPwdConfirm.error'),
         showConfirmButton: true,
         confirmButtonText: 'OK',
         confirmButtonColor: '#187CC6'

src/store/modules/sign-in.store.js

 import client from '@/api/loginAPI.js';
+import i18n from '@/i18n';
 
 const state = {
   username: null,
@@ -32,7 +33,7 @@ const actions = {
             commit(
               'SET_ERROR',
               error.response.data.detail
-              || 'Nom d\'utilisateur et/ou mot de passe incorrect(s)',
+              || i18n.t('messages.loginError'),
             );
             commit('SET_LOGGED', false);
           }

src/store/modules/sign-out.store.js

 import client from '@/api/loginAPI.js';
+import i18n from '@/i18n';
 
 const state = {
   logged: null,
@@ -24,7 +25,7 @@ const actions = {
           commit(
             'SET_ERROR',
             error.response.data
-            || 'Une erreur est survenue',
+            || i18n.t('messages.error'),
           );
           commit('SET_LOGGED', true);
         },

src/store/modules/sign-up.store.js

 import client from '@/api/loginAPI.js';
 import organisationAPI from '@/api/organisationsAPI.js';
 import usergroupsAPI from '@/api/usergroupsAPI.js';
+import i18n from '@/i18n';
 
 import { ErrorService } from '@/services/error-service.js';
 
@@ -43,7 +44,7 @@ const actions = {
               commit(
                 'SET_ERROR',
                 error.response
-                || 'Une erreur est survenue',
+                || i18n.t('messages.error'),
               );
               commit('SET_SIGNED', false);
             });
@@ -68,7 +69,7 @@ const actions = {
               commit(
                 'SET_ERROR',
                 error.response
-                || 'Une erreur est survenue',
+                || i18n.t('messages.error'),
               );
               commit('SET_SIGNED', false);
             });
@@ -82,7 +83,7 @@ const actions = {
           commit(
             'SET_ERROR',
             error.response
-            || 'Une erreur est survenue',
+            || i18n.t('messages.error'),
           );
           commit('SET_SIGNED', false);
         },

src/store/modules/terms-of-use.store.js

 import client from '@/api/loginAPI.js';
 import { ErrorService } from '@/services/error-service.js';
 import router from '@/router';
+import i18n from '@/i18n';
 
 const state = {
   terms: null,
@@ -27,7 +28,7 @@ const actions = {
     if (response.status === 404) {
       commit('SET_ERROR', {
         response: response,
-        message: 'Une erreur est survenue.'
+        message: i18n.t('messages.error')
       });
     }
   },
@@ -43,7 +44,7 @@ const actions = {
     if (response.status === 404) {
       commit('SET_ERROR', {
         response: response,
-        message: 'Une erreur est survenue.'
+        message: i18n.t('messages.error')
       });
     }
   }