From c6db2a9add44931ed0522d90d5415f715cd85e6a Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 10 Apr 2024 21:50:04 +0100
Subject: [PATCH] feat(*): Move account functionality into header

---
 src/lib/components/SignIn.svelte | 32 ++++++++++++++++--
 src/routes/+layout.svelte        | 56 +++++++++++++++++++++++++-------
 src/routes/+page.svelte          | 46 --------------------------
 3 files changed, 73 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/SignIn.svelte b/src/lib/components/SignIn.svelte
index d1e2d86..430fb00 100644
--- a/src/lib/components/SignIn.svelte
+++ b/src/lib/components/SignIn.svelte
@@ -25,6 +25,32 @@
 	}
 </script>
 
-<input type="email" bind:value={email} placeholder="Email" />
-<input type="password" bind:value={password} placeholder="Password" />
-<button on:click={signInWithEmail}>Sign In</button>
+<label class="input input-bordered flex items-center gap-2">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 16 16"
+		fill="currentColor"
+		class="w-4 h-4 opacity-70"
+		><path
+			d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
+		/><path
+			d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
+		/></svg
+	>
+	<input type="text" class="grow" placeholder="Email" bind:value={email} />
+</label>
+<label class="input input-bordered flex items-center gap-2">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 16 16"
+		fill="currentColor"
+		class="w-4 h-4 opacity-70"
+		><path
+			fill-rule="evenodd"
+			d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+			clip-rule="evenodd"
+		/></svg
+	>
+	<input type="password" class="grow" placeholder="Password" bind:value={password} />
+</label>
+<button class="btn btn-active btn-primary" on:click={signInWithEmail}>Sign In</button>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e7e752..0f05290 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,15 +1,46 @@
 <script lang="ts">
 	import 'tailwindcss/tailwind.css';
+	import { onMount } from 'svelte';
+	import { type User } from '@supabase/auth-js';
+	import SignIn from '$lib/components/SignIn.svelte';
+	import SignOut from '$lib/components/SignOut.svelte';
+
+	export let data;
+	let { supabase } = data;
+	$: ({ supabase } = data);
+
+	let user = null as User | null;
+
+	onMount(async () => {
+		await getUser();
+	});
+
+	async function getUser() {
+		const {
+			data: { session }
+		} = await supabase.auth.getSession();
+
+		if (session) {
+			console.log(session.user);
+			user = session.user;
+		} else {
+			user = null;
+		}
+	}
 </script>
 
 <header>
 	<div class="navbar bg-base-100">
 		<div class="flex-1">
-			<a class="btn btn-ghost text-xl">Pokedex Tracker</a>
+			<a class="btn btn-ghost text-xl" href="/">Living Dex Tracker</a>
 		</div>
 		<div class="flex-none gap-2">
 			<div class="form-control">
-				<input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
+				<input
+					type="text"
+					placeholder="Search for a Dex"
+					class="input input-bordered w-32 md:w-auto"
+				/>
 			</div>
 			<div class="dropdown dropdown-end">
 				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
@@ -21,17 +52,18 @@
 					</div>
 				</div>
 				<ul
-					tabindex="0"
-					class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
+					tabindex="-1"
+					class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box min-w-[13rem] w-auto"
 				>
-					<li>
-						<a class="justify-between">
-							Profile
-							<span class="badge">New</span>
-						</a>
-					</li>
-					<li><a>Settings</a></li>
-					<li><a>Logout</a></li>
+					{#if user}
+						<li>
+							<a href="/profile"> Profile </a>
+						</li>
+						<li><a href="/settings">Settings</a></li>
+						<li><SignOut {supabase} on:signedOut={getUser} /></li>
+					{:else}
+						<li><SignIn {supabase} on:signedIn={getUser} /></li>
+					{/if}
 				</ul>
 			</div>
 		</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 72424b0..ed7e56c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,57 +1,11 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import SignUp from '$lib/components/SignUp.svelte';
-	import SignIn from '$lib/components/SignIn.svelte';
-	import SignOut from '$lib/components/SignOut.svelte';
-	import PokemonSprite from '$lib/components/PokemonSprite.svelte';
 
 	export let data;
 	let { supabase } = data;
 	$: ({ supabase } = data);
-
-	let userEmail = null as string | null | undefined;
-
-	onMount(async () => {
-		await setUserEmail();
-	});
-
-	async function getUser() {
-		const {
-			data: { session }
-		} = await supabase.auth.getSession();
-
-		if (session) {
-			console.log(session.user);
-			return session.user;
-		}
-
-		return null;
-	}
-
-	async function getUserEmail() {
-		const user = await getUser();
-
-		if (user) {
-			return user.email;
-		}
-
-		return null;
-	}
-
-	async function setUserEmail() {
-		userEmail = await getUserEmail();
-	}
 </script>
 
-{#if userEmail}
-	<span>Welcome back {userEmail}</span>
-	<br />
-{/if}
-<br />
-<SignIn {supabase} on:signedIn={setUserEmail} />
-<br />
-<SignOut {supabase} on:signedOut={setUserEmail} />
-
 <div class="hero min-h-screen bg-base-200">
 	<div class="hero-content flex-col lg:flex-row-reverse">
 		<div class="text-center lg:text-left">