Handle errors in app installation form

dashboard/src/components/AppInstallDialog.vue

@@ -19,11 +19,11 @@
           <div class="description" v-html="description"></div>
         </div>
         <div v-else-if="step === STEP.INSTALL">
-          <form @submit="submit()" autocomplete="off">
+          <form @submit.prevent="submit()" autocomplete="off">
             <fieldset :disabled="busy">
               <input style="display: none;" type="submit" :disabled="!formValid" />
 
-              <FormGroup>
+              <FormGroup :class="{ 'has-error': formError.location }">
                 <label for="location">{{ $t('appstore.installDialog.location') }}</label>
                 <div>
                   <TextInput id="location" v-model="location" />
@@ -44,7 +44,7 @@
 
               <!-- TODO upstreamUri for proxyapp -->
 
-              <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" />
+              <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" :error="formError"/>
               <AccessControl v-model="accessRestriction"/>
 
               <Button @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
@@ -81,6 +81,7 @@ const dashboardModel = DashboardModel.create(API_ORIGIN, localStorage.token);
 
 // reactive
 const busy = ref(false);
+const formError = ref({});
 const app = ref({});
 const manifest = ref({});
 const step = ref(STEP.DETAILS);
@@ -138,7 +139,15 @@ async function submit() {
     return window.location.href = '#/apps';
   }
 
-  console.error('Failed to install:', error);
+  formError.value = {};
+  if (error.status === 'Conflict' && error.message.indexOf('port') !== -1) {
+    const match = error.message.match(/.*port.(.*)/);
+    formError.value.port = match ? parseInt(match[1]) : null;
+  } else if (error.status === 'Conflict' && error.message.indexOf('primary location') !== -1) {
+    formError.value.location = true;
+  } else {
+    console.error('Failed to install:', error);
+  }
 }
 
 onMounted(async () => {