50 lines
1.7 KiB
Vue
50 lines
1.7 KiB
Vue
<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>
|