From d8aa99e18fbe935b2ff45290e297f7e8218477a5 Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Fri, 3 Oct 2025 16:31:15 +0200
Subject: [PATCH] add:background to login

---
 src/lib/components/login-form.svelte | 99 +++++++++++++---------------
 src/routes/login-03/+page.svelte     | 18 -----
 src/routes/login/+page.svelte        | 78 ++++++++--------------
 3 files changed, 72 insertions(+), 123 deletions(-)
 delete mode 100644 src/routes/login-03/+page.svelte

diff --git a/src/lib/components/login-form.svelte b/src/lib/components/login-form.svelte
index cc4b80e..85e28b1 100644
--- a/src/lib/components/login-form.svelte
+++ b/src/lib/components/login-form.svelte
@@ -1,78 +1,67 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components/button/index.js';
 	import * as Card from '$lib/components/card/index.js';
 	import { Label } from '$lib/components/label/index.js';
 	import { Input } from '$lib/components/input/index.js';
 	import { cn } from '$lib/utils.js';
+	import { toast } from 'svelte-sonner';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ActionData } from '../../routes/login/$types.js';
 
-	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let {
+		class: className,
+		form,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & { form?: ActionData } = $props();
 
-	const id = $props.id();
+	const id = Math.random().toString(36).substring(2, 15);
+
+	$effect(() => {
+		if (form?.message) {
+			toast.error(form.message);
+		}
+	});
 </script>
 
 <div class={cn('flex flex-col gap-6', className)} {...restProps}>
 	<Card.Root>
 		<Card.Header class="text-center">
-			<Card.Title class="text-xl">Welcome back</Card.Title>
-			<Card.Description>Login with your Apple or Google account</Card.Description>
+			<Card.Title class="text-xl"><h1>Serengo</h1></Card.Title>
+			<Card.Description>Enter your credentials to continue</Card.Description>
 		</Card.Header>
 		<Card.Content>
-			<form>
-				<div class="grid gap-6">
-					<div class="flex flex-col gap-4">
-						<Button variant="outline" class="w-full">
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-								<path
-									d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
-									fill="currentColor"
-								/>
-							</svg>
-							Login with Apple
+			<form method="post" action="?/login" use:enhance>
+				<div class="grid gap-4">
+					<div class="grid gap-2">
+						<Label for="username-{id}">Username</Label>
+						<Input
+							id="username-{id}"
+							name="username"
+							type="text"
+							placeholder="Enter your username"
+							required
+						/>
+					</div>
+					<div class="grid gap-2">
+						<Label for="password-{id}">Password</Label>
+						<Input
+							id="password-{id}"
+							name="password"
+							type="password"
+							placeholder="Enter your password"
+							required
+						/>
+					</div>
+
+					<div class="flex gap-2">
+						<Button type="submit" class="flex-1">Login</Button>
+						<Button type="submit" variant="outline" formaction="?/register" class="flex-1">
+							Register
 						</Button>
-						<Button variant="outline" class="w-full">
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-								<path
-									d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-									fill="currentColor"
-								/>
-							</svg>
-							Login with Google
-						</Button>
-					</div>
-					<div
-						class="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
-					>
-						<span class="relative z-10 bg-card px-2 text-muted-foreground"> Or continue with </span>
-					</div>
-					<div class="grid gap-6">
-						<div class="grid gap-3">
-							<Label for="email-{id}">Email</Label>
-							<Input id="email-{id}" type="email" placeholder="m@example.com" required />
-						</div>
-						<div class="grid gap-3">
-							<div class="flex items-center">
-								<Label for="password-{id}">Password</Label>
-								<a href="##" class="ml-auto text-sm underline-offset-4 hover:underline">
-									Forgot your password?
-								</a>
-							</div>
-							<Input id="password-{id}" type="password" required />
-						</div>
-						<Button type="submit" class="w-full">Login</Button>
-					</div>
-					<div class="text-center text-sm">
-						Don&apos;t have an account?
-						<a href="##" class="underline underline-offset-4"> Sign up </a>
 					</div>
 				</div>
 			</form>
 		</Card.Content>
 	</Card.Root>
-	<div
-		class="text-center text-xs text-balance text-muted-foreground *:[a]:underline *:[a]:underline-offset-4 *:[a]:hover:text-primary"
-	>
-		By clicking continue, you agree to our <a href="##">Terms of Service</a>
-		and <a href="##">Privacy Policy</a>.
-	</div>
 </div>
diff --git a/src/routes/login-03/+page.svelte b/src/routes/login-03/+page.svelte
deleted file mode 100644
index 1fd6e6d..0000000
--- a/src/routes/login-03/+page.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import LoginForm from '$lib/components/login-form.svelte';
-	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
-</script>
-
-<div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
-	<div class="flex w-full max-w-sm flex-col gap-6">
-		<a href="##" class="flex items-center gap-2 self-center font-medium">
-			<div
-				class="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground"
-			>
-				<GalleryVerticalEndIcon class="size-4" />
-			</div>
-			Acme Inc.
-		</a>
-		<LoginForm />
-	</div>
-</div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 9edb1e2..087e5dc 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,60 +1,38 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Input, Button, ErrorMessage } from '$lib';
+	import LoginForm from '$lib/components/login-form.svelte';
 	import type { ActionData } from './$types';
 
 	let { form }: { form: ActionData } = $props();
 </script>
 
-<div class="login-container">
-	<h1 class="login-title">Serengo</h1>
+<div class="login-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+	<div class="flex w-full max-w-sm flex-col gap-6">
+		<LoginForm {form} />
+	</div>
 
-	<form class="login-form" method="post" action="?/login" use:enhance>
-		<Input name="username" type="text" placeholder="Username" required />
+	<style>
+		.login-background {
+			background-image: url('/cafe-bg.jpeg');
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+			position: relative;
+		}
 
-		<Input name="password" type="password" placeholder="Password" required />
+		.login-background::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.4);
+			z-index: 1;
+		}
 
-		<div class="button-group">
-			<Button type="submit" variant="primary">Login</Button>
-			<Button type="submit" variant="primary" formaction="?/register">Register</Button>
-		</div>
-
-		<ErrorMessage message={form?.message} />
-	</form>
+		.login-background > div {
+			position: relative;
+			z-index: 2;
+		}
+	</style>
 </div>
-
-<style>
-	.login-container {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-		padding: 4rem 2rem;
-		background-color: #f8f8f8;
-		align-items: center;
-		justify-content: center;
-		max-width: 400px;
-		margin: 0 auto;
-	}
-
-	.login-title {
-		font-family: 'Washington', serif;
-		font-size: 3.5rem;
-		color: #000000;
-		margin-bottom: 2rem;
-		text-align: center;
-		font-weight: normal;
-		letter-spacing: -0.02em;
-	}
-
-	.login-form {
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		gap: 1.5rem;
-	}
-
-	.button-group {
-		display: flex;
-		gap: 1rem;
-	}
-</style>