Move i18n to vue-i18n and json files

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/User/Login.vue

@@ -2,12 +2,12 @@
   <div class="container">
     <section class="hero">
       <h1 class="title">
-        <translate>Welcome back!</translate>
+        {{ $t('Welcome back!') }}
       </h1>
     </section>
 
     <b-message v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN" title="Info" type="is-info">
-      <translate>You need to login.</translate>
+      {{ $t('You need to login.') }}
     </b-message>
 
     <section v-if="!currentUser.isLoggedIn">
@@ -15,11 +15,11 @@
         <div class="column is-half">
           <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
           <form @submit="loginAction">
-            <b-field :label="$gettext('Email')">
+            <b-field :label="$t('Email')">
               <b-input aria-required="true" required type="email" v-model="credentials.email"/>
             </b-field>
 
-            <b-field :label="$gettext('Password')">
+            <b-field :label="$t('Password')">
               <b-input
                 aria-required="true"
                 required
@@ -31,7 +31,7 @@
 
             <div class="control has-text-centered">
               <button class="button is-primary is-large">
-                <translate>Login</translate>
+                {{ $t('Login') }}
               </button>
             </div>
             <div class="control">
@@ -39,7 +39,7 @@
                 class="button is-text"
                 :to="{ name: 'SendPasswordReset', params: { email: credentials.email }}"
               >
-                <translate>Forgot your password ?</translate>
+                {{ $t('Forgot your password ?') }}
               </router-link>
             </div>
             <div class="control" v-if="config && config.registrationsOpen">
@@ -47,7 +47,7 @@
                 class="button is-text"
                 :to="{ name: 'Register', params: { default_email: credentials.email, default_password: credentials.password }}"
               >
-                <translate>Register</translate>
+                {{ $t('Register') }}
               </router-link>
             </div>
           </form>
@@ -56,7 +56,7 @@
     </section>
 
     <b-message v-else title="Error" type="is-error">
-      <translate>You are already logged-in.</translate>
+      {{ $t('You are already logged-in.') }}
     </b-message>
   </div>
 </template>

js/src/views/User/PasswordReset.vue

@@ -2,7 +2,7 @@
   <section class="columns is-mobile is-centered">
     <div class="card column is-half-desktop">
       <h1>
-        <translate>Password reset</translate>
+        {{ $t('Password reset') }}
       </h1>
       <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
       <form @submit="resetAction">
@@ -27,7 +27,7 @@
           />
         </b-field>
         <button class="button is-primary">
-          <translate>Reset my password</translate>
+          {{ $t('Reset my password') }}
         </button>
       </form>
     </div>

js/src/views/User/Register.vue

@@ -3,7 +3,7 @@
     <section class="hero">
       <div class="hero-body">
         <h1 class="title">
-          <translate>Register an account on Mobilizon!</translate>
+          {{ $t('Register an account on Mobilizon!') }}
         </h1>
       </div>
     </section>
@@ -12,28 +12,27 @@
         <div class="columns is-mobile">
           <div class="column">
             <div class="content">
-              <h3 class="title" v-translate>Features</h3>
+              <h3 class="title">{{ $t('Features') }}</h3>
               <ul>
-                <li v-translate>Create your communities and your events</li>
-                <li v-translate>Other stuff…</li>
+                <li>{{ $t('Create your communities and your events') }}</li>
+                <li>{{ $t('Other stuff…') }}</li>
               </ul>
             </div>
-            <p v-translate>
-              Learn more on
+            <i18n path="Learn more on" tag="p">
               <a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
-            </p>
+            </i18n>
             <hr>
             <div class="content">
-              <h3 class="title" v-translate>About this instance</h3>
+              <h3 class="title">{{ $t('About this instance') }}</h3>
               <p>
-                <translate>Your local administrator resumed it's policy:</translate>
+                {{ $t("Your local administrator resumed it's policy:") }}
               </p>
               <ul>
-                <li v-translate>Please be nice to each other</li>
-                <li v-translate>meditate a bit</li>
+                <li>{{ $t('Please be nice to each other') }}</li>
+                <li>{{ $t('meditate a bit') }}</li>
               </ul>
               <p>
-                <translate>Please read the full rules</translate>
+                {{ $t('Please read the full rules') }}
               </p>
             </div>
           </div>
@@ -72,7 +71,7 @@
               <b-field grouped>
                 <div class="control">
                   <button type="button" class="button is-primary" @click="submit()">
-                    <translate>Register</translate>
+                    {{ $t('Register') }}
                   </button>
                 </div>
                 <div class="control">
@@ -80,7 +79,7 @@
                     class="button is-text"
                     :to="{ name: 'ResendConfirmation', params: { email: credentials.email }}"
                   >
-                    <translate>Didn't receive the instructions ?</translate>
+                    {{ $t("Didn't receive the instructions ?") }}
                   </router-link>
                 </div>
                 <div class="control">
@@ -89,7 +88,7 @@
                     :to="{ name: 'Login', params: { email: credentials.email, password: credentials.password }}"
                     :disabled="sendingValidation"
                   >
-                    <translate>Login</translate>
+                    {{ $t('Login') }}
                   </router-link>
                 </div>
               </b-field>

js/src/views/User/ResendConfirmation.vue

@@ -2,24 +2,22 @@
   <section class="container">
     <div class="column">
       <h1 class="title">
-        <translate>Resend confirmation email</translate>
+        {{ $t('Resend confirmation email') }}
       </h1>
       <form v-if="!validationSent" @submit="resendConfirmationAction">
         <b-field label="Email">
           <b-input aria-required="true" required type="email" v-model="credentials.email"/>
         </b-field>
         <button class="button is-primary">
-          <translate>Send confirmation email again</translate>
+          {{ $t('Send confirmation email again') }}
         </button>
       </form>
       <div v-else>
         <b-message type="is-success" :closable="false" title="Success">
-          <translate
-            :translate-params="{email: credentials.email}"
-          >If an account with this email exists, we just sent another confirmation email to %{email}</translate>
+          {{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
         </b-message>
         <b-message type="is-info">
-          <translate>Please check you spam folder if you didn't receive the email.</translate>
+          {{ $t("Please check you spam folder if you didn't receive the email.") }}
         </b-message>
       </div>
     </div>

js/src/views/User/SendPasswordReset.vue

@@ -2,7 +2,7 @@
   <section class="container">
     <div class="column">
       <h1 class="title">
-        <translate>Password reset</translate>
+        {{ $t('Password reset') }}
       </h1>
       <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
       <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
@@ -10,17 +10,15 @@
           <b-input aria-required="true" required type="email" v-model="credentials.email"/>
         </b-field>
         <button class="button is-primary">
-          <translate>Send email to reset my password</translate>
+          {{ $t('Send email to reset my password') }}
         </button>
       </form>
       <div v-else>
         <b-message type="is-success" :closable="false" title="Success">
-          <translate
-            :translate-params="{email: credentials.email}"
-          >We just sent an email to %{email}</translate>
+          {{ $t('We just sent an email to {email}', {email: credentials.email}) }}
         </b-message>
         <b-message type="is-info">
-          <translate>Please check you spam folder if you didn't receive the email.</translate>
+          {{ $t("Please check you spam folder if you didn't receive the email.") }}
         </b-message>
       </div>
     </div>

js/src/views/User/Validate.vue

@@ -1,16 +1,16 @@
 <template>
   <section>
     <h1 class="title" v-if="loading">
-      <translate>Your account is being validated</translate>
+      {{ $t('Your account is being validated') }}
     </h1>
     <div v-else>
       <div v-if="failed">
-        <b-message :title="$gettext('Error while validating account')" type="is-danger">
-          <translate>Either the account is already validated, either the validation token is incorrect.</translate>
+        <b-message :title="$t('Error while validating account')" type="is-danger">
+          {{ $t('Either the account is already validated, either the validation token is incorrect.') }}
         </b-message>
       </div>
       <h1 class="title" v-else>
-        <translate>Your account has been validated</translate>
+        {{ $t('Your account has been validated') }}
       </h1>
     </div>
   </section>