2 files changed, 84 insertions(+), 9 deletions(-)

M src/components/endpoint/endpoint-add-panel.vue
A src/pages/interfaces/[id]/endpoints/add/bulk.vue

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