cloudron-box/dashboard/src/views/NetworkView.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>