From c53e5ffdc0683b3784c5b1f88b638892b7c53b54 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Tue, 23 May 2023 23:28:23 -0700
Subject: [PATCH] Fixing auth routes.

---
 src/lib/components/header/index.svelte        |  46 +++----
 .../components/search/textSearch/index.svelte |   4 +-
 src/lib/components/signin.svelte              |   0
 src/lib/components/signup.svelte              | 113 ++++++++++++++++++
 src/routes/auth/signin/+page.svelte           |   2 +-
 src/routes/auth/signout/+page.server.ts       |   4 +-
 src/routes/auth/signup/+page.svelte           |   6 +-
 7 files changed, 140 insertions(+), 35 deletions(-)
 create mode 100644 src/lib/components/signin.svelte
 create mode 100644 src/lib/components/signup.svelte

diff --git a/src/lib/components/header/index.svelte b/src/lib/components/header/index.svelte
index 98995d5..cd7ff9e 100644
--- a/src/lib/components/header/index.svelte
+++ b/src/lib/components/header/index.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	import Profile from '../preferences/profile.svelte';
 	import logo from './bored-game.png';
 
 	export let user: any;
+	console.log('User', user);
 </script>
 
 <header>
@@ -15,38 +17,26 @@
 	<nav>
 		<a href="/collection" title="Go to your collection" data-sveltekit-preload-data>Collection</a>
 		<a href="/wishlist" title="Go to your wishlist" data-sveltekit-preload-data>Wishlist</a>
-		<Profile />
 		{#if user}
-			<li>
-				<a href="/profile" on:click={drawerClose}>
-					<span><Contact2 /></span><span class="flex-auto">{i('profile')}</span></a
+			<form
+				use:enhance
+				action="/auth/signout"
+				method="POST"
+			>
+				<button type="submit" class="btn"
+					><span>Sign out</span></button
 				>
-			</li>
-			<li>
-				<form
-					use:enhance
-					action="/auth/sign-out"
-					method="post"
-					on:click={drawerClose}
-					on:keydown={drawerClose}
-				>
-					<button type="submit" class="btn"
-						><span><LogOut /></span><span>{i('signout')}</span></button
-					>
-				</form>
-			</li>
+			</form>
 		{/if}
 		{#if !user}
-			<li>
-				<a href="/auth/sign-in" on:click={drawerClose}>
-					<span><LogIn /></span><span class="flex-auto">{i('signin')}</span></a
-				>
-			</li>
-			<li>
-				<a href="/auth/sign-up" on:click={drawerClose}>
-					<span><UserCircle2 /></span><span class="flex-auto">{i('signup')}</span></a
-				>
-			</li>
+			<a href="/auth/signin">
+				<span class="flex-auto">Sign In</span></a
+			>
+			<a href="/auth/signup">
+				<span class="flex-auto">Sign Up</span></a
+			>
+		{/if}
+		<Profile />
 	</nav>
 </header>
 
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 94d770b..df958ab 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -25,7 +25,7 @@
 	}
 
 	export let data: Validation<SearchSchema>;
-	const { form, constraints, errors, enhance } = superForm(data, {
+	const { form, constraints, errors } = superForm(data, {
 		onSubmit: () => {
 			boredState.update((n) => ({ ...n, loading: true }));
 		},
@@ -145,7 +145,7 @@
 	<SuperDebug data={$form} />
 {/if}
 
-<form id="search-form" action="/search" method="GET" use:enhance>
+<form id="search-form" action="/search" method="GET">
 	<div class="search">
 		<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
 			<label for="q">Search</label>
diff --git a/src/lib/components/signin.svelte b/src/lib/components/signin.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/signup.svelte b/src/lib/components/signup.svelte
new file mode 100644
index 0000000..7914324
--- /dev/null
+++ b/src/lib/components/signup.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { superForm } from 'sveltekit-superforms/client';
+	//import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
+	import { userSchema } from '$lib/config/zod-schemas';
+	export let data;
+
+	const signUpSchema = userSchema.pick({
+		firstName: true,
+		lastName: true,
+		username: true,
+		email: true,
+		password: true
+	});
+
+	const { form, errors, enhance, delayed } = superForm(data.form, {
+		taintedMessage: null,
+		validators: signUpSchema,
+		delayMs: 0
+	});
+	// $: termsValue = $form.terms as Writable<boolean>;
+</script>
+
+	<form method="POST" action="/auth/signup" use:enhance>
+    <h1>Signup user</h1>
+    <label class="label">
+			<span class="sr-only">First Name</span>
+			<input
+				id="firstName"
+				name="firstName"
+				type="text"
+				placeholder="First Name"
+				autocomplete="given-name"
+				data-invalid={$errors.firstName}
+				bind:value={$form.firstName}
+				class="input"
+				class:input-error={$errors.firstName}
+			/>
+			{#if $errors.firstName}
+				<small>{$errors.firstName}</small>
+			{/if}
+		</label>
+    <label class="label">
+			<span class="sr-only">Last Name</span>
+			<input
+				id="lastName"
+				name="lastName"
+				type="text"
+				placeholder="Last Name"
+				autocomplete="family-name"
+				data-invalid={$errors.lastName}
+				bind:value={$form.lastName}
+				class="input"
+				class:input-error={$errors.lastName}
+			/>
+			{#if $errors.lastName}
+				<small>{$errors.lastName}</small>
+			{/if}
+		</label>
+    <label class="label">
+			<span class="sr-only">Email</span>
+			<input
+				id="email"
+				name="email"
+				type="email"
+				placeholder="Email"
+				autocomplete="email"
+				data-invalid={$errors.email}
+				bind:value={$form.email}
+				class="input"
+				class:input-error={$errors.email}
+			/>
+			{#if $errors.email}
+				<small>{$errors.email}</small>
+			{/if}
+		</label>
+    <label class="label">
+			<span class="sr-only">Username</span>
+			<input
+				id="username"
+				name="username"
+				type="username"
+				placeholder="Username"
+				autocomplete="uername"
+				data-invalid={$errors.username}
+				bind:value={$form.username}
+				class="input"
+				class:input-error={$errors.username}
+			/>
+			{#if $errors.username}
+				<small>{$errors.username}</small>
+			{/if}
+		</label>
+    <label class="label">
+			<span class="sr-only">password</span>
+			<input
+				id="password"
+				name="password"
+				type="password"
+				placeholder="password"
+				data-invalid={$errors.password}
+				bind:value={$form.password}
+				class="input"
+				class:input-error={$errors.password}
+			/>
+			{#if $errors.password}
+				<small>{$errors.password}</small>
+			{/if}
+		</label>
+    
+    <button type="submit">Signup</button>
+
+    <a class="back" href="/"> or Cancel </a>
+  </form>
diff --git a/src/routes/auth/signin/+page.svelte b/src/routes/auth/signin/+page.svelte
index 80d3325..3bd68ec 100644
--- a/src/routes/auth/signin/+page.svelte
+++ b/src/routes/auth/signin/+page.svelte
@@ -11,7 +11,7 @@
 	});
 </script>
 
-<form action="POST">
+<form method="POST" use:enhance>
 	{#if $errors._errors}
 		<aside class="alert">
 			<div class="alert-message">
diff --git a/src/routes/auth/signout/+page.server.ts b/src/routes/auth/signout/+page.server.ts
index 3837e9a..55299bd 100644
--- a/src/routes/auth/signout/+page.server.ts
+++ b/src/routes/auth/signout/+page.server.ts
@@ -5,10 +5,10 @@ export const actions = {
 	default: async ({ locals }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/sign-in');
+			throw redirect(302, '/auth/signin');
 		}
 		await auth.invalidateSession(session.sessionId); // invalidate session
 		locals.auth.setSession(null); // remove cookie
-		throw redirect(302, '/auth/sign-in');
+		throw redirect(302, '/auth/signin');
 	}
 };
diff --git a/src/routes/auth/signup/+page.svelte b/src/routes/auth/signup/+page.svelte
index 88d92b6..efbf3b4 100644
--- a/src/routes/auth/signup/+page.svelte
+++ b/src/routes/auth/signup/+page.svelte
@@ -12,7 +12,7 @@
     password: true
   });
 
-  const { form, errors, enhance, delayed } = superForm(data.form, {
+  const { form, errors, constraints, enhance, delayed } = superForm(data.form, {
     taintedMessage: null,
     validators: signUpSchema,
     delayMs: 0,
@@ -80,7 +80,8 @@
 				name="username"
 				type="username"
 				placeholder="Username"
-				autocomplete="uername"
+				autocomplete="email"
+				{...$constraints.username}
 				data-invalid={$errors.username}
 				bind:value={$form.username}
 				class="input"
@@ -97,6 +98,7 @@
 				name="password"
 				type="password"
 				placeholder="password"
+				{...$constraints.username}
 				data-invalid={$errors.password}
 				bind:value={$form.password}
 				class="input"