First step to move network view to vue
This commit is contained in:
Johannes Zellner
@@ -0,0 +1,213 @@
|
||||
<script setup>
|
||||
|
||||
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Button } from 'pankow';
|
||||
import Section from '../components/Section.vue';
|
||||
import NetworkModel from '../models/NetworkModel.js';
|
||||
|
||||
const networkModel = NetworkModel.create(API_ORIGIN, localStorage.token);
|
||||
|
||||
// keep in sync with sysinfo.js
|
||||
const ipv4Providers = [
|
||||
{ name: 'Disabled', value: 'noop' },
|
||||
{ name: 'Public IP', value: 'generic' },
|
||||
{ name: 'Static IP Address', value: 'fixed' },
|
||||
{ name: 'Network Interface', value: 'network-interface' }
|
||||
];
|
||||
|
||||
const ipv6Providers = [
|
||||
{ name: 'Disabled', value: 'noop' },
|
||||
{ name: 'Public IP', value: 'generic' },
|
||||
{ name: 'Static IP Address', value: 'fixed' },
|
||||
{ name: 'Network Interface', value: 'network-interface' }
|
||||
];
|
||||
|
||||
function prettyIpProviderName(provider) {
|
||||
switch (provider) {
|
||||
case 'noop': return 'Disabled';
|
||||
case 'generic': return 'Public IP';
|
||||
case 'fixed': return 'Static IP Address';
|
||||
case 'network-interface': return 'Network Interface';
|
||||
default: return 'Unknown';
|
||||
}
|
||||
}
|
||||
|
||||
// IPv4
|
||||
const ipv4Provider = ref('');
|
||||
const ipv4Address = ref('');
|
||||
const ipv4DetectedAddress = ref('');
|
||||
const ipv4InterfaceName = ref('');
|
||||
|
||||
async function refreshIpv4() {
|
||||
let [error, result] = await networkModel.getIpv4Config();
|
||||
if (error) return console.error(error);
|
||||
|
||||
ipv4Provider.value = result.provider;
|
||||
ipv4Address.value = result.ip;
|
||||
ipv4InterfaceName.value = result.ifname;
|
||||
|
||||
[error, result] = await networkModel.getIpv4();
|
||||
if (error) return console.error(error);
|
||||
|
||||
ipv4DetectedAddress.value = result;
|
||||
}
|
||||
|
||||
function onIpv4Configure() {
|
||||
|
||||
}
|
||||
|
||||
// IPv6
|
||||
const ipv6Provider = ref('');
|
||||
const ipv6Address = ref('');
|
||||
const ipv6DetectedAddress = ref('');
|
||||
const ipv6InterfaceName = ref('');
|
||||
|
||||
async function refreshIpv6() {
|
||||
let [error, result] = await networkModel.getIpv6Config();
|
||||
if (error) return console.error(error);
|
||||
|
||||
ipv6Provider.value = result.provider;
|
||||
ipv6Address.value = result.ip;
|
||||
ipv6InterfaceName.value = result.ifname;
|
||||
|
||||
[error, result] = await networkModel.getIpv6();
|
||||
if (error) return console.error(error);
|
||||
|
||||
ipv6DetectedAddress.value = result;
|
||||
}
|
||||
|
||||
function onIpv6Configure() {
|
||||
|
||||
}
|
||||
|
||||
// Firewall
|
||||
|
||||
const blocklistLength = ref(0);
|
||||
const blocklist = ref('');
|
||||
|
||||
function onBlocklistEdit() {
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const trustedIpsLength = ref(0);
|
||||
const trustedIps = ref('');
|
||||
|
||||
function onTrustedIpsEdit() {
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// dyndns
|
||||
const dynDnsBusy = ref(false);
|
||||
const dynDnsIsEnabled = ref(false);
|
||||
|
||||
async function refreshDynDns() {
|
||||
const [error, result] = await networkModel.getDynDnsConfig();
|
||||
if (error) return console.error(error);
|
||||
|
||||
dynDnsIsEnabled.value = result.enabled;
|
||||
}
|
||||
|
||||
async function onDyndnsToggle() {
|
||||
dynDnsBusy.value = true;
|
||||
|
||||
const [error] = await networkModel.setDynDnsConfig(!dynDnsIsEnabled.value);
|
||||
if (error) return console.error(error);
|
||||
|
||||
await refreshDynDns();
|
||||
dynDnsBusy.value = false;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await refreshIpv4();
|
||||
await refreshIpv6();
|
||||
await refreshDynDns();
|
||||
await refreshBlocklist();
|
||||
await refreshTrustedIps();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<h1>{{ $t('network.title') }}</h1>
|
||||
|
||||
<Section :title="$t('network.ip.title')">
|
||||
<p>{{ $t('network.ip.description') }}</p>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('network.ip.provider') }}</div>
|
||||
<div class="info-value">{{ prettyIpProviderName(ipv4Provider) }}</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('network.ip.address') }}</div>
|
||||
<div class="info-value">{{ ipv4Address || `${ipv4DetectedAddress} (${$t('network.ip.detected')})` }}</div>
|
||||
</div>
|
||||
<div class="info-row" v-show="ipv4InterfaceName">
|
||||
<div class="info-label">{{ $t('network.ip.interface') }}</div>
|
||||
<div class="info-value">{{ ipv4InterfaceName }}</div>
|
||||
</div>
|
||||
|
||||
<Button @click="onIpv4Configure()">{{ $t('network.ip.configure') }}</Button>
|
||||
</Section>
|
||||
|
||||
<Section :title="$t('network.ipv6.title')">
|
||||
<p>{{ $t('network.ipv6.description') }}</p>
|
||||
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('network.ip.provider') }}</div>
|
||||
<div class="info-value">{{ prettyIpProviderName(ipv6Provider) }}</div>
|
||||
</div>
|
||||
<div class="info-row" v-show="ipv6Provider !== 'noop'">
|
||||
<div class="info-label">{{ $t('network.ip.address') }}</div>
|
||||
<div class="info-value">{{ ipv6Address || `${ipv6DetectedAddress} (${$t('network.ip.detected')})` }}</div>
|
||||
<!-- TODO <span ng-show="ipv6Configure.displayError" class="text-danger">{{ ipv6Configure.displayError }}</span> -->
|
||||
</div>
|
||||
<div class="info-row" v-show="ipv6InterfaceName">
|
||||
<div class="info-label">{{ $t('network.ip.interface') }}</div>
|
||||
<div class="info-value">{{ ipv6InterfaceName }}</div>
|
||||
</div>
|
||||
|
||||
<Button @click="onIpv6Configure()">{{ $t('network.ip.configure') }}</Button>
|
||||
</Section>
|
||||
|
||||
<Section :title="$t('network.firewall.title')">
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('network.firewall.blockedIpRanges') }}</div>
|
||||
<div class="info-value">{{ $t('network.firewall.blocklist', { blockCount: blocklistLength }) }} <span @click="onBlocklistEdit()"><i class="fa-solid fa-edit text-small"></i></span></div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<div class="info-label">{{ $t('network.trustedIpRanges') }}</div>
|
||||
<div class="info-value">{{ $t('network.trustedIps.summary', { trustCount: trustedIpsLength }) }} <span @click="onTrustedIpsEdit()"><i class="fa-solid fa-edit text-small"></i></span></div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section :title="$t('network.dyndns.title')">
|
||||
<p>{{ $t('network.dyndns.description') }}</p>
|
||||
<!-- TODO<p class="text-danger" ng-show="dyndnsConfigure.error"><br/>{{ dyndnsConfigure.error }}</p> -->
|
||||
|
||||
<p>
|
||||
<i class="fa-solid fa-circle" :class="{ 'status-active': dynDnsIsEnabled, 'status-inactive': !dynDnsIsEnabled }"></i> {{ $t(dynDnsIsEnabled ? 'main.statusEnabled' : 'main.statusDisabled') }}
|
||||
</p>
|
||||
|
||||
<!-- TODO use toggle component -->
|
||||
<Button :danger="dynDnsIsEnabled ? true : undefined" @click="onDyndnsToggle()" :disabled="dynDnsBusy" :loading="dynDnsBusy">{{ $t(dynDnsIsEnabled ? 'main.disableAction' : 'main.enableAction') }}</Button>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user