From 7e0d1e77ecfae7aabf9afb8f41cfe5ae2f380dae Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Sat, 16 Mar 2024 11:40:49 -0400
Subject: [PATCH] pages

---
 src/hooks.server.js                           |  3 ++
 src/lib/components/Button.svelte              |  2 +-
 src/lib/components/FormInput.svelte           | 16 +++++++
 src/lib/index.js                              |  8 +++-
 src/lib/server/{database.js => db/index.js}   |  0
 src/lib/server/db/schema.js                   |  7 +++
 src/routes/+error.svelte                      |  7 +--
 src/routes/+page.svelte                       |  4 --
 src/routes/api/+server.js                     |  4 ++
 .../routes/api/auth/login/+server.js          |  0
 src/routes/api/auth/register/+server.js       |  0
 src/routes/login/+page.svelte                 | 36 ++++++++++++++
 src/routes/register/+page.svelte              | 47 +++++++++++++++++++
 13 files changed, 122 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/components/FormInput.svelte
 rename src/lib/server/{database.js => db/index.js} (100%)
 create mode 100644 src/lib/server/db/schema.js
 create mode 100644 src/routes/api/+server.js
 rename db/schema/user.js => src/routes/api/auth/login/+server.js (100%)
 create mode 100644 src/routes/api/auth/register/+server.js
 create mode 100644 src/routes/login/+page.svelte
 create mode 100644 src/routes/register/+page.svelte

diff --git a/src/hooks.server.js b/src/hooks.server.js
index e583f9c..93f91a4 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -1,5 +1,8 @@
 /** @type {import('@sveltejs/kit').HandleServerError} */
 export async function handleError({ error, event, status, message }) {
+
+    console.log(error)
+
 	const id = crypto.randomUUID();
 
 	return {
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 4159609..7f783e0 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -2,7 +2,7 @@
 	export let click;
 </script>
 
-<button class="" on:click={click}>
+<button type="button" on:click={click}>
 	<div
 		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
 	>
diff --git a/src/lib/components/FormInput.svelte b/src/lib/components/FormInput.svelte
new file mode 100644
index 0000000..53b5d1b
--- /dev/null
+++ b/src/lib/components/FormInput.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let type, name, id, placeholder;
+</script>
+
+<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
+	<div class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700">
+		<slot />
+	</div>
+	<input
+		class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900"
+		{type}
+		{name}
+		{id}
+		{placeholder}
+	/>
+</div>
diff --git a/src/lib/index.js b/src/lib/index.js
index 856f2b6..d619b28 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1 +1,7 @@
-// place files you want to import through the `$lib` alias in this folder.
+import { browser } from '$app/environment';
+
+export function goBack() {
+	if (browser) {
+		history.back();
+	}
+}
diff --git a/src/lib/server/database.js b/src/lib/server/db/index.js
similarity index 100%
rename from src/lib/server/database.js
rename to src/lib/server/db/index.js
diff --git a/src/lib/server/db/schema.js b/src/lib/server/db/schema.js
new file mode 100644
index 0000000..7cb9355
--- /dev/null
+++ b/src/lib/server/db/schema.js
@@ -0,0 +1,7 @@
+import { int, mysqlTable, text } from 'drizzle-orm/mysql-core';
+
+export const users = mysqlTable('users', {
+	id: int('id').autoincrement().primaryKey(),
+	username: text('username').unique().notNull(),
+	password: text('password').notNull()
+});
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 896814a..1ef9015 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,14 +1,9 @@
 <script>
-	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import Button from '$lib/components/Button.svelte';
 	import Link from '$lib/components/Link.svelte';
 
-	function goBack() {
-		if (browser) {
-			history.back();
-		}
-	}
+	import { goBack } from '$lib/';
 </script>
 
 <div class="flex justify-center items-center h-screen">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 73b27a2..df63fc6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,10 +5,6 @@
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 	import Link from '$lib/components/Link.svelte';
 	import Logo from '$lib/components/Logo.svelte';
-
-	function testToast() {
-		toast.error('Not Implemented');
-	}
 </script>
 
 <div class="flex justify-center items-center h-screen">
diff --git a/src/routes/api/+server.js b/src/routes/api/+server.js
new file mode 100644
index 0000000..f750c3b
--- /dev/null
+++ b/src/routes/api/+server.js
@@ -0,0 +1,4 @@
+/** @type {import('./$types').RequestHandler} */
+export function GET() {
+	return new Response('OK');
+}
diff --git a/db/schema/user.js b/src/routes/api/auth/login/+server.js
similarity index 100%
rename from db/schema/user.js
rename to src/routes/api/auth/login/+server.js
diff --git a/src/routes/api/auth/register/+server.js b/src/routes/api/auth/register/+server.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
new file mode 100644
index 0000000..f0b9e92
--- /dev/null
+++ b/src/routes/login/+page.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { Mail, SquareAsterisk, LogIn, Undo } from 'lucide-svelte';
+	import { goBack } from '$lib/';
+
+	import Logo from '$lib/components/Logo.svelte';
+	import FormInput from '$lib/components/FormInput.svelte';
+	import Button from '$lib/components/Button.svelte';
+</script>
+
+<div class="flex justify-center items-center h-screen">
+	<div class="flex flex-col space-y-2">
+		<div class="max-w-sm transition-colors fill-black dark:fill-white">
+			<Logo />
+		</div>
+		<form action="">
+			<div class="flex flex-col space-y-2">
+				<FormInput type={'email'} name={'email'} id={'email'} placeholder={'user@example.com'}>
+					<Mail />
+				</FormInput>
+				<FormInput type={'password'} name={'password'} id={'password'} placeholder={'•'.repeat(16)}>
+					<SquareAsterisk />
+				</FormInput>
+				<div class="flex place-content-between">
+					<Button click={goBack}>
+						<Undo />
+						<p>Go Back</p>
+					</Button>
+					<Button>
+						<LogIn />
+						<p>Login</p>
+					</Button>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
new file mode 100644
index 0000000..2de1109
--- /dev/null
+++ b/src/routes/register/+page.svelte
@@ -0,0 +1,47 @@
+<script>
+	import { Mail, SquareAsterisk, LogIn, Undo, User, UserPlus } from 'lucide-svelte';
+	import { goBack } from '$lib/';
+
+	import Logo from '$lib/components/Logo.svelte';
+	import FormInput from '$lib/components/FormInput.svelte';
+	import Button from '$lib/components/Button.svelte';
+</script>
+
+<div class="flex justify-center items-center h-screen">
+	<div class="flex flex-col space-y-2">
+		<div class="max-w-sm transition-colors fill-black dark:fill-white">
+			<Logo />
+		</div>
+		<form action="">
+			<div class="flex flex-col space-y-2">
+				<FormInput type={'username'} name={'username'} id={'username'} placeholder={'Username'}>
+					<User />
+				</FormInput>
+				<FormInput type={'email'} name={'email'} id={'email'} placeholder={'user@example.com'}>
+					<Mail />
+				</FormInput>
+				<FormInput type={'password'} name={'password'} id={'password'} placeholder={'•'.repeat(16)}>
+					<SquareAsterisk />
+				</FormInput>
+				<FormInput
+					type={'password'}
+					name={'cpassword'}
+					id={'cpassword'}
+					placeholder={'•'.repeat(16)}
+				>
+					<SquareAsterisk />
+				</FormInput>
+				<div class="flex place-content-between">
+					<Button click={goBack}>
+						<Undo />
+						<p>Go Back</p>
+					</Button>
+					<Button>
+						<UserPlus />
+						<p>Register</p>
+					</Button>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>