Finalize network view move to vue

2025-01-23 16:19:23 +01:00
parent fa3bdb5464
commit 5ea4c90292
6 changed files with 539 additions and 159 deletions
@@ -0,0 +1,168 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { Dialog, FormGroup } from 'pankow';
+import Section from  '../components/Section.vue';
+import NetworkModel from  '../models/NetworkModel.js';
+
+const networkModel = NetworkModel.create(API_ORIGIN, localStorage.token);
+
+const blocklistLength = ref(0);
+const blocklist = ref('');
+const blocklistDialog = useTemplateRef('blocklistDialog');
+const editBlocklistError = ref('');
+const editBlocklistBusy = ref(false);
+const editBlocklist = ref('');
+const isBlocklistValid = computed(() => {
+  return true;
+});
+
+async function refreshBlocklist() {
+  const [error, result] = await networkModel.getBlocklist();
+  if (error) return console.error(error);
+
+  blocklist.value = result;
+  blocklistLength.value = result.split('\n').filter(function (l) { return l.length !== 0 && l[0] !== '#'; }).length;
+}
+
+function onBlocklistConfigure() {
+  editBlocklistBusy.value = false;
+  editBlocklistError.value = '';
+  editBlocklist.value = blocklist.value;
+
+  blocklistDialog.value.open();
+}
+
+async function onBlocklistSubmit() {
+  if (!isBlocklistValid.value) return;
+
+  editBlocklistBusy.value = true;
+  const [error] = await networkModel.setBlocklist(editBlocklist.value);
+  if (error) {
+    editBlocklistBusy.value = false;
+    editBlocklistError.value = error.body ? error.body.message : 'Internal error';
+    return;
+  }
+
+  await refreshBlocklist();
+
+  blocklistDialog.value.close();
+  editBlocklistBusy.value = false;
+}
+
+const trustedIpsLength = ref(0);
+const trustedIps = ref('');
+const trustedIpsDialog = useTemplateRef('trustedIpsDialog');
+const editTrustedIpsError = ref('');
+const editTrustedIpsBusy = ref(false);
+const editTrustedIps = ref('');
+const isTrustedIpsValid = computed(() => {
+  return true;
+});
+
+function onTrustedIpsConfigure() {
+  editTrustedIpsError.value = '';
+  editTrustedIpsBusy.value = false;
+  editTrustedIps.value = trustedIps.value;
+
+  trustedIpsDialog.value.open();
+}
+
+async function onTrustedIpsSubmit() {
+  if (!isTrustedIpsValid.value) return;
+
+  editTrustedIpsBusy.value = true;
+  const [error] = await networkModel.setTrustedIps(editTrustedIps.value);
+  if (error) {
+    editTrustedIpsBusy.value = false;
+    editTrustedIpsError.value = error.body ? error.body.message : 'Internal error';
+    return;
+  }
+
+  await refreshTrustedIps();
+
+  trustedIpsDialog.value.close();
+  editTrustedIpsBusy.value = false;
+}
+
+async function refreshTrustedIps() {
+  const [error, result] = await networkModel.getTrustedIps();
+  if (error) return console.error(error);
+
+  trustedIps.value = result;
+  trustedIpsLength.value = result.split('\n').filter(function (l) { return l.length !== 0 && l[0] !== '#'; }).length;
+}
+
+onMounted(async () => {
+  await refreshBlocklist();
+  await refreshTrustedIps();
+});
+
+</script>
+
+<template>
+  <div>
+    <Dialog ref="blocklistDialog"
+      :title="$t('network.firewall.configure.title')"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="editBlocklistBusy"
+      :confirm-active="!editBlocklistBusy && isBlocklistValid"
+      :reject-label="$t('main.dialog.cancel')"
+       reject-style="secondary"
+      @confirm="onBlocklistSubmit()"
+    >
+      <div>
+        <p class="small">{{ $t('network.firewall.configure.description') }}</p>
+
+        <form novalidate @submit.prevent="onBlocklistSubmit()" autocomplete="off">
+          <fieldset :disabled="editBlocklistBusy">
+            <input style="display: none" type="submit" :disabled="editBlocklistBusy || !isBlocklistValid"/>
+            <FormGroup>
+              <label for="blocklistInput">{{ $t('network.firewall.blockedIpRanges') }}</label>
+              <div class="has-error" v-show="editBlocklistError">{{ editBlocklistError }}</div>
+              <textarea id="blocklistInput" v-model="editBlocklist" :placeholder="$t('network.firewall.configure.blocklistPlaceholder')" rows="4"></textarea>
+            </FormGroup>
+          </fieldset>
+        </form>
+      </div>
+    </Dialog>
+
+    <Dialog ref="trustedIpsDialog"
+      :title="$t('network.trustedIps.title')"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="editTrustedIpsBusy"
+      :confirm-active="!editTrustedIpsBusy && isTrustedIpsValid"
+      :reject-label="$t('main.dialog.cancel')"
+       reject-style="secondary"
+      @confirm="onTrustedIpsSubmit()"
+    >
+      <div>
+        <p class="small">{{ $t('network.trustedIps.description') }}</p>
+
+        <form novalidate @submit.prevent="onTrustedIpsSubmit()" autocomplete="off">
+          <fieldset :disabled="editTrustedIpsBusy">
+            <input style="display: none;" type="submit" :disabled="editTrustedIpsBusy || !isTrustedIpsValid"/>
+            <FormGroup>
+              <label for="">{{ $t('network.trustedIpRanges') }}</label>
+              <div class="has-error" v-show="editTrustedIpsError">{{ editTrustedIpsError }}</div>
+              <textarea v-model="editTrustedIps" :placeholder="$t('network.firewall.configure.blocklistPlaceholder')" rows="4"></textarea>
+            </FormGroup>
+          </fieldset>
+        </form>
+      </div>
+    </Dialog>
+
+    <Section :title="$t('network.firewall.title')">
+      <div class="info-row">
+        <div class="info-label">{{ $t('network.firewall.blockedIpRanges') }}</div>
+        <div class="info-value actionable" @click="onBlocklistConfigure()">{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }} <i class="fa-solid fa-edit text-small"></i></div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('network.trustedIpRanges') }}</div>
+        <div class="info-value actionable" @click="onTrustedIpsConfigure()">{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }} <i class="fa-solid fa-edit text-small"></i></div>
+      </div>
+    </Section>
+  </div>
+</template>