refacto(services): per service form components

components/ConfigForm.vue

@@ -1,27 +1,14 @@
 <script setup>
 import NixCode from "./NixCode.vue"
 import NixForm from "./NixForm.vue"
+import { provide, ref } from 'vue'
 
-</script>
+let nixin = {
-
-<script>
-export default {
-  beforeMount() {
-    this.availableServices.forEach((s) => {
-      s.inBundle = []
-    })
-    this.availableBundles.forEach((b) => {
-      b.services.forEach((s) => {
-        this.availableServices.find(item => item.id === s).inBundle.push(b.id);
-      })
-    })
-  },
-  data() {
-    return {
   netconf: 'autoconfig',
   networkingHostname: '',
   networkingDomain: 'distrilab.eu',
-      availableBundles: [{
+  availableBundles: [
+    {
     "id": "writeCollectively",
     "name": "Write collectively : pads",
     "services": [
@@ -44,7 +31,8 @@ export default {
       ]
 
     }],
-      availableServices: [{
+  availableServices: [
+    {
     "id": "hedgedoc",
     "name": "Hedgedoc : realtime collaborative markdown editor"
     },
@@ -76,39 +64,48 @@ export default {
       "id": "nixin",
       "name": "NixiN : web ui for configurations"
     }],
-      nixinBundles: [],
+  bundles: [],
-      nixinServices: [],
+  services: [],
   timezone: 'Etc/UTC',
   locale: 'en_US.UTF-8',
   user: 'operator',
   userPassword: 'CHANGE ME !!!',
-    }
+}
-  },
+
-  methods: {
+nixin.availableServices.forEach((s) => {
-    netconfHasBeenChanged(val = '') {
+  s.inBundle = []
+})
+nixin.availableBundles.forEach((b) => {
+  b.services.forEach((s) => {
+    nixin.availableServices.find(item => item.id === s).inBundle.push(b.id);
+  })
+})
+nixin=ref(nixin)
+provide('nixin', nixin)
+
+function netconfHasBeenChanged(val = '') {
   if (val === 'autoconfig') {
-        this.networkingDomain = 'distrilab.org'
+    nixin.networkingDomain = 'distrilab.org'
   } else {
-        this.networkingDomain = ''
+    nixin.networkingDomain = ''
   }
-    },
+}
-    selectServices(bundleId, services) {
+
-      if (this.nixinBundles.includes(bundleId)) {
+function selectServices(bundleId, services) {
+  if (nixin.value.bundles.includes(bundleId)) {
     services.forEach((s) => {
-          if (this.nixinServices.indexOf(s) === -1) {
+      if (nixin.value.services.indexOf(s) === -1) {
-            this.nixinServices.push(s)
+        nixin.value.services.push(s)
       }
     })
   } else {
     services.forEach((s) => {
-          const index = this.nixinServices.indexOf(s);
+      const index = nixin.value.services.indexOf(s);
       if (index > -1) {
-            this.nixinServices.splice(index, 1);
+        nixin.value.services.splice(index, 1);
       }
     })
   }
-    }
-  }
 }
 </script>
 
@@ -117,34 +114,34 @@ export default {
     <div class="form-cell">
       <strong>Choose your network configuration</strong>
       <label>
-        <input type="radio" v-model="netconf" name="netconf" value="autoconfig"
+        <input type="radio" v-model="nixin.netconf" value="autoconfig"
           @click="netconfHasBeenChanged('autoconfig')">I'm a noob in network config, I trust you to provide networking
         for me (ipv6 only)</label>
       <label>
-        <input type="radio" v-model="netconf" name="netconf" value="publicip" @click="netconfHasBeenChanged">My server
+        <input type="radio" v-model="nixin.netconf" value="publicip" @click="netconfHasBeenChanged">My server
         has a public ip that I can provide
       </label>
       <label>
-        <input type="radio" v-model="netconf" name="netconf" value="localnetwork" @click="netconfHasBeenChanged">My
+        <input type="radio" v-model="nixin.netconf" value="localnetwork" @click="netconfHasBeenChanged">My
         router is set so that my local machine is accessible on the public network
       </label>
       <label>
-        <input type="radio" v-model="netconf" name="netconf" value="wireguard" @click="netconfHasBeenChanged">My server can use a wireguard server i can configure
+        <input type="radio" v-model="nixin.netconf" value="wireguard" @click="netconfHasBeenChanged">My server can use a wireguard server i can configure
       </label>
     </div>
 
   <div class="form-row">
     <div class="form-cell">
       <label>Machine network name</label>
-      <input required type="text" v-model="networkingHostname"
+      <input required type="text" v-model="nixin.networkingHostname"
         placeholder="Give your machine a name without spaces, ponctuation or accents" />
     </div>
   </div>
-  <input v-if="netconf === 'autoconfig'" type="hidden" value="distrilab.fr" />
+  <input v-if="nixin.netconf === 'autoconfig'" type="hidden" value="distrilab.fr" />
-  <div class="form-row" v-if="netconf !== 'autoconfig'">
+  <div class="form-row" v-if="nixin.netconf !== 'autoconfig'">
     <div class="form-cell">
       <label>Domain name</label>
-      <input required type="text" v-model="networkingDomain" placeholder="ex: distrilab.fr" />
+      <input required type="text" v-model="nixin.networkingDomain" placeholder="ex: distrilab.fr" />
     </div>
   </div>
 
@@ -152,9 +149,9 @@ export default {
   <div class="form-row">
     <div class="form-cell">
       <strong>Choose your usage bundles (multiple choices possible if your machine can handle it)</strong>
-      <div v-for="bundle in availableBundles" :key="bundle">
+      <div v-for="bundle in nixin.availableBundles" :key="bundle">
         <label>
-          <input type="checkbox" v-model="nixinBundles" :id="bundle.id" :value="bundle.id"
+          <input type="checkbox" v-model="nixin.bundles" :id="bundle.id" :value="bundle.id"
             @change="selectServices(bundle.id, bundle.services)" />
           {{ bundle.name }}
         </label>
@@ -163,13 +160,11 @@ export default {
   </div>
 
   <h2>Services</h2>
-  <div v-if="nixinBundles.length === 0">👆 Choose any upper bundle to make associated services appear.</div>
+  <div v-if="nixin.bundles.length === 0">👆 Choose any upper bundle to make associated services appear.</div>
-  <div v-for="service in availableServices" :key="service">
+  <div v-for="service in nixin.availableServices" :key="service">
-    <label v-if="service.inBundle && service.inBundle.some(ai => nixinBundles.includes(ai))">
+    <div v-if="service.inBundle && service.inBundle.some(ai => nixin.bundles.includes(ai))">
-      <NixForm :service="service.id" />
+      <NixForm :service="service" />
-      <input type="checkbox" v-model="nixinServices" :id="service.id" :value="service.id" />
+    </div>
-      {{ service.name }}
-    </label>
   </div>
 
   <h2>Other configuration</h2>
@@ -189,8 +184,8 @@ export default {
       ];
 
       networking = {
-      hostName = "{{ networkingHostname }}";
+      hostName = "{{ nixin.networkingHostname }}";
-      domain = "{{ networkingDomain }}";
+      domain = "{{ nixin.networkingDomain }}";
       nameservers = ["80.67.169.12" "2001:910:800::12" "80.67.169.40" "2001:910:800::40"];
       wg-quick.interfaces = {
       wg0 = {
@@ -210,10 +205,10 @@ export default {
       };
       };
 
-      users.users.{{ user }} = {
+      users.users.{{ nixin.user }} = {
       isNormalUser = true;
       extraGroups = [ "wheel" ];
-      initialPassword = "{{ userPassword }}";
+      initialPassword = "{{ nixin.userPassword }}";
       openssh.authorizedKeys.keys = [
       "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBBM+2TwkopAQF7splTWjORQoxjcp67VhodwzvTMlL8g florian@florian-LinuxMint-MBP"
       "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILRG0CyeeMMrrjTTm/PHgRXD/I4lH/bBPBCGUiL+cBdq douzeb@tux-12"
@@ -222,7 +217,7 @@ export default {
 
       security.sudo.extraRules= [
       {
-      users = [ "{{ user }}" ];
+      users = [ "{{ nixin.user }}" ];
       commands = [
       { command = "ALL" ;
       options= [ "NOPASSWD" ]; # "SETENV" # Adding the following could be a good idea
@@ -232,12 +227,12 @@ export default {
       ];
 
 
-      time.timeZone = "{{ timezone }}";
+      time.timeZone = "{{ nixin.timezone }}";
-      i18n.defaultLocale = "{{ locale }}";
+      i18n.defaultLocale = "{{ nixin.locale }}";
-      <div v-for="(service) in nixinServices" :key="service">
+      <div v-for="(service) in nixin.services" :key="service">
         <NixCode :service-name="service" />
       </div>
-      <div v-if="nixinServices.includes('gotosocial')">
+      <div v-if="nixin.services.includes('gotosocial')">
         {
         services.gotosocial = {
         enable = true;
@@ -274,7 +269,7 @@ export default {
 
       </div>
 
-      <div v-if="nixinServices.includes('peertube')">
+      <div v-if="nixin.services.includes('peertube')">
         networking.extraHosts = ''
         127.0.0.1 peertube.local
         '';
@@ -334,7 +329,7 @@ export default {
         };
       </div>
 
-      <div v-if="nixinServices.includes('lemmy')">
+      <div v-if="nixin.services.includes('lemmy')">
         let
 
         # add nginx reverse proxy and ACME web certificate
@@ -573,7 +568,7 @@ export default {
         }
       </div>
 
-      <div v-if="nixinServices.includes('nextcloud')">
+      <div v-if="nixin.services.includes('nextcloud')">
         services.nextcloud = {
         enable = true;
         hostName = "nextcloud.tld";
@@ -587,7 +582,7 @@ export default {
         networking.firewall.allowedTCPPorts = [ 80 443 ];
       </div>
 
-      <div v-if="nixinServices.includes('hedgedoc')">
+      <div v-if="nixin.services.includes('hedgedoc')">
         networking.firewall = {
         allowedTCPPorts = [ 8001 ];
         };
@@ -604,7 +599,7 @@ export default {
         };
       </div>
 
-      <div v-if="nixinServices.includes('forgejorunner')">
+      <div v-if="nixin.services.includes('forgejorunner')">
         virtualisation.containers.enable = true;
         virtualisation.podman = {
         enable = true;
@@ -638,7 +633,7 @@ export default {
         };
 
       </div>
-      <div v-if="nixinServices.includes('forgejo')">
+      <div v-if="nixin.services.includes('forgejo')">
         services.nginx = {
         virtualHosts.${cfg.settings.server.DOMAIN} = {
         forceSSL = true;

components/DynamicComponent.vue

@@ -4,7 +4,6 @@
 
 <script>
   import * as components from './all'
-console.log(components)
   export default {
 
     components: {
@@ -12,7 +11,7 @@ console.log(components)
     },
 
     props: {
-      type: { type: String, required: true }
+      type: { type: String, required: true },
     },
   }
 </script>

components/NixForm-forgejo.vue

@@ -1,3 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
 <template>
-  forgejo
+  <label>
+  <input type="checkbox" v-model="nixin.services" :value="service.id" />
+  {{service.name}}
+  </label>
 </template>

components/NixForm-forgejorunner.vue

@@ -1,3 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
 <template>
-  forgejo runner
+  <label>
+  <input type="checkbox" v-model="nixin.services" :value="service.id" />
+  {{service.name}}
+  </label>
 </template>

components/NixForm-gotosocial.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
+<template>
+  <label>
+  <input type="checkbox" v-model="nixin.services" :value="service.id" />
+  {{service.name}}
+  </label>
+</template>

components/NixForm-hedgedoc.vue

@@ -1,3 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
 <template>
-  hedgedoc form
+  <label>
+    <input type="checkbox" v-model="nixin.services" :value="service.id" />
+    {{service.name}}
+  </label>
 </template>

components/NixForm-lemmy.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
+<template>
+  <label>
+  <input type="checkbox" v-model="nixin.services" :value="service.id" />
+  {{service.name}}
+  </label>
+</template>

components/NixForm-nextcloud.vue

@@ -1,3 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
 <template>
-  nextcloud form
+  <label>
+  <input type="checkbox" v-model="nixin.services" :value="service.id" />
+  {{service.name}}
+  </label>
 </template>

components/NixForm-nixin.vue

@@ -1,3 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
 <template>
-  nixin
+  <label>
+  <input type="checkbox" v-model="nixin.services" :value="service.id" />
+  {{service.name}}
+  </label>
 </template>

components/NixForm-peertube.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { inject } from 'vue'
+let nixin = inject('nixin')
+const service = inject('service')
+</script>
+<template>
+  <label>
+  <input type="checkbox" v-model="nixin.services" :value="service.id" />
+  {{service.name}}
+  </label>
+</template>

components/NixForm.vue

@@ -1,8 +1,11 @@
 <script setup>
+import {provide} from 'vue';
 import DynamicComponent from "./DynamicComponent.vue"
 
 const props = defineProps(['service'])
-let serviceComponent = 'NixForm'+props.service
+let serviceComponent = 'NixForm'+props.service.id
+provide('service', props.service)
+
 </script>
 
 <template>

components/all.js

@@ -1,3 +1,6 @@
+export { default as NixFormgotosocial } from './NixForm-gotosocial.vue'
+export { default as NixFormpeertube } from './NixForm-peertube.vue'
+export { default as NixFormlemmy } from './NixForm-lemmy.vue'
 export { default as NixFormnextcloud } from './NixForm-nextcloud.vue'
 export { default as NixFormhedgedoc } from './NixForm-hedgedoc.vue'
 export { default as NixFormforgejo } from './NixForm-forgejo.vue'