From 60a8b1516401bf99091d5a7429ade46430febd39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 4 Apr 2024 20:50:30 +0200
Subject: [PATCH] feat(webui): users can change their passwords

---
 sdks/js/package.json                          |   2 +-
 sdks/js/src/api.ts                            |  11 ++
 webui/src/lib/components/AddModal.svelte      |  10 +-
 webui/src/lib/components/LoginModal.svelte    |  67 +++------
 webui/src/lib/components/layout/Header.svelte |  34 +----
 .../layout/HeaderUserDropdown.svelte          | 140 ++++++++++++++++++
 webui/src/lib/components/layout/Modal.svelte  |  59 ++++++++
 7 files changed, 236 insertions(+), 87 deletions(-)
 create mode 100644 webui/src/lib/components/layout/HeaderUserDropdown.svelte
 create mode 100644 webui/src/lib/components/layout/Modal.svelte

diff --git a/sdks/js/package.json b/sdks/js/package.json
index fd4f560..ed103fe 100644
--- a/sdks/js/package.json
+++ b/sdks/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@upnd/upend",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Client library to interact with the UpEnd system.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/sdks/js/src/api.ts b/sdks/js/src/api.ts
index 83ea2c0..083c355 100644
--- a/sdks/js/src/api.ts
+++ b/sdks/js/src/api.ts
@@ -434,6 +434,17 @@ export class UpEndApi {
     }
   }
 
+  public async register(credentials: {
+    username: string;
+    password: string;
+  }): Promise<void> {
+    await this.fetch(`${this.apiUrl}/auth/register`, undefined, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(credentials),
+    });
+  }
+
   public async authStatus(
     options?: ApiFetchOptions,
   ): Promise<{ user: string } | undefined> {
diff --git a/webui/src/lib/components/AddModal.svelte b/webui/src/lib/components/AddModal.svelte
index 0469fb6..58754b0 100644
--- a/webui/src/lib/components/AddModal.svelte
+++ b/webui/src/lib/components/AddModal.svelte
@@ -17,6 +17,7 @@
 	import { goto } from '$app/navigation';
 	import { i18n } from '$lib/i18n';
 	import { selected } from '$lib/components/EntitySelect.svelte';
+	import Modal from '$lib/components/layout/Modal.svelte';
 
 	let files: File[] = [];
 	let URLs: string[] = [];
@@ -114,9 +115,8 @@
 <svelte:window on:beforeunload={onBeforeUnload} />
 <svelte:body on:keydown={onKeydown} />
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-<div class="addmodal-container" class:visible class:uploading on:click={reset}>
-	<div class="addmodal" on:click|stopPropagation>
+{#if visible}
+	<Modal on:close={reset}>
 		<div class="files" bind:this={filesElement}>
 			{#each files as file}
 				<div class="entry">
@@ -163,8 +163,8 @@
 				<ProgressBar value={totalProgress} />
 			</div>
 		{/if}
-	</div>
-</div>
+	</Modal>
+{/if}
 
 <style lang="scss">
 	.addmodal-container {
diff --git a/webui/src/lib/components/LoginModal.svelte b/webui/src/lib/components/LoginModal.svelte
index 20d566c..879f4ba 100644
--- a/webui/src/lib/components/LoginModal.svelte
+++ b/webui/src/lib/components/LoginModal.svelte
@@ -2,6 +2,8 @@
 	import { i18n } from '$lib/i18n';
 	import Icon from '$lib/components/utils/Icon.svelte';
 	import { login } from '$lib/api';
+	import Modal from '$lib/components/layout/Modal.svelte';
+	import { type UpendApiError } from '@upnd/upend/api';
 
 	let username = '';
 	let password = '';
@@ -14,66 +16,31 @@
 			authenticating = true;
 			await login({ username, password });
 		} catch (e) {
-			error = (e as object).toString();
+			error = (e as UpendApiError).message || (e as UpendApiError).kind;
 		} finally {
 			authenticating = false;
 		}
 	}
 </script>
 
-<div class="modal-container">
-	<div class="modal" class:authenticating>
-		<h2>
-			<Icon name="lock" />
-			{$i18n.t('Authorization required')}
-		</h2>
-		<form on:submit|preventDefault={submit}>
-			<input placeholder={$i18n.t('Username')} type="text" bind:value={username} required />
-			<input placeholder={$i18n.t('Password')} type="password" bind:value={password} required />
-			<button type="submit"> <Icon plain name="log-in" /> {$i18n.t('Login')}</button>
-		</form>
-		{#if error}
-			<div class="error">{error}</div>
-		{/if}
-	</div>
-</div>
+<Modal disabled={authenticating}>
+	<h2>
+		<Icon name="lock" />
+		{$i18n.t('Authorization required')}
+	</h2>
+	<form on:submit|preventDefault={submit}>
+		<input placeholder={$i18n.t('Username')} type="text" bind:value={username} required />
+		<input placeholder={$i18n.t('Password')} type="password" bind:value={password} required />
+		<button type="submit"> <Icon plain name="log-in" /> {$i18n.t('Login')}</button>
+	</form>
+	{#if error}
+		<div class="error">{error}</div>
+	{/if}
+</Modal>
 
 <style lang="scss">
 	@use '$lib/styles/colors';
 
-	.modal-container {
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100vw;
-		height: 100vh;
-		background: rgba(0, 0, 0, 0.66);
-		color: var(--foreground);
-
-		z-index: 9;
-	}
-
-	.modal {
-		position: fixed;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		background: var(--background);
-		color: var(--foreground);
-		border-radius: 5px;
-		border: 1px solid var(--foreground);
-		padding: 2rem;
-
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-
-		&.authenticating {
-			filter: brightness(0.66);
-			pointer-events: none;
-		}
-	}
-
 	h2 {
 		text-align: center;
 		margin: 0 0 1rem 0;
diff --git a/webui/src/lib/components/layout/Header.svelte b/webui/src/lib/components/layout/Header.svelte
index bd75290..f896125 100644
--- a/webui/src/lib/components/layout/Header.svelte
+++ b/webui/src/lib/components/layout/Header.svelte
@@ -2,13 +2,13 @@
 	import { addEmitter } from '../AddModal.svelte';
 	import Icon from '../utils/Icon.svelte';
 	import { jobsEmitter } from './Jobs.svelte';
-	import api, { currentUser, logout } from '$lib/api';
+	import api from '$lib/api';
 	import Selector, { type SelectorValue } from '../utils/Selector.svelte';
 	import { i18n } from '$lib/i18n';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { vaultInfo } from '$lib/util/info';
-	import { slide } from 'svelte/transition';
+	import HeaderUserDropdown from '$lib/components/layout/HeaderUserDropdown.svelte';
 
 	let selector: Selector;
 	let userDropdown = false;
@@ -77,12 +77,6 @@
 	}
 </script>
 
-<svelte:body
-	on:click={() => {
-		userDropdown = false;
-	}}
-/>
-
 <div class="header">
 	<h1>
 		<a href="/">
@@ -115,17 +109,7 @@
 	>
 		<Icon name="user" />
 	</button>
-	{#if userDropdown}
-		<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
-		<div class="user-dropdown" transition:slide on:click|stopPropagation={() => {}}>
-			<div class="user">
-				<Icon plain name="user" />
-				{$currentUser || '???'}
-			</div>
-			<hr />
-			<button on:click={() => logout()}> <Icon name="log-out" />{$i18n.t('Log out')}</button>
-		</div>
-	{/if}
+	<HeaderUserDropdown bind:open={userDropdown} />
 </div>
 
 <style lang="scss">
@@ -169,18 +153,6 @@
 		}
 	}
 
-	.user-dropdown {
-		background: var(--background);
-		border-radius: 4px;
-		border: 1px solid var(--foreground);
-		padding: 0.5em;
-		position: absolute;
-		top: 3.5rem;
-		right: 0.5rem;
-		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
-		z-index: 99;
-	}
-
 	@media screen and (max-width: 600px) {
 		.name {
 			display: none;
diff --git a/webui/src/lib/components/layout/HeaderUserDropdown.svelte b/webui/src/lib/components/layout/HeaderUserDropdown.svelte
new file mode 100644
index 0000000..f224ec0
--- /dev/null
+++ b/webui/src/lib/components/layout/HeaderUserDropdown.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import api, { currentUser, logout } from '$lib/api';
+	import { type UpendApiError } from '@upnd/upend/api';
+	import { i18n } from '$lib/i18n';
+	import Icon from '$lib/components/utils/Icon.svelte';
+	import { slide } from 'svelte/transition';
+	import Modal from '$lib/components/layout/Modal.svelte';
+
+	export let open = false;
+
+	let changePasswordModal = false;
+	let currentPassword = '';
+	let newPassword = '';
+	let newPasswordConfirm = '';
+
+	async function changePassword() {
+		try {
+			const result = await api.authenticate(
+				{ username: $currentUser!, password: currentPassword },
+				'key'
+			);
+			if (result) {
+				await api.register({ username: $currentUser!, password: newPassword });
+				alert($i18n.t('Password changed successfully').toString());
+				changePasswordModal = false;
+			}
+		} catch (e: unknown) {
+			alert(
+				$i18n.t('Error authenticating: {error}', { error: (e as UpendApiError).message }).toString()
+			);
+		}
+	}
+</script>
+
+<svelte:body
+	on:click={() => {
+		open = false;
+	}}
+/>
+
+{#if open}
+	<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
+	<div class="user-dropdown" transition:slide on:click|stopPropagation>
+		<div class="user">
+			<Icon plain name="user" />
+			{$currentUser || '???'}
+		</div>
+		<button on:click={() => (changePasswordModal = true)}>
+			<Icon name="lock" />{$i18n.t('Change password')}</button
+		>
+		<button on:click={() => logout()}> <Icon name="log-out" />{$i18n.t('Log out')}</button>
+	</div>
+{/if}
+
+{#if changePasswordModal}
+	<Modal on:close={() => (changePasswordModal = false)}>
+		<h2>
+			<Icon name="lock" />
+			{$i18n.t('Change password')}
+		</h2>
+		<form class="change-password">
+			<label>
+				<span>{$i18n.t('Current password')}</span>
+				<input type="password" bind:value={currentPassword} required />
+			</label>
+			<label>
+				<span>{$i18n.t('New password')}</span>
+				<input type="password" bind:value={newPassword} required />
+			</label>
+			<label>
+				<span>{$i18n.t('Confirm new password')}</span>
+				<input type="password" bind:value={newPasswordConfirm} required />
+			</label>
+			<button
+				type="submit"
+				on:click={() => changePassword()}
+				disabled={newPassword !== newPasswordConfirm || !newPassword}
+				>{$i18n.t('Change password')}</button
+			>
+		</form>
+	</Modal>
+{/if}
+
+<style>
+	.user-dropdown {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+
+		background: var(--background);
+		border-radius: 4px;
+		border: 1px solid var(--foreground);
+		padding: 0.5em;
+		position: absolute;
+		top: 3.5rem;
+		right: 0.5rem;
+		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+		z-index: 99;
+	}
+
+	.user {
+		font-weight: 500;
+		margin: 0 1rem;
+	}
+
+	button,
+	.user {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	h2 {
+		text-align: center;
+		margin: 0 0 1rem 0;
+	}
+
+	.change-password {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		align-items: center;
+		gap: 0.5rem 1rem;
+
+		& label {
+			display: contents;
+
+			& span {
+				text-align: right;
+			}
+		}
+
+		& button {
+			grid-column: span 2;
+			justify-content: center;
+			justify-self: center;
+			font-weight: 500;
+			margin-top: 1rem;
+		}
+	}
+</style>
diff --git a/webui/src/lib/components/layout/Modal.svelte b/webui/src/lib/components/layout/Modal.svelte
new file mode 100644
index 0000000..2e05f33
--- /dev/null
+++ b/webui/src/lib/components/layout/Modal.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	export let disabled = false;
+	export let dismissable = true;
+
+	function close() {
+		if (!dismissable) return;
+		dispatch('close');
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') close();
+	}
+</script>
+
+<svelte:body on:keydown={onKeydown} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div class="modal-container" on:click={close} transition:fade={{ duration: 200 }}>
+	<div class="modal" class:disabled on:click|stopPropagation>
+		<slot />
+	</div>
+</div>
+
+<style>
+	.modal-container {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100vw;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.66);
+
+		z-index: 999;
+	}
+
+	.modal {
+		position: fixed;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--background);
+		color: var(--foreground);
+		border-radius: 5px;
+		border: 1px solid var(--foreground);
+		padding: 2rem;
+
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+
+		&.disabled {
+			filter: brightness(0.66);
+			pointer-events: none;
+		}
+	}
+</style>