cloudron-box/dashboard/src/components/PortBindings.vue

<script setup>

import { FormGroup, Checkbox, NumberInput } from '@cloudron/pankow';

defineProps([ 'error', 'domainProvider' ]);

// all ports require a property called 'value' for the model to work
const tcpPorts = defineModel('tcp');
const udpPorts = defineModel('udp');

</script>

<template>
  <div v-for="ports in [ tcpPorts, udpPorts ]" :key="ports">
    <FormGroup v-for="(port, key) in ports" :key="key" style="margin-top: 10px;">
      <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>
      <small class="has-error" v-if="error.port === port.value">Port already taken {{ port }}</small>
      <NumberInput v-model="port.value" :disabled="!port.enabled" :min="1"/>
      <!-- 32768–60999 (inclusive) is the usual ephemeral port range -->
      <div class="warning-label" v-if="[port.value, port.value + port.portCount].some(p => p >= 32768 && p <= 60999)">{{ $t('appstore.installDialog.ephemeralPortWarning') }} <sup><a href="https://docs.cloudron.io/apps/#port-bindings" class="help" target="_blank" tabindex="-1"><i class="fa fa-question-circle"></i></a></sup></div>
      <div class="warning-label" v-if="domainProvider === 'cloudflare'">{{ $t('appstore.installDialog.cloudflarePortWarning') }}</div>
    </FormGroup>
  </div>
</template>

<style scoped>
.pankow-form-group small {
  display: block;
  margin-bottom: 0.5rem;
}
</style>