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
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 7b337a4..23b06dd 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 @@
activeUser: null,
fields: [
{
- key: 'checkbox',
- label: '',
- tdClass: 'table-cell__checkbox'
+ key: 'checkbox'
},
- 'checkbox',
- 'username',
- 'privilege',
- 'status',
+ {
+ key: 'username',
+ label: this.$t('pageLocalUserManagement.table.username')
+ },
+ {
+ key: 'privilege',
+ label: this.$t('pageLocalUserManagement.table.privilege')
+ },
+ {
+ key: 'status',
+ label: this.$t('pageLocalUserManagement.table.status')
+ },
{
key: 'actions',
label: '',
@@ -139,15 +146,15 @@
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 @@
? '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 @@
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 4a6a0bc..ef13761 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 0927c55..a951b4f 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -34,63 +34,81 @@
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,