start cidr update

src/app/components/admin/CidrDialog.vue

@@ -0,0 +1,49 @@
+<template>
+  <DialogRoot :modal="true">
+    <DialogTrigger :class="triggerClass"><slot /></DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay
+        class="data-[state=open]:animate-overlayShow fixed inset-0 z-30 bg-gray-500 opacity-75 dark:bg-black dark:opacity-50"
+      />
+      <DialogContent
+        class="data-[state=open]:animate-contentShow fixed left-1/2 top-1/2 z-[100] max-h-[85vh] w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md p-6 shadow-2xl focus:outline-none dark:bg-neutral-700"
+      >
+        <DialogTitle
+          class="m-0 text-lg font-semibold text-gray-900 dark:text-neutral-200"
+        >
+          Change CIDR
+        </DialogTitle>
+        <DialogDescription
+          class="mb-5 mt-2 text-sm leading-normal text-gray-500 dark:text-neutral-300"
+        >
+          <FormGroup>
+            <FormTextField id="address4" v-model="address4" label="IPv4" />
+            <FormTextField id="address6" v-model="address6" label="IPv6" />
+          </FormGroup>
+        </DialogDescription>
+        <div class="mt-6 flex justify-end gap-2">
+          <DialogClose as-child>
+            <BaseButton>{{ $t('cancel') }}</BaseButton>
+          </DialogClose>
+          <DialogClose as-child>
+            <BaseButton @click="$emit('change', address4, address6)"
+              >Change</BaseButton
+            >
+          </DialogClose>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script lang="ts" setup>
+defineEmits(['change']);
+const props = defineProps<{
+  triggerClass?: string;
+  address4: string;
+  address6: string;
+}>();
+
+const address4 = ref(props.address4);
+const address6 = ref(props.address6);
+</script>

src/app/pages/admin/config.vue

@@ -26,7 +26,15 @@
       <FormGroup>
         <FormHeading>Actions</FormHeading>
         <FormActionField type="submit" label="Save" />
-        <FormActionField label="Revert!" @click="revert" />
+        <FormActionField label="Revert" @click="revert" />
+        <AdminCidrDialog
+          trigger-class="col-span-2"
+          :address6="data.address6Range"
+          :address4="data.address4Range"
+          @change="changeCidr"
+        >
+          <FormActionField label="Change CIDR" class="w-full" />
+        </AdminCidrDialog>
       </FormGroup>
     </FormElement>
   </main>
@@ -71,4 +79,30 @@ async function revert() {
   await refresh();
   data.value = toRef(_data.value).value;
 }
+
+async function changeCidr(address4: string, address6: string) {
+  try {
+    const res = await $fetch(`/api/admin/userconfig/cidr`, {
+      method: 'post',
+      body: { address4, address6 },
+    });
+    toast.showToast({
+      type: 'success',
+      title: 'Success',
+      message: 'Changed CIDR',
+    });
+    if (!res.success) {
+      throw new Error('Failed to change CIDR');
+    }
+    await refreshNuxtData();
+  } catch (e) {
+    if (e instanceof Error) {
+      toast.showToast({
+        type: 'error',
+        title: 'Error',
+        message: e.message,
+      });
+    }
+  }
+}
 </script>

src/server/api/admin/hooks.post.ts

@@ -4,5 +4,6 @@ export default defineEventHandler(async (event) => {
     validateZod(hooksUpdateType, event)
   );
   await Database.system.updateHooks(data);
+  await WireGuard.saveConfig();
   return { success: true };
 });

src/server/api/admin/userconfig/cidr.post.ts

@@ -0,0 +1,9 @@
+export default defineEventHandler(async (event) => {
+  const data = await readValidatedBody(
+    event,
+    validateZod(cidrUpdateType, event)
+  );
+
+  await WireGuard.updateAddressRange(data);
+  return { success: true };
+});

src/server/utils/WireGuard.ts

@@ -222,6 +222,16 @@ class WireGuard {
     await this.saveConfig();
   }
 
+  async updateAddressRange({
+    address4,
+    address6,
+  }: {
+    address4: string;
+    address6: string;
+  }) {
+    // TOOD: validate, change
+  }
+
   // TODO: reimplement database restore
   async restoreConfiguration(_config: string) {
     /* DEBUG('Starting configuration restore process.');

src/server/utils/types.ts

@@ -202,6 +202,11 @@ export const hooksUpdateType = z.object({
   PostDown: hook,
 });
 
+export const cidrUpdateType = z.object({
+  address4: address,
+  address6: address,
+});
+
 // from https://github.com/airjp73/rvf/blob/7e7c35d98015ea5ecff5affaf89f78296e84e8b9/packages/zod-form-data/src/helpers.ts#L117
 type FormDataLikeInput = {
   [Symbol.iterator](): IterableIterator<[string, FormDataEntryValue]>;