pages

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 {

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"
 	>

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>

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();
+	}
+}

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()
+});

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">

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">

src/routes/api/+server.js

@@ -0,0 +1,4 @@
+/** @type {import('./$types').RequestHandler} */
+export function GET() {
+	return new Response('OK');
+}

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>

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>