Very basic installation works again

dashboard/src/components/AppInstallDialog.vue

@@ -25,13 +25,17 @@
 
               <FormGroup>
                 <label for="location">{{ $t('appstore.installDialog.location') }}</label>
-                <TextInput id="location" v-model="location" />
+                <div>
+                  <TextInput id="location" v-model="location" />
+                  <Dropdown v-model="domain" :options="domains" option-label="domain" option-key="domain" />
+                </div>
               </FormGroup>
 
               <AccessControl v-model="accessRestriction"/>
+
+              <Button @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
             </fieldset>
           </form>
-          <Button @click="submit" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
         </div>
       </Transition>
     </div>
@@ -40,38 +44,73 @@
 
 <script setup>
 
-import { ref, computed, useTemplateRef } from 'vue';
+import { ref, computed, useTemplateRef, onMounted } from 'vue';
 import { marked } from 'marked';
-import { Button, Dialog, FormGroup, TextInput } from 'pankow';
+import { Button, Dialog, Dropdown, FormGroup, TextInput } from 'pankow';
 import { prettyDate, prettyFileSize } from 'pankow/utils';
 import AccessControl from './AccessControl.vue';
+import DomainsModel from '../models/DomainsModel.js';
+import AppsModel from '../models/AppsModel.js';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 
 const STEP = Object.freeze({
   DETAILS: Symbol('details'),
   INSTALL: Symbol('install'),
 });
 
+const domainsModel = DomainsModel.create(API_ORIGIN, localStorage.token);
+const appsModel = AppsModel.create(API_ORIGIN, localStorage.token);
+
 // reactive
+const busy = ref(false);
 const app = ref({});
 const manifest = ref({});
 const step = ref(STEP.DETAILS);
 const dialog = useTemplateRef('dialogHandle');
 const description = computed(() => marked.parse(manifest.value.description || ''));
+const domains = ref([]);
 const formValid = computed(() => {
+  if (!domain.value) return false;
   return true;
 });
 
 // form data
 const location = ref('');
 const accessRestriction = ref(null);
+const domain = ref('');
 
-function submit() {
+async function submit() {
+  const config = {
+    subdomain: location.value,
+    domain: domain.value,
+    accessRestriction: accessRestriction.value,
+  };
 
+  if (manifest.value.optionalSso) config.sso =!!accessRestriction.value;
+
+  busy.value = true;
+  const error = await appsModel.install(manifest.value, config);
+  busy.value = false;
+
+  if (!error) {
+    dialog.value.close();
+    return window.location.href = '#/apps';
+  }
+
+  console.error('Failed to install:', error);
 }
 
+onMounted(async () => {
+  domains.value = await domainsModel.list();
+
+  // TODO pre-select the adminDomain
+  domain.value = domains.value[0].domain;
+});
+
 defineExpose({
   open(a) {
-    step.value = STEP.INSTALL;
+    step.value = STEP.DETAILS;
     app.value = a;
     manifest.value = a.manifest;