Add User profile page + password change ability

README.md

@@ -1,59 +1,38 @@
-# Levyraati Revived
+# create-svelte
 
-## Overview
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
-**Levyraati Revived** is a web application built with SvelteKit, designed to offer a fun, interactive platform for a group of panelists to review and rate songs. Panelists can submit songs via YouTube links or by uploading audio files (MP3, OGG, etc.). The app supports events where songs are listened to in rounds, rated by the panelists, and a winner is announced based on total points scored.
+## Creating a project
 
-> ⚠️ Note: This project is still in the early stages of development. Features and functionality may change as we continue to improve. Feedback is always welcome!
+If you're seeing this, you've probably already done this step. Congrats!
 
-## Features
+```bash
+# create a new project in the current directory
+npm create svelte@latest
 
-- **Create Events**: A user can create an event and invite others to join.
+# create a new project in my-app
-- **Song Submission**: Panelists can submit songs either by providing a YouTube link or by uploading audio files.
+npm create svelte@latest my-app
-- **Rating System**: Each panelist rates the songs on a scale from 1 to 10.
+```
-- **Round-Based Listening**: The songs are played in rounds, and ratings are collected for each song.
-- **Winner Announcement**: The app automatically calculates and announces the song with the highest score as the winner.
 
-## Usage
+## Developing
-1. **Create an Event: A user can create a new event and invite panelists via email.**
-2. **Join an Event: Invited panelists can join the event using the invitation link sent to their email.**
-3. **Submit Songs: Each panelist submits a song for review before the event date.**
-4. **Rate Songs: During the event, songs are played one by one, and panelists provide their ratings.**
-5. **View Results: After all songs have been rated, the app calculates the total scores and announces the winner.**
 
-## Technologies Used
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-- **SvelteKit:** For building the app’s user interface and handling routing.
-- **Supabase:** Backend-as-a-Service for storing and managing data.
-- **Tailwind CSS:** For styling and responsive design.
-- **YouTube API:** (optional) for handling YouTube links if needed.
-- **MusicBrainz API:** (optional) for fetching song information if needed.
-- **lyrics.ovh:** (optional) for fetching lyrics if needed.
 
-## License
+```bash
+npm run dev
 
-This project is licensed under the MIT License - see the LICENSE file for details.
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-## Installation & Setup
+## Building
 
-1. **Clone the repository:**
+To create a production version of your app:
-    ```bash
-    git clone https://git.kessinen.com/Kessinen/levyraati2024-frontend.git
-    cd levyraati-2024
-    ```
 
-2. **Install dependencies:**
+```bash
-    ```bash
+npm run build
-    pnpm install
+```
-    ```
+
-3. **Start the development server:**
+You can preview the production build with `npm run preview`.
-    ```bash
+
-    pnpm run dev
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-    ```
-4. **Build for production:**
-    ```bash
-    pnpm run build
-    ```
-5. **Preview production build:**
-    ```bash
-    pnpm run preview
-    ```

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>