Add operator setting in app acl configure

dashboard/src/components/OperatorAccessControl.vue

@@ -0,0 +1,49 @@
+<script setup>
+
+import { ref, onMounted } from 'vue';
+import { FormGroup, MultiSelect } from '@cloudron/pankow';
+import UsersModel from '../models/UsersModel.js';
+import GroupsModel from '../models/GroupsModel.js';
+
+defineProps(['hasFtp']);
+
+const usersModel = UsersModel.create();
+const groupsModel = GroupsModel.create();
+
+const accessRestriction = defineModel('acl');
+
+const users = ref([]);
+const groups = ref([]);
+
+onMounted(async () => {
+  let [error, result] = await usersModel.list();
+  if (error) return console.error(error);
+  result.forEach(u => u.username = u.username || u.email);
+  users.value = result;
+
+  [error, result] = await groupsModel.list();
+  if (error) return console.error(error);
+  groups.value = result;
+});
+
+</script>
+
+<template>
+  <div>
+    <FormGroup>
+      <label>{{ $t('app.accessControl.operators.title') }} <sup><a href="https://docs.cloudron.io/apps/#operators" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+      <p>{{ $t('app.accessControl.operators.description') }} <span v-if="hasFtp">{{ $t('app.accessControl.userManagement.descriptionSftp') }}</span></p>
+    </FormGroup>
+
+    <div>
+      <div style="margin-left: 20px; display: flex; gap: 10px;">
+        <div>
+          {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" :search-threshold="20" />
+        </div>
+        <div>
+          {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-key="id" option-label="name" :search-threshold="20" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

dashboard/src/components/app/Access.vue

@@ -3,6 +3,7 @@
 import { ref, onMounted } from 'vue';
 import { Button } from '@cloudron/pankow';
 import AccessControl from '../AccessControl.vue';
+import OperatorAccessControl from '../OperatorAccessControl.vue';
 import AppsModel from '../../models/AppsModel.js';
 import { ACL_OPTIONS } from '../../constants.js';
 
@@ -14,16 +15,20 @@ const busy = ref(false);
 const errorMessage = ref('');
 const accessRestrictionOption = ref(ACL_OPTIONS.ANY);
 const accessRestrictionAcl = ref({ users: [], groups: [] });
+const operatorAcl = ref({ users: [], groups: [] });
 
 async function onSubmit() {
   busy.value = true;
   errorMessage.value = '';
 
-  const data = {
-    accessRestriction: accessRestrictionOption.value === ACL_OPTIONS.ANY ? null : (accessRestrictionOption.value === ACL_OPTIONS.NOSSO ? false : accessRestrictionAcl.value)
-  };
+  let [error] = await appsModel.configure(props.app.id, 'access_restriction', { accessRestriction: accessRestrictionOption.value === ACL_OPTIONS.ANY ? null : (accessRestrictionOption.value === ACL_OPTIONS.NOSSO ? false : accessRestrictionAcl.value) });
+  if (error) {
+    errorMessage.value = error.body ? error.body.message : 'Internal error';
+    busy.value = false;
+    return console.error(error);
+  }
 
-  const [error] = await appsModel.configure(props.app.id, 'access_restriction', data);
+  [error] = await appsModel.configure(props.app.id, 'operators', { operators: (operatorAcl.value.users.length || operatorAcl.value.groups.length) ? operatorAcl.value : null});
   if (error) {
     errorMessage.value = error.body ? error.body.message : 'Internal error';
     busy.value = false;
@@ -44,6 +49,14 @@ onMounted(() => {
     accessRestrictionOption.value = ACL_OPTIONS.RESTRICTED;
     accessRestrictionAcl.value = props.app.accessRestriction;
   }
+
+  operatorAcl.value = { users: [], groups: [] };
+  if (props.app.operators) {
+    operatorAcl.value.users = props.app.operators.users;
+    operatorAcl.value.groups = props.app.operators.groups;
+  }
+
+  console.log(props.app)
 });
 
 </script>
@@ -53,6 +66,9 @@ onMounted(() => {
     <div class="text-danger" v-if="errorMessage">{{ errorMessage }}</div>
     <AccessControl v-model:option="accessRestrictionOption" v-model:acl="accessRestrictionAcl" :manifest="app.manifest" :hide-optional-sso-option="!app.sso"/>
     <br/>
+    <OperatorAccessControl v-model:acl="operatorAcl" :has-ftp="app.manifest.addons?.localstorage?.ftp"/>
+    <br/>
+    <br/>
     <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('main.dialog.save') }}</Button>
   </div>
 </template>