diff --git a/src/lib/components/signup-form.svelte b/src/lib/components/signup-form.svelte index 2b102af..e21e58c 100644 --- a/src/lib/components/signup-form.svelte +++ b/src/lib/components/signup-form.svelte @@ -11,25 +11,39 @@ import Spinner from './ui/spinner/spinner.svelte'; import { checkUsername } from '@/hooks/checkUsername'; + import { checkEmail } from '@/hooks/checkEmail'; let { showAlert = $bindable() } = $props(); let cargando = $state(false); + let repetirContraseña = $state(''); + let checkeandoUsuario: boolean | null = $state(null); let esUsuarioValido = $state(false); + let checkeandoEmail: boolean | null = $state(null); + let esEmailValido = $state(false); + async function checkUsuario() { checkeandoUsuario = true; esUsuarioValido = await checkUsername(dto.username); checkeandoUsuario = false; } + async function checkEmaill() { + checkeandoEmail = true; + esEmailValido = await checkEmail(dto.email); + checkeandoEmail = false; + } const setAlert = () => (showAlert = true); let dto: RegisterDto = $state({ password: '', username: '', email: '', displayName: '' }); const handleSubmit = async (e: SubmitEvent) => { + if (esUsuarioValido == false) return; + if (repetirContraseña !== dto.password) return; + cargando = true; await register(e, dto, setAlert); cargando = false; @@ -73,13 +87,25 @@ - Email + + Email + {#if checkeandoEmail == null} + + {:else if checkeandoEmail == true} + + {:else if esEmailValido} + + {:else} + + {/if} + @@ -89,7 +115,7 @@ Confirmar Contraseña - + Confirma la contraseña diff --git a/src/lib/hooks/checkEmail.ts b/src/lib/hooks/checkEmail.ts new file mode 100644 index 0000000..2bbc8e8 --- /dev/null +++ b/src/lib/hooks/checkEmail.ts @@ -0,0 +1,16 @@ +import { apiBase } from "@/stores/url"; +import { get } from "svelte/store"; + +export async function checkEmail(email: string) { + try { + const req = await fetch(`${get(apiBase)}/api/users/check-email/${email}`, { + method: "GET" + }); + if (req.ok){ + return (await req.json()).available; + } + return false; + } catch { + return false; + } +}