Johannes Zellner
56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<script setup>
|
|
|
|
import { ref, onMounted } from 'vue';
|
|
import { Switch } from '@cloudron/pankow';
|
|
import Section from '../components/Section.vue';
|
|
import SettingsItem from '../components/SettingsItem.vue';
|
|
import Ipv4Config from '../components/Ipv4Config.vue';
|
|
import Ipv6Config from '../components/Ipv6Config.vue';
|
|
import Firewall from '../components/Firewall.vue';
|
|
import NetworkModel from '../models/NetworkModel.js';
|
|
|
|
const networkModel = NetworkModel.create();
|
|
|
|
const busy = ref(true);
|
|
const dynDnsIsEnabled = ref(false);
|
|
|
|
async function onToggleDynDns(value) {
|
|
busy.value = true;
|
|
|
|
const [error] = await networkModel.setDynDnsConfig(value);
|
|
if (error) {
|
|
dynDnsIsEnabled.value = !value;
|
|
return console.error(error);
|
|
}
|
|
|
|
busy.value = false;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const [error, result] = await networkModel.getDynDnsConfig();
|
|
if (error) return console.error(error);
|
|
|
|
dynDnsIsEnabled.value = result.enabled;
|
|
|
|
busy.value = false;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content">
|
|
<h1 class="view-header">{{ $t('network.title') }}</h1>
|
|
|
|
<Ipv4Config />
|
|
<Ipv6Config />
|
|
<Firewall />
|
|
|
|
<Section :title="$t('network.dyndns.title')" :padding="false">
|
|
<SettingsItem>
|
|
<p>{{ $t('network.dyndns.description') }}</p>
|
|
<Switch v-model="dynDnsIsEnabled" @change="onToggleDynDns" :busy="busy"/>
|
|
</SettingsItem>
|
|
</Section>
|
|
</div>
|
|
</template>
|