jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Rework AccessControl component to not mix model values

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-02 14:58:08 +01:00
parent e4b4a7b0c5
commit e13db20c85
3 changed files with 19 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
dashboard/src/components/AccessControl.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ref, onMounted } from 'vue';
import { FormGroup, Radiobutton, MultiSelect } from 'pankow';
import UsersModel from '../models/UsersModel.js';
import GroupsModel from '../models/GroupsModel.js';
@@ -16,36 +16,14 @@ const groupsModel = GroupsModel.create();
const props = defineProps([ 'manifest', 'error' ]);
const accessRestrictionOption = ref(OPTIONS.ANY);
const accessRestriction = reactive({ users: [], groups: [] });
const accessRestrictionOption = defineModel('option');
const accessRestriction = defineModel('acl');
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) => {
updateModelValue(value, accessRestriction);
});
watch(accessRestriction, (value) => {
updateModelValue(accessRestrictionOption.value, value);
});
onMounted(async () => {
let [error, result] = await usersModel.list();
if (error) return console.error(error);
@@ -60,6 +38,8 @@ onMounted(async () => {
<template>
<div>
{{ model }}
<FormGroup v-show="manifest.addons.email">
<label>{{ $t('appstore.installDialog.userManagement') }}</label>
<p>
@@ -70,20 +50,21 @@ onMounted(async () => {
<FormGroup>
<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>
<p v-show="cloudronAuth && !manifest.addons.email">{{ $t('app.accessControl.userManagement.description') }}</p>
<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>
<p v-show="!cloudronAuth || manifest.addons.email">{{ $t('appstore.installDialog.userManagementNone') }}</p>
<Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.NOSSO" v-if="optionalSso" :label="$t('appstore.installDialog.userManagementLeaveToApp')"/>
<Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.ANY" :label="cloudronAuth ? $t('appstore.installDialog.userManagementAllUsers') : $t('app.accessControl.userManagement.visibleForAllUsers')"/>
<Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.RESTRICT" :label="cloudronAuth ? $t('appstore.installDialog.userManagementSelectUsers') : $t('app.accessControl.userManagement.visibleForSelected')"/>
<Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.RESTRICTED" :label="cloudronAuth ? $t('appstore.installDialog.userManagementSelectUsers') : $t('app.accessControl.userManagement.visibleForSelected')"/>
</FormGroup>
<div v-if="accessRestrictionOption === OPTIONS.RESTRICT">
<div v-if="accessRestrictionOption === OPTIONS.RESTRICTED">
<div style="margin-left: 20px; display: flex;">
<div>
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-key="id" option-label="username" />
</div>
<div>
{{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
{{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-key="id" option-label="name" />
</div>
</div>
</div>