Use new Switch component for dyndns setting

dashboard/src/views/NetworkView.vue

@@ -2,8 +2,8 @@
 
 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 { ref, onMounted, watch } from 'vue';
+import { Switch } from 'pankow';
 import Section from  '../components/Section.vue';
 import Ipv4Config from '../components/Ipv4Config.vue';
 import Ipv6Config from '../components/Ipv6Config.vue';
@@ -12,28 +12,17 @@ import NetworkModel from  '../models/NetworkModel.js';
 
 const networkModel = NetworkModel.create(API_ORIGIN, localStorage.token);
 
-const dynDnsBusy = ref(false);
 const dynDnsIsEnabled = ref(false);
+watch(dynDnsIsEnabled, async (newValue) => {
+  const [error] = await networkModel.setDynDnsConfig(newValue);
+  if (error) return console.error(error);
+});
 
-async function refreshDynDns() {
+onMounted(async () => {
   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>
@@ -50,12 +39,7 @@ onMounted(async () => {
       <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>
+      <Switch v-model="dynDnsIsEnabled" :label="$t(dynDnsIsEnabled ? 'main.statusEnabled' : 'main.statusDisabled')" />
     </Section>
   </div>
 </template>