Initial commit

frontend/src/lib/components/forms/login-form.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { login } from '$lib/api/auth.remote';
+
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Field from '$lib/components/ui/field/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+</script>
+
+<Card.Root class="w-full max-w-sm">
+	<Card.Header>
+		<Card.Title>Login to your account</Card.Title>
+		<Card.Description>Enter your email below to login to your account</Card.Description>
+	</Card.Header>
+
+	<form {...login}>
+		<Card.Content>
+			<Field.Set>
+				<Field.Group>
+					<!-- Email field -->
+					<Field.Field>
+						<Field.Label for="email">Email</Field.Label>
+						<Input {...login.fields.email.as('email')} />
+						{#each login.fields.email.issues() ?? [] as issue}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
+
+					<!-- Password field -->
+					<Field.Field>
+						<Field.Label for="password">Password</Field.Label>
+						<Input {...login.fields.password.as('password')} />
+						{#each login.fields.password.issues() ?? [] as issue}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
+				</Field.Group>
+			</Field.Set>
+		</Card.Content>
+
+		<!-- Submit button -->
+		<Card.Footer class="flex-col gap-2 pt-6">
+			<Button type="submit" class="w-full">Login</Button>
+		</Card.Footer>
+	</form>
+</Card.Root>