NixiN/nixin-web
NixiN/nixin-web
2
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refacto(services): per service form components

Browse source
This commit is contained in:
Florian Schmitt 2024-10-10 13:45:58 +03:00
parent 1adbb1cd04
commit fb8296c081
12 changed files with 217 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

267
components/ConfigForm.vue
View file

@ -1,113 +1,110 @@
<script setup>
import NixCode from "./NixCode.vue"
import NixForm from "./NixForm.vue"
import { provide, ref } from 'vue'
</script>
<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: [{
"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"
}],
nixinBundles: [],
nixinServices: [],
timezone: 'Etc/UTC',
locale: 'en_US.UTF-8',
user: 'operator',
userPassword: 'CHANGE ME !!!',
}
},
methods: {
netconfHasBeenChanged(val = '') {
if (val === 'autoconfig') {
this.networkingDomain = 'distrilab.org'
} else {
this.networkingDomain = ''
}
let nixin = {
netconf: 'autoconfig',
networkingHostname: '',
networkingDomain: 'distrilab.eu',
availableBundles: [
{
"id": "writeCollectively",
"name": "Write collectively : pads",
"services": [
'hedgedoc', 'nextcloud'
]
},
selectServices(bundleId, services) {
if (this.nixinBundles.includes(bundleId)) {
services.forEach((s) => {
if (this.nixinServices.indexOf(s) === -1) {
this.nixinServices.push(s)
}
})
} else {
services.forEach((s) => {
const index = this.nixinServices.indexOf(s);
if (index > -1) {
this.nixinServices.splice(index, 1);
}
})
{
"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 = 'distrilab.org'
} 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>
@ -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" />
<div class="form-row" v-if="netconf !== 'autoconfig'">
<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="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-for="service in availableServices" :key="service">
<label v-if="service.inBundle && service.inBundle.some(ai => nixinBundles.includes(ai))">
<NixForm :service="service.id" />
<input type="checkbox" v-model="nixinServices" :id="service.id" :value="service.id" />
{{ service.name }}
</label>
<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>
@ -189,8 +184,8 @@ export default {
];
networking = {
hostName = "{{ networkingHostname }}";
domain = "{{ networkingDomain }}";
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 = {
@ -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 }}";
i18n.defaultLocale = "{{ locale }}";
<div v-for="(service) in nixinServices" :key="service">
time.timeZone = "{{ nixin.timezone }}";
i18n.defaultLocale = "{{ nixin.locale }}";
<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;

3
components/DynamicComponent.vue
View file

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

10
components/NixForm-forgejo.vue
View file

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

10
components/NixForm-forgejorunner.vue
View file

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

11
components/NixForm-gotosocial.vue Normal file
View file

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

10
components/NixForm-hedgedoc.vue
View file

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

11
components/NixForm-lemmy.vue Normal file
View file

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

10
components/NixForm-nextcloud.vue
View file

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

10
components/NixForm-nixin.vue
View file

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

11
components/NixForm-peertube.vue Normal file
View file

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

5
components/NixForm.vue
View file

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

3
components/all.js
View file

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