Daisy UI (#14)

* add dependency

* rename Input to TextInput and use daisy

* base styling

* storybook setup with tailwind and theme changer

* daisy buttons

* add flaticons

* text input to daisy

* Navbar to daisy

* login using daisy

* autodocs is... auto

* refactor Tabs to separate components

* move TextInput

* move button

* move navbar

* remove index

* move container

* move loader

* move tabs to navigation

* organize storybook hierarchy

* use card

* remove storybook dark mode

* README

* ignore db file

* ignore db

* prisma scripts

* format

* blyat

* fix redirect

src/routes/+layout.svelte

@@ -9,6 +9,6 @@
 
 <style>
 	.layout {
-		@apply h-screen w-screen animate-fade bg-slate-100;
+		@apply h-screen w-screen bg-base-100;
 	}
-</style>
+</style>

src/routes/+page.server.ts

@@ -1,17 +1,17 @@
 import { prisma } from '$lib/server/prisma';
+import { redirect } from '@sveltejs/kit';
 export async function load(event) {
-	const userId = event.cookies.get('user');
-	if (!userId) {
-		return {
-			authenticated: false
-		};
+	const sessionId = event.cookies.get('auth_session');
+	if (!sessionId) {
+		redirect(303, '/login');
 	}
-	const user = await prisma.user.findUnique({
+	const user = await prisma.session.findUnique({
 		where: {
-			id: userId
-		}
+			id: sessionId,
+		},
 	});
-	return {
-		authenticated: !!user
-	};
+	if (!user) {
+		redirect(401, '/login');
+	}
+	return {};
 }

src/routes/+page.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import Loader from '$lib/components/Loader.svelte';
-
-	let { data } = $props();
+	import Loader from '$lib/components/common/Loader';
+	import { fade } from 'svelte/transition';
 
 	$effect(() => {
-		const id = setTimeout(() => (data.authenticated ? goto('/app') : goto('/login')), 1500);
+		const id = setTimeout(() => goto('/app'), 1500);
 		return () => {
 			clearTimeout(id);
 		};
 	});
 </script>
 
-<div class="site-loader">
-	<h1>Hestia</h1>
+<div class="site-loader" transition:fade>
 	<Loader />
 </div>
 

src/routes/api/graphql/+server.ts

@@ -1,3 +1,3 @@
 import { Yoga } from '$lib/server/yoga';
 
-export { Yoga as GET, Yoga as POST };
+export { Yoga as GET, Yoga as POST };

src/routes/app/+layout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import Navbar from '$lib/components/Navbar.svelte';
+	import { Navbar } from '$lib/components/Navigation';
 
 	let { children } = $props();
 </script>
 
 <Navbar title="Svelte" />
-{@render children()}
+{@render children()}

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

@@ -12,8 +12,8 @@ export const actions = {
 		}
 		const user = await prisma.user.findUnique({
 			where: {
-				email: form.get('email') as string
-			}
+				email: form.get('email') as string,
+			},
 		});
 		if (!user) {
 			logger.error('User not found! ${user}');
@@ -31,7 +31,7 @@ export const actions = {
 		const sessionCookie = auth.createSessionCookie(session.id);
 		event.cookies.set(sessionCookie.name, sessionCookie.value, {
 			path: '/',
-			maxAge: 120
+			maxAge: 120,
 		});
 		redirect(302, '/');
 	},
@@ -47,8 +47,8 @@ export const actions = {
 			data: {
 				email: form.get('email') as string,
 				name: form.get('name') as string,
-				password: hashedPassword
-			}
+				password: hashedPassword,
+			},
 		});
 		const session = await auth.createSession(user.id.toString(), {});
 		const sessionCookie = auth.createSessionCookie(session.id);
@@ -57,8 +57,8 @@ export const actions = {
 		}
 		event.cookies.set(sessionCookie.name, sessionCookie.value, {
 			path: '/',
-			maxAge: 120
+			maxAge: 120,
 		});
 		redirect(302, '/');
-	}
+	},
 } satisfies Actions;

src/routes/login/+page.svelte

@@ -1,38 +1,50 @@
 <script lang="ts">
-	import Button from '$lib/components/Button.svelte';
-	import Input from '$lib/components/Input.svelte';
-	import { fade, scale } from 'svelte/transition';
+	import Button from '$lib/components/common/Button';
+	import TextInput from '$lib/components/common/TextInput';
+	import Tabs from '$lib/components/Navigation/Tabs';
+	import { fade } from 'svelte/transition';
 
-	let mode: 'register' | 'login' = $state('login');
-	let action = $derived(mode === 'login' ? '?/login' : '?/register');
-
-	function onViewToggle() {
-		mode = mode === 'login' ? 'register' : 'login';
-	}
+	let tab: 0 | 1 = $state(0);
 </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>
+{#snippet userIcon()}
+	<i class="fi fi-br-envelope"></i>
+{/snippet}
+
+{#snippet passwordIcon()}
+	<i class="fi fi-br-key"></i>
+{/snippet}
+
+{#snippet nameIcon()}
+	<i class="fi fi-rr-user"></i>
+{/snippet}
+
+{#snippet form(variant: 'login' | 'register')}
+	<form method="POST" action={`?/${variant}`}>
+		<div class="card-body gap-4">
+			<TextInput start={userIcon} placeholder="Email" name="email" type="email" />
+			<TextInput
+				start={passwordIcon}
+				placeholder="Password"
+				name="password"
+				type="password"
+			/>
+			{#if variant === 'register'}
+				<TextInput start={nameIcon} placeholder="Name" name="name" fade />
 			{/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 class="card-actions px-4">
+			<Button block type="submit" label="Submit" outline />
+		</div>
+	</form>
+{/snippet}
+
+<div class="page" transition:fade>
+	<div class="card bg-base-200 py-4 shadow-xl">
+		<div class="card-title">
+			<Tabs variant="bordered" bind:selected={tab} tabs={['Login', 'Register']} />
+		</div>
+		{@render form(tab === 0 ? 'login' : 'register')}
 	</div>
 </div>
 
@@ -40,10 +52,4 @@
 	.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>
+</style>