Files
cloudron-box/dashboard/src/components/AccessControl.vue
2025-09-19 20:50:01 +02:00

71 lines
3.5 KiB
Vue

<script setup>
import { ref, onMounted } from 'vue';
import { FormGroup, Radiobutton, MultiSelect } from '@cloudron/pankow';
import UsersModel from '../models/UsersModel.js';
import GroupsModel from '../models/GroupsModel.js';
import { ACL_OPTIONS } from '../constants.js';
const usersModel = UsersModel.create();
const groupsModel = GroupsModel.create();
const props = defineProps([ 'manifest', 'error', 'hideOptionalSsoOption' ]);
const accessRestrictionOption = defineModel('option');
const accessRestriction = defineModel('acl');
const users = ref([]);
const groups = ref([]);
const optionalSso = !!props.manifest.optionalSso;
const cloudronAuth = !!(props.manifest.addons['ldap'] || props.manifest.addons['oidc'] || props.manifest.addons['proxyAuth']) && !props.hideOptionalSsoOption;
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 v-show="manifest.addons.email">
<label>{{ $t('appstore.installDialog.userManagement') }}</label>
<div>
{{ $t('appstore.installDialog.userManagementMailbox') }}
<span v-html="$t('appstore.installDialog.configuredForCloudronEmail', { emailDocsLink: 'https://docs.cloudron.io/email/' })"></span>
</div>
</FormGroup>
<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>
<div v-show="cloudronAuth && !manifest.addons.email">{{ $t('app.accessControl.userManagement.description') }}</div>
<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>
<div v-show="!cloudronAuth || manifest.addons.email">{{ $t('appstore.installDialog.userManagementNone') }}</div>
<div style="padding-top: 10px">
<Radiobutton v-model="accessRestrictionOption" :value="ACL_OPTIONS.NOSSO" v-if="cloudronAuth && optionalSso" :label="$t('appstore.installDialog.userManagementLeaveToApp')"/>
<Radiobutton v-model="accessRestrictionOption" :value="ACL_OPTIONS.ANY" :label="cloudronAuth ? $t('appstore.installDialog.userManagementAllUsers') : $t('app.accessControl.userManagement.visibleForAllUsers')"/>
<Radiobutton v-model="accessRestrictionOption" :value="ACL_OPTIONS.RESTRICTED" :label="cloudronAuth ? $t('appstore.installDialog.userManagementSelectUsers') : $t('app.accessControl.userManagement.visibleForSelected')"/>
</div>
</FormGroup>
<div v-if="accessRestrictionOption === ACL_OPTIONS.RESTRICTED">
<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>