cloudron-box/dashboard/src/views/NetworkView.vue

<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 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(API_ORIGIN, localStorage.token);

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 refreshDynDns();
});

</script>

<template>
  <div class="content">
    <h1>{{ $t('network.title') }}</h1>

    <Ipv4Config />
    <Ipv6Config />
    <Firewall />

    <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>