From cbcd2136cd80395eff898738747c52c4b301fd56 Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Thu, 30 Jan 2020 20:58:37 -0600
Subject: Set up initial language translation

- Add i18n internationalization plugin
- Create json files for group 0 English and Spanish
- Uses $t method to set up initial translations on login page
- Meta title is translated using i18n in App.vue and PageTitle.Vue

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ifce9f5e54d96f8b2a13239ad6178892f99fc4537
---
 src/views/Login/Login.vue | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

(limited to 'src/views/Login')

diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 35af76f2..d4fde8cb 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -13,17 +13,24 @@
             <h1>OpenBMC</h1>
           </div>
         </b-col>
-
         <b-col md="6">
           <b-form class="login-form" novalidate @submit.prevent="login">
             <b-alert class="login-error" :show="authError" variant="danger">
               <p id="login-error-alert">
-                <strong>{{ errorMsg.title }}</strong>
-                <span>{{ errorMsg.action }}</span>
+                <strong>{{ $t('login.errorMsg.title') }}</strong>
+                <span>{{ $t('login.errorMsg.action') }}</span>
               </p>
             </b-alert>
             <div class="login-form__section">
-              <label for="username">Username</label>
+              <label for="language">{{ $t('login.language.label') }}</label>
+              <b-form-select
+                id="language"
+                v-model="$i18n.locale"
+                :options="languages"
+              ></b-form-select>
+            </div>
+            <div class="login-form__section">
+              <label for="username">{{ $t('login.username.label') }}</label>
               <b-form-input
                 id="username"
                 v-model="userInfo.username"
@@ -36,13 +43,12 @@
               </b-form-input>
               <b-form-invalid-feedback role="alert">
                 <template v-if="!$v.userInfo.username.required">
-                  Field required
+                  {{ $t('login.username.validator') }}
                 </template>
               </b-form-invalid-feedback>
             </div>
-
             <div class="login-form__section">
-              <label for="password">Password</label>
+              <label for="password">{{ $t('login.password.label') }}</label>
               <b-form-input
                 id="password"
                 v-model="userInfo.password"
@@ -54,18 +60,17 @@
               </b-form-input>
               <b-form-invalid-feedback role="alert">
                 <template v-if="!$v.userInfo.password.required">
-                  Field required
+                  {{ $t('login.password.validator') }}
                 </template>
               </b-form-invalid-feedback>
             </div>
-
             <b-button
               block
               class="mt-5"
               type="submit"
               variant="primary"
               :disabled="disableSubmitButton"
-              >Log in</b-button
+              >{{ $t('login.logIn.label') }}</b-button
             >
           </b-form>
         </b-col>
@@ -83,15 +88,22 @@ export default {
   mixins: [VuelidateMixin],
   data() {
     return {
-      errorMsg: {
-        title: 'Invalid username or password.',
-        action: 'Please try again.'
-      },
       userInfo: {
         username: null,
         password: null
       },
-      disableSubmitButton: false
+      disableSubmitButton: false,
+      languages: [
+        { value: null, text: this.$t('login.languages.select') },
+        {
+          value: 'en',
+          text: this.$t('login.languages.english')
+        },
+        {
+          value: 'es',
+          text: this.$t('login.languages.spanish')
+        }
+      ]
     };
   },
   computed: {
-- 
cgit v1.2.3