nixin-web/components/ConfigForm.vue

<script setup>
import NixCode from "./NixCode.vue"
import NixForm from "./NixForm.vue"
import { provide, ref } from 'vue'

let nixin = {
  netconf: 'autoconfig',
  networkingHostname: '',
  networkingDomain: 'nixin.local',
  availableBundles: [
    {
    "id": "writeCollectively",
    "name": "Write collectively : pads",
    "services": [
      'hedgedoc', 'nextcloud'
    ]
    },
    {
      "id": "forge",
      "name": "Forge : git repo, CI/CD workers, and NixiN",
      "services": [
        'forgejo', 'forgejorunner', 'nixin'
      ]

    },
    {
      "id": "socialMedia",
      "name": "Social media: hosted social medias in activitypub web-apps",
      "services": [
        'gotosocial', 'peertube', 'lemmy'
      ]

    }],
  availableServices: [
    {
    "id": "hedgedoc",
    "name": "Hedgedoc : realtime collaborative markdown editor"
    },
    {
      "id": "forgejo",
      "name": "Forgejo : git hosting"
    },
    {
      "id": "forgejorunner",
      "name": "Forgejo runner : CD/CI runner for Forgejo"
    },
    {
      "id": "gotosocial",
      "name": "Gotosocial : personal light activityPub social media"
    },
    {
      "id": "peertube",
      "name": "Peertube : video hosting platform with activityPub"
    },
    {
      "id": "lemmy",
      "name": "Lemmy : reddit alternative with activityPub"
    },
    {
      "id": "nextcloud",
      "name": "Nextcloud : personnal cloud"
    },
    {
      "id": "nixin",
      "name": "NixiN : web ui for configurations"
    }],
  bundles: [],
  services: [],
  timezone: 'Etc/UTC',
  locale: 'en_US.UTF-8',
  user: 'operator',
  userPassword: 'CHANGE ME !!!',
}

nixin.availableServices.forEach((s) => {
  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') {
    nixin.networkingDomain = 'nixin.local'
  } else {
    nixin.networkingDomain = ''
  }
}

function selectServices(bundleId, services) {
  if (nixin.value.bundles.includes(bundleId)) {
    services.forEach((s) => {
      if (nixin.value.services.indexOf(s) === -1) {
        nixin.value.services.push(s)
      }
    })
  } else {
    services.forEach((s) => {
      const index = nixin.value.services.indexOf(s);
      if (index > -1) {
        nixin.value.services.splice(index, 1);
      }
    })
  }
}
</script>

<template>
  <h2>Networking</h2>
    <div class="form-cell">
      <strong>Choose your network configuration</strong>
      <div>
      <label>
        <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>
    </div>
    <div>
      <label>
        <input type="radio" v-model="nixin.netconf" value="publicip" @click="netconfHasBeenChanged">My server
        has a public ip that I can provide
      </label>
    </div>
    <div>
      <label>
        <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>
    </div>
    <div>
      <label>
        <input type="radio" v-model="nixin.netconf" value="wireguard" @click="netconfHasBeenChanged">My server can use a wireguard server i can configure
      </label>
    </div>
  </div>
  <div class="form-row">
    <div class="form-cell">
      <label>Machine network name</label>
      <input required type="text" v-model="nixin.networkingHostname"
        placeholder="Give your machine a name without spaces, ponctuation or accents" />
    </div>
  </div>
  <input v-if="nixin.netconf === 'autoconfig'" type="hidden" value="distrilab.fr" />
  <div class="form-row" v-if="nixin.netconf !== 'autoconfig'">
    <div class="form-cell">
      <label>Domain name</label>
      <input required type="text" v-model="nixin.networkingDomain" placeholder="ex: distrilab.fr" />
    </div>
  </div>

  <h2>Usage bundles</h2>
  <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 nixin.availableBundles" :key="bundle">
        <label>
          <input type="checkbox" v-model="nixin.bundles" :id="bundle.id" :value="bundle.id"
            @change="selectServices(bundle.id, bundle.services)" />
          {{ bundle.name }}
        </label>
      </div>
    </div>
  </div>

  <h2>Services</h2>
  <div v-if="nixin.bundles.length === 0">👆 Choose any upper bundle to make associated services appear.</div>
  <div v-for="service in nixin.availableServices" :key="service">
    <div v-if="service.inBundle && service.inBundle.some(ai => nixin.bundles.includes(ai))">
      <NixForm :service="service" />
    </div>
  </div>

  <h2>Other configuration</h2>
  Operating UNIX user name<br />
  Operating UNIX user password<br />
  Timezone<br />
  Locale<br />

  <h2>Auto-generated configuration.nix file</h2>
  <pre>
    <code>
      { config, lib, pkgs, ... }:

      {
      imports = [
      ./hardware-configuration.nix
      ];

      networking = {
      hostName = "{{ nixin.networkingHostname }}";
      domain = "{{ nixin.networkingDomain }}";
      nameservers = ["80.67.169.12" "2001:910:800::12" "80.67.169.40" "2001:910:800::40"];
      wg-quick.interfaces = {
      wg0 = {
      address = [ "10.42.0.3/32"];
      privateKeyFile = "/etc/wireguard_private_key";

      peers = [
      {
      publicKey = "2MZzEGJzA3HrwkHf91TaKJEHwCNyVvsTLWoIYHrCxhY=";
      presharedKeyFile = "/etc/wireguard_preshared_key";
      allowedIPs = [ "10.42.0.0/24" ];
      endpoint = "195.201.63.240:8098";
      persistentKeepalive = 15;
      }
      ];
      };
      };
      };

      users.users.{{ nixin.user }} = {
      isNormalUser = true;
      extraGroups = [ "wheel" ];
      initialPassword = "{{ nixin.userPassword }}";
      openssh.authorizedKeys.keys = [
      "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBBM+2TwkopAQF7splTWjORQoxjcp67VhodwzvTMlL8g florian@florian-LinuxMint-MBP"
      "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILRG0CyeeMMrrjTTm/PHgRXD/I4lH/bBPBCGUiL+cBdq douzeb@tux-12"
      ];
      };

      security.sudo.extraRules= [
      {
      users = [ "{{ nixin.user }}" ];
      commands = [
      { command = "ALL" ;
      options= [ "NOPASSWD" ]; # "SETENV" # Adding the following could be a good idea
      }
      ];
      }
      ];


      time.timeZone = "{{ nixin.timezone }}";
      i18n.defaultLocale = "{{ nixin.locale }}";
      <div v-for="(service) in nixin.services" :key="service">
        <NixCode :service="service" />
      </div>
      }
    </code>
  </pre>
</template>