Merge branch 'master' into chores/add-minimal-ci

frontend/src/routes/account/__layout.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" context="module">
+	import { signedIn } from '$lib/stores';
+
+	export async function load({ session }) {
+		if (session.authenticated) {
+			signedIn.set(true);
+		}
+		return {};
+	}
+</script>
+
+<script lang="ts">
+	import { navbarVisible } from '$lib/stores';
+
+	navbarVisible.set(true);
+</script>
+
+<slot />

frontend/src/routes/account/password-reset.svelte

@@ -10,18 +10,22 @@
 	}
 </script>
 
-<script lang="ts">
+<script lang='ts'>
 	import { getLocalization } from '../../lib/i18n';
 
 	const { t } = getLocalization();
 	export let token: string;
 	let isSubmitting = false;
-	let passwordData = {
+	interface PasswordData {
+		password1: string;
+		password2: string;
+	}
+	let passwordData: PasswordData  = {
 		password1: '',
 		password2: ''
 	};
 	let passwordsValid = false;
-	const checkIfPasswordsValid = (pwdata) => {
+	const checkIfPasswordsValid = (pwdata: PasswordData): void => {
 		passwordsValid = pwdata.password1 === pwdata.password2 && pwdata.password1.length >= 8;
 	};
 	$: checkIfPasswordsValid(passwordData);
@@ -51,7 +55,7 @@
 	};
 </script>
 
-<div class="flex items-center justify-center h-full px-4">
+<div class='flex items-center justify-center h-full px-4'>
 	<div>
 		<div
 			class="w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800"
@@ -122,7 +126,7 @@
 								type="submit"
 							>
 								{#if isSubmitting}
-									<svg class="h-4 w-4 animate-spin mx-auto" viewBox="3 3 18 18">
+									<svg class='h-4 w-4 animate-spin mx-auto' viewBox='3 3 18 18'>
 										<path
 											class="fill-black"
 											d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"

frontend/src/routes/account/reset-password.svelte

@@ -12,6 +12,9 @@
 
 <script lang="ts">
 	import { getLocalization } from '../../lib/i18n';
+	import { navbarVisible } from '$lib/stores';
+
+	navbarVisible.set(true);
 
 	const { t } = getLocalization();
 

frontend/src/routes/account/settings.svelte

@@ -27,15 +27,20 @@
 		created_at: string;
 	}
 
-	let changePasswordData = {
+	interface ChangePasswordData {
+		oldPassword: string,
+		newPassword: string,
+		newPasswordConfirm: string
+	}
+
+	let changePasswordData: ChangePasswordData = {
 		oldPassword: '',
 		newPassword: '',
 		newPasswordConfirm: ''
 	};
 
 	let passwordChangeDataValid = false;
-	const checkPasswords = (data) => {
-		console.log('Check password');
+	const checkPasswords = (data: ChangePasswordData): void => {
 		passwordChangeDataValid =
 			data.newPassword === data.newPasswordConfirm &&
 			data.newPassword.length >= 8 &&
@@ -102,29 +107,32 @@
 				/>
 			</div>
 			<div>
-				<h1 class="text-slate-100 text-4xl font-bold my-2">{user.username}</h1>
-				<p class="text-slate-100 text-lg mb-6 md:max-w-lg">
+				<h1 class='text-slate-100 text-4xl font-bold my-2'>{user.username}</h1>
+				<p class='text-slate-100 text-lg mb-6 md:max-w-lg'>
 					{$t('words.email')}: {user.email}
 				</p>
 				<!-- TODO: Add translation -->
-				<form class="flex flex-col md:flex-row" on:submit|preventDefault={changePassword}>
+				<form class='flex flex-col md:flex-row' on:submit|preventDefault={changePassword}>
 					<label
-						>Old Password:<input
-							class="m-2 text-black"
-							bind:value={changePasswordData.oldPassword}
-						/></label
+					>Old Password:<input
+						type='password'
+						class='m-2 text-black'
+						bind:value={changePasswordData.oldPassword}
+					/></label
 					>
 					<label
-						>New Password:<input
-							class="m-2 text-black"
-							bind:value={changePasswordData.newPassword}
-						/></label
+					>New Password:<input
+						type='password'
+						class='m-2 text-black'
+						bind:value={changePasswordData.newPassword}
+					/></label
 					>
 					<label
-						>New Password again:<input
-							class="m-2 text-black"
-							bind:value={changePasswordData.newPasswordConfirm}
-						/></label
+					>New Password again:<input
+						type='password'
+						class='m-2 text-black'
+						bind:value={changePasswordData.newPasswordConfirm}
+					/></label
 					>
 					<button
 						class="border-2 px-2 py-1 rounded-md border-black text-slate-100 hover:bg-amber-700 hover:text-indigo-100 transition duration-75 disabled:cursor-not-allowed disabled:opacity-50"