Feat: add ability to restart interface (#1740)

add ability to restart interface

src/app/components/Admin/RestartInterfaceDialog.vue

@@ -0,0 +1,24 @@
+<template>
+  <BaseDialog :trigger-class="triggerClass">
+    <template #trigger><slot /></template>
+    <template #title>{{ $t('admin.interface.restart') }}</template>
+    <template #description>
+      {{ $t('admin.interface.restartWarn') }}
+    </template>
+    <template #actions>
+      <DialogClose as-child>
+        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+      </DialogClose>
+      <DialogClose as-child>
+        <BaseButton @click="$emit('restart')">
+          {{ $t('admin.interface.restart') }}
+        </BaseButton>
+      </DialogClose>
+    </template>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+defineEmits(['restart']);
+defineProps<{ triggerClass?: string }>();
+</script>

src/app/pages/admin/interface.vue

@@ -34,8 +34,19 @@
           <FormActionField
             :label="$t('admin.interface.changeCidr')"
             class="w-full"
+            tabindex="-1"
           />
         </AdminCidrDialog>
+        <AdminRestartInterfaceDialog
+          trigger-class="col-span-2"
+          @restart="restartInterface"
+        >
+          <FormActionField
+            :label="$t('admin.interface.restart')"
+            class="w-full"
+            tabindex="-1"
+          />
+        </AdminRestartInterfaceDialog>
       </FormGroup>
     </FormElement>
   </main>
@@ -82,4 +93,20 @@ const _changeCidr = useSubmit(
 async function changeCidr(ipv4Cidr: string, ipv6Cidr: string) {
   await _changeCidr({ ipv4Cidr, ipv6Cidr });
 }
+
+const _restartInterface = useSubmit(
+  `/api/admin/interface/restart`,
+  {
+    method: 'post',
+  },
+  {
+    revert,
+    successMsg: t('admin.interface.restartSuccess'),
+    errorMsg: t('admin.interface.restartError'),
+  }
+);
+
+async function restartInterface() {
+  await _restartInterface(undefined);
+}
 </script>