diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte index aa5d750..1decfe9 100644 --- a/src/lib/components/PostCard.svelte +++ b/src/lib/components/PostCard.svelte @@ -137,7 +137,7 @@ - + diff --git a/src/lib/components/signup-form.svelte b/src/lib/components/signup-form.svelte index f9e529c..aaa9f61 100644 --- a/src/lib/components/signup-form.svelte +++ b/src/lib/components/signup-form.svelte @@ -6,16 +6,50 @@ 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'; + import { checkEmail } from '@/hooks/checkEmail'; let { showAlert = $bindable() } = $props(); let cargando = $state(false); - const setAlert = () => (showAlert = true); + let repetirContraseña = $state(''); + + let checkeandoUsuario: boolean | null = $state(null); + let esUsuarioValido = $state(false); + + let checkeandoEmail: boolean | null = $state(null); + let esEmailValido = $state(false); let dto: RegisterDto = $state({ password: '', username: '', email: '', displayName: '' }); + let coinsidenLasPass = $derived(repetirContraseña == dto.password); + + const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9])[A-Za-z\d\W_]*$/; + let esContraseñaValida = $derived(passwordRegex.test(dto.password)); + + 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); + const handleSubmit = async (e: SubmitEvent) => { + if (esUsuarioValido == false) return; + if (!coinsidenLasPass) return; + if (!esContraseñaValida) return; + cargando = true; await register(e, dto, setAlert); cargando = false; @@ -31,8 +65,26 @@
- Nombre de Usuario - +
+ Nombre de Usuario + {#if checkeandoUsuario == null} + + {:else if checkeandoUsuario == true} + + {:else if esUsuarioValido} + + {:else} + + {/if} +
+
@@ -41,28 +93,55 @@ - Email +
+ Email + {#if checkeandoEmail == null} + + {:else if checkeandoEmail == true} + + {:else if esEmailValido} + + {:else} + + {/if} +
Contraseña - - Debe de tener por lo menos 8 caracteres. + + Debe de tener por lo menos 8 caracteres, una minúscula, una mayúscula, un número y un + carácter especial. Confirmar Contraseña - + Confirma la contraseña -