From 39cb05d47e4db5d2b4278af80496fbac2289b984 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 28 Aug 2024 17:11:09 +0300
Subject: [PATCH 01/16] feat: Add NetworkItem component to make it less complex
 feat: Refactor Networks component

---
 .../playground/src/components/NetworkItem.vue |  38 ++++
 .../playground/src/components/networks.vue    | 214 ++++++------------
 2 files changed, 113 insertions(+), 139 deletions(-)
 create mode 100644 packages/playground/src/components/NetworkItem.vue

diff --git a/packages/playground/src/components/NetworkItem.vue b/packages/playground/src/components/NetworkItem.vue
new file mode 100644
index 0000000000..26ba750687
--- /dev/null
+++ b/packages/playground/src/components/NetworkItem.vue
@@ -0,0 +1,38 @@
+<template>
+  <input-tooltip v-if="value !== null" inline :tooltip="tooltipText">
+    <v-switch
+      hide-details
+      color="primary"
+      inset
+      :label="label"
+      :model-value="value"
+      @update:model-value="callEmitFunction($event ?? false)"
+      :readonly="readonly"
+      :style="{ opacity: readonly ? 0.5 : 1 }"
+    />
+  </input-tooltip>
+</template>
+
+<script lang="ts">
+import { computed, type PropType } from "vue";
+
+export default {
+  name: "NetworkItem",
+  props: {
+    tooltipText: { type: String, required: true },
+    label: { type: String, required: true },
+    value: Boolean as PropType<boolean | null | undefined>,
+    emitFunction: Function as PropType<any>,
+  },
+  setup(props) {
+    const readonly = computed(() => typeof props.emitFunction !== "function");
+    function callEmitFunction(value?: boolean): void {
+      if (typeof props.emitFunction === "function") {
+        props.emitFunction(value);
+      }
+    }
+
+    return { readonly, callEmitFunction };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index e9e9047932..d764493db0 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -1,100 +1,64 @@
 <template>
-  <div ref="input">
-    <input-tooltip tooltip="Enable the network options to be able access your deployment">
-      <v-expansion-panels variant="inset" class="mb-4">
-        <v-expansion-panel expand-icon="mdi-menu-down" collapse-icon="mdi-menu-up" :disabled="$props.disabled">
-          <template v-slot:title>
-            <span class="text-h6">Network</span>
-            <v-chip v-if="error" variant="text">
-              <v-icon color="warning" icon="mdi-alert-circle" />
-            </v-chip>
-            <v-chip v-if="ipv4" variant="outlined" class="ml-2"> IPV4 </v-chip>
-            <v-chip v-if="ipv6" variant="outlined" class="ml-2"> IPV6 </v-chip>
-            <v-chip v-if="planetary" variant="outlined" class="ml-2"> Planetary </v-chip>
-            <v-chip v-if="mycelium" variant="outlined" class="ml-2"> Mycelium </v-chip>
-            <v-chip v-if="wireguard" variant="outlined" class="ml-2"> Wireguard </v-chip>
-          </template>
-          <v-expansion-panel-text>
-            <input-tooltip
-              v-if="ipv4 !== null"
-              inline
-              tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Public IPv4"
-                :readonly="enableIpv4"
-                :model-value="$props.ipv4"
-                @update:model-value="$emit('update:ipv4', $event ?? undefined)"
-                :style="enableIpv4 ? 'opacity: .5' : 'opacity: 1'"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="ipv6 !== null"
-              inline
-              tooltip="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Public IPv6"
-                :modelValue="$props.ipv6"
-                @update:modelValue="$emit('update:ipv6', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="planetary !== null"
-              inline
-              tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Planetary Network"
-                :modelValue="$props.planetary"
-                @update:modelValue="$emit('update:planetary', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="mycelium !== null"
-              inline
-              tooltip="Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="mycelium"
-                :modelValue="$props.mycelium"
-                @update:modelValue="$emit('update:mycelium', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="wireguard !== null"
-              inline
-              tooltip="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Add Wireguard Access"
-                :modelValue="$props.wireguard"
-                @update:modelValue="$emit('update:wireguard', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <v-alert v-show="error" class="mb-2" type="warning" variant="tonal">
-              You must enable at least one of network options.
-            </v-alert>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-      </v-expansion-panels>
-    </input-tooltip>
-  </div>
+  <input-tooltip ref="input" tooltip="Enable the network options to be able access your deployment">
+    <v-expansion-panels variant="inset" class="mb-4">
+      <v-expansion-panel expand-icon="mdi-menu-down" collapse-icon="mdi-menu-up" :disabled="$props.disabled">
+        <v-expansion-panel-title>
+          <v-card-title class="py-0" v-text="'Network'" />
+          <v-icon v-if="error" color="warning" icon="mdi-alert-circle" class="ml-2" size="small" />
+          <v-chip v-if="ipv4" variant="outlined" class="ml-2" text="IPV4" />
+          <v-chip v-if="ipv6" variant="outlined" class="ml-2" text="IPV6" />
+          <v-chip v-if="planetary" variant="outlined" class="ml-2" text="Planetary" />
+          <v-chip v-if="mycelium" variant="outlined" class="ml-2" text="Mycelium" />
+          <v-chip v-if="wireguard" variant="outlined" class="ml-2" text="Wireguard" />
+        </v-expansion-panel-title>
+
+        <v-expansion-panel-text>
+          <NetworkItem
+            tooltip-text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+            label="Public IPv4"
+            :value="$props.ipv4"
+            :emit-function="$attrs['onUpdate:ipv4']"
+          />
+
+          <NetworkItem
+            tooltip-text="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
+            label="Public IPv6"
+            :value="$props.ipv6"
+            :emit-function="$attrs['onUpdate:ipv6']"
+          />
+
+          <NetworkItem
+            tooltip-text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
+            label="Planetary Network"
+            :value="$props.planetary"
+            :emit-function="$attrs['onUpdate:planetary']"
+          />
+
+          <NetworkItem
+            tooltip-text="Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP."
+            label="Mycelium"
+            :value="$props.mycelium"
+            :emit-function="$attrs['onUpdate:mycelium']"
+          />
+
+          <NetworkItem
+            tooltip-text="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
+            label="Add Wireguard Access"
+            :value="$props.wireguard"
+            :emit-function="$attrs['onUpdate:wireguard']"
+          />
+
+          <v-alert
+            v-if="error"
+            class="my-2"
+            type="warning"
+            variant="tonal"
+            text="You must enable at least one of network options."
+          />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </input-tooltip>
 </template>
 
 <script lang="ts">
@@ -104,48 +68,23 @@ import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
 
+import NetworkItem from "./NetworkItem.vue";
+
 export default {
   name: "Network",
+  components: { NetworkItem },
   props: {
-    required: {
-      type: Boolean,
-      default: () => false,
-    },
-    ipv4: {
-      type: Boolean,
-      default: () => null,
-    },
-    ipv6: {
-      type: Boolean,
-      default: () => null,
-    },
-    planetary: {
-      type: Boolean,
-      default: () => null,
-    },
-    mycelium: {
-      type: Boolean,
-      default: () => null,
-    },
-    wireguard: {
-      type: Boolean,
-      default: () => null,
-    },
-    disabled: { type: Boolean },
-    enableIpv4: {
-      type: Boolean,
-      default: () => null,
-    },
+    required: { type: Boolean, default: () => false },
+    ipv4: { type: Boolean, default: () => null },
+    ipv6: { type: Boolean, default: () => null },
+    planetary: { type: Boolean, default: () => null },
+    mycelium: { type: Boolean, default: () => null },
+    wireguard: { type: Boolean, default: () => null },
+    disabled: Boolean,
   },
-  emits: {
-    "update:ipv4": (value?: boolean) => value,
-    "update:ipv6": (value?: boolean) => value,
-    "update:planetary": (value?: boolean) => value,
-    "update:mycelium": (value?: boolean) => value,
-    "update:wireguard": (value?: boolean) => value,
-  },
-  setup(props, { expose }) {
+  setup(props) {
     const input = ref();
+    const $el = computed(() => input.value?.$el);
 
     if (
       props.ipv4 === null &&
@@ -156,11 +95,8 @@ export default {
     ) {
       throw new Error("You must provide at least one network  option");
     }
-    const error = computed(
-      () => !(props.ipv4 || props.ipv6 || props.planetary || props.wireguard || props.mycelium) && props.required,
-    );
-    expose({
-      error,
+    const error = computed(() => {
+      return !(props.ipv4 || props.ipv6 || props.planetary || props.wireguard || props.mycelium) && props.required;
     });
 
     /* Adapter to work with old code validation */
@@ -173,7 +109,7 @@ export default {
       reset: noop,
       status: ValidatorStatus.Valid,
       error: null,
-      $el: input,
+      $el,
       highlightOnError: true,
     };
 

From ffa1dd192ca0a2f69f54bd0197b9205cc58ccf6b Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 28 Aug 2024 17:11:35 +0300
Subject: [PATCH 02/16] feat: Apply solution to all need solutions

---
 packages/playground/src/components/input_tooltip.vue | 2 +-
 packages/playground/src/weblets/full_vm.vue          | 3 ---
 packages/playground/src/weblets/micro_vm.vue         | 2 --
 packages/playground/src/weblets/tf_discourse.vue     | 8 +-------
 packages/playground/src/weblets/tf_presearch.vue     | 2 --
 packages/playground/src/weblets/tf_staticwebsite.vue | 8 +-------
 packages/playground/src/weblets/tf_umbrel.vue        | 2 --
 packages/playground/src/weblets/tfrobot.vue          | 2 --
 8 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/packages/playground/src/components/input_tooltip.vue b/packages/playground/src/components/input_tooltip.vue
index ea6c8bd83e..e2b536cc99 100644
--- a/packages/playground/src/components/input_tooltip.vue
+++ b/packages/playground/src/components/input_tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex" v-if="!disabled">
+  <div class="d-flex" v-if="!disabled" v-bind="$attrs">
     <v-tooltip :text="tooltip || 'None!'" :location="location" :width="width ? width : ''">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index e9061aabb6..dc2e35984a 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -46,7 +46,6 @@
 
         <Network
           required
-          ref="network"
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:planetary="planetary"
@@ -155,7 +154,6 @@ const selectionDetails = ref<SelectionDetails>();
 
 const layout = useLayout();
 const tabs = ref();
-const profileManager = useProfileManager();
 const solution = ref() as Ref<SolutionFlavor>;
 const images: VmImage[] = [
   {
@@ -196,7 +194,6 @@ const wireguard = ref(false);
 const dedicated = ref(false);
 const certified = ref(false);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const hasGPU = ref(false);
 const rootFilesystemSize = computed(() =>
   flist.value?.name === "Ubuntu-24.04" || flist.value?.name === "Other" ? solution.value?.disk : 2,
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index 20be4f26ac..bcc811f116 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -53,7 +53,6 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          ref="network"
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -245,7 +244,6 @@ const mycelium = ref(true);
 const wireguard = ref(false);
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const dedicated = ref(false);
 const certified = ref(false);
 const selectionDetails = ref<SelectionDetails>();
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index bbb8c8f4ed..1b20b9c036 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -57,13 +57,7 @@
           :medium="{ cpu: 2, memory: 4, disk: 50 }"
           :large="{ cpu: 4, memory: 16, disk: 100 }"
         />
-        <Networks
-          v-model:mycelium="mycelium"
-          v-model:planetary="planetary"
-          v-model:ipv4="ipv4"
-          v-model:ipv6="ipv6"
-          enableIpv4
-        />
+        <Networks v-model:mycelium="mycelium" v-model:planetary="planetary" :ipv4="ipv4" v-model:ipv6="ipv6" />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index de9501a054..2ffec437ef 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -62,7 +62,6 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:ipv6="ipv6"
-          ref="network"
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -137,7 +136,6 @@ const rootFilesystemSize = calculateRootFileSystem({ CPUCores: cpu, RAMInMegaByt
 const dockerDiskSize = 10;
 const privateRestoreKey = ref("");
 const publicRestoreKey = ref("");
-const network = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/presearch-v2.3.flist",
   entryPoint: "/sbin/zinit init",
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index a1b3d2075f..f49bd05958 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -61,13 +61,7 @@
         :medium="{ cpu: 2, memory: 4, disk: 100 }"
       />
 
-      <Networks
-        ref="network"
-        v-model:ipv4="ipv4"
-        v-model:mycelium="mycelium"
-        v-model:planetary="planetary"
-        v-model:ipv6="ipv6"
-      />
+      <Networks v-model:ipv4="ipv4" v-model:mycelium="mycelium" v-model:planetary="planetary" v-model:ipv6="ipv6" />
 
       <input-tooltip
         inline
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 29d2e71d7c..808a1b372e 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -67,7 +67,6 @@
 
       <Network
         required
-        ref="network"
         v-model:ipv4="ipv4"
         v-model:planetary="planetary"
         v-model:wireguard="wireguard"
@@ -139,7 +138,6 @@ const ipv4 = ref(false);
 const ipv6 = ref(false);
 const planetary = ref(true);
 const wireguard = ref(false);
-const network = ref();
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/umbrel-latest.flist",
diff --git a/packages/playground/src/weblets/tfrobot.vue b/packages/playground/src/weblets/tfrobot.vue
index 111945ac6e..4a2bd7825b 100644
--- a/packages/playground/src/weblets/tfrobot.vue
+++ b/packages/playground/src/weblets/tfrobot.vue
@@ -52,7 +52,6 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          ref="network"
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -201,7 +200,6 @@ const mycelium = ref(true);
 const wireguard = ref(false);
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = computed(() => solution.value?.disk);

From d2a40aa0a1b15fad3abe51f48a2a5d40e390b00a Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 28 Aug 2024 17:39:25 +0300
Subject: [PATCH 03/16] feat: Support has-custom-domain in Networks component

---
 .../playground/src/components/networks.vue    | 20 ++++++++++++++++---
 packages/playground/src/weblets/freeflow.vue  |  6 +++++-
 .../playground/src/weblets/tf_casperlabs.vue  |  8 +++++++-
 .../playground/src/weblets/tf_discourse.vue   |  8 +++++++-
 .../playground/src/weblets/tf_funkwhale.vue   |  8 +++++++-
 packages/playground/src/weblets/tf_gitea.vue  |  2 ++
 .../playground/src/weblets/tf_mattermost.vue  |  8 +++++++-
 .../playground/src/weblets/tf_nextcloud.vue   |  8 +++++++-
 .../playground/src/weblets/tf_node_pilot.vue  |  1 +
 packages/playground/src/weblets/tf_nostr.vue  |  1 +
 .../playground/src/weblets/tf_owncloud.vue    |  7 ++++++-
 .../playground/src/weblets/tf_peertube.vue    |  8 +++++++-
 .../src/weblets/tf_staticwebsite.vue          |  8 +++++++-
 .../playground/src/weblets/tf_subsquid.vue    |  8 +++++++-
 packages/playground/src/weblets/tf_taiga.vue  |  8 +++++++-
 .../playground/src/weblets/tf_wordpress.vue   |  8 +++++++-
 16 files changed, 102 insertions(+), 15 deletions(-)

diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index d764493db0..56e8b2b2c2 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -45,7 +45,7 @@
             tooltip-text="Enabling WireGuard Access allows you to establish private, secure, and encrypted connections to your instance."
             label="Add Wireguard Access"
             :value="$props.wireguard"
-            :emit-function="$attrs['onUpdate:wireguard']"
+            :emit-function="readonlyWireguard ? undefined : $attrs['onUpdate:wireguard']"
           />
 
           <v-alert
@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import { noop } from "lodash";
-import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
 
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
@@ -80,9 +80,10 @@ export default {
     planetary: { type: Boolean, default: () => null },
     mycelium: { type: Boolean, default: () => null },
     wireguard: { type: Boolean, default: () => null },
+    hasCustomDomain: { type: Boolean, default: () => true },
     disabled: Boolean,
   },
-  setup(props) {
+  setup(props, { attrs }) {
     const input = ref();
     const $el = computed(() => input.value?.$el);
 
@@ -121,9 +122,22 @@ export default {
       form?.updateStatus(uid.toString(), fakeService.status);
     });
 
+    const readonlyWireguard = computed(() => props.hasCustomDomain && !props.ipv4);
+    watch(
+      readonlyWireguard,
+      readonly => {
+        const fn = attrs["onUpdate:wireguard"];
+        if (readonly && !props.wireguard && typeof fn === "function") {
+          fn(true);
+        }
+      },
+      { immediate: true },
+    );
+
     return {
       error,
       input,
+      readonlyWireguard,
     };
   },
 };
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 6e4e213565..837f2ecd68 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -46,7 +46,11 @@
         :large="{ cpu: 4, memory: 32, disk: 1000 }"
       />
 
-      <Networks v-model:ipv4="ipv4" v-model:ipv6="ipv6"></Networks>
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 8c78555b45..2d25c33a28 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -36,7 +36,13 @@
         :large="{ cpu: 8, memory: 32, disk: 1000 }"
       />
 
-      <Networks v-model:ipv4="ipv4" v-model:planetary="planetary" v-model:mycelium="mycelium" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:planetary="planetary"
+        v-model:mycelium="mycelium"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 1b20b9c036..33ba0a2139 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -57,7 +57,13 @@
           :medium="{ cpu: 2, memory: 4, disk: 50 }"
           :large="{ cpu: 4, memory: 16, disk: 100 }"
         />
-        <Networks v-model:mycelium="mycelium" v-model:planetary="planetary" :ipv4="ipv4" v-model:ipv6="ipv6" />
+        <Networks
+          v-model:mycelium="mycelium"
+          v-model:planetary="planetary"
+          :ipv4="ipv4"
+          v-model:ipv6="ipv6"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index e71b1549e0..86bb62bbc3 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -88,7 +88,13 @@
         :small="{ cpu: 1, memory: 2, disk: 50 }"
         :medium="{ cpu: 2, memory: 4, disk: 100 }"
       />
-      <Networks v-model:ipv4="ipv4" v-model:planetary="planetary" v-model:mycelium="mycelium" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:planetary="planetary"
+        v-model:mycelium="mycelium"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index e967c9d2eb..ed3dc71ccf 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -51,7 +51,9 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         />
+
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
         </input-tooltip>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 4f9c16b096..dfdc16270a 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -41,7 +41,13 @@
           :medium="{ cpu: 2, memory: 4, disk: 50 }"
           :large="{ cpu: 4, memory: 16, disk: 100 }"
         />
-        <Networks v-model:mycelium="mycelium" v-model:planetary="planetary" v-model:ipv4="ipv4" v-model:ipv6="ipv6" />
+        <Networks
+          v-model:mycelium="mycelium"
+          v-model:planetary="planetary"
+          v-model:ipv4="ipv4"
+          v-model:ipv6="ipv6"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 2ea5c686dd..8c0de1fd8a 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -35,7 +35,13 @@
         :large="{ cpu: 4, memory: 16, disk: 1000 }"
         v-model="solution"
       />
-      <Networks v-model:ipv4="ipv4" v-model:mycelium="mycelium" v-model:planetary="planetary" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:mycelium="mycelium"
+        v-model:planetary="planetary"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 8c760aa826..b75bbed958 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -40,6 +40,7 @@
         v-model:ipv6="ipv6"
         v-model:planetary="planetary"
         v-model:mycelium="mycelium"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index 9754a4d13e..171ecb72a8 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -44,6 +44,7 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index a33f9b0303..7a00a79260 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -78,7 +78,12 @@
           :medium="{ cpu: 4, memory: 16, disk: 500 }"
           :large="{ cpu: 8, memory: 32, disk: 1000 }"
         />
-        <Networks v-model:ipv4="ipv4" v-model:mycelium="mycelium" v-model:ipv6="ipv6" />
+        <Networks
+          v-model:ipv4="ipv4"
+          v-model:mycelium="mycelium"
+          v-model:ipv6="ipv6"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
         </input-tooltip>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 031f03a451..b021bab668 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -62,7 +62,13 @@
       </password-input-wrapper>
 
       <SelectSolutionFlavor v-model="solution" />
-      <Networks v-model:mycelium="mycelium" v-model:planetary="planetary" v-model:ipv6="ipv6" v-model:ipv4="ipv4" />
+      <Networks
+        v-model:mycelium="mycelium"
+        v-model:planetary="planetary"
+        v-model:ipv6="ipv6"
+        v-model:ipv4="ipv4"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index f49bd05958..c3346e3ed1 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -61,7 +61,13 @@
         :medium="{ cpu: 2, memory: 4, disk: 100 }"
       />
 
-      <Networks v-model:ipv4="ipv4" v-model:mycelium="mycelium" v-model:planetary="planetary" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:mycelium="mycelium"
+        v-model:planetary="planetary"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip
         inline
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 7d198cdaa6..44aa39bc36 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -50,7 +50,13 @@
         :medium="{ cpu: 2, memory: 4, disk: 100 }"
       />
 
-      <Networks v-model:mycelium="mycelium" v-model:planetary="planetary" v-model:ipv6="ipv6" v-model:ipv4="ipv4" />
+      <Networks
+        v-model:mycelium="mycelium"
+        v-model:planetary="planetary"
+        v-model:ipv6="ipv6"
+        v-model:ipv4="ipv4"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 41c8707d8c..c47a9d567e 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -90,7 +90,13 @@
           :small="{ cpu: 2, memory: 4, disk: 100 }"
           :medium="{ cpu: 4, memory: 8, disk: 150 }"
         />
-        <Networks v-model:mycelium="mycelium" v-model:ipv4="ipv4" v-model:planetary="planetary" v-model:ipv6="ipv6" />
+        <Networks
+          v-model:mycelium="mycelium"
+          v-model:ipv4="ipv4"
+          v-model:planetary="planetary"
+          v-model:ipv6="ipv6"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index 9786e915f6..b9ab6b67b4 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -89,7 +89,13 @@
         :large="{ cpu: 4, memory: 16, disk: 100 }"
       />
 
-      <Networks v-model:ipv4="ipv4" v-model:mycelium="mycelium" v-model:planetary="planetary" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:mycelium="mycelium"
+        v-model:planetary="planetary"
+        v-model:ipv6="ipv6"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />

From b0e953ef8c2e0c35d0fe3fbcb35e2a4fec820027 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 29 Aug 2024 13:20:29 +0300
Subject: [PATCH 04/16] chore: update default value for hasCustomDomain to
 'false'

---
 packages/playground/src/components/networks.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index 56e8b2b2c2..c6738b77cb 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import { noop } from "lodash";
-import { computed, getCurrentInstance, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
@@ -80,7 +80,7 @@ export default {
     planetary: { type: Boolean, default: () => null },
     mycelium: { type: Boolean, default: () => null },
     wireguard: { type: Boolean, default: () => null },
-    hasCustomDomain: { type: Boolean, default: () => true },
+    hasCustomDomain: { type: Boolean, default: () => false },
     disabled: Boolean,
   },
   setup(props, { attrs }) {

From 4b619af68fdf594d46ab3f3c4975ed430a401ab6 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 29 Aug 2024 15:20:53 +0300
Subject: [PATCH 05/16] feat: Add createNetworks function

---
 .../playground/src/components/networks.vue    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index b95d15ae54..2e02b523f5 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -63,13 +63,31 @@
 
 <script lang="ts">
 import { noop } from "lodash";
-import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, type Ref, ref, watch } from "vue";
 
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
 
 import NetworkItem from "./NetworkItem.vue";
 
+interface CreateNetworksOptions {
+  ipv4: boolean;
+  ipv6: boolean;
+  planetary: boolean;
+  mycelium: boolean;
+  wireguard: boolean;
+}
+
+export function createNetworks(options: Partial<CreateNetworksOptions> = {}): Ref<CreateNetworksOptions> {
+  return ref<CreateNetworksOptions>({
+    ipv4: options.ipv4 ?? false,
+    ipv6: options.ipv6 ?? false,
+    planetary: options.planetary ?? false,
+    mycelium: options.mycelium ?? true,
+    wireguard: options.wireguard ?? false,
+  });
+}
+
 export default {
   name: "Network",
   components: { NetworkItem },

From 7445413473d0de1e55bb863125ddac9fd52c0c18 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Sun, 1 Sep 2024 12:36:26 +0300
Subject: [PATCH 06/16] chore: Refactor useNetworks method

---
 .../playground/src/components/networks.vue     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index 2e02b523f5..6935309cbd 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import { noop } from "lodash";
-import { computed, getCurrentInstance, onMounted, onUnmounted, type Ref, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
@@ -78,14 +78,14 @@ interface CreateNetworksOptions {
   wireguard: boolean;
 }
 
-export function createNetworks(options: Partial<CreateNetworksOptions> = {}): Ref<CreateNetworksOptions> {
-  return ref<CreateNetworksOptions>({
-    ipv4: options.ipv4 ?? false,
-    ipv6: options.ipv6 ?? false,
-    planetary: options.planetary ?? false,
-    mycelium: options.mycelium ?? true,
-    wireguard: options.wireguard ?? false,
-  });
+export function useNetworks(options: Partial<CreateNetworksOptions> = {}) {
+  return {
+    ipv4: ref(options.ipv4 ?? false),
+    ipv6: ref(options.ipv6 ?? false),
+    planetary: ref(options.planetary ?? false),
+    mycelium: ref(options.mycelium ?? true),
+    wireguard: ref(options.wireguard ?? false),
+  };
 }
 
 export default {

From c2762cdea0940fa965284dbcf94b00964bfe53d2 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Sun, 1 Sep 2024 12:36:58 +0300
Subject: [PATCH 07/16] feat: Use 'useNetworks' in freeflow solution

---
 packages/playground/src/weblets/freeflow.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index bf7108b2db..9788b88baa 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -46,7 +46,7 @@
         :large="{ cpu: 4, memory: 32, disk: 1000 }"
       />
 
-      <Network
+      <Networks
         required
         v-model:ipv4="ipv4"
         v-model:ipv6="ipv6"
@@ -112,11 +112,7 @@ const flist = ref<Flist>();
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, wireguard, planetary, mycelium } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -226,7 +222,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -235,6 +231,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFFreeflow",
-  components: { SelectSolutionFlavor, Network, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>

From 954d9794a26407d6eac1a5a621c3eb24de757e03 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Sun, 1 Sep 2024 12:37:14 +0300
Subject: [PATCH 08/16] feat: Use 'useNetworks' in full_vm solution

---
 packages/playground/src/weblets/full_vm.vue | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 5d345c4e67..21bcb79df6 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -44,7 +44,7 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
@@ -141,9 +141,9 @@ import { computed, type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useGrid, useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import type { solutionFlavor as SolutionFlavor } from "../types";
 import { type Flist, ProjectName } from "../types";
 import { deployVM, type Disk } from "../utils/deploy_vm";
@@ -186,11 +186,7 @@ const images: VmImage[] = [
 const selectedSSHKeys = ref("");
 const name = ref(generateName({ prefix: "vm" }));
 const flist = ref<Flist>();
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
+const { ipv4, ipv6, mycelium, planetary, wireguard } = useNetworks();
 const dedicated = ref(false);
 const certified = ref(false);
 const disks = ref<Disk[]>([]);

From a9ff88fd926fc72aab30a18730b8a1bb49ea50ef Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Sun, 1 Sep 2024 12:38:55 +0300
Subject: [PATCH 09/16] feat: Use 'useNetworks' in jenkins solution

---
 packages/playground/src/weblets/jenkins.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/playground/src/weblets/jenkins.vue b/packages/playground/src/weblets/jenkins.vue
index 7b3f6b43a7..b21f97fe3d 100644
--- a/packages/playground/src/weblets/jenkins.vue
+++ b/packages/playground/src/weblets/jenkins.vue
@@ -133,10 +133,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const mycelium = ref(true);
-const planetary = ref(true);
+const { ipv4, ipv6, mycelium, planetary } = useNetworks();
 const selectionDetails = ref<SelectionDetails>();
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
@@ -240,7 +237,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";

From 8c30abffe1769cfbaf4ea28295e8e91d2f9a7515 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Sun, 1 Sep 2024 12:57:55 +0300
Subject: [PATCH 10/16] feat: Use 'useNetworks' in all solutions

---
 packages/playground/src/weblets/jenkins.vue          |  2 +-
 packages/playground/src/weblets/micro_vm.vue         | 10 +++-------
 packages/playground/src/weblets/tf_algorand.vue      |  8 ++------
 packages/playground/src/weblets/tf_casperlabs.vue    |  8 ++------
 packages/playground/src/weblets/tf_discourse.vue     |  8 ++------
 packages/playground/src/weblets/tf_funkwhale.vue     |  8 ++------
 packages/playground/src/weblets/tf_gitea.vue         | 10 +++-------
 packages/playground/src/weblets/tf_mattermost.vue    |  8 ++------
 packages/playground/src/weblets/tf_nextcloud.vue     |  8 ++------
 packages/playground/src/weblets/tf_node_pilot.vue    | 12 ++++--------
 packages/playground/src/weblets/tf_nostr.vue         | 12 ++++--------
 packages/playground/src/weblets/tf_owncloud.vue      |  8 ++------
 packages/playground/src/weblets/tf_peertube.vue      | 10 +++-------
 packages/playground/src/weblets/tf_presearch.vue     | 10 +++-------
 packages/playground/src/weblets/tf_staticwebsite.vue | 10 +++-------
 packages/playground/src/weblets/tf_subsquid.vue      | 10 +++-------
 packages/playground/src/weblets/tf_taiga.vue         |  8 ++------
 packages/playground/src/weblets/tf_umbrel.vue        | 12 ++++--------
 packages/playground/src/weblets/tf_wordpress.vue     | 10 +++-------
 packages/playground/src/weblets/tfrobot.vue          | 10 +++-------
 20 files changed, 53 insertions(+), 129 deletions(-)

diff --git a/packages/playground/src/weblets/jenkins.vue b/packages/playground/src/weblets/jenkins.vue
index b21f97fe3d..ad4a8bfa39 100644
--- a/packages/playground/src/weblets/jenkins.vue
+++ b/packages/playground/src/weblets/jenkins.vue
@@ -133,7 +133,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const { ipv4, ipv6, mycelium, planetary } = useNetworks();
+const { ipv4, ipv6, mycelium, planetary } = useNetworks({ planetary: true });
 const selectionDetails = ref<SelectionDetails>();
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index 40d547840b..62eb3abfc9 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -46,7 +46,7 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
@@ -181,7 +181,7 @@ import { type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
@@ -237,11 +237,7 @@ const images = [
 
 const name = ref(generateName({ prefix: "vm" }));
 const flist = ref<Flist>();
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index ca05ed8829..42912327d3 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -126,11 +126,7 @@ const flist: Flist = {
   entryPoint: "/sbin/zinit init",
 };
 const name = ref(generateName({ prefix: "al" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const cpu = ref() as Ref<number>;
 const memory = ref() as Ref<number>;
 const storage = ref() as Ref<number>;
@@ -215,7 +211,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient } from "@threefold/grid_client";
 
 import AlgorandCapacity from "../components/algorand_capacity.vue";
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index bd6965fb1c..ef5257a8e8 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -104,11 +104,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -209,7 +205,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index d1e21d766f..c22f11380e 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -129,11 +129,7 @@ const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "dc" }));
 const email = ref(profileManager.profile?.email || "");
 const solution = ref() as Ref<SolutionFlavor>;
-const ipv4 = ref(true);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks({ ipv4: true });
 const smtp = ref(createSMTPServer());
 const dedicated = ref(false);
 const certified = ref(false);
@@ -269,7 +265,7 @@ watch(
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index e99be034e5..2e7fd55854 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -162,11 +162,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
 const selectedSSHKeys = ref("");
@@ -271,7 +267,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index f7ad8db0c6..22221eceb0 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -44,7 +44,7 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
@@ -98,7 +98,7 @@ import { computed, type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
@@ -111,11 +111,7 @@ const tabs = ref();
 
 const selectionDetails = ref<SelectionDetails>();
 const name = ref(generateName({ prefix: "gt" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
 const certified = ref(false);
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index a4db6815d9..3e12c8d729 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -113,11 +113,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
@@ -252,7 +248,7 @@ watch(
 <script lang="ts">
 import { updateGrid } from "@/utils/grid";
 
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 4e89297864..9205e2da95 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -103,11 +103,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -222,7 +218,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 4fe41a3ceb..91386d3ded 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -34,7 +34,7 @@
         :large="{ cpu: 8, memory: 32, disk: 2000 }"
         v-model="solution"
       />
-      <Network
+      <Networks
         required
         v-model:ipv4="ipv4"
         v-model:ipv6="ipv6"
@@ -76,11 +76,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type Ref, ref, watch } from "vue";
+import { type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import { type Flist, ProjectName } from "../types";
@@ -95,11 +95,7 @@ const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-vms/node-pilot-zdbfs.flist",
   entryPoint: "/",
 };
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = 2;
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index e10a0a0415..7a68d176b8 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -37,7 +37,7 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
@@ -81,11 +81,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
@@ -98,11 +98,7 @@ const tabs = ref();
 const selectionDetails = ref<SelectionDetails>();
 
 const name = ref(generateName({ prefix: "nt" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
 const certified = ref(false);
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index bc52bc3c1f..f16e824b79 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -155,11 +155,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
@@ -297,7 +293,7 @@ watch(
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index b8a7d929b0..d6b68c60c1 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -105,7 +105,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
@@ -131,14 +131,10 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
-const mycelium = ref(true);
-const planetary = ref(false);
 const selectedSSHKeys = ref("");
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
@@ -241,7 +237,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 1be26cc297..4bf38030d9 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -56,7 +56,7 @@
           </password-input-wrapper>
         </input-validator>
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:planetary="planetary"
@@ -116,7 +116,7 @@ import { ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
 import { type Flist, ProjectName } from "../types";
@@ -128,11 +128,7 @@ const layout = useLayout();
 const tabs = ref();
 const name = ref(generateName({ prefix: "ps" }));
 const code = ref("");
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const cpu = 1;
 const memory = 512;
 const rootFilesystemSize = calculateRootFileSystem({ CPUCores: cpu, RAMInMegaBytes: memory });
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index ca8886683b..e257397bca 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -107,7 +107,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
@@ -129,11 +129,7 @@ const gitBranch = ref("");
 const root = ref("");
 const domain = ref();
 
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
   // Should be upgraded to an oficial Flist
@@ -269,7 +265,7 @@ async function isGithubRepoExist(gitUrl: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index cd964d1062..c1ab9cbef3 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -93,7 +93,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
@@ -112,11 +112,7 @@ const selectionDetails = ref<SelectionDetails>();
 
 const name = ref(generateName({ prefix: "ss" }));
 const endpoint = ref("");
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/subsquid-latest.flist",
@@ -229,7 +225,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index b613492cb8..997f348747 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -168,11 +168,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
@@ -309,7 +305,7 @@ watch(
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index b43680479b..c708af7497 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -65,7 +65,7 @@
         </input-validator>
       </password-input-wrapper>
 
-      <Network
+      <Networks
         required
         v-model:ipv4="ipv4"
         v-model:planetary="planetary"
@@ -118,11 +118,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -137,11 +137,7 @@ const selectionDetails = ref<SelectionDetails>();
 const name = ref(generateName({ prefix: "um" }));
 const username = ref("admin");
 const password = ref(generatePassword());
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/umbrel-latest.flist",
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index e8f059a925..42861821e2 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -132,7 +132,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { updateGrid } from "@/utils/grid";
 import { manual } from "@/utils/manual";
@@ -161,11 +161,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -270,7 +266,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tfrobot.vue b/packages/playground/src/weblets/tfrobot.vue
index 8d192efc58..5ff90c72ec 100644
--- a/packages/playground/src/weblets/tfrobot.vue
+++ b/packages/playground/src/weblets/tfrobot.vue
@@ -45,7 +45,7 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
@@ -181,7 +181,7 @@ import { computed, type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
@@ -193,11 +193,7 @@ const layout = useLayout();
 const tabs = ref();
 
 const name = ref(generateName({ prefix: "tfr" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);

From 30b685a62cfda801ab6cf2015196981cde47ad12 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Mon, 2 Sep 2024 11:34:09 +0300
Subject: [PATCH 11/16] fix: mark wg input as readonly if domain is needed
 while use didn't enable ipv4

---
 packages/playground/src/components/networks.vue      | 6 +++---
 packages/playground/src/weblets/freeflow.vue         | 2 +-
 packages/playground/src/weblets/tf_casperlabs.vue    | 2 +-
 packages/playground/src/weblets/tf_discourse.vue     | 2 +-
 packages/playground/src/weblets/tf_funkwhale.vue     | 2 +-
 packages/playground/src/weblets/tf_gitea.vue         | 2 +-
 packages/playground/src/weblets/tf_mattermost.vue    | 2 +-
 packages/playground/src/weblets/tf_nextcloud.vue     | 2 +-
 packages/playground/src/weblets/tf_node_pilot.vue    | 2 +-
 packages/playground/src/weblets/tf_nostr.vue         | 2 +-
 packages/playground/src/weblets/tf_owncloud.vue      | 2 +-
 packages/playground/src/weblets/tf_peertube.vue      | 2 +-
 packages/playground/src/weblets/tf_staticwebsite.vue | 2 +-
 packages/playground/src/weblets/tf_subsquid.vue      | 2 +-
 packages/playground/src/weblets/tf_taiga.vue         | 2 +-
 packages/playground/src/weblets/tf_wordpress.vue     | 2 +-
 16 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index 6935309cbd..27ebe5883a 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -98,7 +98,7 @@ export default {
     planetary: { type: Boolean, default: () => null },
     mycelium: { type: Boolean, default: () => null },
     wireguard: { type: Boolean, default: () => null },
-    hasCustomDomain: { type: Boolean, default: () => false },
+    requireDomain: { type: Boolean, default: () => false },
     disabled: Boolean,
   },
   setup(props, { attrs }) {
@@ -141,12 +141,12 @@ export default {
     });
 
     const wireguardTooltip = computed(() =>
-      props.hasCustomDomain
+      props.requireDomain
         ? "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections. Please note that this field will be read-only unless you use a custom domain with IPV4."
         : "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections.",
     );
 
-    const readonlyWireguard = computed(() => props.hasCustomDomain && !props.ipv4);
+    const readonlyWireguard = computed(() => props.requireDomain && !props.ipv4);
     watch(
       readonlyWireguard,
       readonly => {
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 9788b88baa..b5d89e19ac 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -53,7 +53,7 @@
         v-model:planetary="planetary"
         v-model:mycelium="mycelium"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index ef5257a8e8..21144212a6 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -42,7 +42,7 @@
         v-model:mycelium="mycelium"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index c22f11380e..756804aac3 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -63,7 +63,7 @@
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
           :ipv4="ipv4"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 2e7fd55854..f92b063f2e 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -94,7 +94,7 @@
         v-model:mycelium="mycelium"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index 22221eceb0..3182eec27b 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -51,7 +51,7 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 3e12c8d729..c9cd137967 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -47,7 +47,7 @@
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 9205e2da95..8fc42b24c9 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -41,7 +41,7 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 91386d3ded..9fce02c901 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -41,7 +41,7 @@
         v-model:planetary="planetary"
         v-model:mycelium="mycelium"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index 7a68d176b8..176ac0f120 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -44,7 +44,7 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index f16e824b79..dd312cf9a2 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -84,7 +84,7 @@
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
           v-model:planetary="planetary"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index d6b68c60c1..39d0a09a04 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -68,7 +68,7 @@
         v-model:ipv6="ipv6"
         v-model:ipv4="ipv4"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index e257397bca..1148bae327 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -67,7 +67,7 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index c1ab9cbef3..a3583b2510 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -56,7 +56,7 @@
         v-model:ipv6="ipv6"
         v-model:ipv4="ipv4"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 997f348747..41b150b7c5 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -96,7 +96,7 @@
           v-model:planetary="planetary"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index 42861821e2..da8921ede3 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -95,7 +95,7 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">

From ae7692076b0234363fbf4bb9c879f53c15e52982 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Mon, 2 Sep 2024 17:29:31 +0300
Subject: [PATCH 12/16] fix: mark wg input as readonly if domain is needed
 while use didn't enable ipv4

---
 .../playground/src/components/manage_gateway_dialog.vue  | 8 +++++++-
 packages/playground/src/components/networks.vue          | 9 +++++++--
 packages/playground/src/weblets/freeflow.vue             | 2 ++
 packages/playground/src/weblets/jenkins.vue              | 1 +
 packages/playground/src/weblets/tf_casperlabs.vue        | 2 ++
 packages/playground/src/weblets/tf_discourse.vue         | 2 ++
 packages/playground/src/weblets/tf_domains.vue           | 8 +++++++-
 packages/playground/src/weblets/tf_funkwhale.vue         | 2 ++
 packages/playground/src/weblets/tf_gitea.vue             | 2 ++
 packages/playground/src/weblets/tf_mattermost.vue        | 2 ++
 packages/playground/src/weblets/tf_nextcloud.vue         | 2 ++
 packages/playground/src/weblets/tf_node_pilot.vue        | 2 ++
 packages/playground/src/weblets/tf_nostr.vue             | 2 ++
 packages/playground/src/weblets/tf_owncloud.vue          | 2 ++
 packages/playground/src/weblets/tf_peertube.vue          | 2 ++
 packages/playground/src/weblets/tf_staticwebsite.vue     | 2 ++
 packages/playground/src/weblets/tf_subsquid.vue          | 2 ++
 packages/playground/src/weblets/tf_taiga.vue             | 2 ++
 packages/playground/src/weblets/tf_wordpress.vue         | 2 ++
 19 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index f3da97d1b4..4b3a897ac9 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -101,7 +101,13 @@
             </input-tooltip>
 
             <div :style="{ marginTop: '-10px' }">
-              <TfSelectionDetails disable-node-selection require-domain use-fqdn v-model="selectionDetails" />
+              <TfSelectionDetails
+                disable-node-selection
+                :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+                require-domain
+                use-fqdn
+                v-model="selectionDetails"
+              />
             </div>
 
             <input-validator :value="port" :rules="portRules" #="{ props }">
diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index 27ebe5883a..52f0ec595b 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -99,6 +99,7 @@ export default {
     mycelium: { type: Boolean, default: () => null },
     wireguard: { type: Boolean, default: () => null },
     requireDomain: { type: Boolean, default: () => false },
+    hasCustomDomain: { type: Boolean, default: () => false },
     disabled: Boolean,
   },
   setup(props, { attrs }) {
@@ -140,13 +141,17 @@ export default {
       form?.updateStatus(uid.toString(), fakeService.status);
     });
 
+    const readonlyWireguard = computed(() => {
+      if (!props.requireDomain) return false;
+      return !(props.hasCustomDomain && props.ipv4);
+    });
+
     const wireguardTooltip = computed(() =>
-      props.requireDomain
+      readonlyWireguard.value
         ? "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections. Please note that this field will be read-only unless you use a custom domain with IPV4."
         : "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections.",
     );
 
-    const readonlyWireguard = computed(() => props.requireDomain && !props.ipv4);
     watch(
       readonlyWireguard,
       readonly => {
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index b5d89e19ac..d86ba05b87 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -53,6 +53,7 @@
         v-model:planetary="planetary"
         v-model:mycelium="mycelium"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -76,6 +77,7 @@
           rootFilesystemSize,
           ssdDisks: disks.map(d => d.size),
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/jenkins.vue b/packages/playground/src/weblets/jenkins.vue
index ad4a8bfa39..7dbc87a516 100644
--- a/packages/playground/src/weblets/jenkins.vue
+++ b/packages/playground/src/weblets/jenkins.vue
@@ -89,6 +89,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 21144212a6..7e0264dd27 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -42,6 +42,7 @@
         v-model:mycelium="mycelium"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -64,6 +65,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 756804aac3..4c679437de 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -63,6 +63,7 @@
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
           :ipv4="ipv4"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
@@ -85,6 +86,7 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_domains.vue b/packages/playground/src/weblets/tf_domains.vue
index 50f0e09c78..8dc53c121c 100644
--- a/packages/playground/src/weblets/tf_domains.vue
+++ b/packages/playground/src/weblets/tf_domains.vue
@@ -23,7 +23,13 @@
         </input-tooltip>
 
         <div :style="{ marginTop: '-10px' }">
-          <TfSelectionDetails disable-node-selection require-domain use-fqdn v-model="selectionDetails" />
+          <TfSelectionDetails
+            disable-node-selection
+            :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+            require-domain
+            use-fqdn
+            v-model="selectionDetails"
+          />
         </div>
 
         <input-tooltip tooltip="The port used to access the machine.">
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index f92b063f2e..387b84a88e 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -94,6 +94,7 @@
         v-model:mycelium="mycelium"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -116,6 +117,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index 3182eec27b..1a0c76dd19 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -51,6 +51,7 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
@@ -75,6 +76,7 @@
             rootFilesystemSize,
           }"
           v-model="selectionDetails"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index c9cd137967..6a2e8d347b 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -47,6 +47,7 @@
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
@@ -69,6 +70,7 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 8fc42b24c9..2d9fcb7f88 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -41,6 +41,7 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -63,6 +64,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 9fce02c901..63d7d6ccce 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -41,6 +41,7 @@
         v-model:planetary="planetary"
         v-model:mycelium="mycelium"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -63,6 +64,7 @@
           rootFilesystemSize,
         }"
         v-model="selectionDetails"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index 176ac0f120..340ab433a7 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -44,6 +44,7 @@
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -67,6 +68,7 @@
             rootFilesystemSize,
           }"
           v-model="selectionDetails"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index dd312cf9a2..684bb48aac 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -84,6 +84,7 @@
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
           v-model:planetary="planetary"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -105,6 +106,7 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 39d0a09a04..e5c50f00bf 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -68,6 +68,7 @@
         v-model:ipv6="ipv6"
         v-model:ipv4="ipv4"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -90,6 +91,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index 1148bae327..88bb9e6500 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -67,6 +67,7 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -93,6 +94,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index a3583b2510..c4f987527d 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -56,6 +56,7 @@
         v-model:ipv6="ipv6"
         v-model:ipv4="ipv4"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -78,6 +79,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 41b150b7c5..180a08a4b5 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -96,6 +96,7 @@
           v-model:planetary="planetary"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
@@ -118,6 +119,7 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index da8921ede3..91436abcae 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -95,6 +95,7 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
@@ -117,6 +118,7 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />

From 96851d88fd6c819616e36de47e15deec5cbe0e20 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 4 Sep 2024 13:18:31 +0300
Subject: [PATCH 13/16] chore: Remove has-custom-domain from TfSelectionDetails
 component

---
 .../playground/src/components/manage_gateway_dialog.vue   | 8 +-------
 packages/playground/src/weblets/freeflow.vue              | 1 -
 packages/playground/src/weblets/jenkins.vue               | 1 -
 packages/playground/src/weblets/tf_casperlabs.vue         | 1 -
 packages/playground/src/weblets/tf_discourse.vue          | 1 -
 packages/playground/src/weblets/tf_domains.vue            | 8 +-------
 packages/playground/src/weblets/tf_funkwhale.vue          | 1 -
 packages/playground/src/weblets/tf_gitea.vue              | 1 -
 packages/playground/src/weblets/tf_mattermost.vue         | 1 -
 packages/playground/src/weblets/tf_nextcloud.vue          | 1 -
 packages/playground/src/weblets/tf_node_pilot.vue         | 1 -
 packages/playground/src/weblets/tf_nostr.vue              | 1 -
 packages/playground/src/weblets/tf_owncloud.vue           | 1 -
 packages/playground/src/weblets/tf_peertube.vue           | 1 -
 packages/playground/src/weblets/tf_staticwebsite.vue      | 1 -
 packages/playground/src/weblets/tf_subsquid.vue           | 1 -
 packages/playground/src/weblets/tf_taiga.vue              | 1 -
 packages/playground/src/weblets/tf_wordpress.vue          | 1 -
 18 files changed, 2 insertions(+), 30 deletions(-)

diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 84532d4b5a..ee9780bfd1 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -104,13 +104,7 @@
             </input-tooltip>
 
             <div :style="{ marginTop: '-10px' }">
-              <TfSelectionDetails
-                disable-node-selection
-                :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
-                require-domain
-                use-fqdn
-                v-model="selectionDetails"
-              />
+              <TfSelectionDetails disable-node-selection require-domain use-fqdn v-model="selectionDetails" />
             </div>
 
             <input-validator :value="port" :rules="portRules" #="{ props }">
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index d86ba05b87..83058900c6 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -77,7 +77,6 @@
           rootFilesystemSize,
           ssdDisks: disks.map(d => d.size),
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/jenkins.vue b/packages/playground/src/weblets/jenkins.vue
index 7dbc87a516..ad4a8bfa39 100644
--- a/packages/playground/src/weblets/jenkins.vue
+++ b/packages/playground/src/weblets/jenkins.vue
@@ -89,7 +89,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 7e0264dd27..569bbb4df3 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -65,7 +65,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 4c679437de..356e3adfa8 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -86,7 +86,6 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_domains.vue b/packages/playground/src/weblets/tf_domains.vue
index 8dc53c121c..50f0e09c78 100644
--- a/packages/playground/src/weblets/tf_domains.vue
+++ b/packages/playground/src/weblets/tf_domains.vue
@@ -23,13 +23,7 @@
         </input-tooltip>
 
         <div :style="{ marginTop: '-10px' }">
-          <TfSelectionDetails
-            disable-node-selection
-            :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
-            require-domain
-            use-fqdn
-            v-model="selectionDetails"
-          />
+          <TfSelectionDetails disable-node-selection require-domain use-fqdn v-model="selectionDetails" />
         </div>
 
         <input-tooltip tooltip="The port used to access the machine.">
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 387b84a88e..4cc7aafe7e 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -117,7 +117,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index 1a0c76dd19..785b5f54fc 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -76,7 +76,6 @@
             rootFilesystemSize,
           }"
           v-model="selectionDetails"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 6a2e8d347b..f539fe6104 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -70,7 +70,6 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 2d9fcb7f88..2ee0911ab6 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -64,7 +64,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 63d7d6ccce..e7cbc4835c 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -64,7 +64,6 @@
           rootFilesystemSize,
         }"
         v-model="selectionDetails"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
 
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index 340ab433a7..2e8df05e12 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -68,7 +68,6 @@
             rootFilesystemSize,
           }"
           v-model="selectionDetails"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
 
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 684bb48aac..efc91a42b4 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -106,7 +106,6 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index e5c50f00bf..62c32d729b 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -91,7 +91,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index 88bb9e6500..483db0c094 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -94,7 +94,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index c4f987527d..fda71ecf21 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -79,7 +79,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 180a08a4b5..8034cdcb95 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -119,7 +119,6 @@
             memory: solution?.memory,
             rootFilesystemSize,
           }"
-          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
           v-model="selectionDetails"
         />
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index 91436abcae..08a51ee7f3 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -118,7 +118,6 @@
           memory: solution?.memory,
           rootFilesystemSize,
         }"
-        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
         v-model="selectionDetails"
       />

From 0f0f9c93b8b40cd0ba6037d60230ea022440c834 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 4 Sep 2024 13:26:28 +0300
Subject: [PATCH 14/16] chore: turn ipv4 into readonly in caprover

---
 packages/playground/src/components/caprover_worker.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/playground/src/components/caprover_worker.vue b/packages/playground/src/components/caprover_worker.vue
index 705253bee5..9dd94ab18d 100644
--- a/packages/playground/src/components/caprover_worker.vue
+++ b/packages/playground/src/components/caprover_worker.vue
@@ -25,12 +25,11 @@
 
     <Networks
       required
-      v-model:ipv4="$props.modelValue.ipv4"
+      :ipv4="$props.modelValue.ipv4"
       v-model:ipv6="$props.modelValue.ipv6"
       v-model:planetary="$props.modelValue.planetary"
       v-model:mycelium="$props.modelValue.mycelium"
       v-model:wireguard="$props.modelValue.wireguard"
-      enableIpv4
     />
 
     <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">

From a5e7957f3e0238aaa0824a3dd52f9b9e05452969 Mon Sep 17 00:00:00 2001
From: 0oM4R <omarkassem099@gmail.com>
Date: Wed, 30 Oct 2024 18:18:16 +0300
Subject: [PATCH 15/16] chore: jenkins add wireguard,

---
 packages/playground/src/weblets/jenkins.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/weblets/jenkins.vue b/packages/playground/src/weblets/jenkins.vue
index ad4a8bfa39..e33912e48b 100644
--- a/packages/playground/src/weblets/jenkins.vue
+++ b/packages/playground/src/weblets/jenkins.vue
@@ -68,7 +68,15 @@
         :large="{ cpu: 4, memory: 16, disk: 1000 }"
         v-model="solution"
       />
-      <Networks v-model:ipv4="ipv4" v-model:planetary="planetary" v-model:mycelium="mycelium" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:planetary="planetary"
+        v-model:mycelium="mycelium"
+        v-model:ipv6="ipv6"
+        v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -133,7 +141,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const { ipv4, ipv6, mycelium, planetary } = useNetworks({ planetary: true });
+const { ipv4, ipv6, mycelium, planetary, wireguard } = useNetworks();
 const selectionDetails = ref<SelectionDetails>();
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
@@ -170,7 +178,7 @@ async function deploy() {
     vm = await deployVM(grid!, {
       name: name.value,
       network: {
-        addAccess: selectionDetails.value!.domain!.enableSelectedDomain,
+        addAccess: wireguard.value || selectionDetails.value!.domain!.enableSelectedDomain,
         accessNodeId: selectionDetails.value?.domain?.selectedDomain?.nodeId,
       },
       machines: [

From a2eae588b9b7b70d32e09e9a8d4509a38e3df385 Mon Sep 17 00:00:00 2001
From: 0oM4R <omarkassem099@gmail.com>
Date: Wed, 30 Oct 2024 18:21:45 +0300
Subject: [PATCH 16/16] chore: wirguard set wg value to false when
 readonlywireguard is false

---
 packages/playground/src/components/networks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index 52f0ec595b..8fc92e0040 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -158,7 +158,7 @@ export default {
         const fn = attrs["onUpdate:wireguard"];
         if (readonly && !props.wireguard && typeof fn === "function") {
           fn(true);
-        }
+        } else fn(false);
       },
       { immediate: true },
     );