diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/main.js | 8 | ||||
| -rw-r--r-- | src/store/index.js | 6 | ||||
| -rw-r--r-- | src/store/modules/AccessControl/LocalUserMangementStore.js | 56 | ||||
| -rw-r--r-- | src/views/AccessControl/LocalUserManagement.vue | 119 | ||||
| -rw-r--r-- | src/views/AccessControl/LocalUserMangementRoleTable.vue | 116 |
5 files changed, 302 insertions, 3 deletions
diff --git a/src/main.js b/src/main.js index 16687c5c..742b991e 100644 --- a/src/main.js +++ b/src/main.js @@ -8,7 +8,10 @@ import { NavPlugin, CollapsePlugin, LinkPlugin, - NavbarPlugin + NavbarPlugin, + TablePlugin, + LayoutPlugin, + ModalPlugin } from "bootstrap-vue"; Vue.use(ButtonPlugin); @@ -16,6 +19,9 @@ Vue.use(NavPlugin); Vue.use(CollapsePlugin); Vue.use(LinkPlugin); Vue.use(NavbarPlugin); +Vue.use(TablePlugin); +Vue.use(LayoutPlugin); +Vue.use(ModalPlugin); Vue.prototype.$http = Axios; diff --git a/src/store/index.js b/src/store/index.js index fb6015f4..3b86bfe2 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,11 +1,15 @@ import Vue from "vue"; import Vuex from "vuex"; +import LocalUserManagementStore from "./modules/AccessControl/LocalUserMangementStore"; + Vue.use(Vuex); export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, - modules: {} + modules: { + localUsers: LocalUserManagementStore + } }); diff --git a/src/store/modules/AccessControl/LocalUserMangementStore.js b/src/store/modules/AccessControl/LocalUserMangementStore.js new file mode 100644 index 00000000..dddfd2cc --- /dev/null +++ b/src/store/modules/AccessControl/LocalUserMangementStore.js @@ -0,0 +1,56 @@ +import Axios from "axios"; + +const LocalUserManagementStore = { + namespaced: true, + state: { + allUsers: [] + }, + getters: { + allUsers(state) { + return state.allUsers; + } + }, + mutations: { + setUsers(state, allUsers) { + state.allUsers = allUsers; + } + }, + actions: { + getUsers({ commit }) { + let base; + let username; + let password; + if (base && username && password) { + Axios.defaults.baseURL = base; + Axios.defaults.auth = {}; + Axios.defaults.auth.username = username; + Axios.defaults.auth.password = password; + Axios.get("redfish/v1/AccountService/Accounts") + .then(response => { + return response.data.Members.map(user => user["@odata.id"]); + }) + .then(userIds => { + return Axios.all(userIds.map(user => Axios.get(user))); + }) + .then(users => { + const userData = users.map(user => user.data); + commit("setUsers", userData); + }) + .catch(error => { + console.log(error); + }); + } else { + // Faking async call with timeout + setTimeout(() => { + const users = [ + { UserName: "root", RoleId: "Admin", Locked: false, Enabled: true }, + { UserName: "user1", RoleId: "user", Locked: false, Enabled: false } + ]; + commit("setUsers", users); + }, 3000); + } + } + } +}; + +export default LocalUserManagementStore; diff --git a/src/views/AccessControl/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement.vue index 3233aeca..cca068dc 100644 --- a/src/views/AccessControl/LocalUserManagement.vue +++ b/src/views/AccessControl/LocalUserManagement.vue @@ -1,3 +1,120 @@ <template> - <h1>Local user management</h1> + <b-container fluid> + <b-row> + <b-col lg="8"> + <h1>Local user management</h1> + </b-col> + </b-row> + <b-row> + <b-col lg="8" md="10"> + <b-button v-b-modal.modal-settings variant="secondary" + >Account policy settings</b-button + > + <b-button v-b-modal.modal-add-user variant="primary">Add user</b-button> + </b-col> + </b-row> + <b-row> + <b-col lg="8" md="10"> + <b-table bordered head-variant="dark" :items="tableItems" show-empty> + <template v-slot:head(actions)="data"></template> + <template v-slot:cell(actions)="data"> + <b-button + :disabled="!data.value.edit" + v-b-modal.modal-user-settings + > + <Edit20 /> + </b-button> + <b-button + :disabled="!data.value.delete" + v-b-modal.modal-user-delete + > + <TrashCan20 /> + </b-button> + </template> + </b-table> + </b-col> + </b-row> + <b-row> + <b-col lg="6" md="8"> + <b-button v-b-toggle.collapse-role-table variant="info" class="mt-3" + >View privilege role descriptions</b-button + > + <b-collapse id="collapse-role-table" class="mt-3"> + <role-table /> + </b-collapse> + </b-col> + </b-row> + <!-- Modals --> + <b-modal id="modal-add-user" title="Add user" ref="modal"> + <template v-slot:modal-footer="{ ok, cancel, hide }"> + <b-button + size="sm" + variant="secondary" + @click="$bvModal.hide('modal-add-user')" + >Cancel</b-button + > + <b-button + size="sm" + variant="primary" + @click="$bvModal.hide('modal-add-user')" + >Add user</b-button + > + </template> + </b-modal> + <b-modal id="modal-settings" title="Account policy settings"></b-modal> + <b-modal id="modal-user-delete" title="Delete user"></b-modal> + <b-modal id="modal-user-settings" title="User settings"></b-modal> + </b-container> </template> + +<script> +import LocalUserManagementRoleTable from "./LocalUserMangementRoleTable"; +import TrashCan20 from "@carbon/icons-vue/es/trash-can/20"; +import Edit20 from "@carbon/icons-vue/es/edit/20"; + +export default { + name: "local-users", + components: { + TrashCan20, + Edit20, + roleTable: LocalUserManagementRoleTable + }, + created() { + this.getUsers(); + }, + computed: { + allUsers() { + return this.$store.getters["localUsers/allUsers"]; + }, + tableItems() { + // transform user data to table data + return this.allUsers.map(user => { + return { + username: user.UserName, + privilege: user.RoleId, + status: user.Locked + ? "Locked" + : user.Enabled + ? "Enabled" + : "Disabled", + actions: { + edit: true, + delete: user.UserName === "root" ? false : true + } + }; + }); + } + }, + methods: { + getUsers() { + this.$store.dispatch("localUsers/getUsers"); + } + } +}; +</script> + +<style lang="scss" scoped> +h1 { + margin-bottom: 2rem; +} +</style> diff --git a/src/views/AccessControl/LocalUserMangementRoleTable.vue b/src/views/AccessControl/LocalUserMangementRoleTable.vue new file mode 100644 index 00000000..41dcdf7f --- /dev/null +++ b/src/views/AccessControl/LocalUserMangementRoleTable.vue @@ -0,0 +1,116 @@ +<template> + <b-table bordered small head-variant="dark" :items="items" :fields="fields"> + <template v-slot:cell(admin)="data"> + <template v-if="data.value"> + <Checkmark20 /> + </template> + </template> + <template v-slot:cell(operator)="data"> + <template v-if="data.value"> + <Checkmark20 /> + </template> + </template> + <template v-slot:cell(user)="data"> + <template v-if="data.value"> + <Checkmark20 /> + </template> + </template> + <template v-slot:cell(noaccess)="data"> + <template v-if="data.value"> + <Checkmark20 /> + </template> + </template> + </b-table> +</template> + +<script> +import Checkmark20 from "@carbon/icons-vue/es/checkmark/20"; + +export default { + components: { + Checkmark20 + }, + data() { + return { + items: [ + { + description: "Configure components managed by this service", + admin: true, + operator: false, + user: false, + noaccess: false + }, + { + description: "Configure manager resources", + admin: true, + operator: false, + user: false, + noaccess: false + }, + { + description: "Update password for current user account", + admin: true, + operator: true, + user: true, + noaccess: false + }, + { + description: "Configure users and their accounts", + admin: true, + operator: false, + user: false, + noaccess: false + }, + { + description: "Log in to the service and read resources", + admin: true, + operator: true, + user: true, + noaccess: false + }, + { + description: "IPMI access point", + admin: true, + operator: true, + user: true, + noaccess: true + }, + { + description: "Redfish access point", + admin: true, + operator: true, + user: true, + noaccess: false + }, + { + description: "SSH access point", + admin: true, + operator: false, + user: false, + noaccess: false + }, + { + description: "WebUI access point", + admin: true, + operator: true, + user: true, + noaccess: false + } + ], + fields: [ + { key: "description", label: "" }, + { key: "admin", label: "Admin", class: "text-center" }, + { key: "operator", label: "Operator", class: "text-center" }, + { key: "user", label: "User", class: "text-center" }, + { key: "noaccess", label: "NoAccess", class: "text-center" } + ] + }; + } +}; +</script> + +<style lang="scss" scoped> +td:not(.role-description) { + text-align: center; +} +</style> |