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.
-- **Song Submission**: Panelists can submit songs either by providing a YouTube link or by uploading audio files.
-- **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.
+# create a new project in my-app
+npm create svelte@latest my-app
+```
 
-## Usage
-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.**
+## Developing
 
-## Technologies Used
-- **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.
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-## 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:**
-    ```bash
-    git clone https://git.kessinen.com/Kessinen/levyraati2024-frontend.git
-    cd levyraati-2024
-    ```
+To create a production version of your app:
 
-2. **Install dependencies:**
-    ```bash
-    pnpm install
-    ```
-3. **Start the development server:**
-    ```bash
-    pnpm run dev
-    ```
-4. **Build for production:**
-    ```bash
-    pnpm run build
-    ```
-5. **Preview production build:**
-    ```bash
-    pnpm run preview
-    ```
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

src/components/Header.svelte

@@ -14,7 +14,7 @@
 			data: { user }
 		} = await supabase.auth.getUser();
 
-		username = user?.email || '';
+		username = (user?.email || '').split('@')[0];
 	}
 
 	export async function logout() {
@@ -44,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>