From cc73800bc44fc19e3cddaed44311c2c2f71126e0 Mon Sep 17 00:00:00 2001
From: Ricardo Olsen <olsen.ricardo@gmail.com>
Date: Sun, 22 Sep 2024 15:58:11 -0300
Subject: [PATCH] Role management on new Admin UI. In development.

---
 src/AdminUI/src/components/AdminPage.vue      |  12 +-
 src/AdminUI/src/components/LoginPage.vue      |   4 +-
 .../src/components/UserManagementTab.vue      | 197 ++++++++++++------
 src/AdminUI/src/locales/en.json               |  48 ++++-
 4 files changed, 188 insertions(+), 73 deletions(-)

diff --git a/src/AdminUI/src/components/AdminPage.vue b/src/AdminUI/src/components/AdminPage.vue
index 581762fe..282ffa0b 100644
--- a/src/AdminUI/src/components/AdminPage.vue
+++ b/src/AdminUI/src/components/AdminPage.vue
@@ -3,8 +3,9 @@
     <v-card class="fill-height d-flex flex-column">
       <v-tabs v-model="activeTab" color="primary" align-tabs="center">
         <v-tab :value="1">{{ $t('admin.tabs.userManagement') }}</v-tab>
-        <v-tab :value="2">{{ $t('admin.tabs.systemSettings') }}</v-tab>
-        <v-tab :value="3">{{ $t('admin.tabs.logs') }}</v-tab>
+        <v-tab :value="2">{{ $t('admin.tabs.rolesManagement') }}</v-tab>
+        <v-tab :value="3">{{ $t('admin.tabs.systemSettings') }}</v-tab>
+        <v-tab :value="4">{{ $t('admin.tabs.logs') }}</v-tab>
       </v-tabs>
 
       <v-card-text>
@@ -14,10 +15,14 @@
           </v-window-item>
 
           <v-window-item :value="2">
-            <system-settings-tab />
+            <roles-management-tab />
           </v-window-item>
 
           <v-window-item :value="3">
+            <system-settings-tab />
+          </v-window-item>
+
+          <v-window-item :value="4">
             <logs-tab />
           </v-window-item>
         </v-window>
@@ -29,6 +34,7 @@
 <script setup>
 import { ref } from 'vue';
 import UserManagementTab from './UserManagementTab.vue';
+import RolesManagementTab from './RolesManagementTab.vue';
 import SystemSettingsTab from './SystemSettingsTab.vue';
 import LogsTab from './LogsTab.vue';
 
diff --git a/src/AdminUI/src/components/LoginPage.vue b/src/AdminUI/src/components/LoginPage.vue
index 032761b3..e003c4c2 100644
--- a/src/AdminUI/src/components/LoginPage.vue
+++ b/src/AdminUI/src/components/LoginPage.vue
@@ -174,10 +174,10 @@ function testLogin() {
     .then((data) => {
       if ('ok' in data && data.ok) {
         router.push('/dashboard')
-        console.log('User is logged in')
+        // console.log('User is logged in')
       } else {
         router.push('/login')
-        console.log('User is not logged in')
+        // console.log('User is not logged in')
       }
     })
     .catch((error) => {
diff --git a/src/AdminUI/src/components/UserManagementTab.vue b/src/AdminUI/src/components/UserManagementTab.vue
index 28f5856e..22c722c3 100644
--- a/src/AdminUI/src/components/UserManagementTab.vue
+++ b/src/AdminUI/src/components/UserManagementTab.vue
@@ -1,6 +1,9 @@
 <template>
   <v-container fluid class="user-management-tab">
-    <h2 class="text-h5 mb-4">{{ $t('admin.userManagement.title') }}</h2>
+
+    <v-btn color="primary" class="mt-4" @click="openAddUserDialog">
+      {{ $t('admin.userManagement.addUser') }}
+    </v-btn>
 
     <v-data-table :headers="headers" :items="users" :items-per-page="5" class="elevation-1" :load-children="fetchUsers"
       :items-per-page-text="$t('common.itemsPerPageText')">
@@ -8,76 +11,98 @@
         <v-icon size="small" class="me-2" @click="openEditUserDialog(item)">
           mdi-pencil
         </v-icon>
-        <v-icon v-if="item.username !== 'admin'" size="small" @click="deleteUser(item)">
+        <v-icon v-if="item.username !== 'admin'" size="small" @click="openDeleteConfirmDialog(item)">
           mdi-delete
         </v-icon>
       </template>
     </v-data-table>
-
-    <v-btn color="primary" class="mt-4" @click="openAddUserDialog">
-      {{ $t('admin.userManagement.addUser') }}
-    </v-btn>
     <div>
       <v-chip v-if="error" color="red darken-1">{{ $t('common.error') }}</v-chip>
     </div>
+  </v-container>
 
-    <v-dialog v-model="addUserDialog" max-width="500px">
-      <v-card>
-        <v-card-title>{{ $t('admin.userManagement.addNewUser') }}</v-card-title>
-        <v-card-text>
-          <v-text-field v-model="newUser.username" :label="$t('admin.userManagement.username')" required></v-text-field>
-          <v-text-field v-model="newUser.email" :label="$t('admin.userManagement.email')" required
-            type="email"></v-text-field>
-          <v-text-field v-model="newUser.password" :label="$t('admin.userManagement.password')" required
-            type="password"></v-text-field>
-          <v-autocomplete v-model="newUser.roles" :items="roles" item-title="name" outlined chips closable-chips
-            small-chips :label="$t('admin.userManagement.roles')" multiple></v-autocomplete>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn color="blue darken-1" text @click="closeAddUserDialog">{{ $t('common.cancel') }}</v-btn>
-          <v-btn color="blue darken-1" text @click="createUser">{{ $t('common.save') }}</v-btn>
-          <v-chip v-if="error" color="red darken-1">{{ $t('common.error') }}</v-chip>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
 
-    <v-dialog v-model="editUserDialog" max-width="500px">
-      <v-card>
-        <v-card-title>{{ $t('admin.userManagement.editUser') }}</v-card-title>
-        <v-card-text>
-          <v-text-field v-model="editedUser.username" :label="$t('admin.userManagement.username')"
-            required></v-text-field>
-          <v-text-field v-model="editedUser.email" :label="$t('admin.userManagement.email')" required
-            type="email"></v-text-field>
-          <v-text-field v-model="editedUser.password" :label="$t('admin.userManagement.password')" required
-            type="password"></v-text-field>
-          <v-autocomplete v-model="editedUser.roles" :items="roles" item-title="name" outlined chips closable-chips
-            small-chips :label="$t('admin.userManagement.roles')" multiple></v-autocomplete>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer> </v-spacer>
-          <v-btn color="blue darken-1" text @click="closeEditUserDialog">{{ $t('common.cancel') }}</v-btn>
-          <v-btn color="blue darken-1" text @click="updateUser(editedUser)">{{ $t('common.save') }}</v-btn>
-          <v-chip v-if="error" color="red darken-1">{{ $t('common.error') }}</v-chip>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-container>
+  <v-dialog v-model="addUserDialog" max-width="500px">
+    <v-card>
+      <v-card-title>{{ $t('admin.userManagement.addNewUser') }}</v-card-title>
+      <v-card-text>
+        <v-text-field v-model="newUser.username" :label="$t('admin.userManagement.username')" required></v-text-field>
+        <v-text-field v-model="newUser.email" :label="$t('admin.userManagement.email')" required
+          type="email"></v-text-field>
+        <v-text-field v-model="newUser.password" :label="$t('admin.userManagement.password')" required
+          type="password"></v-text-field>
+        <v-autocomplete v-model="newUser.roles" :items="roles" item-title="name" outlined chips closable-chips
+          small-chips :label="$t('admin.userManagement.roles')" multiple></v-autocomplete>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="closeAddUserDialog">{{ $t('common.cancel') }}</v-btn>
+        <v-btn color="blue darken-1" text @click="createUser">{{ $t('common.save') }}</v-btn>
+        <v-chip v-if="error" color="red darken-1">{{ $t('common.error') }}</v-chip>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="editUserDialog" max-width="500px">
+    <v-card>
+      <v-card-title>{{ $t('admin.userManagement.editUser') }}</v-card-title>
+      <v-card-text>
+        <v-text-field v-model="editedUser.username" :label="$t('admin.userManagement.username')"
+          required></v-text-field>
+        <v-text-field v-model="editedUser.email" :label="$t('admin.userManagement.email')" required
+          type="email"></v-text-field>
+        <v-text-field v-model="editedUser.password" :label="$t('admin.userManagement.password')" required
+          type="password"></v-text-field>
+        <v-autocomplete v-model="editedUser.roles" :items="roles" item-title="name" outlined chips closable-chips
+          small-chips :label="$t('admin.userManagement.roles')" multiple></v-autocomplete>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer> </v-spacer>
+        <v-btn color="blue darken-1" text @click="closeEditUserDialog">{{ $t('common.cancel') }}</v-btn>
+        <v-btn color="blue darken-1" text @click="updateUser(editedUser)">{{ $t('common.save') }}</v-btn>
+        <v-chip v-if="error" color="red darken-1">{{ $t('common.error') }}</v-chip>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="deleteConfirmDialog" max-width="400px">
+    <v-card>
+      <v-card-title>{{ $t('admin.userManagement.confirmDelete') }}</v-card-title>
+      <v-card-text>
+        {{ $t('admin.userManagement.deleteConfirmMessage') }}
+      </v-card-text>
+      <v-card-text>
+        {{ userToDelete.username }}
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="closeDeleteConfirmDialog">{{ $t('common.cancel') }}</v-btn>
+        <v-btn color="red darken-1" text @click="deleteUser(userToDelete)">{{ $t('common.delete') }}</v-btn>
+      </v-card-actions>
+      <v-chip v-if="error" color="red darken-1">{{ $t('common.error') }}</v-chip>
+    </v-card>
+  </v-dialog>
+
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 onMounted(async () => {
   await fetchUsers();
   await fetchRoles();
+  document.documentElement.style.overflowY = 'scroll';
+});
+
+onUnmounted(async () => {
+  document.documentElement.style.overflowY = 'auto';
 });
 
 const { t } = useI18n();
 
 const headers = computed(() => [
+  { title: '#', key: 'id' },
   { title: t('admin.userManagement.headers.username'), align: 'start', key: 'username' },
   { title: t('admin.userManagement.headers.email'), key: 'email' },
   { title: t('admin.userManagement.headers.roles'), key: 'rolesText' },
@@ -96,6 +121,21 @@ const newUser = ref({
   roles: [],
 });
 
+const deleteConfirmDialog = ref(false);
+const userToDelete = ref({});
+
+const openDeleteConfirmDialog = (user) => {
+  error.value = false;
+  userToDelete.value = user;
+  deleteConfirmDialog.value = true;
+};
+
+const closeDeleteConfirmDialog = () => {
+  error.value = false;
+  userToDelete.value = {};
+  deleteConfirmDialog.value = false;
+};
+
 const openAddUserDialog = () => {
   error.value = false;
   addUserDialog.value = true;
@@ -107,7 +147,6 @@ const openAddUserDialog = () => {
 };
 
 const editUserDialog = ref(false);
-
 const editedUser = ref({
   username: '',
   email: '',
@@ -135,6 +174,7 @@ const closeEditUserDialog = () => {
 };
 
 const closeAddUserDialog = () => {
+  error.value = false;
   addUserDialog.value = false;
   newUser.value = {
     username: '',
@@ -144,8 +184,10 @@ const closeAddUserDialog = () => {
 };
 
 const deleteUser = async (user) => {
-  // Implement delete user logic
-  console.log('Delete user:', user);
+  error.value = false;
+  if (user.username === "admin") {
+    return;
+  }
   return await fetch("/Invoke/auth/deleteUser", {
     method: "post",
     headers: {
@@ -160,6 +202,7 @@ const deleteUser = async (user) => {
     .then((res) => res.json())
     .then((json) => {
       fetchUsers(); // refreshes users
+      closeDeleteConfirmDialog();
     })
     .catch((err) => { error.value = true; console.warn(err); });
 };
@@ -194,8 +237,9 @@ const fetchRoles = async () => {
 
 const updateUser = async (user) => {
   error.value = false;
+  if (user.value) user = user.value;
   roleChange(user);
-  var userDup = Object.assign({}, user);
+  const userDup = Object.assign({}, user);
   delete userDup["id"];
   delete userDup["rolesText"];
   delete userDup["roles"];
@@ -213,8 +257,12 @@ const updateUser = async (user) => {
   })
     .then((res) => res.json())
     .then((json) => {
+      if (json.error === false) {
+        closeEditUserDialog();
+      } else {
+        error.value = true;
+      }
       fetchUsers(); // refreshes users
-      closeEditUserDialog();
     })
     .catch((err) => { error.value = true; console.warn(err); });
 }
@@ -239,6 +287,9 @@ const addRoleToUser = async (username, roleName) => {
 }
 
 const removeRoleFromUser = async (username, roleName) => {
+  if (username === "admin" && roleName === "admin") {
+    return;
+  }
   return await fetch("/Invoke/auth/userRemoveRole", {
     method: "post",
     headers: {
@@ -258,15 +309,23 @@ const removeRoleFromUser = async (username, roleName) => {
 }
 
 const roleChange = (user) => {
-  for (let i = 0; i < user.roles.length; i++)
-    if (!editedUserRoles.value.includes(user.roles[i]))
-      addRoleToUser(user.username, user.roles[i]);
-  for (let i = 0; i < editedUserRoles.value.length; i++)
-    if (!user.roles.includes(editedUserRoles.value[i]))
-      removeRoleFromUser(user.username, editedUserRoles.value[i]);
+  for (let i = 0; i < user.roles.length; i++) {
+    const roleName = user.roles[i]?.name || user.roles[i];
+    if (!editedUserRoles.value.includes(roleName))
+      addRoleToUser(user.username, roleName);
+  }
+
+  for (let i = 0; i < editedUserRoles.value.length; i++) {
+    const roleName = editedUserRoles.value[i]?.name || editedUserRoles.value[i];
+    if (!user.roles.includes(roleName))
+      removeRoleFromUser(user.username, roleName);
+  }
 }
 
 const createUser = async () => {
+  if (newUser.value.username === "admin") {
+    return;
+  }
   return await fetch("/Invoke/auth/createUser", {
     method: "post",
     headers: {
@@ -277,15 +336,19 @@ const createUser = async () => {
   })
     .then((res) => res.json())
     .then(async (json) => {
-      await fetchUsers(); // refreshes users
-      for (let i = 0; i < users.value.length; i++) {
-        if (users.value[i].username === newUser.value.username) {
-          newUser.value._id = users.value[i]._id;
-          await updateUser(newUser.value);
-          break;
+      if (json.error === false) {
+        await fetchUsers(); // refreshes users
+        for (let i = 0; i < users.value.length; i++) {
+          if (users.value[i].username === newUser.value.username) {
+            newUser.value._id = users.value[i]._id;
+            await updateUser(newUser);
+            break;
+          }
         }
+        closeAddUserDialog();
+      } else {
+        error.value = true;
       }
-      closeAddUserDialog();
     })
     .catch((err) => { error.value = true; console.warn(err); });
 }
diff --git a/src/AdminUI/src/locales/en.json b/src/AdminUI/src/locales/en.json
index 8e935726..59541867 100644
--- a/src/AdminUI/src/locales/en.json
+++ b/src/AdminUI/src/locales/en.json
@@ -2,6 +2,7 @@
   "common": {
     "save": "Save",
     "cancel": "Cancel",
+    "delete": "Delete",
     "itemsPerPageText": "Items per page:",
     "error": "Error!"
   },
@@ -77,6 +78,7 @@
     "title": "Admin Dashboard",
     "tabs": {
       "userManagement": "User Management",
+      "rolesManagement": "Roles Management",
       "systemSettings": "System Settings",
       "logs": "Logs"
     },
@@ -102,7 +104,51 @@
       "deleteUser": "Delete User",
       "deleteUserConfirm": "Are you sure you want to delete this user?",
       "deleteUserCancel": "Cancel",
-      "deleteUserExecute": "Delete User"
+      "deleteUserExecute": "Delete User",
+      "confirmDelete": "Confirm Delete",
+      "deleteConfirmMessage": "Are you sure you want to delete this user?"
+    },
+    "rolesManagement": {
+      "title": "Roles Management",
+      "headers": {
+        "name": "Name",
+        "description": "Description",
+        "rights": "Rights",
+        "actions": "Actions"
+      },
+      "addRole": "Add Role",
+      "addNewRole": "Add New Role",
+      "roleName": "Role Name",
+      "canViewGroup1List": "Can View - Group1 List",
+      "canCommandGroup1List": "Can Command - Group1 List",
+      "canAccessDisplayList": "Can Access - Display List",
+      "isAdmin": "Is Admin",
+      "isAdminHint": "Add/remove/edit users and roles.",
+      "canChangePassword": "Can Change Password",
+      "canChangePasswordHint": "Can change its own password.",
+      "sendCommands": "Send Commands",
+      "sendCommandsHint": "Can send commands (controls).",
+      "enterAnnotations": "Enter Annotations",
+      "enterAnnotationsHint": "Can create/edit blocking annotations.",
+      "enterNotes": "Enter Notes",
+      "enterNotesHint": "Can create/edit documental notes.",
+      "enterManuals": "Enter Manuals",
+      "enterManualsHint": "Can change the state of manual points.",
+      "enterLimits": "Enter Limits",
+      "enterLimitsHint": "Can change limits for analog points.",
+      "substituteValues": "Substitute Values",
+      "substituteValuesHint": "Can replace (impose) supervised values.",
+      "ackEvents": "Ack Events",
+      "ackEventsHint": "Can acknowledge events.",
+      "ackAlarms": "Ack Alarms",
+      "ackAlarmsHint": "Can acknowledge alarms.",
+      "disableAlarms": "Disable Alarms",
+      "disableAlarmsHint": "Can disable/enable alarms.",
+      "numberOfDaysSession": "Number of days...",
+      "maxSessionDays": "Max Session Days",
+      "maxSessionDaysHint": "Maximum days of session period.",
+      "deleteRole": "Delete Role",
+      "deleteRoleConfirm": "Are you sure you want to delete this role?"
     },
     "systemSettings": {
       "title": "System Settings",