show userconfig in admin panel

src/app/components/form/ArrayField.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col">
+  <div v-if="data?.length === 0">
+    {{ emptyText || 'No items' }}
+  </div>
+  <div v-else class="flex flex-col">
     <div v-for="(item, i) in data" :key="item">
       <input
         :value="item"
@@ -14,7 +17,8 @@
 </template>
 
 <script lang="ts" setup>
-const data = defineModel<string[] | null>();
+const data = defineModel<string[]>();
+defineProps<{ emptyText?: string[] }>();
 
 function update(i: number) {
   return (v: string) => {

src/app/pages/admin.vue

@@ -42,7 +42,7 @@ const route = useRoute();
 
 const menuItems = [
   { id: '', name: 'General' },
-  { id: 'defaults', name: 'Defaults' },
+  { id: 'config', name: 'Config' },
   { id: 'interface', name: 'Interface' },
   { id: 'metrics', name: 'Metrics' },
 ];

src/app/pages/admin/config.vue

@@ -0,0 +1,42 @@
+<template>
+  <main v-if="data">
+    <FormGroup>
+      <FormHeading>Connection</FormHeading>
+      <FormTextField id="host" v-model="data.host" label="Host" />
+      <FormNumberField id="port" v-model="data.port" label="Port" />
+    </FormGroup>
+    <FormGroup>
+      <FormHeading>Allowed IPs</FormHeading>
+      <FormArrayField v-model="data.allowedIps" />
+    </FormGroup>
+    <FormGroup>
+      <FormHeading>DNS</FormHeading>
+      <FormArrayField v-model="data.defaultDns" />
+    </FormGroup>
+    <FormGroup>
+      <FormHeading>Advanced</FormHeading>
+      <FormNumberField id="mtu" v-model="data.mtu" label="MTU" />
+      <FormNumberField
+        id="keepalive"
+        v-model="data.persistentKeepalive"
+        label="Persistent Keepalive"
+      />
+    </FormGroup>
+    <FormGroup>
+      <FormHeading>Actions</FormHeading>
+      <FormActionField label="Revert!" @click="revert" />
+    </FormGroup>
+  </main>
+</template>
+
+<script lang="ts" setup>
+const { data: _data, refresh } = await useFetch(`/api/admin/userconfig`, {
+  method: 'get',
+});
+const data = toRef(_data.value);
+
+async function revert() {
+  await refresh();
+  data.value = toRef(_data.value).value;
+}
+</script>

src/app/pages/admin/defaults.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <FormGroup>
-      <FormHeading>Connection</FormHeading>
-      <FormTextField id="host" label="Host" />
-      <FormTextField id="port" label="Port" />
-    </FormGroup>
-    <FormGroup>
-      <FormHeading>Allowed IPs</FormHeading>
-      <FormArrayField />
-    </FormGroup>
-    <FormGroup>
-      <FormHeading>DNS</FormHeading>
-      <FormArrayField />
-    </FormGroup>
-    <FormGroup>
-      <FormHeading>Advanced</FormHeading>
-      <FormNumberField id="mtu" label="MTU" />
-      <FormNumberField id="keepalive" label="Persistent Keepalive" />
-    </FormGroup>
-  </div>
-</template>
-
-<script setup lang="ts"></script>

src/server/api/admin/userconfig.get.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler(async () => {
+  const system = await Database.system.get();
+  return system.userConfig;
+});