make login/register pages work, get rid of database.db, and remove

references

src/routes/+page.server.ts

@@ -0,0 +1,18 @@
+import * as auth from '$lib/server/auth';
+import { fail, redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+  if (event.request.url.endsWith("/?logout")) {
+    if (!event.locals.session) {
+      return fail(401);
+    }
+
+    await auth.invalidateSession(event.locals.session.id);
+    auth.deleteSessionTokenCookie(event);
+
+    return redirect(302, '/login');
+  }
+
+  return { user: event.locals.user };
+};

src/routes/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import Title from "$lib/components/extra/Title.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
+	import type { PageServerData } from './$types';
+
+	let { data }: { data: PageServerData } = $props();
 </script>
 
 <div class="p-6 md:w-1/2">
@@ -30,6 +33,11 @@
     </div>
 
     <div class="flex flex-col gap-3 w-[calc(80%)]">
-        <Button href='/login'>Log in</Button> <Button href='/register'>Register</Button>
+        {#if data.user?.id}
+            <Button href='/app'>Enter</Button>
+            <Button href='/?logout'>Log out</Button>
+        {:else}
+            <Button href='/login'>Log in</Button> <Button href='/register'>Register</Button>
+        {/if}
     </div>
 </div>

src/routes/app/+page.svelte

@@ -0,0 +1 @@
+<h1>nothing here, yet!</h1>

src/routes/login/+page.server.ts

@@ -0,0 +1,62 @@
+import { verify } from '@node-rs/argon2';
+import { fail, redirect } from '@sveltejs/kit';
+import { eq } from 'drizzle-orm';
+import * as auth from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import * as table from '$lib/server/db/schema';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	if (event.locals.user) {
+		return redirect(302, '/demo/lucia');
+	}
+	return {};
+};
+
+export const actions: Actions = {
+	login: async (event) => {
+		const formData = await event.request.formData();
+		const username = formData.get('username');
+		const password = formData.get('password');
+
+    let username_is_email = false;
+
+		if (!auth.validateUsername(username)) {
+      if (auth.validateEmail(username)) {
+        username_is_email = true;
+      } else {
+       	return fail(400, {
+  				message: 'Invalid username (min 3, max 31 characters, alphanumeric only)'
+  			});
+      }
+		}
+		if (!auth.validatePassword(password)) {
+			return fail(400, { message: 'Invalid password (min 6, max 255 characters)' });
+		}
+
+		const results = await db.select()
+		  .from(table.user)
+		  .where(username_is_email ? eq(table.user.email, username) : eq(table.user.username, username));
+
+		const existingUser = results.at(0);
+		if (!existingUser) {
+			return fail(400, { message: 'Incorrect username or password' });
+		}
+
+		const validPassword = await verify(existingUser.passwordHash, password, {
+			memoryCost: 19456,
+			timeCost: 2,
+			outputLen: 32,
+			parallelism: 1
+		});
+		if (!validPassword) {
+			return fail(400, { message: 'Incorrect username or password' });
+		}
+
+		const sessionToken = auth.generateSessionToken();
+		const session = await auth.createSession(sessionToken, existingUser.id);
+		auth.setSessionTokenCookie(event, sessionToken, session.expiresAt);
+
+		return redirect(302, '/app');
+	}
+};

src/routes/login/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Title from "$lib/components/extra/Title.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import Input from "$lib/components/ui/input/input.svelte";
+	import type { ActionData } from './$types';
+
+	let { form }: { form: ActionData } = $props();
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center gap-2">
+    <div class='w-1/2 p-2 bg-secondary rounded-md '>
+        <div class="text-center pb-2">
+            <Title size="2xl"></Title>
+        </div>
+        <form method="post" action="?/login">
+            <Input name="username" class="mb-2" type="text" placeholder="Username or E-mail"></Input>
+            <Input name="password" class="mb-2" type="password" placeholder="Password"></Input>
+
+            <Button type="submit" formaction="?/login" class="w-full">Login</Button>
+        </form>
+
+       	<p style="color: red">{form?.message ?? ''}</p>
+
+
+    </div>
+</div>

src/routes/register/+page.server.ts

@@ -0,0 +1,66 @@
+import { hash } from '@node-rs/argon2';
+import { fail, redirect } from '@sveltejs/kit';
+import * as auth from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import * as table from '$lib/server/db/schema';
+import type { Actions, PageServerLoad } from './$types';
+import { or } from 'drizzle-orm';
+import { eq } from 'drizzle-orm';
+
+export const load: PageServerLoad = async (event) => {
+	if (event.locals.user) {
+		return redirect(302, '/demo/lucia');
+	}
+	return {};
+};
+
+export const actions: Actions = {
+	register: async (event) => {
+		const formData = await event.request.formData();
+		const username = formData.get('username');
+		const email = formData.get('email');
+		const password = formData.get('password');
+
+		if (!auth.validateUsername(username)) {
+			return fail(400, { message: 'Invalid username' });
+		}
+
+		if(!auth.validateEmail(email)) {
+  		return fail(400, { message: 'Invalid email' });
+		}
+
+		if (!auth.validatePassword(password)) {
+			return fail(400, { message: 'Invalid password' });
+		}
+
+		const userId = auth.generateUserId();
+		const passwordHash = await hash(password, {
+			// recommended minimum parameters
+			memoryCost: 19456,
+			timeCost: 2,
+			outputLen: 32,
+			parallelism: 1
+		});
+		const results = await db.select()
+		  .from(table.user)
+		  .where(or(eq(table.user.email, email),
+				eq(table.user.username, username)));
+
+		const existingUser = results.at(0);
+		if (existingUser) {
+			return fail(400, { message: 'Username or email already registered!' });
+		}
+
+		try {
+			await db.insert(table.user)
+			  .values({ id: userId, email, username, passwordHash });
+
+			const sessionToken = auth.generateSessionToken();
+			const session = await auth.createSession(sessionToken, userId);
+			auth.setSessionTokenCookie(event, sessionToken, session.expiresAt);
+		} catch(e) {
+			return fail(500, { message: 'An error has occurred' });
+		}
+		return redirect(302, '/app');
+	}
+};

src/routes/register/+page.svelte

@@ -2,6 +2,9 @@
 	import Title from "$lib/components/extra/Title.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
 	import Input from "$lib/components/ui/input/input.svelte";
+	import type { ActionData } from './$types';
+
+	let { form }: { form: ActionData } = $props();
 </script>
 
 <div class="flex min-h-screen flex-col items-center justify-center gap-2">
@@ -9,12 +12,14 @@
         <div class="text-center pb-2">
             <Title size="2xl"></Title>
         </div>
+        <form method="post" action="?/register">
+            <Input name="username" class="mb-2" type="text" placeholder="Username"></Input>
+            <Input name="email" class="mb-2" type="email" placeholder="E-mail"></Input>
+            <Input name="password" class="mb-2" type="password" placeholder="Password"></Input>
 
-        <Input class="mb-2" type="text" placeholder="Username"></Input>
-        <Input class="mb-2" type="email" placeholder="E-mail"></Input>
+            <Button type="submit" formaction="?/register" class="w-full">Register</Button>
+        </form>
 
-        <Input class="mb-2" type="password" placeholder="Password"></Input>
-
-        <Button class="w-full">Register</Button>
+       	<p style="color: red">{form?.message ?? ''}</p>
     </div>
 </div>