Johannes Zellner
27 lines
1.4 KiB
Vue
27 lines
1.4 KiB
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>
|