Account.svelte 12.5 KB
Newer Older
1
<script lang="ts">
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
3
	import { onMount, getContext } from 'svelte';
4
5

	import { user } from '$lib/stores';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
6
	import { updateUserProfile, createAPIKey, getAPIKey } from '$lib/apis/auths';
7
8

	import UpdatePassword from './Account/UpdatePassword.svelte';
9
	import { getGravatarUrl } from '$lib/apis/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
10
	import { copyToClipboard } from '$lib/utils';
11

12
13
	const i18n = getContext('i18n');

14
15
16
17
	export let saveHandler: Function;

	let profileImageUrl = '';
	let name = '';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
18

Timothy J. Baek's avatar
Timothy J. Baek committed
19
20
	let showJWTToken = false;
	let JWTTokenCopied = false;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
21
22
23
24
25

	let APIKey = '';
	let showAPIKey = false;
	let APIKeyCopied = false;

26
	let profileImageInputElement: HTMLInputElement;
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

	const submitHandler = async () => {
		const updatedUser = await updateUserProfile(localStorage.token, name, profileImageUrl).catch(
			(error) => {
				toast.error(error);
			}
		);

		if (updatedUser) {
			await user.set(updatedUser);
			return true;
		}
		return false;
	};

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
42
43
44
	const createAPIKeyHandler = async () => {
		APIKey = await createAPIKey(localStorage.token);
		if (APIKey) {
liu.vaayne's avatar
liu.vaayne committed
45
46
47
48
49
50
			toast.success($i18n.t('API Key created.'));
		} else {
			toast.error($i18n.t('Failed to create API Key.'));
		}
	};

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
51
	onMount(async () => {
52
53
		name = $user.name;
		profileImageUrl = $user.profile_image_url;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
54
55
56
57
58

		APIKey = await getAPIKey(localStorage.token).catch((error) => {
			console.log(error);
			return '';
		});
59
60
61
62
	});
</script>

<div class="flex flex-col h-full justify-between text-sm">
Timothy J. Baek's avatar
Timothy J. Baek committed
63
	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]">
64
65
		<input
			id="profile-image-input"
66
			bind:this={profileImageInputElement}
67
68
69
70
			type="file"
			hidden
			accept="image/*"
			on:change={(e) => {
71
				const files = profileImageInputElement.files ?? [];
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
				let reader = new FileReader();
				reader.onload = (event) => {
					let originalImageUrl = `${event.target.result}`;

					const img = new Image();
					img.src = originalImageUrl;

					img.onload = function () {
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');

						// Calculate the aspect ratio of the image
						const aspectRatio = img.width / img.height;

						// Calculate the new width and height to fit within 100x100
						let newWidth, newHeight;
						if (aspectRatio > 1) {
							newWidth = 100 * aspectRatio;
							newHeight = 100;
						} else {
							newWidth = 100;
							newHeight = 100 / aspectRatio;
						}

						// Set the canvas size
						canvas.width = 100;
						canvas.height = 100;

						// Calculate the position to center the image
						const offsetX = (100 - newWidth) / 2;
						const offsetY = (100 - newHeight) / 2;

						// Draw the image on the canvas
						ctx.drawImage(img, offsetX, offsetY, newWidth, newHeight);

						// Get the base64 representation of the compressed image
						const compressedSrc = canvas.toDataURL('image/jpeg');

						// Display the compressed image
						profileImageUrl = compressedSrc;

113
						profileImageInputElement.files = null;
114
115
116
117
118
119
120
121
122
123
124
125
					};
				};

				if (
					files.length > 0 &&
					['image/gif', 'image/jpeg', 'image/png'].includes(files[0]['type'])
				) {
					reader.readAsDataURL(files[0]);
				}
			}}
		/>

126
		<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Profile')}</div>
127
128

		<div class="flex space-x-5">
129
130
131
132
133
			<div class="flex flex-col">
				<div class="self-center">
					<button
						class="relative rounded-full dark:bg-gray-700"
						type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
134
135
136
						on:click={() => {
							profileImageInputElement.click();
						}}
137
					>
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
						<img
							src={profileImageUrl !== '' ? profileImageUrl : '/user.png'}
							alt="profile"
							class=" rounded-full w-16 h-16 object-cover"
						/>

						<div
							class="absolute flex justify-center rounded-full bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gray-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-50"
						>
							<div class="my-auto text-gray-100">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 20 20"
									fill="currentColor"
									class="w-5 h-5"
								>
									<path
										d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
									/>
								</svg>
							</div>
159
						</div>
160
161
162
163
164
165
166
167
					</button>
				</div>
				<button
					class=" text-xs text-gray-600"
					on:click={async () => {
						const url = await getGravatarUrl($user.email);

						profileImageUrl = url;
Ased Mammad's avatar
Ased Mammad committed
168
					}}>{$i18n.t('Use Gravatar')}</button
169
				>
170
171
172
173
			</div>

			<div class="flex-1">
				<div class="flex flex-col w-full">
174
					<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

					<div class="flex-1">
						<input
							class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
							type="text"
							bind:value={name}
							required
						/>
					</div>
				</div>
			</div>
		</div>

		<hr class=" dark:border-gray-700 my-4" />
		<UpdatePassword />
Timothy J. Baek's avatar
Timothy J. Baek committed
190
191
192

		<hr class=" dark:border-gray-700 my-4" />

liu.vaayne's avatar
liu.vaayne committed
193
		<div class="flex flex-col gap-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
194
			<div class="justify-between w-full">
liu.vaayne's avatar
liu.vaayne committed
195
				<div class="flex justify-between w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
196
					<div class="self-center text-xs font-medium">{$i18n.t('JWT Token')}</div>
liu.vaayne's avatar
liu.vaayne committed
197
198
199
200
201
202
203
204
205
206
				</div>

				<div class="flex mt-2">
					<div class="flex w-full">
						<input
							class="w-full rounded-l-lg py-1.5 pl-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
							type={showJWTToken ? 'text' : 'password'}
							value={localStorage.token}
							disabled
						/>
Timothy J. Baek's avatar
Timothy J. Baek committed
207

liu.vaayne's avatar
liu.vaayne committed
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
						<button
							class="px-2 transition rounded-r-lg dark:bg-gray-800"
							on:click={() => {
								showJWTToken = !showJWTToken;
							}}
						>
							{#if showJWTToken}
								<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="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
										clip-rule="evenodd"
									/>
									<path
										d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
									/>
								</svg>
							{:else}
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
									<path
										fill-rule="evenodd"
										d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
										clip-rule="evenodd"
									/>
								</svg>
							{/if}
						</button>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
247
248

					<button
liu.vaayne's avatar
liu.vaayne committed
249
						class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
Timothy J. Baek's avatar
Timothy J. Baek committed
250
						on:click={() => {
liu.vaayne's avatar
liu.vaayne committed
251
252
253
254
255
							copyToClipboard(localStorage.token);
							JWTTokenCopied = true;
							setTimeout(() => {
								JWTTokenCopied = false;
							}, 2000);
Timothy J. Baek's avatar
Timothy J. Baek committed
256
257
						}}
					>
liu.vaayne's avatar
liu.vaayne committed
258
						{#if JWTTokenCopied}
Timothy J. Baek's avatar
Timothy J. Baek committed
259
260
							<svg
								xmlns="http://www.w3.org/2000/svg"
liu.vaayne's avatar
liu.vaayne committed
261
								viewBox="0 0 20 20"
Timothy J. Baek's avatar
Timothy J. Baek committed
262
263
264
265
266
								fill="currentColor"
								class="w-4 h-4"
							>
								<path
									fill-rule="evenodd"
liu.vaayne's avatar
liu.vaayne committed
267
									d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
Timothy J. Baek's avatar
Timothy J. Baek committed
268
269
270
271
272
273
274
275
276
277
278
279
									clip-rule="evenodd"
								/>
							</svg>
						{:else}
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 16 16"
								fill="currentColor"
								class="w-4 h-4"
							>
								<path
									fill-rule="evenodd"
liu.vaayne's avatar
liu.vaayne committed
280
281
282
283
284
285
									d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
									clip-rule="evenodd"
								/>
								<path
									fill-rule="evenodd"
									d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
Timothy J. Baek's avatar
Timothy J. Baek committed
286
287
288
289
290
291
									clip-rule="evenodd"
								/>
							</svg>
						{/if}
					</button>
				</div>
liu.vaayne's avatar
liu.vaayne committed
292
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
293
			<div class="justify-between w-full">
liu.vaayne's avatar
liu.vaayne committed
294
				<div class="flex justify-between w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
295
					<div class="self-center text-xs font-medium">{$i18n.t('API Key')}</div>
liu.vaayne's avatar
liu.vaayne committed
296
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
297

liu.vaayne's avatar
liu.vaayne committed
298
299
300
301
				<div class="flex mt-2">
					<div class="flex w-full">
						<input
							class="w-full rounded-l-lg py-1.5 pl-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
302
303
							type={showAPIKey ? 'text' : 'password'}
							value={APIKey}
liu.vaayne's avatar
liu.vaayne committed
304
305
306
307
308
309
							disabled
						/>

						<button
							class="px-2 transition rounded-r-lg dark:bg-gray-800"
							on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
310
								showAPIKey = !showAPIKey;
liu.vaayne's avatar
liu.vaayne committed
311
							}}
Timothy J. Baek's avatar
Timothy J. Baek committed
312
						>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
313
							{#if showAPIKey}
liu.vaayne's avatar
liu.vaayne committed
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
								<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="M3.28 2.22a.75.75 0 0 0-1.06 1.06l10.5 10.5a.75.75 0 1 0 1.06-1.06l-1.322-1.323a7.012 7.012 0 0 0 2.16-3.11.87.87 0 0 0 0-.567A7.003 7.003 0 0 0 4.82 3.76l-1.54-1.54Zm3.196 3.195 1.135 1.136A1.502 1.502 0 0 1 9.45 8.389l1.136 1.135a3 3 0 0 0-4.109-4.109Z"
										clip-rule="evenodd"
									/>
									<path
										d="m7.812 10.994 1.816 1.816A7.003 7.003 0 0 1 1.38 8.28a.87.87 0 0 1 0-.566 6.985 6.985 0 0 1 1.113-2.039l2.513 2.513a3 3 0 0 0 2.806 2.806Z"
									/>
								</svg>
							{:else}
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
									<path
										fill-rule="evenodd"
										d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
										clip-rule="evenodd"
									/>
								</svg>
							{/if}
						</button>
					</div>

					<button
						class="ml-1.5 px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
						on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
350
351
							copyToClipboard(APIKey);
							APIKeyCopied = true;
liu.vaayne's avatar
liu.vaayne committed
352
							setTimeout(() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
353
								APIKeyCopied = false;
liu.vaayne's avatar
liu.vaayne committed
354
355
356
							}, 2000);
						}}
					>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
357
						{#if APIKeyCopied}
liu.vaayne's avatar
liu.vaayne committed
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
							<svg
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
								class="w-4 h-4"
							>
								<path
									fill-rule="evenodd"
									d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
									clip-rule="evenodd"
								/>
							</svg>
						{:else}
							<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="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z"
									clip-rule="evenodd"
								/>
								<path
									fill-rule="evenodd"
									d="M3 6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm1.75 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM4 11.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75Z"
									clip-rule="evenodd"
								/>
							</svg>
						{/if}
					</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
390
391
392
393

					<button
						class=" px-1.5 py-1 hover:bg-gray-800 transition rounded-lg"
						on:click={() => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
394
							createAPIKeyHandler();
Timothy J. Baek's avatar
Timothy J. Baek committed
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
						}}
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke-width="2"
							stroke="currentColor"
							class="size-4"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
							/>
						</svg>
					</button>
liu.vaayne's avatar
liu.vaayne committed
412
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
413
414
			</div>
		</div>
415
416
417
418
	</div>

	<div class="flex justify-end pt-3 text-sm font-medium">
		<button
Timothy J. Baek's avatar
Timothy J. Baek committed
419
			class="  px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
420
421
422
423
424
425
426
427
			on:click={async () => {
				const res = await submitHandler();

				if (res) {
					saveHandler();
				}
			}}
		>
Jannik Streidl's avatar
Jannik Streidl committed
428
			{$i18n.t('Save')}
429
430
431
		</button>
	</div>
</div>