1 files changed, 118 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>