diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-29 00:21:27 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-03 02:40:05 +0300 |
commit | eaa04800a42b8cd8496ff613dd0d17055e6e477e (patch) | |
tree | f33cafdb41d38c48da4f89f3b2777633e867b994 /src | |
parent | 8cc4866dbc86682a157a6f6b57526a31ac3fc524 (diff) | |
download | webui-vue-eaa04800a42b8cd8496ff613dd0d17055e6e477e.tar.xz |
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
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Global/TableRowAction.vue | 4 | ||||
-rw-r--r-- | src/components/Global/TableToolbar.vue | 4 | ||||
-rw-r--r-- | src/locales/en.json | 32 | ||||
-rw-r--r-- | src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue | 50 | ||||
-rw-r--r-- | src/views/AccessControl/LocalUserManagement/ModalUser.vue | 85 | ||||
-rw-r--r-- | src/views/AccessControl/LocalUserManagement/TableRoles.vue | 36 |
6 files changed, 148 insertions, 63 deletions
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, |