community: validate the url in the dialog

dashboard/src/components/CommunityAppDialog.vue

@@ -2,31 +2,48 @@
 
 import { ref, useTemplateRef } from 'vue';
 import { Dialog, TextInput, FormGroup } from '@cloudron/pankow';
+import CommunityModel from '../models/CommunityModel.js';
+
+const communityModel = CommunityModel.create();
 
 const emit = defineEmits([ 'success' ]);
 
 const dialog = useTemplateRef('dialog');
+const form = useTemplateRef('form');
 
 const formError = ref({});
-const url = ref('');
-const version = ref('latest');
+const versionsUrl = ref('');
+const busy = ref(false);
 
-function onSubmit() {
+const isFormValid = ref(false);
+function validateForm() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
+
+async function onSubmit() {
+  if (!form.value.reportValidity()) return;
+
+  busy.value = true;
   formError.value = {};
 
-  if (!url.value || !version.value) {
-    formError.value.generic = 'URL and version are required';
-    return;
+  const [error, result] = await communityModel.getApp(versionsUrl.value, 'latest');
+  if (error) {
+    formError.value.generic = error.body ? error.body.message : 'Internal error';
+    busy.value = false;
+    return console.error(error);
   }
 
-  emit('success', { url: url.value, version: version.value });
+  const packageData = { ...result, versionsUrl: versionsUrl.value + '@latest' };
+
+  emit('success', packageData);
+
   dialog.value.close();
+  busy.value = false;
 }
 
 defineExpose({
   open() {
-    url.value = '';
-    version.value = 'latest';
+    versionsUrl.value = '';
     formError.value = {};
     dialog.value.open();
   }
@@ -37,26 +54,24 @@ defineExpose({
 <template>
   <Dialog ref="dialog"
     title="Install Community App"
-    confirm-label="Continue"
-    :confirm-active="url !== ''"
+    :confirm-label="$t('main.action.add')"
+    :confirm-busy="busy"
+    :confirm-active="!busy && isFormValid"
     reject-style="secondary"
-    reject-label="Cancel"
+    :reject-label="$t('main.dialog.cancel')"
+    :reject-active="!busy"
     @confirm="onSubmit()"
   >
-    <form @submit.prevent="onSubmit()" autocomplete="off">
-      <input type="submit" style="display: none;" />
+    <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="validateForm()">
+      <fieldset :disabled="busy">
+        <input type="submit" style="display: none;" />
 
-      <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
-
-      <FormGroup>
-        <label for="urlInput">CloudronVersions.json URL</label>
-        <TextInput id="urlInput" v-model="url" required placeholder="https://example.com/CloudronVersions.json"/>
-      </FormGroup>
-
-      <FormGroup>
-        <label for="versionInput">Version</label>
-        <TextInput id="versionInput" v-model="version" required/>
-      </FormGroup>
+        <FormGroup>
+          <label for="urlInput">CloudronVersions.json URL</label>
+          <TextInput id="urlInput" v-model="versionsUrl" required placeholder="https://example.com/CloudronVersions.json"/>
+          <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
+        </FormGroup>
+      </fieldset>
     </form>
   </Dialog>
 </template>