@@ 6,17 6,27 @@
Configure manually
</o-radio>
</o-field>
- <o-field>
+ <o-field class="radio-stack">
<o-radio v-model="wizard" native-value="yes">
Use guided set-up wizard
</o-radio>
</o-field>
+ <o-field>
+ <o-radio v-model="wizard" native-value="bulk">
+ Use bulk upload form
+ </o-radio>
+ </o-field>
<section class="content">
<p>
The wizard will guide you through the full series of steps needed to
set up both sides of a new WireGuard connection.
</p>
<p>
+ The bulk upload form can add both sides of the connections to many
+ hosts at once, using the default settings configured for remote
+ endpoints of this interface.
+ </p>
+ <p>
Manual configuration will configure just one side of the connection.
To create a full WireGuard connection, you will also need to set up a
host with an interface and endpoint for the other side of the
@@ 47,14 57,18 @@ const wizard = ref('no')
const type = ref('')
async function next() {
- const url = `/interfaces/${props.model.id}/endpoints/add`
- $router.push(
- wizard.value === 'yes'
- ? type.value
- ? `${url}/wizard?type=${type.value}`
- : `${url}/wizard`
- : `${url}/manual`,
- )
+ let url = `/interfaces/${props.model.id}/endpoints/add`
+ switch (wizard.value) {
+ case 'yes':
+ url = type.value ? `${url}/wizard?type=${type.value}` : `${url}/wizard`
+ break
+ case 'bulk':
+ url = `${url}/bulk`
+ break
+ default:
+ url = `${url}/manual`
+ }
+ $router.push(url)
}
function cancel() {
@@ 0,0 1,61 @@
+<template>
+ <app-page-container :crumbs="pageCrumbs" :title="pageTitle" icon="endpoints">
+ <host-bulk-upload-panel
+ :host-model="hostModel"
+ :interface-model="model"
+ :loading="loading"
+ @cancel="cancel"
+ />
+ </app-page-container>
+</template>
+
+<script setup>
+import { computed, inject, ref, unref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { normalizeModel } from '@/utils/model'
+
+const $axiosApi = inject('$axiosApi')
+const $router = useRouter()
+const route = useRoute()
+const pub = computed(() => route.params.id)
+
+const loading = ref(true)
+const model = ref(normalizeModel())
+const hostModel = computed(() => unref(model).rel('host'))
+
+const pageTitle = ref('Add Endpoints by Bulk')
+
+const pageCrumbs = computed(() => {
+ const h = unref(hostModel)
+ const i = unref(model)
+
+ const hosts = { label: 'Hosts', to: '/hosts' }
+ const host = h.id ? { label: h.attr.name, to: `/hosts/${h.id}` } : '...'
+ const iface = i.id ? { label: i.attr.name, to: `/interfaces/${i.id}` } : '...'
+ const add = i.id
+ ? { label: 'Add', to: `/interfaces/${i.id}/endpoints/add` }
+ : 'Add'
+
+ return ['Bulk', add, 'Endpoints', iface, 'Interfaces', host, hosts]
+})
+
+function cancel() {
+ $router.back()
+}
+
+async function load() {
+ model.value = normalizeModel()
+ const id = unref(pub)
+ if (!id) return
+
+ loading.value = true
+ const { data } = await $axiosApi.get(`/interfaces/${id}`, {
+ params: { included: 'host' },
+ })
+ model.value = normalizeModel(data)
+ loading.value = false
+}
+
+load()
+watch(pub, load)
+</script>