Revert "Update local user layout and styles"
Merged accidentally. Did not have proper +1s/+2s. The author
will resubmit. Apologies for the noise.
This reverts commit 5fa09a25c207d13ec1c9a8df92fc058f15a872e1.
Change-Id: I59a792193f94f51c6f499c385305db919cf43927
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index 0ca3428..b016dcc 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -2,7 +2,7 @@
<b-container class="ml-0">
<page-title />
<b-row>
- <b-col lg="10" class="text-right">
+ <b-col lg="10">
<b-button variant="link" @click="initModalSettings">
Account policy settings
<icon-settings />
@@ -15,11 +15,11 @@
</b-row>
<b-row>
<b-col lg="10">
- <b-table show-empty :fields="fields" :items="tableItems">
+ <b-table bordered show-empty head-variant="dark" :items="tableItems">
+ <template v-slot:head(actions)="data"></template>
<template v-slot:cell(actions)="data">
<b-button
aria-label="Edit user"
- title="Edit user"
variant="link"
:disabled="!data.value.edit"
@click="initModalUser(data.item)"
@@ -28,7 +28,6 @@
</b-button>
<b-button
aria-label="Delete user"
- title="Delete user"
variant="link"
:disabled="!data.value.delete"
@click="initModalDelete(data.item)"
@@ -43,7 +42,6 @@
<b-col lg="8">
<b-button v-b-toggle.collapse-role-table variant="link" class="mt-3">
View privilege role descriptions
- <icon-chevron />
</b-button>
<b-collapse id="collapse-role-table" class="mt-3">
<table-roles />
@@ -52,7 +50,11 @@
</b-row>
<!-- Modals -->
<modal-settings :settings="settings"></modal-settings>
- <modal-user :user="activeUser" @ok="saveUser"></modal-user>
+ <modal-user
+ :user="activeUser"
+ @ok="saveUser"
+ @hidden="clearActiveUser"
+ ></modal-user>
</b-container>
</template>
@@ -61,7 +63,6 @@
import IconEdit from '@carbon/icons-vue/es/edit/20';
import IconAdd from '@carbon/icons-vue/es/add--alt/20';
import IconSettings from '@carbon/icons-vue/es/settings/20';
-import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
import TableRoles from './TableRoles';
import ModalUser from './ModalUser';
@@ -72,7 +73,6 @@
name: 'LocalUsers',
components: {
IconAdd,
- IconChevron,
IconEdit,
IconSettings,
IconTrashcan,
@@ -84,17 +84,7 @@
data() {
return {
activeUser: null,
- settings: null,
- fields: [
- 'username',
- 'privilege',
- 'status',
- {
- key: 'actions',
- label: '',
- tdClass: 'table-cell__actions'
- }
- ]
+ settings: null
};
},
computed: {
@@ -115,8 +105,7 @@
actions: {
edit: true,
delete: user.UserName === 'root' ? false : true
- },
- ...user
+ }
};
});
}
@@ -154,15 +143,18 @@
// fetch settings then show modal
}
},
- saveUser({ isNewUser, userData }) {
- if (isNewUser) {
- this.$store.dispatch('localUsers/createUser', userData);
+ saveUser({ newUser, form }) {
+ if (newUser) {
+ this.$store.dispatch('localUsers/createUser', form);
} else {
- this.$store.dispatch('localUsers/updateUser', userData);
+ this.$store.dispatch('localUsers/updateUser', form);
}
},
deleteUser({ username }) {
this.$store.dispatch('localUsers/deleteUser', username);
+ },
+ clearActiveUser() {
+ this.activeUser = null;
}
}
};
@@ -172,9 +164,4 @@
h1 {
margin-bottom: 2rem;
}
-.btn.collapsed {
- svg {
- transform: rotate(180deg);
- }
-}
</style>
diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index 59e5706..d84fb6d 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -1,5 +1,9 @@
<template>
- <b-modal id="modal-user" ref="modal" @ok="onOk" @hidden="resetForm">
+ <b-modal
+ id="modal-user"
+ @ok="$emit('ok', { newUser, form })"
+ @hidden="$emit('hidden')"
+ >
<template v-slot:modal-title>
<template v-if="newUser">
Add user
@@ -8,116 +12,27 @@
Edit user
</template>
</template>
- <b-form novalidate @submit="handleSubmit">
- <b-container>
- <b-row>
- <b-col>
- <b-form-group label="Account status">
- <b-form-radio
- v-model="form.status"
- name="user-status"
- :value="true"
- @input="$v.form.status.$touch()"
- >
- Enabled
- </b-form-radio>
- <b-form-radio
- v-model="form.status"
- name="user-status"
- :value="false"
- @input="$v.form.status.$touch()"
- >
- Disabled
- </b-form-radio>
- </b-form-group>
- <b-form-group label-for="Username">
- <b-form-text id="username-help-block">
- Cannot start with a number
- <br />
- No special characters except underscore
- </b-form-text>
- <b-form-input
- v-model="form.username"
- type="text"
- aria-describedby="username-help-block"
- :state="getValidationState('username')"
- :disabled="!newUser && originalUsername === 'root'"
- />
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.username.required">
- Field required
- </template>
- <template v-else-if="!$v.form.username.maxLength">
- Length must be between 1 – 16 characters
- </template>
- <template v-else-if="!$v.form.username.pattern">
- Invalid format
- </template>
- </b-form-invalid-feedback>
- </b-form-group>
- <b-form-group label-for="Privilege">
- <b-form-select
- v-model="form.privilege"
- required
- :options="privilegeTypes"
- :state="getValidationState('privilege')"
- @input="$v.form.privilege.$touch()"
- >
- </b-form-select>
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.privilege.required">
- Field required
- </template>
- </b-form-invalid-feedback>
- </b-form-group>
- </b-col>
- <b-col>
- <b-form-group label-for="User password">
- <b-form-text id="password-help-block" text-variant="black">
- <!-- TODO: Should be dynamic values -->
- Password must between 8 – 20 characters
- </b-form-text>
- <b-form-input
- v-model="form.password"
- type="password"
- aria-describedby="password-help-block"
- :state="getValidationState('password')"
- @input="$v.form.password.$touch()"
- />
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.password.required">
- Field required
- </template>
- <template
- v-if="
- !$v.form.password.minLength || !$v.form.password.maxLength
- "
- >
- Length must be between 8 – 20 characters
- </template>
- </b-form-invalid-feedback>
- </b-form-group>
- <b-form-group label-for="Confirm user password">
- <b-form-input
- v-model="form.passwordConfirmation"
- type="password"
- :state="getValidationState('passwordConfirmation')"
- @input="$v.form.passwordConfirmation.$touch()"
- />
- <b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.passwordConfirmation.required">
- Field required
- </template>
- <template
- v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
- >
- Passwords do not match
- </template>
- </b-form-invalid-feedback>
- </b-form-group>
- </b-col>
- </b-row>
- </b-container>
+ <b-form>
+ <b-form-group label="Account status">
+ <b-form-radio v-model="form.status" name="user-status" value="true"
+ >Enabled</b-form-radio
+ >
+ <b-form-radio v-model="form.status" name="user-status" value="false"
+ >Disabled</b-form-radio
+ >
+ </b-form-group>
+ <b-form-group label="Username">
+ <b-form-input v-model="form.username" type="text" />
+ </b-form-group>
+ <b-form-group label="Privilege">
+ <b-form-select
+ v-model="form.privilege"
+ :options="privilegeTypes"
+ ></b-form-select>
+ </b-form-group>
+ <b-form-group label="Password">
+ <b-form-input v-model="form.password" type="password" />
+ </b-form-group>
</b-form>
<template v-slot:modal-ok>
<template v-if="newUser">
@@ -131,15 +46,6 @@
</template>
<script>
-import {
- required,
- maxLength,
- minLength,
- sameAs,
- helpers,
- requiredIf
-} from 'vuelidate/lib/validators';
-
export default {
props: {
user: {
@@ -149,122 +55,25 @@
},
data() {
return {
- privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess'],
- originalUsername: '',
- form: {
- status: true,
- username: '',
- privilege: '',
- password: '',
- passwordConfirmation: ''
- }
+ privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess']
};
},
computed: {
newUser() {
return this.user ? false : true;
- }
- },
- watch: {
- user: function(value) {
- if (value === null) return;
- this.originalUsername = value.username;
- this.form.username = value.username;
- this.form.status = value.Enabled;
- this.form.privilege = value.privilege;
- }
- },
- validations: {
- form: {
- status: {
- required
- },
- username: {
- required,
- maxLength: maxLength(16),
- pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/)
- },
- privilege: {
- required
- },
- password: {
- required: requiredIf(function() {
- return this.requirePassword();
- }),
- minLength: minLength(8),
- maxLength: maxLength(20)
- },
- passwordConfirmation: {
- required: requiredIf(function() {
- return this.requirePassword();
- }),
- sameAsPassword: sameAs('password')
- }
- }
- },
- methods: {
- handleSubmit() {
- let userData = {};
-
- if (this.newUser) {
- this.$v.$touch();
- if (this.$v.$invalid) return;
- userData.username = this.form.username;
- userData.status = this.form.status;
- userData.privilege = this.form.privilege;
- userData.password = this.form.password;
- } else {
- if (this.$v.$invalid) return;
- userData.originalUsername = this.originalUsername;
- if (this.$v.form.status.$dirty) {
- userData.status = this.form.status;
- }
- if (this.$v.form.username.$dirty) {
- userData.username = this.form.username;
- }
- if (this.$v.form.privilege.$dirty) {
- userData.privilege = this.form.privilege;
- }
- if (this.$v.form.password.$dirty) {
- userData.password = this.form.password;
- }
- if (Object.entries(userData).length === 1) {
- this.closeModal();
- return;
- }
- }
-
- this.$emit('ok', { isNewUser: this.newUser, userData });
- this.closeModal();
},
- closeModal() {
- this.$nextTick(() => {
- this.$refs.modal.hide();
- });
- },
- resetForm() {
- this.form.originalUsername = '';
- this.form.status = true;
- this.form.username = '';
- this.form.privilege = '';
- this.form.password = '';
- this.form.passwordConfirmation = '';
- this.$v.$reset();
- },
- getValidationState(name) {
- const { $dirty, $error } = this.$v.form[name];
- return $dirty ? !$error : null;
- },
- requirePassword() {
- if (this.newUser) return true;
- if (this.$v.form.password.$dirty) return true;
- if (this.$v.form.passwordConfirmation.$dirty) return true;
- return false;
- },
- onOk(bvModalEvt) {
- // prevent modal close
- bvModalEvt.preventDefault();
- this.handleSubmit();
+ form() {
+ return {
+ originalUsername: this.newUser ? null : this.user.username,
+ status: this.newUser
+ ? true
+ : this.user.status === 'Enabled'
+ ? true
+ : false,
+ username: this.newUser ? '' : this.user.username,
+ privilege: this.newUser ? '' : this.user.privilege,
+ password: ''
+ };
}
}
};
diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
index 0927c55..ad313be 100644
--- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue
+++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue
@@ -1,5 +1,5 @@
<template>
- <b-table small :items="items" :fields="fields">
+ <b-table bordered small head-variant="dark" :items="items" :fields="fields">
<template v-slot:cell(administrator)="data">
<template v-if="data.value">
<checkmark20 />