adduser model

src/lib/components/TablaUsuarios.svelte

@@ -26,6 +26,7 @@
 	import InputGroup from './ui/input-group/input-group.svelte';
 	import InputGroupAddon from './ui/input-group/input-group-addon.svelte';
 	import InputGroupInput from './ui/input-group/input-group-input.svelte';
+	import AgregarUsuario from './admin/AgregarUsuario.svelte';
 
 	interface Props {
 		usuarios: UserResponseDto[];
@@ -109,6 +110,7 @@
 		usuarioBorrar = usuario;
 	}
 	
+let opencrearUsuario = $state(false);
 	// $inspect(usuarios);
 </script>
 
@@ -117,7 +119,7 @@
 		<InputGroupAddon align="inline-start"><Search></Search></InputGroupAddon>
 		<InputGroupInput type="text" placeholder="Buscar usuario..." bind:value={search} />
 	</InputGroup>
-	<Button variant="secondary" class="bg-blue-500/20"><Plus /></Button>
+	<Button onclick={() =>opencrearUsuario = !opencrearUsuario} variant="secondary" class="bg-blue-500/20"><Plus /></Button>
 </div>
 
 <Table>
@@ -198,3 +200,4 @@
 <BorrarUsuario bind:open={openBorrar} usuario={usuarioBorrar} />
 <RecuperarContraseña bind:open usuario={usuarioCambioPass} />
 <ModificarUsuario bind:open={openModificarUsuario} bind:usuario={usuarioModificar} />
+<AgregarUsuario bind:open={opencrearUsuario} />

src/lib/components/admin/AgregarUsuario.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { Dialog, DialogTitle, DialogContent, DialogHeader } from '../ui/dialog';
+	import InputGroup from '../ui/input-group/input-group.svelte';
+	import InputGroupInput from '../ui/input-group/input-group-input.svelte';
+	import InputGroupAddon from '../ui/input-group/input-group-addon.svelte';
+	import Button from '../ui/button/button.svelte';
+	import Spinner from '../ui/spinner/spinner.svelte';
+	import { register } from '@/hooks/register';
+	import type { RegisterDto } from '../../../types';
+
+	interface Prop {
+		open: boolean;
+	}
+
+	let { open = $bindable() }: Prop = $props();
+
+	let cargando = $state(false);
+	let error = $state('');
+
+	let dto = $state<RegisterDto>({
+		username: '',
+		email: '',
+		password: '',
+		displayName: ''
+	});
+
+	async function onsubmit(e: SubmitEvent) {
+		cargando = true;
+		error = '';
+
+		await register(e, dto, () => {
+			error = 'Error al registrar el usuario';
+		});
+
+		cargando = false;
+	}
+</script>
+
+<div transition:fade>
+	<Dialog
+		{open}
+		onOpenChange={() => {
+			open = !open;
+		}}
+	>
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Agregar Usuario</DialogTitle>
+			</DialogHeader>
+
+			<form {onsubmit}>
+				<div class="flex flex-col gap-3">
+					<InputGroup>
+						<InputGroupInput disabled={cargando} bind:value={dto.username} />
+						<InputGroupAddon>Usuario</InputGroupAddon>
+					</InputGroup>
+
+					<InputGroup>
+						<InputGroupInput
+							type="email"
+							disabled={cargando}
+							bind:value={dto.email}
+						/>
+						<InputGroupAddon>Email</InputGroupAddon>
+					</InputGroup>
+
+					<InputGroup>
+						<InputGroupInput disabled={cargando} bind:value={dto.displayName} />
+						<InputGroupAddon>Nombre visible</InputGroupAddon>
+					</InputGroup>
+
+					<InputGroup>
+						<InputGroupInput
+							type="password"
+							disabled={cargando}
+							bind:value={dto.password}
+						/>
+						<InputGroupAddon>Contraseña</InputGroupAddon>
+					</InputGroup>
+
+					<hr class="my-2" />
+
+					<div class="flex justify-between">
+						<Button type="submit" disabled={cargando}>
+							{#if cargando}
+								<Spinner /> Creando...
+							{:else}
+								Crear
+							{/if}
+						</Button>
+
+						<Button
+							variant="secondary"
+							disabled={cargando}
+							onclick={() => (open = false)}
+						>
+							Cancelar
+						</Button>
+					</div>
+				</div>
+			</form>
+		</DialogContent>
+	</Dialog>
+</div>
+
+<div transition:fade>
+	<Dialog open={error !== ''} onOpenChange={() => (error = '')}>
+		<DialogContent>{error}</DialogContent>
+	</Dialog>
+</div>

src/lib/stores/url.ts

@@ -2,5 +2,5 @@ import { dev } from '$app/environment';
 import { readable } from 'svelte/store';
 
 export const apiBase = readable(
-	dev ? 'http://localhost:5000' : 'https://minix-back-dsuk.onrender.com'
+	dev ? 'http://localhost:5159' : 'https://minix-back-dsuk.onrender.com'
 );