Fixes issue #9 (#11)

Basic user profile page. Just for the user to be able to change their passwords. More will have to be implemented

Co-authored-by: Esa Kataja <[email protected]>
Reviewed-on: #11

src/components/Header.svelte

@@ -1,24 +1,36 @@
 <script>
 	import { supabase } from '../supabaseClient';
 	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
 	let username = '';
 
+	onMount(async () => {
+		await getUser();
+	});
+
+	async function getUser() {
+		const {
+			data: { user }
+		} = await supabase.auth.getUser();
+
+		username = (user?.email || '').split('@')[0];
+	}
+
 	export async function logout() {
 		await supabase.auth.signOut();
 
 		goto('/');
 	}
 
-	async function getUser() {
+	// Call getUser() whenever the user logs in or out
-		const {
+	async function handleAuthChange() {
-			data: { user }
+		await getUser();
-		} = await supabase.auth.getUser();
-
-		username = user?.email || '';
 	}
 
-	getUser();
+	supabase.auth.onAuthStateChange((event, session) => {
+		handleAuthChange();
+	});
 </script>
 
 <header class="bg-zinc-800 text-white mb-20 p-4 flex items-center justify-between shadow-2xl">
@@ -32,7 +44,10 @@
 	{#if username === ''}
 		<a href="/login">Kirjaudu</a>
 	{:else}
-		<a href="/" on:click={logout}>Hei {username}, Kirjaudu Ulos</a>
+		<div>
+			<a href="/user">Hei {username},</a>
+			<a href="/" on:click={logout}> Kirjaudu Ulos</a>
+		</div>
 	{/if}
 </header>
 

src/routes/user/+page.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { supabase } from '../../supabaseClient';
+	import { onMount } from 'svelte';
+
+	let email = '';
+
+	onMount(async () => {
+		const { data, error } = await supabase.auth.getSession();
+		if (error) {
+			alert(error.message);
+		} else {
+			email = data.session?.user?.email ?? '';
+
+			console.log('email', email);
+		}
+	});
+
+	async function changePassword() {
+		const { data, error } = await supabase.auth.getUser();
+
+		if (data.user) {
+			const newPassword = (document.getElementById('new_password') as HTMLInputElement)?.value;
+			const confirmPassword = (document.getElementById('confirm_password') as HTMLInputElement)
+				?.value;
+
+			if (newPassword === confirmPassword) {
+				const { data, error } = await supabase.auth.updateUser({
+					password: newPassword
+				});
+
+				if (error) {
+					alert(error.message);
+				} else {
+					alert('Password changed successfully!');
+				}
+			} else {
+				alert('Passwords do not match!');
+			}
+		} else {
+			alert('You must be logged in to change your password!');
+		}
+	}
+</script>
+
+<div>
+	<form
+		class="max-w-lg mx-auto border-2 border-zinc-700 p-10 rounded-lg badge-glass flex flex-col gap-4"
+		on:submit|preventDefault={changePassword}
+	>
+		<label for="email" class="label">Sähköposti:</label>
+		<input class="input" type="email" name="email" id="email" value={email} />
+		<hr />
+		<p>Vaihda salasana</p>
+
+		<label for="new_password" class="label">Uusi salasana:</label>
+		<input class="input" type="password" name="new_password" id="new_password" />
+		<label for="confirm_password" class="label">Vahvista uusi salasana:</label>
+		<input class="input" type="password" name="confirm_password" id="confirm_password" />
+		<button class="btn variant-filled" type="submit">Vaihda salasana</button>
+	</form>
+</div>