Bring back cloudflare ports warning in all places

dashboard/src/components/AppArchive.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef } from 'vue';
+import { ref, onMounted, useTemplateRef, computed } from 'vue';
 import { Button, ButtonGroup, InputGroup, FormGroup, TextInput, SingleSelect, TableView, InputDialog, Dialog } from 'pankow';
 import { prettyLongDate } from 'pankow/utils';
 import { API_ORIGIN, SECRET_PLACEHOLDER } from '../constants.js';
@@ -87,6 +87,10 @@ const restoreTcpPorts = ref({});
 const restoreUdpPorts = ref({});
 const domains = ref([]);
 const restoreSecondaryDomains = ref([]);
+const restoreDomainProvider = computed(() => {
+  const tmp = domains.value.find((d) => d.domain === restoreDomain.value);
+  return tmp ? tmp.provider : '';
+});
 
 async function onRestore(archive) {
   restoreBusy.value = false;
@@ -276,9 +280,9 @@ onMounted(async () => {
             </InputGroup>
           </FormGroup>
 
-         <!-- <p class="text-small text-warning" ng-show="archiveRestore.domain.provider === 'noop' || archiveRestore.domain.provider === 'manual'" ng-bind-html="'appstore.installDialog.manualWarning' | tr:{ location: ((archiveRestore.subdomain ? archiveRestore.subdomain + '.' : '') + archiveRestore.domain.domain) }"></p> -->
+          <!-- <div class="warning-label" ng-show="archiveRestore.domain.provider === 'noop' || archiveRestore.domain.provider === 'manual'" ng-bind-html="'appstore.installDialog.manualWarning' | tr:{ location: ((archiveRestore.subdomain ? archiveRestore.subdomain + '.' : '') + archiveRestore.domain.domain) }"></div> -->
           <!-- <div class="has-error text-center" ng-show="archiveRestore.error.port">{{ archiveRestore.error.port }}</div> -->
-          <PortBindings v-model:tcp-ports="restoreTcpPorts" v-model:udp-ports="restoreUdpPorts" :error="restoreError"/>
+          <PortBindings v-model:tcp-ports="restoreTcpPorts" v-model:udp-ports="restoreUdpPorts" :error="restoreError" :domain-provider="restoreDomainProvider"/>
         </fieldset>
       </form>
     </Dialog>

dashboard/src/components/AppInstallDialog.vue

@@ -221,7 +221,7 @@ defineExpose({
                 <TextInput id="upstreamUri" v-model="upstreamUri" />
               </FormGroup>
 
-              <PortBindings v-model:tcp="tcpPorts" v-model:udp="udpPorts" :error="formError"/>
+              <PortBindings v-model:tcp="tcpPorts" v-model:udp="udpPorts" :error="formError" :domain-provider="domainProvider"/>
               <AccessControl v-model:option="accessRestrictionOption" v-model:acl="accessRestrictionAcl" :manifest="manifest"/>
 
               <Button style="margin-top: 15px" @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>

dashboard/src/components/PortBindings.vue

@@ -2,7 +2,7 @@
 
 import { FormGroup, Checkbox, NumberInput } from 'pankow';
 
-defineProps([ 'error' ]);
+defineProps([ 'error', 'domainProvider' ]);
 
 // all ports require a property called 'value' for the model to work
 const tcpPorts = defineModel('tcp');
@@ -18,7 +18,8 @@ const udpPorts = defineModel('udp');
       <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"/>
-      <!-- TODO <p class="text-small text-warning text-bold" ng-show="appInstall.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p> -->
+      <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>

dashboard/src/components/app/Backups.vue

@@ -163,6 +163,10 @@ function onImport() {
   // TODO
 }
 
+function onClone(backup) {
+  // TODO
+}
+
 async function refresh() {
   const [error, result] = await appsModel.backups(props.app.id);
   if (error) return console.error(error);

dashboard/src/components/app/Location.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { Button, SingleSelect, InputGroup, FormGroup, TextInput } from 'pankow';
 import PortBindings from '../PortBindings.vue';
 import AppsModel from '../../models/AppsModel.js';
@@ -19,12 +19,15 @@ const overwriteDns = ref(false);
 const needsOverwriteDns = ref(false);
 const domain = ref('');
 const subdomain = ref('');
-const domainProvider = ref('');
 const secondaryDomains = ref({});
 const aliases = ref([]);
 const redirects =ref([]);
 const tcpPorts = ref({});
 const udpPorts = ref({});
+const domainProvider = computed(() => {
+  const tmp = domains.value.find((d) => d.domain === domain.value);
+  return tmp ? tmp.provider : '';
+});
 
 function isNoopOrManual(domain) {
   const tmp = domains.value.find(d => d.domain === domain);
@@ -167,7 +170,7 @@ onMounted(async () => {
             <TextInput style="flex-grow: 1" v-model="subdomain" :placeholder="$t('app.location.locationPlaceholder')"/>
             <SingleSelect :disabled="busy" :options="domains" v-model="domain" option-key="domain" option-label="domain"/>
           </InputGroup>
-          <p class="text-warning" v-if="isNoopOrManual(domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((subdomain ? subdomain + '.' : '') + domain) })"></p>
+          <div class="warning-label" v-if="isNoopOrManual(domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((subdomain ? subdomain + '.' : '') + domain) })"></div>
         </FormGroup>
 
         <FormGroup v-for="item in secondaryDomains" :key="item.containerPort">
@@ -177,7 +180,7 @@ onMounted(async () => {
             <TextInput style="flex-grow: 1" :id="'secondaryDomainInput' + item.containerPort" v-model="item.subdomain" :placeholder="$t('appstore.installDialog.locationPlaceholder')"/>
             <SingleSelect :disabled="busy" :options="domains" v-model="item.domain" option-key="domain" option-label="domain"/>
           </InputGroup>
-          <p class="text-warning" v-if="isNoopOrManual(item.domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((item.subdomain ? item.subdomain + '.' : '') + item.domain) })"></p>
+          <div class="warning-label" v-if="isNoopOrManual(item.domain)" v-html="$t('appstore.installDialog.manualWarning', { location: ((item.subdomain ? item.subdomain + '.' : '') + item.domain) })"></div>
         </FormGroup>
 
         <PortBindings v-model:tcp="tcpPorts" v-model:udp="udpPorts" :error="errorObject" :domain-provider="domainProvider"/>