mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-11 20:05:19 +00:00
feat: user permissions for workspace in UI
This commit is contained in:
parent
6f1486ffd0
commit
8364db2e05
1 changed files with 111 additions and 0 deletions
|
|
@ -4,6 +4,7 @@
|
|||
const i18n = getContext('i18n');
|
||||
|
||||
import { getGroups } from '$lib/apis/groups';
|
||||
import { getAllUsers } from '$lib/apis/users';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Plus from '$lib/components/icons/Plus.svelte';
|
||||
import UserCircleSolid from '$lib/components/icons/UserCircleSolid.svelte';
|
||||
|
|
@ -21,6 +22,9 @@
|
|||
let selectedGroupId = '';
|
||||
let groups = [];
|
||||
|
||||
let selectedUserId = '';
|
||||
let users = [];
|
||||
|
||||
$: if (!sharePublic && accessControl === null) {
|
||||
initPublicAccess();
|
||||
}
|
||||
|
|
@ -43,6 +47,8 @@
|
|||
|
||||
onMount(async () => {
|
||||
groups = await getGroups(localStorage.token, true);
|
||||
users = await getAllUsers(localStorage.token);
|
||||
users = users?.users ?? [];
|
||||
|
||||
if (accessControl === null) {
|
||||
initPublicAccess();
|
||||
|
|
@ -253,6 +259,111 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users section -->
|
||||
{@const accessUsers = users.filter((user) =>
|
||||
(accessControl?.read?.user_ids ?? []).includes(user.id)
|
||||
)}
|
||||
<div class="mt-4">
|
||||
<div class="">
|
||||
<div class="flex justify-between mb-2.5">
|
||||
<div class="text-xs font-medium text-gray-500">
|
||||
{$i18n.t('Users')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if accessUsers.length > 0}
|
||||
<div class="flex flex-col gap-1.5 mb-2 px-0.5 mx-0.5">
|
||||
{#each accessUsers as user}
|
||||
<div class="flex items-center gap-3 justify-between text-sm w-full transition">
|
||||
<div class="flex items-center gap-1.5 w-full">
|
||||
<div>
|
||||
{user.name} <span class="text-xs text-gray-500">{user?.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-end items-center gap-0.5">
|
||||
<button
|
||||
class=""
|
||||
type="button"
|
||||
on:click={() => {
|
||||
if (accessRoles.includes('write')) {
|
||||
if ((accessControl?.write?.user_ids ?? []).includes(user.id)) {
|
||||
accessControl.write.user_ids = (
|
||||
accessControl?.write?.user_ids ?? []
|
||||
).filter((user_id) => user_id !== user.id);
|
||||
} else {
|
||||
accessControl.write.user_ids = [
|
||||
...(accessControl?.write?.user_ids ?? []),
|
||||
user.id
|
||||
];
|
||||
}
|
||||
onChange(accessControl);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if (accessControl?.write?.user_ids ?? []).includes(user.id)}
|
||||
<Badge type={'success'} content={$i18n.t('Write')} />
|
||||
{:else}
|
||||
<Badge type={'info'} content={$i18n.t('Read')} />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class=" rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
accessControl.read.user_ids = (
|
||||
accessControl?.read?.user_ids ?? []
|
||||
).filter((id) => id !== user.id);
|
||||
accessControl.write.user_ids = (
|
||||
accessControl?.write?.user_ids ?? []
|
||||
).filter((id) => id !== user.id);
|
||||
onChange(accessControl);
|
||||
}}
|
||||
>
|
||||
<XMark />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mb-1">
|
||||
<div class="flex w-full">
|
||||
<div class="flex flex-1 items-center">
|
||||
<div class="w-full px-0.5">
|
||||
<select
|
||||
class="dark:bg-gray-900 outline-hidden bg-transparent text-sm block w-full pr-10 max-w-full
|
||||
{selectedUserId ? '' : 'text-gray-500'}
|
||||
dark:placeholder-gray-500"
|
||||
bind:value={selectedUserId}
|
||||
on:change={() => {
|
||||
if (selectedUserId !== '') {
|
||||
accessControl.read.user_ids = [
|
||||
...(accessControl?.read?.user_ids ?? []),
|
||||
selectedUserId
|
||||
];
|
||||
|
||||
selectedUserId = '';
|
||||
onChange(accessControl);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option class=" text-gray-700" value="" disabled selected
|
||||
>{$i18n.t('Select a user')}</option
|
||||
>
|
||||
{#each users.filter((user) => !(accessControl?.read?.user_ids ?? []).includes(user.id)) as user}
|
||||
<option class=" text-gray-700" value={user.id}>{user.name} ({user.email})</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue