92 lines
3.7 KiB
Vue
92 lines
3.7 KiB
Vue
<script setup>
|
|
|
|
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';
|
|
|
|
const OPTIONS = Object.freeze({
|
|
ANY: 'any',
|
|
RESTRICTED: 'restricted',
|
|
NOSSO: 'nosso',
|
|
});
|
|
|
|
const usersModel = UsersModel.create();
|
|
const groupsModel = GroupsModel.create();
|
|
|
|
const props = defineProps([ 'manifest', 'error' ]);
|
|
|
|
const accessRestrictionOption = ref(OPTIONS.ANY);
|
|
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) => {
|
|
updateModelValue(value, accessRestriction);
|
|
});
|
|
|
|
watch(accessRestriction, (value) => {
|
|
updateModelValue(accessRestrictionOption.value, value);
|
|
});
|
|
|
|
onMounted(async () => {
|
|
let [error, result] = await usersModel.list();
|
|
if (error) return console.error(error);
|
|
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>
|
|
<p>
|
|
{{ $t('appstore.installDialog.userManagementMailbox') }}
|
|
<span v-html="$t('appstore.installDialog.configuredForCloudronEmail', { emailDocsLink: 'https://docs.cloudron.io/email/' })"></span>
|
|
</p>
|
|
</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>
|
|
<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')"/>
|
|
</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>
|