codigo de login front

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

@@ -3,7 +3,13 @@
 	import * as Card from '@/components/ui/card';
 	import { Input } from '@/components/ui/input';
 	import { FieldGroup, Field, FieldLabel, FieldDescription } from '@/components/ui/field';
-	const id = $props.id();
+	import type { LoginDto } from '../../../../types';
+	import { login } from '@/hooks/login';
+  let {id, showAlert = $bindable() } = $props();
+
+  let dto: LoginDto = $state({password: "", username: ""});
+
+  const setAlert = () => showAlert = true;
 </script>
 
 <Card.Root class="mx-auto w-full max-w-sm">
@@ -12,11 +18,11 @@
 		<Card.Description>ingrese su usuario para logearse en la cuenta</Card.Description>
 	</Card.Header>
 	<Card.Content>
-		<form>
+		  <form onsubmit="{(e)=>login(e,dto, setAlert)}">
 			<FieldGroup>
 				<Field>
 					<FieldLabel for="email-{id}">Usuario</FieldLabel>
-					<Input id="email-{id}" type="email" placeholder="m@example.com" required />
+					<Input bind:value={dto.username} type="text" placeholder="nombre de usuario" required />
 				</Field>
 				<Field>
 					<div class="flex items-center">
@@ -25,7 +31,7 @@
 							Te Olvidaste la contraseña?
 						</a>
 					</div>
-					<Input id="password-{id}" type="password" required />
+					<Input bind:value={dto.password} type="password" required />
 				</Field>
 				<Field>
 					<Button type="submit" class="w-full">Login</Button>