Enable more acl options

dashboard/src/components/AccessControl.vue

@@ -1,7 +1,9 @@
 <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>
+      <label v-show="cloudronAuth && !manifest.addons.email">{{ $t('appstore.installDialog.userManagement') }} <sup><a href="https://docs.cloudron.io/apps/#access-restriction" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+      <label v-show="!cloudronAuth || manifest.addons.email">{{ $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.NOSSO" v-if="optionalSso" :label="$t('appstore.installDialog.userManagementLeaveToApp')"/>
       <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>
@@ -21,7 +23,7 @@
 
 <script setup>
 
-import { ref, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch } from 'vue';
 import { FormGroup, Radiobutton, MultiSelect } from 'pankow';
 import UsersModel from '../models/UsersModel.js';
 import GroupsModel from '../models/GroupsModel.js';
@@ -31,20 +33,42 @@ const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_OR
 const OPTIONS = Object.freeze({
   ANY: 'any',
   RESTRICTED: 'restricted',
+  NOSSO: 'nosso',
 });
 
 const usersModel = UsersModel.create(API_ORIGIN, localStorage.token);
 const groupsModel = GroupsModel.create(API_ORIGIN, localStorage.token);
 
+const props = defineProps([ 'manifest', 'error' ]);
+
 const accessRestrictionOption = ref(OPTIONS.ANY);
-const accessRestriction = ref({ users: [], groups: [] });
+const accessRestriction = reactive({ users: [], groups: [] });
 const users = ref([]);
 const groups = ref([]);
 const model = defineModel({ type: Object });
 
+const optionalSso = !!props.manifest.optionalSso;
+const cloudronAuth = (props.manifest.addons['ldap'] || props.manifest.addons['oidc'] || props.manifest.addons['proxyAuth']);
+
+function updateModelValue(option, userGroups) {
+  if (option === OPTIONS.ANY) {
+    model.value = true;
+  } else if (option === OPTIONS.NOSSO) {
+    model.value = false;
+  } else {
+    model.value = {
+      users: userGroups.users.map(u => u.id),
+      groups: userGroups.groups.map(g => g.id),
+    };
+  }
+}
+
 watch(accessRestrictionOption, (value) => {
-  if (value === OPTIONS.ANY) model.value = null;
-  else model.value = accessRestriction.value;
+  updateModelValue(value, accessRestrictionOption);
+});
+
+watch(accessRestriction, (value) => {
+  updateModelValue(accessRestrictionOption.value, value);
 });
 
 onMounted(async () => {

dashboard/src/components/AppInstallDialog.vue

@@ -48,7 +48,7 @@
               </FormGroup>
 
               <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" :error="formError"/>
-              <AccessControl v-model="accessRestriction"/>
+              <AccessControl v-model="accessRestriction" :manifest="manifest"/>
 
               <Button @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
             </fieldset>
@@ -108,7 +108,11 @@ const formValid = computed(() => {
 
 // form data
 const location = ref('');
-const accessRestriction = ref(null);
+// accessRestriction:
+// object = SSO with user groups
+// true = SSO all
+// false = NOSSO
+const accessRestriction = ref(true);
 const domain = ref({});
 const tcpPorts = ref({});
 const udpPorts = ref({});
@@ -119,10 +123,10 @@ async function submit() {
   const config = {
     subdomain: location.value,
     domain: domain.value.domain,
-    accessRestriction: accessRestriction.value,
+    accessRestriction: typeof accessRestriction.value === 'object' ? accessRestriction.value : null,
   };
 
-  if (manifest.value.optionalSso) config.sso =!!accessRestriction.value;
+  if (manifest.value.optionalSso) config.sso = accessRestriction.value;
 
   const finalPorts = {};
   for (const p in tcpPorts.value) {