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();
   }
 });

dashboard/src/components/AppstoreView.vue

@@ -31,7 +31,7 @@ const appstoreModel = AppstoreModel.create(API_ORIGIN, localStorage.token);
 
 const ready = ref(false);
 const apps = ref([]);
-const search = ref('');
+const search = ref('vpn');
 const filteredApps = computed(() => {
   if (!search.value) return apps.value;
 

dashboard/src/components/PortBindings.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-for="ports in [ tcpPorts, udpPorts ]" :key="ports">
+    <FormGroup v-for="(port, key) in ports" :key="key">
+      <Checkbox :label="port.title" v-model="port.enabled" />
+      <small>{{ port.description + '.' + (port.portCount >=1 ? (port.portCount + ' ports. ') : '') }}</small>
+      <small v-show="port.readOnly">{{ $t('appstore.installDialog.portReadOnly') }}</small>
+      <NumberInput v-model="port.value" :disabled="!port.enabled" :min="1"/>
+      <!-- TODO <p class="text-small text-warning text-bold" ng-show="appInstall.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p> -->
+    </FormGroup>
+  </div>
+</template>
+
+<script setup>
+
+import { defineProps, defineEmits } from 'vue';
+import { FormGroup, Checkbox, NumberInput } from 'pankow';
+
+const props = defineProps([ 'tcpPorts', 'udpPorts' ]);
+defineEmits([ 'update:tcpPorts', 'update:udpPorts' ]);
+
+// copy value so we can use value as model value
+for (const p in props.tcpPorts) {
+  const port = props.tcpPorts[p];
+  port.value = port.defaultValue;
+  port.enabled = true;
+}
+
+for (const p in props.udpPorts) {
+  const port = props.udpPorts[p];
+  port.value = port.defaultValue;
+  port.enabled = true;
+}
+
+</script>
+
+<style scoped>
+</style>