Johannes Zellner
26 lines
1.2 KiB
Vue
26 lines
1.2 KiB
Vue
<script setup>
|
|
|
|
import { FormGroup, Checkbox, NumberInput } from '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"/>
|
|
<div class="warning-label" v-show="domainProvider === 'cloudflare'">{{ $t('appstore.installDialog.cloudflarePortWarning') }}</div>
|
|
<div class="warning-label" v-show="domainProvider === 'manual'">{{ $t('appstore.installDialog.cloudflarePortWarning') }}</div>
|
|
</FormGroup>
|
|
</div>
|
|
</template>
|