checkeo si el username esta tomado

src/lib/components/signup-form.svelte

@@ -6,11 +6,25 @@
 	import type { RegisterDto } from '../../types';
 	import { register } from '@/hooks/register';
 	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import Check from '@lucide/svelte/icons/check';
+	import Cross from '@lucide/svelte/icons/x';
+
+	import Spinner from './ui/spinner/spinner.svelte';
+	import { checkUsername } from '@/hooks/checkUsername';
 
 	let { showAlert = $bindable() } = $props();
 
 	let cargando = $state(false);
 
+	let checkeandoUsuario: boolean | null = $state(null);
+	let esUsuarioValido = $state(false);
+
+	async function checkUsuario() {
+		checkeandoUsuario = true;
+		esUsuarioValido = await checkUsername(dto.username);
+		checkeandoUsuario = false;
+	}
+
 	const setAlert = () => (showAlert = true);
 
 	let dto: RegisterDto = $state({ password: '', username: '', email: '', displayName: '' });
@@ -31,8 +45,26 @@
 		<form onsubmit={handleSubmit}>
 			<Field.Group>
 				<Field.Field>
-					<Field.Label for="name">Nombre de Usuario</Field.Label>
+					<div class="flex justify-between">
-					<Input id="name" bind:value={dto.username} type="text" placeholder="JPepe" required />
+						<Field.Label for="name">Nombre de Usuario</Field.Label>
+						{#if checkeandoUsuario == null}
+							<div hidden></div>
+						{:else if checkeandoUsuario == true}
+							<Spinner></Spinner>
+						{:else if esUsuarioValido}
+							<Check class="text-green-500" />
+						{:else}
+							<Cross class="text-red-500" />
+						{/if}
+					</div>
+					<Input
+						id="name"
+						bind:value={dto.username}
+						type="text"
+						placeholder="JPepe"
+						required
+						onchange={checkUsuario}
+					/>
 				</Field.Field>
 
 				<Field.Field>

src/lib/hooks/checkUsername.ts

@@ -0,0 +1,16 @@
+import { apiBase } from "@/stores/url";
+import { get } from "svelte/store";
+
+export async function checkUsername(username: string) {
+  try {
+    const req = await fetch(`${get(apiBase)}/api/users/check-username/${username}`, {
+      method: "GET"
+    });
+    if (req.ok){
+      return (await req.json()).available;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}

src/types.d.ts

@@ -47,10 +47,10 @@ export interface LoginDto {
 }
 
 export interface RegisterDto {
-	username: string?;
+	username: string;
-	email: string?;
+	email: string;
 	password: string?;
-	displayName: string?;
+	displayName: string;
 }
 
 export interface CreatePostDto {