tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

feat: delete user button added to admin page

Browse source
This commit is contained in:
Timothy J. Baek 2023-12-28 23:12:58 -08:00
parent ad1cb5fc25
commit 7fade0bb2f
2 changed files with 68 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/lib/apis/users/index.ts
View file

@ -45,8 +45,9 @@ export const getUsers = async (token: string) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((error) => {
console.log(error);
.catch((err) => {
console.log(err);
error = err.detail;
return null;
});
@ -56,3 +57,30 @@ export const getUsers = async (token: string) => {
return res ? res : [];
};
export const deleteUserById = async (token: string, userId: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/users/${userId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.log(err);
error = err.detail;
return null;
});
if (error) {
throw error;
}
return res;
};

45
src/routes/(app)/admin/+page.svelte
View file

@ -6,7 +6,7 @@
import toast from 'svelte-french-toast';
import { updateUserRole, getUsers } from '$lib/apis/users';
import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
let loaded = false;
let users = [];
@ -22,6 +22,16 @@
}
};
const deleteUserHandler = async (id) => {
const res = await deleteUserById(localStorage.token, id).catch((error) => {
toast.error(error);
return null;
});
if (res) {
users = await getUsers(localStorage.token);
}
};
onMount(async () => {
if ($user?.role !== 'admin') {
await goto('/');
@ -55,7 +65,7 @@
<th scope="col" class="px-6 py-3"> Name </th>
<th scope="col" class="px-6 py-3"> Email </th>
<th scope="col" class="px-6 py-3"> Role </th>
<!-- <th scope="col" class="px-6 py-3"> Action </th> -->
<th scope="col" class="px-6 py-3"> Action </th>
</tr>
</thead>
<tbody>
@ -63,15 +73,16 @@
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th
scope="row"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white w-fit"
>
<div class="flex flex-row">
<img
class=" rounded-full max-w-[30px] max-h-[30px] object-cover mr-4"
src={user.profile_image_url}
alt="user"
/>
<div class=" font-semibold md:self-center">{user.name}</div>
<div class=" font-semibold self-center">{user.name}</div>
</div>
</th>
<td class="px-6 py-4"> {user.email} </td>
@ -89,9 +100,29 @@
}}>{user.role}</button
>
</td>
<!-- <td class="px-6 py-4 text-center">
<button class=" text-white underline"> Edit </button>
</td> -->
<td class="px-6 py-4 text-center flex justify-center">
<button
class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
on:click={async () => {
deleteUserHandler(user.id);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
</button>
</td>
</tr>
{/each}
</tbody>