From d381fdddce8d9954a43d28da238e5958e3e57629 Mon Sep 17 00:00:00 2001
From: maxDorninger <97409287+maxDorninger@users.noreply.github.com>
Date: Sat, 2 Aug 2025 14:27:09 +0200
Subject: [PATCH] break up login page and form component into separate signup
 and login card/page

---
 web/src/lib/components/login-card.svelte  | 171 ++++++++++++++
 web/src/lib/components/login-form.svelte  | 271 ----------------------
 web/src/lib/components/signup-card.svelte | 140 +++++++++++
 web/src/routes/login/+page.svelte         |   4 +-
 web/src/routes/login/signup/+page.svelte  |   4 +-
 5 files changed, 315 insertions(+), 275 deletions(-)
 create mode 100644 web/src/lib/components/login-card.svelte
 delete mode 100644 web/src/lib/components/login-form.svelte
 create mode 100644 web/src/lib/components/signup-card.svelte

diff --git a/web/src/lib/components/login-card.svelte b/web/src/lib/components/login-card.svelte
new file mode 100644
index 0000000..d285a35
--- /dev/null
+++ b/web/src/lib/components/login-card.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { goto } from '$app/navigation';
+	import { env } from '$env/dynamic/public';
+	import { toast } from 'svelte-sonner';
+	import { base } from '$app/paths';
+	import * as Alert from '$lib/components/ui/alert/index.js';
+	import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
+	import LoadingBar from '$lib/components/loading-bar.svelte';
+
+	const apiUrl = env.PUBLIC_API_URL;
+
+	let {
+		oauthProvider
+	}: {
+		oauthProvider: {
+			oauth_name: string;
+		};
+	} = $props();
+	let oauthProviderName = $derived(oauthProvider.oauth_name);
+
+	let email = $state('');
+	let password = $state('');
+	let errorMessage = $state('');
+	let isLoading = $state(false);
+
+	async function handleLogin(event: Event) {
+		event.preventDefault();
+
+		isLoading = true;
+		errorMessage = '';
+
+		const formData = new URLSearchParams();
+		formData.append('username', email);
+		formData.append('password', password);
+		try {
+			const response = await fetch(apiUrl + '/auth/cookie/login', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded'
+				},
+				body: formData.toString(),
+				credentials: 'include'
+			});
+
+			if (response.ok) {
+				console.log('Login successful!');
+				console.log('Received User Data: ', response);
+				errorMessage = 'Login successful! Redirecting...';
+				toast.success(errorMessage);
+				goto(base + '/dashboard');
+			} else {
+				let errorText = await response.text();
+				try {
+					const errorData = JSON.parse(errorText);
+					errorMessage = errorData.message || 'Login failed. Please check your credentials.';
+				} catch {
+					errorMessage = errorText || 'Login failed. Please check your credentials.';
+				}
+				toast.error(errorMessage);
+				console.error('Login failed:', response.status, errorText);
+			}
+		} catch (error) {
+			console.error('Login request failed:', error);
+			errorMessage = 'An error occurred during the login request.';
+			toast.error(errorMessage);
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	async function handleOauth() {
+		try {
+			const response = await fetch(
+				apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
+				{
+					method: 'GET',
+					headers: {
+						'Content-Type': 'application/json'
+					}
+				}
+			);
+			if (response.ok) {
+				let result = await response.json();
+				console.log(
+					'Redirecting to OAuth provider:',
+					oauthProviderName,
+					'url: ',
+					result.authorization_url
+				);
+				toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
+				window.location = result.authorization_url;
+			} else {
+				let errorText = await response.text();
+				toast.error(errorMessage);
+				console.error('Login failed:', response.status, errorText);
+			}
+		} catch (error) {
+			console.error('Login request failed:', error);
+			errorMessage = 'An error occurred during the login request.';
+			toast.error(errorMessage);
+		}
+	}
+</script>
+
+<Card.Root class="mx-auto max-w-sm">
+	<Card.Header>
+		<Card.Title class="text-2xl">Login</Card.Title>
+		<Card.Description>Enter your email below to log in to your account</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<form class="grid gap-4" onsubmit={handleLogin}>
+			<div class="grid gap-2">
+				<Label for="email">Email</Label>
+				<Input
+					bind:value={email}
+					id="email"
+					placeholder="m@example.com"
+					required
+					type="email"
+				/>
+			</div>
+			<div class="grid gap-2">
+				<div class="flex items-center">
+					<Label for="password">Password</Label>
+					<a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password">
+						Forgot your password?
+					</a>
+				</div>
+				<Input bind:value={password} id="password" required type="password" />
+			</div>
+
+			{#if errorMessage}
+				<Alert.Root variant="destructive">
+					<AlertCircleIcon class="size-4" />
+					<Alert.Title>Error</Alert.Title>
+					<Alert.Description>{errorMessage}</Alert.Description>
+				</Alert.Root>
+			{/if}
+			{#if isLoading}
+				<LoadingBar />
+			{/if}
+			<Button class="w-full" disabled={isLoading} type="submit">Login</Button>
+		</form>
+		{#await oauthProvider}
+			<LoadingBar />
+		{:then result}
+			{#if result.oauth_name != null}
+				<div
+					class="relative mt-2 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-background px-2 text-muted-foreground">
+						Or continue with
+					</span>
+				</div>
+				<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
+					>Login with {result.oauth_name}</Button
+				>
+			{/if}
+		{/await}
+		<div class="mt-4 text-center text-sm">
+			<Button href="{base}/login/signup/" variant="link">
+				Don't have an account? Sign up
+			</Button>
+		</div>
+	</Card.Content>
+</Card.Root>
+
diff --git a/web/src/lib/components/login-form.svelte b/web/src/lib/components/login-form.svelte
deleted file mode 100644
index 22a6a4d..0000000
--- a/web/src/lib/components/login-form.svelte
+++ /dev/null
@@ -1,271 +0,0 @@
-<script lang="ts">
-    import {Button} from '$lib/components/ui/button/index.js';
-    import * as Card from '$lib/components/ui/card/index.js';
-    import {Input} from '$lib/components/ui/input/index.js';
-    import {Label} from '$lib/components/ui/label/index.js';
-    import {goto} from '$app/navigation';
-    import {env} from '$env/dynamic/public';
-    import * as Tabs from '$lib/components/ui/tabs/index.js';
-    import {toast} from 'svelte-sonner';
-    import LoadingBar from '$lib/components/loading-bar.svelte';
-    import {base} from '$app/paths';
-    import * as Alert from "$lib/components/ui/alert/index.js";
-    import CheckCircle2Icon from "@lucide/svelte/icons/check-circle-2";
-    import AlertCircleIcon from "@lucide/svelte/icons/alert-circle";
-
-    const apiUrl = env.PUBLIC_API_URL;
-
-    let {oauthProvider, login}: { oauthProvider: { oauth_name: string }, login: boolean } = $props();
-    let oauthProviderName = $derived(oauthProvider.oauth_name);
-
-    let email = $state('');
-    let password = $state('');
-    let errorMessage = $state('');
-    let isLoading = $state(false);
-    let tabValue = $state('login');
-
-    async function handleLogin(event: Event) {
-        event.preventDefault();
-
-        isLoading = true;
-        errorMessage = '';
-
-        const formData = new URLSearchParams();
-        formData.append('username', email);
-        formData.append('password', password);
-        try {
-            const response = await fetch(apiUrl + '/auth/cookie/login', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded'
-                },
-                body: formData.toString(),
-                credentials: 'include'
-            });
-
-            if (response.ok) {
-                console.log('Login successful!');
-                console.log('Received User Data: ', response);
-                errorMessage = 'Login successful! Redirecting...';
-                toast.success(errorMessage);
-                goto(base + '/dashboard');
-            } else {
-                let errorText = await response.text();
-                try {
-                    const errorData = JSON.parse(errorText);
-                    errorMessage = errorData.message || 'Login failed. Please check your credentials.';
-                } catch {
-                    errorMessage = errorText || 'Login failed. Please check your credentials.';
-                }
-                toast.error(errorMessage);
-                console.error('Login failed:', response.status, errorText);
-            }
-        } catch (error) {
-            console.error('Login request failed:', error);
-            errorMessage = 'An error occurred during the login request.';
-            toast.error(errorMessage);
-        } finally {
-            isLoading = false;
-        }
-    }
-
-    async function handleSignup(event: Event) {
-        event.preventDefault();
-
-        isLoading = true;
-        errorMessage = '';
-
-        try {
-            const response = await fetch(apiUrl + '/auth/register', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    email: email,
-                    password: password
-                }),
-                credentials: 'include'
-            });
-
-            if (response.ok) {
-                console.log('Registration successful!');
-                console.log('Received User Data: ', response);
-                tabValue = 'login'; // Switch to login tab after successful registration
-                errorMessage = 'Registration successful! Please login.';
-                toast.success(errorMessage);
-            } else {
-                let errorText = await response.text();
-                try {
-                    const errorData = JSON.parse(errorText);
-                    errorMessage = errorData.message || 'Registration failed. Please check your credentials.';
-                } catch {
-                    errorMessage = errorText || 'Registration failed. Please check your credentials.';
-                }
-                toast.error(errorMessage);
-                console.error('Registration failed:', response.status, errorText);
-            }
-        } catch (error) {
-            console.error('Registration request failed:', error);
-            errorMessage = 'An error occurred during the Registration request.';
-            toast.error(errorMessage);
-        } finally {
-            isLoading = false;
-        }
-    }
-
-    async function handleOauth() {
-        try {
-            const response = await fetch(
-                apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
-                {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    }
-                }
-            );
-            if (response.ok) {
-                let result = await response.json();
-                console.log(
-                    'Redirecting to OAuth provider:',
-                    oauthProviderName,
-                    'url: ',
-                    result.authorization_url
-                );
-                toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
-                window.location = result.authorization_url;
-            } else {
-                let errorText = await response.text();
-                toast.error(errorMessage);
-                console.error('Login failed:', response.status, errorText);
-            }
-        } catch (error) {
-            console.error('Login request failed:', error);
-            errorMessage = 'An error occurred during the login request.';
-            toast.error(errorMessage);
-        }
-    }
-</script>
-
-{#snippet oauthLogin()}
-    {#await oauthProvider}
-        <LoadingBar/>
-    {:then result}
-        {#if result.oauth_name != null}
-            <div
-                    class="relative mt-2 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-background px-2 text-muted-foreground">
-					Or continue with
-				</span>
-            </div>
-            <Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
-            >Login with {result.oauth_name}</Button
-            >
-        {/if}
-    {/await}
-{/snippet}
-{#if login}
-    <Card.Root class="mx-auto max-w-sm">
-        <Card.Header>
-            <Card.Title class="text-2xl">Login</Card.Title>
-            <Card.Description>Enter your email below to log in to your account</Card.Description>
-        </Card.Header>
-        <Card.Content>
-            <form class="grid gap-4" onsubmit={handleLogin}>
-                <div class="grid gap-2">
-                    <Label for="email">Email</Label>
-                    <Input
-                            bind:value={email}
-                            id="email"
-                            placeholder="m@example.com"
-                            required
-                            type="email"
-                    />
-                </div>
-                <div class="grid gap-2">
-                    <div class="flex items-center">
-                        <Label for="password">Password</Label>
-                        <a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password">
-                            Forgot your password?
-                        </a>
-                    </div>
-                    <Input bind:value={password} id="password" required type="password"/>
-                </div>
-
-                {#if errorMessage}
-                    <Alert.Root variant="destructive">
-                        <AlertCircleIcon class="size-4"/>
-                        <Alert.Title>Error</Alert.Title>
-                        <Alert.Description
-                        >{errorMessage}</Alert.Description
-                        >
-                    </Alert.Root>
-                {/if}
-
-                <Button class="w-full" disabled={isLoading} type="submit">
-                    {#if isLoading}
-                        Logging in...
-                    {:else}
-                        Login
-                    {/if}
-                </Button>
-            </form>
-
-            {@render oauthLogin()}
-
-            <div class="mt-4 text-center text-sm">
-                <Button href="{base}/login/signup/" variant="link">
-                    Don't have an account? Sign up
-                </Button>
-            </div>
-        </Card.Content>
-    </Card.Root>
-{:else}
-    <Card.Root class="mx-auto max-w-sm">
-        <Card.Header>
-            <Card.Title class="text-2xl">Sign up</Card.Title>
-            <Card.Description>Enter your email and password below to sign up.</Card.Description>
-        </Card.Header>
-        <Card.Content>
-            <form class="grid gap-4" onsubmit={handleSignup}>
-                <div class="grid gap-2">
-                    <Label for="email2">Email</Label>
-                    <Input
-                            bind:value={email}
-                            id="email2"
-                            placeholder="m@example.com"
-                            required
-                            type="email"
-                    />
-                </div>
-                <div class="grid gap-2">
-                    <div class="flex items-center">
-                        <Label for="password2">Password</Label>
-                    </div>
-                    <Input bind:value={password} id="password2" required type="password"/>
-                </div>
-
-                {#if errorMessage}
-                    <p class="text-sm text-red-500">{errorMessage}</p>
-                {/if}
-
-                <Button class="w-full" disabled={isLoading} type="submit">
-                    {#if isLoading}
-                        Signing up...
-                    {:else}
-                        Sign up
-                    {/if}
-                </Button>
-            </form>
-            {@render oauthLogin()}
-
-            <div class="mt-4 text-center text-sm">
-                <Button href="{base}/login/" variant="link"
-                >Already have an account? Login
-                </Button>
-            </div>
-        </Card.Content>
-    </Card.Root>
-{/if}
\ No newline at end of file
diff --git a/web/src/lib/components/signup-card.svelte b/web/src/lib/components/signup-card.svelte
new file mode 100644
index 0000000..0c2100a
--- /dev/null
+++ b/web/src/lib/components/signup-card.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import { env } from '$env/dynamic/public';
+	import { toast } from 'svelte-sonner';
+	import * as Alert from '$lib/components/ui/alert/index.js';
+	import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
+	import LoadingBar from '$lib/components/loading-bar.svelte';
+	import CheckCircle2Icon from '@lucide/svelte/icons/check-circle-2';
+	import {base} from "$app/paths";
+
+	const apiUrl = env.PUBLIC_API_URL;
+
+	let email = $state('');
+	let password = $state('');
+	let errorMessage = $state('');
+	let successMessage = $state('');
+	let isLoading = $state(false);
+
+	let {
+		oauthProvider
+	}: {
+		oauthProvider: {
+			oauth_name: string;
+		};
+	} = $props();
+	let oauthProviderName = $derived(oauthProvider.oauth_name);
+
+	async function handleSignup(event: Event) {
+		event.preventDefault();
+
+		isLoading = true;
+		errorMessage = '';
+		successMessage = '';
+
+		try {
+			const response = await fetch(apiUrl + '/auth/register', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					email: email,
+					password: password
+				}),
+				credentials: 'include'
+			});
+
+			if (response.ok) {
+				console.log('Registration successful!');
+				console.log('Received User Data: ', response);
+				successMessage = 'Registration successful! Please login.';
+				toast.success(successMessage);
+			} else {
+				let errorText = await response.text();
+				try {
+					const errorData = JSON.parse(errorText);
+					errorMessage = errorData.message || 'Registration failed. Please check your credentials.';
+				} catch {
+					errorMessage = errorText || 'Registration failed. Please check your credentials.';
+				}
+				toast.error(errorMessage);
+				console.error('Registration failed:', response.status, errorText);
+			}
+		} catch (error) {
+			console.error('Registration request failed:', error);
+			errorMessage = 'An error occurred during the Registration request.';
+			toast.error(errorMessage);
+		} finally {
+			isLoading = false;
+		}
+	}
+</script>
+
+<Card.Root class="mx-auto max-w-sm">
+	<Card.Header>
+		<Card.Title class="text-xl">Sign Up</Card.Title>
+		<Card.Description>Enter your information to create an account</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<form class="grid gap-4" onsubmit={handleSignup}>
+			<div class="grid gap-2">
+				<Label for="email">Email</Label>
+				<Input
+					bind:value={email}
+					id="email"
+					placeholder="m@example.com"
+					required
+					type="email"
+				/>
+			</div>
+			<div class="grid gap-2">
+				<Label for="password">Password</Label>
+				<Input bind:value={password} id="password" required type="password" />
+			</div>
+			{#if errorMessage}
+				<Alert.Root variant="destructive">
+					<AlertCircleIcon class="size-4" />
+					<Alert.Title>Error</Alert.Title>
+					<Alert.Description>{errorMessage}</Alert.Description>
+				</Alert.Root>
+			{/if}
+			{#if successMessage}
+				<Alert.Root variant="default">
+					<CheckCircle2Icon class="size-4" />
+					<Alert.Title>Success</Alert.Title>
+					<Alert.Description>{successMessage}</Alert.Description>
+				</Alert.Root>
+			{/if}
+			{#if isLoading}
+				<LoadingBar />
+			{/if}
+			<Button class="w-full" disabled={isLoading} type="submit">Create an account</Button>
+		</form>
+		{#await oauthProvider}
+			<LoadingBar />
+		{:then result}
+			{#if result.oauth_name != null}
+				<div
+						class="relative mt-2 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-background px-2 text-muted-foreground">
+						Or continue with
+					</span>
+				</div>
+				<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
+				>Login with {result.oauth_name}</Button
+				>
+			{/if}
+		{/await}
+		<div class="mt-4 text-center text-sm">
+			<Button href="{base}/login/" variant="link">
+				Already have an account? Login
+			</Button>
+		</div>
+	</Card.Content>
+</Card.Root>
+
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index a3f9b4c..bf37adc 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LoginForm from '$lib/components/login-form.svelte';
+	import LoginCard from '$lib/components/login-card.svelte';
 	import { page } from '$app/state';
 	import {getContext} from "svelte";
 
@@ -15,4 +15,4 @@
 </svelte:head>
 
 
-<LoginForm oauthProvider={oauthProvider()} login={true} />
+<LoginCard oauthProvider={oauthProvider()} />
diff --git a/web/src/routes/login/signup/+page.svelte b/web/src/routes/login/signup/+page.svelte
index 787770f..0d3bed0 100644
--- a/web/src/routes/login/signup/+page.svelte
+++ b/web/src/routes/login/signup/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import LoginForm from '$lib/components/login-form.svelte';
+	import SignupCard from "$lib/components/signup-card.svelte";
     import {getContext} from "svelte";
 
     let oauthProvider: () => {oauth_name: string} = getContext("oauthProvider");
@@ -13,4 +13,4 @@
     />
 </svelte:head>
 
-<LoginForm login={false} oauthProvider={oauthProvider()}/>
+<SignupCard oauthProvider={oauthProvider()}/>