Add User Management Frontend

client/src/App.vue

@@ -15,6 +15,7 @@ import IDNSServer from '~icons/carbon/server-dns';
 import ITimeServer from '~icons/carbon/server-time';
 import IWireguard from '~icons/simple-icons/wireguard';
 import IDHCPServer from '~icons/material-symbols/book-rounded';
+import IUser from '~icons/mdi/user';
 
 enum NavState { Open, Reduced, Collapsed };
 const NavStateCount = 3;
@@ -34,6 +35,7 @@ const navRoutes = {
   "/vpn/wireguardstatus": { icon: IWireguard, caption: "Wireguard Status" },
   "/vpn/wireguardinterfaces": { icon: IWireguard, caption: "Wireguard Interfaces" },
   "/vpn/wireguardpeers": { icon: IWireguard, caption: "Wireguard Peers" },
+  "/system/users": { icon: IUser, caption: "Users" },
   "/config/config": { icon: IConfig, caption: "Config" },
 };
 

client/src/definitions.ts

@@ -377,4 +377,23 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
       ],
     },
   },
+  "system": {
+    name: "System",
+    "users": {
+      name: "User",
+      validationSchema: toFormValidator(
+        zod.object({
+        }),
+      ),
+      sections: [
+        {
+          fields: [
+            { key: "name", label: "Name", as: "TextBox" },
+            { key: "password", label: "Password", as: "TextBox", props: { type: "password" } },
+            { key: "comment", label: "Comment", as: "MultilineTextBox" },
+          ],
+        },
+      ],
+    },
+  },
 };

client/src/pages/system/Users.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+import getPlugins from '../../plugins';
+const p = getPlugins();
+
+let users = $ref([]);
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function load(){
+  loading = true;
+  let res = await apiCall("System.GetUsers", {});
+  if (res.Error === null) {
+    users = res.Data.Users;
+    console.debug("users", users);
+  } else {
+    console.debug("error", res);
+  }
+  loading = false;
+}
+
+const displayData = $computed(() => {
+  let data: any;
+  data = [];
+  for (const name in users) {
+    data.push({
+      name,
+      comment: users[name].comment,
+    });
+  }
+  return data;
+});
+
+
+async function deleteUser(){
+  let res = await apiCall("System.DeleteUser", {name: displayData[selection[0]].name});
+  if (res.Error === null) {
+    console.debug("deleted user");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
+async function editUser() {
+  p.router.push("/system/users/edit/" + displayData[selection[0]].name);
+}
+
+onMounted(async() => {
+  load();
+});
+
+</script>
+
+<template>
+  <TableView title="Users" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}">
+    <button @click="load">Refresh</button>
+    <router-link class="button" to="/system/users/edit">Create</router-link>
+    <button @click="editUser" :disabled="selection.length != 1">Edit</button>
+    <button @click="deleteUser" :disabled="selection.length != 1">Delete</button>
+  </TableView>
+</template>