Add new PortBinding component

dashboard/src/components/AppInstallDialog.vue

@@ -31,6 +31,10 @@
                 </div>
               </FormGroup>
 
+              <!-- TODO secondary domain based on v-for manifest.httpPorts -->
+              <!-- TODO upstreamUri for proxyapp -->
+
+              <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" />
               <AccessControl v-model="accessRestriction"/>
 
               <Button @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
@@ -49,6 +53,7 @@ import { marked } from 'marked';
 import { Button, Dialog, Dropdown, FormGroup, TextInput } from 'pankow';
 import { prettyDate, prettyFileSize } from 'pankow/utils';
 import AccessControl from './AccessControl.vue';
+import PortBindings from './PortBindings.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import AppsModel from '../models/AppsModel.js';
 
@@ -79,6 +84,8 @@ const formValid = computed(() => {
 const location = ref('');
 const accessRestriction = ref(null);
 const domain = ref('');
+const tcpPorts = ref({});
+const udpPorts = ref({});
 
 async function submit() {
   const config = {
@@ -89,6 +96,17 @@ async function submit() {
 
   if (manifest.value.optionalSso) config.sso =!!accessRestriction.value;
 
+  const finalPorts = {};
+  for (const p in tcpPorts.value) {
+    const port = tcpPorts.value[p];
+    if (port.enabled) finalPorts[p] = port.value;
+  }
+  for (const p in udpPorts.value) {
+    const port = udpPorts.value[p];
+    if (port.enabled) finalPorts[p] = port.value;
+  }
+  config.ports = finalPorts;
+
   busy.value = true;
   const error = await appsModel.install(manifest.value, config);
   busy.value = false;
@@ -110,10 +128,13 @@ onMounted(async () => {
 
 defineExpose({
   open(a) {
-    step.value = STEP.DETAILS;
+    step.value = STEP.INSTALL;
     app.value = a;
     manifest.value = a.manifest;
 
+    tcpPorts.value = a.manifest.tcpPorts;
+    udpPorts.value = a.manifest.udpPorts;
+
     dialog.value.open();
   }
 });