From eaa04800a42b8cd8496ff613dd0d17055e6e477e Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Fri, 28 Feb 2020 13:21:27 -0800
Subject: Add translation to user management page

Updated TableToolbar component to handle label translation
outside of the component which is more consistent with bootstrap
table component patterns.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic2e75e327f6a6067905c541f9a3ea55c5d103f4b
---
 src/components/Global/TableRowAction.vue           |  4 +-
 src/components/Global/TableToolbar.vue             |  4 +-
 src/locales/en.json                                | 32 ++++++++
 .../LocalUserManagement/LocalUserManagement.vue    | 50 ++++++++-----
 .../LocalUserManagement/ModalUser.vue              | 85 ++++++++++++++--------
 .../LocalUserManagement/TableRoles.vue             | 36 ++++++---
 6 files changed, 148 insertions(+), 63 deletions(-)

(limited to 'src')

diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index da936b6d..d41fd50c 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -1,13 +1,13 @@
 <template>
   <b-button
-    :aria-label="title ? title : value"
+    :aria-label="title"
     :title="title"
     variant="link"
     :disabled="!enabled"
     @click="$emit('click:tableAction', value)"
   >
     <slot name="icon">
-      {{ value }}
+      {{ title }}
     </slot>
   </b-button>
 </template>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index e28151cb..041a9c18 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -13,7 +13,7 @@
             class="d-block"
             @click="$emit('batchAction', action.value)"
           >
-            {{ $t(action.labelKey) }}
+            {{ action.label }}
           </b-button>
           <b-button
             variant="primary"
@@ -42,7 +42,7 @@ export default {
       validator: prop => {
         return prop.every(action => {
           return (
-            action.hasOwnProperty('value') && action.hasOwnProperty('labelKey')
+            action.hasOwnProperty('value') && action.hasOwnProperty('label')
           );
         });
       }
diff --git a/src/locales/en.json b/src/locales/en.json
index c94e194a..44a57ba0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -14,6 +14,8 @@
     },
     "form": {
       "fieldRequired": "Field required",
+      "invalidFormat": "Invalid format",
+      "lengthMustBeBetween": "Length must be between %{min} – %{max} characters",
       "mustBeAtLeast": "Must be at least %{value}",
       "selectAnOption": "Select an option",
       "valueMustBeBetween": "Value must be between %{min} – %{max}"
@@ -53,13 +55,43 @@
   },
   "pageLocalUserManagement": {
     "accountPolicySettings": "Account policy settings",
+    "addUser": "Add user",
+    "deleteUser": "Delete user",
+    "editUser": "Edit user",
+    "viewPrivilegeRoleDescriptions": "View privilege role descriptions",
     "modal": {
+      "accountStatus": "Account status",
       "automaticAfterTimeout": "Automatic after timeout",
+      "cannotStartWithANumber": "Cannot start with a number",
+      "confirmUserPassword": "Confirm user password",
+      "deleteConfirmMessage": "Are you sure you want to delete user '%{user}'? This action cannot be undone.",
       "manual": "Manual",
       "maxFailedLoginAttempts": "Max failed login attempts",
+      "noSpecialCharactersExceptUnderscore": "No special characters except underscore",
+      "passwordMustBeBetween": "Password must be between %{min} – %{max} characters",
+      "passwordsDoNotMatch": "Passwords do not match",
+      "privilege": "Privilege",
       "timeoutDurationSeconds": "Timeout duration (seconds)",
+      "username": "Username",
+      "userPassword": "User password",
       "userUnlockMethod": "User unlock method"
     },
+    "table": {
+      "privilege": "Privilege",
+      "status": "Status",
+      "username": "Username"
+    },
+    "tableRoles": {
+      "configureComponentsManagedByThisService": "Configure components managed by this service",
+      "configureManagerResources": "Configure manager resources",
+      "configureUsersAndTheirAccounts": "Configure users and their accounts",
+      "ipmiAccessPoint": "IPMI access point",
+      "logInToTheServiceAndReadResources": "Log in to the service and read resources",
+      "redfishAccessPoint": "Redfish access point",
+      "sshAccessPoint": "SSH access point",
+      "updatePasswordForCurrentUserAccount": "Update password for current user account",
+      "webUiAccessPoint": "WebUI access point"
+    },
     "toast": {
       "errorDeleteUsers": "Error deleting %{count} user. | Error deleting %{count} users.",
       "errorDisableUsers": "Error disabling %{count} user. | Error disabling %{count} users.",
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 7b337a4f..23b06dd7 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -4,11 +4,11 @@
     <b-row>
       <b-col xl="9" class="text-right">
         <b-button variant="link" @click="initModalSettings">
-          Account policy settings
+          {{ $t('pageLocalUserManagement.accountPolicySettings') }}
           <icon-settings />
         </b-button>
         <b-button variant="primary" @click="initModalUser(null)">
-          Add user
+          {{ $t('pageLocalUserManagement.addUser') }}
           <icon-add />
         </b-button>
       </b-col>
@@ -52,6 +52,7 @@
               :key="index"
               :value="action.value"
               :enabled="action.enabled"
+              :title="action.title"
               @click:tableAction="onTableRowAction($event, item)"
             >
               <template v-slot:icon>
@@ -66,7 +67,7 @@
     <b-row>
       <b-col xl="8">
         <b-button v-b-toggle.collapse-role-table variant="link" class="mt-3">
-          View privilege role descriptions
+          {{ $t('pageLocalUserManagement.viewPrivilegeRoleDescriptions') }}
           <icon-chevron />
         </b-button>
         <b-collapse id="collapse-role-table" class="mt-3">
@@ -122,14 +123,20 @@ export default {
       activeUser: null,
       fields: [
         {
-          key: 'checkbox',
-          label: '',
-          tdClass: 'table-cell__checkbox'
+          key: 'checkbox'
+        },
+        {
+          key: 'username',
+          label: this.$t('pageLocalUserManagement.table.username')
+        },
+        {
+          key: 'privilege',
+          label: this.$t('pageLocalUserManagement.table.privilege')
+        },
+        {
+          key: 'status',
+          label: this.$t('pageLocalUserManagement.table.status')
         },
-        'checkbox',
-        'username',
-        'privilege',
-        'status',
         {
           key: 'actions',
           label: '',
@@ -139,15 +146,15 @@ export default {
       tableToolbarActions: [
         {
           value: 'delete',
-          labelKey: 'global.action.delete'
+          label: this.$t('global.action.delete')
         },
         {
           value: 'enable',
-          labelKey: 'global.action.enable'
+          label: this.$t('global.action.enable')
         },
         {
           value: 'disable',
-          labelKey: 'global.action.disable'
+          label: this.$t('global.action.disable')
         }
       ]
     };
@@ -168,10 +175,15 @@ export default {
             ? 'Enabled'
             : 'Disabled',
           actions: [
-            { value: 'edit', enabled: true },
+            {
+              value: 'edit',
+              enabled: true,
+              title: this.$t('pageLocalUserManagement.editUser')
+            },
             {
               value: 'delete',
-              enabled: user.UserName === 'root' ? false : true
+              enabled: user.UserName === 'root' ? false : true,
+              title: this.$t('pageLocalUserManagement.deleteUser')
             }
           ],
           ...user
@@ -203,10 +215,12 @@ export default {
     initModalDelete(user) {
       this.$bvModal
         .msgBoxConfirm(
-          `Are you sure you want to delete user '${user.username}'? This action cannot be undone.`,
+          this.$t('pageLocalUserManagement.modal.deleteConfirmMessage', {
+            user: user.username
+          }),
           {
-            title: 'Delete user',
-            okTitle: 'Delete user'
+            title: this.$t('pageLocalUserManagement.deleteUser'),
+            okTitle: this.$t('pageLocalUserManagement.deleteUser')
           }
         )
         .then(deleteConfirmed => {
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index 4a6a0bcf..ef13761f 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -2,24 +2,26 @@
   <b-modal id="modal-user" ref="modal" @ok="onOk" @hidden="resetForm">
     <template v-slot:modal-title>
       <template v-if="newUser">
-        Add user
+        {{ $t('pageLocalUserManagement.addUser') }}
       </template>
       <template v-else>
-        Edit user
+        {{ $t('pageLocalUserManagement.editUser') }}
       </template>
     </template>
     <b-form novalidate @submit="handleSubmit">
       <b-container>
         <b-row>
           <b-col>
-            <b-form-group label="Account status">
+            <b-form-group
+              :label="$t('pageLocalUserManagement.modal.accountStatus')"
+            >
               <b-form-radio
                 v-model="form.status"
                 name="user-status"
                 :value="true"
                 @input="$v.form.status.$touch()"
               >
-                Enabled
+                {{ $t('global.status.enabled') }}
               </b-form-radio>
               <b-form-radio
                 v-model="form.status"
@@ -27,14 +29,21 @@
                 :value="false"
                 @input="$v.form.status.$touch()"
               >
-                Disabled
+                {{ $t('global.status.disabled') }}
               </b-form-radio>
             </b-form-group>
-            <b-form-group label="Username" label-for="username">
+            <b-form-group
+              :label="$t('pageLocalUserManagement.modal.username')"
+              label-for="username"
+            >
               <b-form-text id="username-help-block">
-                Cannot start with a number
+                {{ $t('pageLocalUserManagement.modal.cannotStartWithANumber') }}
                 <br />
-                No special characters except underscore
+                {{
+                  $t(
+                    'pageLocalUserManagement.modal.noSpecialCharactersExceptUnderscore'
+                  )
+                }}
               </b-form-text>
               <b-form-input
                 id="username"
@@ -47,17 +56,21 @@
               />
               <b-form-invalid-feedback role="alert">
                 <template v-if="!$v.form.username.required">
-                  Field required
+                  {{ $t('global.form.fieldRequired') }}
                 </template>
                 <template v-else-if="!$v.form.username.maxLength">
-                  Length must be between 1 – 16 characters
+                  {{
+                    $t('global.form.lengthMustBeBetween', { min: 1, max: 16 })
+                  }}
                 </template>
                 <template v-else-if="!$v.form.username.pattern">
-                  Invalid format
+                  {{ $t('global.form.invalidFormat') }}
                 </template>
               </b-form-invalid-feedback>
             </b-form-group>
-            <b-form-group label="Privilege">
+            <b-form-group
+              :label="$t('pageLocalUserManagement.modal.privilege')"
+            >
               <b-form-select
                 v-model="form.privilege"
                 :options="privilegeTypes"
@@ -67,20 +80,23 @@
               </b-form-select>
               <b-form-invalid-feedback role="alert">
                 <template v-if="!$v.form.privilege.required">
-                  Field required
+                  {{ $t('global.form.fieldRequired') }}
                 </template>
               </b-form-invalid-feedback>
             </b-form-group>
           </b-col>
           <b-col>
-            <b-form-group label="User password" label-for="password">
+            <b-form-group
+              :label="$t('pageLocalUserManagement.modal.userPassword')"
+              label-for="password"
+            >
               <b-form-text id="password-help-block">
-                Password must between
-                <span class="text-nowrap">
-                  {{ passwordRequirements.minLength }}
-                  – {{ passwordRequirements.maxLength }}
-                </span>
-                characters
+                {{
+                  $t('pageLocalUserManagement.modal.passwordMustBeBetween', {
+                    min: passwordRequirements.minLength,
+                    max: passwordRequirements.maxLength
+                  })
+                }}
               </b-form-text>
               <input-password-toggle>
                 <b-form-input
@@ -93,25 +109,28 @@
                 />
                 <b-form-invalid-feedback role="alert">
                   <template v-if="!$v.form.password.required">
-                    Field required
+                    {{ $t('global.form.fieldRequired') }}
                   </template>
                   <template
                     v-if="
                       !$v.form.password.minLength || !$v.form.password.maxLength
                     "
                   >
-                    Length must be between
-                    <span class="text-nowrap">
-                      {{ passwordRequirements.minLength }}
-                      – {{ passwordRequirements.maxLength }}
-                    </span>
-                    characters
+                    {{
+                      $t(
+                        'pageLocalUserManagement.modal.passwordMustBeBetween',
+                        {
+                          min: passwordRequirements.minLength,
+                          max: passwordRequirements.maxLength
+                        }
+                      )
+                    }}
                   </template>
                 </b-form-invalid-feedback>
               </input-password-toggle>
             </b-form-group>
             <b-form-group
-              label="Confirm user password"
+              :label="$t('pageLocalUserManagement.modal.confirmUserPassword')"
               label-for="password-confirmation"
             >
               <input-password-toggle>
@@ -124,12 +143,14 @@
                 />
                 <b-form-invalid-feedback role="alert">
                   <template v-if="!$v.form.passwordConfirmation.required">
-                    Field required
+                    {{ $t('global.form.fieldRequired') }}
                   </template>
                   <template
                     v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
                   >
-                    Passwords do not match
+                    {{
+                      $t('pageLocalUserManagement.modal.passwordsDoNotMatch')
+                    }}
                   </template>
                 </b-form-invalid-feedback>
               </input-password-toggle>
@@ -140,10 +161,10 @@
     </b-form>
     <template v-slot:modal-ok>
       <template v-if="newUser">
-        Add user
+        {{ $t('pageLocalUserManagement.addUser') }}
       </template>
       <template v-else>
-        Save
+        {{ $t('global.action.save') }}
       </template>
     </template>
   </b-modal>
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index 0927c55d..a951b4f5 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -34,63 +34,81 @@ export default {
     return {
       items: [
         {
-          description: 'Configure components managed by this service',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.configureComponentsManagedByThisService'
+          ),
           administrator: true,
           operator: false,
           readonly: false,
           noaccess: false
         },
         {
-          description: 'Configure manager resources',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.configureManagerResources'
+          ),
           administrator: true,
           operator: false,
           readonly: false,
           noaccess: false
         },
         {
-          description: 'Update password for current user account',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.updatePasswordForCurrentUserAccount'
+          ),
           administrator: true,
           operator: false, // TODO Set to true when profile page added
           readonly: false, // TODO Set to true when profile page added
           noaccess: false
         },
         {
-          description: 'Configure users and their accounts',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.configureUsersAndTheirAccounts'
+          ),
           administrator: true,
           operator: false,
           readonly: false,
           noaccess: false
         },
         {
-          description: 'Log in to the service and read resources',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.logInToTheServiceAndReadResources'
+          ),
           administrator: true,
           operator: true,
           readonly: true,
           noaccess: false
         },
         {
-          description: 'IPMI access point',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.ipmiAccessPoint'
+          ),
           administrator: true,
           operator: true,
           readonly: true,
           noaccess: false
         },
         {
-          description: 'Redfish access point',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.redfishAccessPoint'
+          ),
           administrator: true,
           operator: true,
           readonly: true,
           noaccess: false
         },
         {
-          description: 'SSH access point',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.sshAccessPoint'
+          ),
           administrator: true,
           operator: false,
           readonly: false,
           noaccess: false
         },
         {
-          description: 'WebUI access point',
+          description: this.$t(
+            'pageLocalUserManagement.tableRoles.webUiAccessPoint'
+          ),
           administrator: true,
           operator: true,
           readonly: true,
-- 
cgit v1.2.3