Improve overall domain input validation

dashboard/src/components/AppInstallDialog.vue

@@ -3,7 +3,7 @@
 import { ref, computed, useTemplateRef, onMounted, inject } from 'vue';
 import { marked } from 'marked';
 import { Button, Dialog, SingleSelect, FormGroup, TextInput, InputGroup } from 'pankow';
-import { prettyDate, prettyBinarySize } from 'pankow/utils';
+import { prettyDate, prettyBinarySize, isValidDomain } from 'pankow/utils';
 import AccessControl from './AccessControl.vue';
 import PortBindings from './PortBindings.vue';
 import DomainsModel from '../models/DomainsModel.js';
@@ -36,12 +36,7 @@ const domains = ref([]);
 const formValid = computed(() => {
   if (!domain.value) return false;
 
-  if (location.value) {
-    // label validation
-    if (location.value.split('.').some(function (p) { return p.length > 63 || p.length < 1; })) return false;
-    if (location.value.match(/^[A-Za-z0-9-.]+$/) === null) return false;
-    if (/^[-.]/.test(location.value)) return false;
-  }
+  if (location.value && !isValidDomain(location.value + '.' + domain.value)) return false;
 
   if (accessRestrictionOption.value === ACL_OPTIONS.RESTRICTED && (accessRestrictionAcl.value.users.length === 0 && accessRestrictionAcl.value.groups.length === 0)) return false;
 

dashboard/src/components/app/Location.vue

@@ -2,6 +2,7 @@
 
 import { ref, onMounted, computed } from 'vue';
 import { Button, SingleSelect, InputGroup, FormGroup, TextInput } from 'pankow';
+import { isValidDomain } from 'pankow/utils';
 import PortBindings from '../PortBindings.vue';
 import AppsModel from '../../models/AppsModel.js';
 import DomainsModel from '../../models/DomainsModel.js';
@@ -52,6 +53,23 @@ function onAddRedirect() {
   });
 }
 
+const formValid = computed(() => {
+  if (!domain.value) return false;
+
+  const checkForDomains = [{
+    domain: domain.value,
+    subdomain: subdomain.value,
+  }];
+
+  for (const d in secondaryDomains.value) checkForDomains.push({ domain: secondaryDomains.value[d].domain, subdomain: secondaryDomains.value[d].subdomain });
+  for (const d of aliases.value) checkForDomains.push({ domain: d.domain, subdomain: d.subdomain });
+  for (const d of redirects.value) checkForDomains.push({ domain: d.domain, subdomain: d.subdomain });
+
+  if (checkForDomains.find(d => !isValidDomain((d.subdomain ? (d.subdomain + '.') : '') + d.domain))) return false;
+
+  return true;
+});
+
 function onRemoveRedirect(index) {
   redirects.value.splice(index, 1);
 }
@@ -161,7 +179,7 @@ onMounted(async () => {
   <div>
     <form @submit.prevent="onSubmit()" autocomplete="off" novalidate>
       <fieldset :disabled="busy">
-        <input type="submit" style="display: none;" :disabled="app.error || app.taskId"/>
+        <input type="submit" style="display: none;" :disabled="app.error || app.taskId || !formValid"/>
 
         <FormGroup>
           <label>{{ $t('app.location.location') }}</label>
@@ -228,6 +246,6 @@ onMounted(async () => {
 
     <br/>
 
-    <Button @click="onSubmit()" :loading="busy" :disabled="busy || app.error || app.taskId" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.location.saveAction') }}</Button>
+    <Button @click="onSubmit()" :loading="busy" :disabled="busy || app.error || app.taskId || !formValid" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.location.saveAction') }}</Button>
   </div>
 </template>