+page.svelte 12.9 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
2
<script>
	import { WEBUI_API_BASE_URL } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
	import { WEBUI_NAME, config, user } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
4
	import { goto } from '$app/navigation';
5
	import { onMount, getContext } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
6

Timothy J. Baek's avatar
Timothy J. Baek committed
7
	import dayjs from 'dayjs';
Timothy J. Baek's avatar
Timothy J. Baek committed
8
9
	import relativeTime from 'dayjs/plugin/relativeTime';
	dayjs.extend(relativeTime);
Timothy J. Baek's avatar
Timothy J. Baek committed
10

Jannik Streidl's avatar
Jannik Streidl committed
11
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
12

13
	import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
14
	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
Timothy J. Baek's avatar
Timothy J. Baek committed
15
	import EditUserModal from '$lib/components/admin/EditUserModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
16
	import SettingsModal from '$lib/components/admin/SettingsModal.svelte';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
17
	import Pagination from '$lib/components/common/Pagination.svelte';
18
19
20
	import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
	import Tooltip from '$lib/components/common/Tooltip.svelte';
	import UserChatsModal from '$lib/components/admin/UserChatsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
21
	import AddUserModal from '$lib/components/admin/AddUserModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
22

23
24
	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
25
26
27
	let loaded = false;
	let users = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
28
	let search = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
29
30
	let selectedUser = null;

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
31
32
	let page = 1;

Timothy J. Baek's avatar
Timothy J. Baek committed
33
	let showSettingsModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
34
	let showAddUserModal = false;
35
36

	let showUserChatsModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
37
	let showEditUserModal = false;
38

Timothy J. Baek's avatar
Timothy J. Baek committed
39
40
41
42
43
	const updateRoleHandler = async (id, role) => {
		const res = await updateUserRole(localStorage.token, id, role).catch((error) => {
			toast.error(error);
			return null;
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
44
45

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
46
			users = await getUsers(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
49
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
50
51
52
53
54
55
56
	const editUserPasswordHandler = async (id, password) => {
		const res = await deleteUserById(localStorage.token, id).catch((error) => {
			toast.error(error);
			return null;
		});
		if (res) {
			users = await getUsers(localStorage.token);
57
			toast.success($i18n.t('Successfully updated.'));
Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
		}
	};

61
62
63
64
65
66
67
68
69
70
	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);
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
71
	onMount(async () => {
72
		if ($user?.role !== 'admin') {
Timothy J. Baek's avatar
Timothy J. Baek committed
73
74
			await goto('/');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
75
			users = await getUsers(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
76
77
78
79
80
		}
		loaded = true;
	});
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
81
<svelte:head>
82
	<title>{$i18n.t('Admin Panel')} | {$WEBUI_NAME}</title>
Timothy J. Baek's avatar
Timothy J. Baek committed
83
84
</svelte:head>

Timothy J. Baek's avatar
Timothy J. Baek committed
85
86
87
88
89
90
91
92
93
94
95
{#key selectedUser}
	<EditUserModal
		bind:show={showEditUserModal}
		{selectedUser}
		sessionUser={$user}
		on:save={async () => {
			users = await getUsers(localStorage.token);
		}}
	/>
{/key}

Timothy J. Baek's avatar
Timothy J. Baek committed
96
97
98
99
100
101
<AddUserModal
	bind:show={showAddUserModal}
	on:save={async () => {
		users = await getUsers(localStorage.token);
	}}
/>
102
<UserChatsModal bind:show={showUserChatsModal} user={selectedUser} />
Timothy J. Baek's avatar
Timothy J. Baek committed
103
104
<SettingsModal bind:show={showSettingsModal} />

Timothy J. Baek's avatar
Timothy J. Baek committed
105
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
Timothy J. Baek's avatar
Timothy J. Baek committed
106
	{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
107
		<div class=" flex flex-col justify-between w-full overflow-y-auto">
Timothy J. Baek's avatar
Timothy J. Baek committed
108
			<div class=" mx-auto w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
109
				<div class="w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
110
					<div class=" flex flex-col justify-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
111
						<div class=" px-6 pt-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
112
							<div class=" flex justify-between items-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
113
								<div class="flex items-center text-2xl font-semibold">Dashboard</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
114
								<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
115
116
117
118
119
120
121
									<Tooltip content={$i18n.t('Admin Settings')}>
										<button
											class="flex items-center space-x-1 p-2 md:px-3 md:py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
											type="button"
											on:click={() => {
												showSettingsModal = !showSettingsModal;
											}}
Timothy J. Baek's avatar
Timothy J. Baek committed
122
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													fill-rule="evenodd"
													d="M6.955 1.45A.5.5 0 0 1 7.452 1h1.096a.5.5 0 0 1 .497.45l.17 1.699c.484.12.94.312 1.356.562l1.321-1.081a.5.5 0 0 1 .67.033l.774.775a.5.5 0 0 1 .034.67l-1.08 1.32c.25.417.44.873.561 1.357l1.699.17a.5.5 0 0 1 .45.497v1.096a.5.5 0 0 1-.45.497l-1.699.17c-.12.484-.312.94-.562 1.356l1.082 1.322a.5.5 0 0 1-.034.67l-.774.774a.5.5 0 0 1-.67.033l-1.322-1.08c-.416.25-.872.44-1.356.561l-.17 1.699a.5.5 0 0 1-.497.45H7.452a.5.5 0 0 1-.497-.45l-.17-1.699a4.973 4.973 0 0 1-1.356-.562L4.108 13.37a.5.5 0 0 1-.67-.033l-.774-.775a.5.5 0 0 1-.034-.67l1.08-1.32a4.971 4.971 0 0 1-.561-1.357l-1.699-.17A.5.5 0 0 1 1 8.548V7.452a.5.5 0 0 1 .45-.497l1.699-.17c.12-.484.312-.94.562-1.356L2.629 4.107a.5.5 0 0 1 .034-.67l.774-.774a.5.5 0 0 1 .67-.033L5.43 3.71a4.97 4.97 0 0 1 1.356-.561l.17-1.699ZM6 8c0 .538.212 1.026.558 1.385l.057.057a2 2 0 0 0 2.828-2.828l-.058-.056A2 2 0 0 0 6 8Z"
													clip-rule="evenodd"
												/>
											</svg>

											<div class="hidden md:inline text-xs">{$i18n.t('Admin Settings')}</div>
										</button>
									</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
139
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
140
141
							</div>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
142

Timothy J. Baek's avatar
Timothy J. Baek committed
143
						<div class="px-6 flex text-sm gap-2.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
144
145
							<div class="py-3 border-b font-medium text-gray-100 cursor-pointer">Overview</div>
							<!-- <div class="py-3 text-gray-300 cursor-pointer">Users</div> -->
146
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
147

Timothy J. Baek's avatar
Timothy J. Baek committed
148
149
						<hr class=" mb-3 dark:border-gray-800" />

Timothy J. Baek's avatar
Timothy J. Baek committed
150
151
						<div class="px-6">
							<div class="mt-0.5 mb-3 gap-1 flex flex-col md:flex-row justify-between">
Timothy J. Baek's avatar
Timothy J. Baek committed
152
153
154
155
156
157
158
159
								<div class="flex text-lg font-medium px-0.5">
									{$i18n.t('All Users')}
									<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
									<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
										>{users.length}</span
									>
								</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
160
								<div class="flex gap-1">
Timothy J. Baek's avatar
Timothy J. Baek committed
161
									<input
Timothy J. Baek's avatar
Timothy J. Baek committed
162
										class="w-full md:w-60 rounded-xl py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
163
164
165
										placeholder={$i18n.t('Search')}
										bind:value={search}
									/>
Timothy J. Baek's avatar
Timothy J. Baek committed
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

									<div>
										<button
											class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
											on:click={() => {
												showAddUserModal = !showAddUserModal;
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
												/>
											</svg>
										</button>
									</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
186
187
188
189
190
191
192
193
194
195
196
197
								</div>
							</div>

							<div class="scrollbar-hidden relative overflow-x-auto whitespace-nowrap">
								<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto">
									<thead
										class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400"
									>
										<tr>
											<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
											<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
											<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
Timothy J. Baek's avatar
Timothy J. Baek committed
198
199
											<th scope="col" class="px-3 py-2"> {$i18n.t('Last Active')} </th>

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
200
201
											<th scope="col" class="px-3 py-2"> {$i18n.t('Created at')} </th>

Timothy J. Baek's avatar
Timothy J. Baek committed
202
203
204
205
											<th scope="col" class="px-3 py-2 text-right" />
										</tr>
									</thead>
									<tbody>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
206
207
208
209
210
211
212
213
214
215
216
										{#each users
											.filter((user) => {
												if (search === '') {
													return true;
												} else {
													let name = user.name.toLowerCase();
													const query = search.toLowerCase();
													return name.includes(query);
												}
											})
											.slice((page - 1) * 20, page * 20) as user}
Timothy J. Baek's avatar
Timothy J. Baek committed
217
218
											<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 text-xs">
												<td class="px-3 py-2 min-w-[7rem] w-28">
Timothy J. Baek's avatar
Timothy J. Baek committed
219
													<button
Timothy J. Baek's avatar
Timothy J. Baek committed
220
221
222
223
224
225
226
227
228
229
230
231
232
233
														class=" flex items-center gap-2 text-xs px-3 py-0.5 rounded-lg {user.role ===
															'admin' &&
															'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role ===
															'user' &&
															'text-green-600 dark:text-green-200 bg-green-200/30'} {user.role ===
															'pending' && 'text-gray-600 dark:text-gray-200 bg-gray-200/30'}"
														on:click={() => {
															if (user.role === 'user') {
																updateRoleHandler(user.id, 'admin');
															} else if (user.role === 'pending') {
																updateRoleHandler(user.id, 'user');
															} else {
																updateRoleHandler(user.id, 'pending');
															}
Timothy J. Baek's avatar
Timothy J. Baek committed
234
235
														}}
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
														<div
															class="w-1 h-1 rounded-full {user.role === 'admin' &&
																'bg-sky-600 dark:bg-sky-300'} {user.role === 'user' &&
																'bg-green-600 dark:bg-green-300'} {user.role === 'pending' &&
																'bg-gray-600 dark:bg-gray-300'}"
														/>
														{$i18n.t(user.role)}</button
													>
												</td>
												<td class="px-3 py-2 font-medium text-gray-900 dark:text-white w-max">
													<div class="flex flex-row w-max">
														<img
															class=" rounded-full w-6 h-6 object-cover mr-2.5"
															src={user.profile_image_url}
															alt="user"
														/>

														<div class=" font-medium self-center">{user.name}</div>
													</div>
												</td>
												<td class=" px-3 py-2"> {user.email} </td>

												<td class=" px-3 py-2">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
259
													{dayjs(user.last_active_at * 1000).fromNow()}
Timothy J. Baek's avatar
Timothy J. Baek committed
260
261
262
												</td>

												<td class=" px-3 py-2">
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
263
													{dayjs(user.created_at * 1000).format($i18n.t('MMMM DD, YYYY'))}
Timothy J. Baek's avatar
Timothy J. Baek committed
264
265
266
267
												</td>

												<td class="px-3 py-2 text-right">
													<div class="flex justify-end w-full">
268
269
270
271
272
273
274
275
276
277
278
279
														<Tooltip content="Chats">
															<button
																class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
																on:click={async () => {
																	showUserChatsModal = !showUserChatsModal;
																	selectedUser = user;
																}}
															>
																<ChatBubbles />
															</button>
														</Tooltip>

280
														<Tooltip content={$i18n.t('Edit User')}>
281
282
283
284
285
286
															<button
																class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
																on:click={async () => {
																	showEditUserModal = !showEditUserModal;
																	selectedUser = user;
																}}
Timothy J. Baek's avatar
Timothy J. Baek committed
287
															>
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
																<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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
																	/>
																</svg>
															</button>
														</Tooltip>

305
														<Tooltip content={$i18n.t('Delete User')}>
306
307
308
309
310
															<button
																class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
																on:click={async () => {
																	deleteUserHandler(user.id);
																}}
Timothy J. Baek's avatar
Timothy J. Baek committed
311
															>
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
																<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 9-.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 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
																	/>
																</svg>
															</button>
														</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
328
329
330
331
332
333
334
335
336
337
338
													</div>
												</td>
											</tr>
										{/each}
									</tbody>
								</table>
							</div>

							<div class=" text-gray-500 text-xs mt-2 text-right">
								ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
							</div>
tabacoWang's avatar
tabacoWang committed
339

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
340
							<Pagination bind:page count={users.length} />
Timothy J. Baek's avatar
Timothy J. Baek committed
341
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
					</div>
				</div>
			</div>
		</div>
	{/if}
</div>

<style>
	.font-mona {
		font-family: 'Mona Sans';
	}

	.scrollbar-hidden::-webkit-scrollbar {
		display: none; /* for Chrome, Safari and Opera */
	}

	.scrollbar-hidden {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
</style>