Add local user page

- Add Bootstrap out of box table component
- Import layout plugin
- Add user role privilege table
- Add local user modals
- Add inline table actions
- Add local user store
- Add Axios requests

Initial setup to use Vuex store for local user
management page. For now using a timeout to
fake fetching async data. Data flow is working
between store and component.

Using Axios in very unrefined way, just to get some
API requests going. Simple user request working if
base, username, password variables defined.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I3b0d757857268feff32c6bec1c3fd95c302a568f

2 files changed, 234 insertions, 1 deletions

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>