Make AccessControl a component

dashboard/src/components/AccessControl.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <FormGroup>
+    <label>{{ $t('app.accessControl.userManagement.dashboardVisibility') }} <sup><a href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.ANY" :label="$t('app.accessControl.userManagement.visibleForAllUsers')"/>
+      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.RESTRICT" :label="$t('app.accessControl.userManagement.visibleForSelected')"/>
+    </FormGroup>
+
+    <div v-if="accessRestrictionOption === OPTIONS.RESTRICT">
+      <div style="margin-left: 20px; display: flex;">
+        <div>
+          {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
+        </div>
+        <div>
+          {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import { ref, onMounted, defineModel, watch } from 'vue';
+import { FormGroup, Radiobutton, MultiSelect } from 'pankow';
+import UsersModel from '../models/UsersModel.js';
+import GroupsModel from '../models/GroupsModel.js';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+const OPTIONS = Object.freeze({
+  ANY: 'any',
+  RESTRICTED: 'restricted',
+});
+
+const usersModel = UsersModel.create(API_ORIGIN, localStorage.token);
+const groupsModel = GroupsModel.create(API_ORIGIN, localStorage.token);
+
+const accessRestrictionOption = ref(OPTIONS.ANY);
+const accessRestriction = ref({ users: [], groups: [] });
+const users = ref([]);
+const groups = ref([]);
+const model = defineModel({ type: Object });
+
+watch(accessRestrictionOption, (value) => {
+  if (value === OPTIONS.ANY) model.value = null;
+  else model.value = accessRestriction.value;
+});
+
+onMounted(async () => {
+  users.value = await usersModel.list();
+  groups.value = await groupsModel.list();
+});
+
+</script>
+
+<style scoped>
+</style>

dashboard/src/components/AppInstallDialog.vue

@@ -19,10 +19,19 @@
           <div class="description" v-html="description"></div>
         </div>
         <div v-else-if="step === STEP.INSTALL">
-          <div>Now install {{ manifest.title }}</div>
+          <form @submit="submit()" autocomplete="off">
-          <br/>
+            <fieldset :disabled="busy">
-          <br/>
+              <input style="display: none;" type="submit" :disabled="!formValid" />
-          <Button @click="step = STEP.DETAILS" icon="fa-solid fa-circle-down">TODO Submit</Button>
+
+              <FormGroup>
+                <label for="location">{{ $t('appstore.installDialog.location') }}</label>
+                <TextInput id="location" v-model="location" />
+              </FormGroup>
+
+              <AccessControl v-model="accessRestriction"/>
+            </fieldset>
+          </form>
+          <Button @click="submit" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
         </div>
       </Transition>
     </div>
@@ -32,9 +41,10 @@
 <script setup>
 
 import { ref, computed, useTemplateRef } from 'vue';
-import { Button, Dialog } from 'pankow';
-import { prettyDate, prettyFileSize } from 'pankow/utils';
 import { marked } from 'marked';
+import { Button, Dialog, FormGroup, TextInput } from 'pankow';
+import { prettyDate, prettyFileSize } from 'pankow/utils';
+import AccessControl from './AccessControl.vue';
 
 const STEP = Object.freeze({
   DETAILS: Symbol('details'),
@@ -47,10 +57,21 @@ const manifest = ref({});
 const step = ref(STEP.DETAILS);
 const dialog = useTemplateRef('dialogHandle');
 const description = computed(() => marked.parse(manifest.value.description || ''));
+const formValid = computed(() => {
+  return true;
+});
+
+// form data
+const location = ref('');
+const accessRestriction = ref(null);
+
+function submit() {
+
+}
 
 defineExpose({
   open(a) {
-    step.value = STEP.DETAILS;
+    step.value = STEP.INSTALL;
     app.value = a;
     manifest.value = a.manifest;