working on the frontend

web/src/lib/components/login-form.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import {Button} from "$lib/components/ui/button/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"
+
+    let apiUrl = env.PUBLIC_API_URL
+
+    let email = '';
+    let password = '';
+    let errorMessage = '';
+    let isLoading = false;
+
+    async function handleLogin(event: Event) {
+        event.preventDefault();
+
+        isLoading = true;
+        errorMessage = '';
+
+        const formData = new URLSearchParams();
+        formData.append('username', email);
+        formData.append('password', password);
+        console.log(apiUrl + '/auth/cookie/login')
+        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);
+                await goto('/dashboard');
+                errorMessage = 'Login successful! Redirecting...';
+
+            } 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.';
+                }
+                console.error('Login failed:', response.status, errorText);
+            }
+        } catch (error) {
+            console.error('Login request failed:', error);
+            errorMessage = 'An error occurred during the login request.';
+        } finally {
+            isLoading = false;
+        }
+    }
+</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 login to your account</Card.Description>
+    </Card.Header>
+    <Card.Content>
+        <form class="grid gap-4" on:submit={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="##">
+                        Forgot your password?
+                    </a>
+                </div>
+                <Input bind:value={password} id="password" 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}
+                    Logging in...
+                {:else}
+                    Login
+                {/if}
+            </Button>
+        </form>
+
+        <Button class="w-full mt-2" variant="outline">Login with Google</Button>
+
+
+        <div class="mt-4 text-center text-sm">
+            Don't have an account?
+            <a class="underline" href="##"> Sign up </a>
+        </div>
+    </Card.Content>
+</Card.Root>