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

@@ -0,0 +1,38 @@
+import { logger } from '$lib/server/logger';
+import { prisma } from '$lib/server/prisma';
+import { error, redirect, type Actions } from '@sveltejs/kit';
+
+export const actions = {
+	login: async (event) => {
+		const form = await event.request.formData();
+		if (!form.has('email')) {
+			error(400, 'Email is a required form field!');
+		}
+		const user = await prisma.user.findUnique({
+			where: {
+				email: form.get('email') as string
+			}
+		});
+		if (!user) {
+			logger.error('User not found! ${user}');
+			error(401);
+		}
+		logger.info(`Login user { email: ${form.get('email')} }`);
+		event.cookies.set('user', String(user.id), {
+			path: '/',
+			maxAge: 120
+		});
+		redirect(302, '/');
+	},
+	register: async (event) => {
+		const form = await event.request.formData();
+		// const user = prisma.user.create({
+		// 	data: {
+		// 		email,
+		// 		name
+		// 	}
+		// });
+		logger.info(`Login user { email: ${form.get('email')}, name: ${form.get('name')} }`);
+		redirect(302, '/');
+	}
+} satisfies Actions;

src/routes/login/+page.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import Input from '$lib/components/Input.svelte';
+	import { fade, scale } from 'svelte/transition';
+
+	let mode: 'register' | 'login' = $state('login');
+	let action = $derived(mode === 'login' ? '?/login' : '?/register');
+
+	function onViewToggle() {
+		mode = mode === 'login' ? 'register' : 'login';
+	}
+</script>
+
+<div class="page">
+	<h1 class="underline">Hestia</h1>
+	<div class="login">
+		<form method="POST" {action} transition:scale>
+			<h2 transition:fade>{mode === 'login' ? 'Login' : 'Register'}</h2>
+			{#if mode === 'register'}
+				<div transition:fade>
+					<Input label="Name" name="name" />
+				</div>
+			{/if}
+			<Input label="Email" name="email" type="email" />
+			<Input label="Password" name="password" type="password" />
+			<div class="flex gap-2">
+				<Button
+					onClick={onViewToggle}
+					label={mode === 'login' ? 'Register' : 'Login'}
+					size="large"
+					primary
+				/>
+				<Button type="submit" label="Submit" size="large" />
+			</div>
+		</form>
+	</div>
+</div>
+
+<style>
+	.page {
+		@apply flex flex-col items-center justify-around gap-24 py-[10%];
+	}
+	.login {
+		@apply w-fit max-w-lg animate-fade rounded-lg bg-white p-8;
+	}
+	.login > form {
+		@apply flex w-full flex-col items-center gap-8 rounded-lg;
+	}
+</style>