mirror of
https://github.com/emailerfacu-spec/minix-front.git
synced 2026-04-18 15:57:31 -03:00
añadida validacion de email contra el back
This commit is contained in:
@@ -11,25 +11,39 @@
|
|||||||
|
|
||||||
import Spinner from './ui/spinner/spinner.svelte';
|
import Spinner from './ui/spinner/spinner.svelte';
|
||||||
import { checkUsername } from '@/hooks/checkUsername';
|
import { checkUsername } from '@/hooks/checkUsername';
|
||||||
|
import { checkEmail } from '@/hooks/checkEmail';
|
||||||
|
|
||||||
let { showAlert = $bindable() } = $props();
|
let { showAlert = $bindable() } = $props();
|
||||||
|
|
||||||
let cargando = $state(false);
|
let cargando = $state(false);
|
||||||
|
|
||||||
|
let repetirContraseña = $state('');
|
||||||
|
|
||||||
let checkeandoUsuario: boolean | null = $state(null);
|
let checkeandoUsuario: boolean | null = $state(null);
|
||||||
let esUsuarioValido = $state(false);
|
let esUsuarioValido = $state(false);
|
||||||
|
|
||||||
|
let checkeandoEmail: boolean | null = $state(null);
|
||||||
|
let esEmailValido = $state(false);
|
||||||
|
|
||||||
async function checkUsuario() {
|
async function checkUsuario() {
|
||||||
checkeandoUsuario = true;
|
checkeandoUsuario = true;
|
||||||
esUsuarioValido = await checkUsername(dto.username);
|
esUsuarioValido = await checkUsername(dto.username);
|
||||||
checkeandoUsuario = false;
|
checkeandoUsuario = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function checkEmaill() {
|
||||||
|
checkeandoEmail = true;
|
||||||
|
esEmailValido = await checkEmail(dto.email);
|
||||||
|
checkeandoEmail = false;
|
||||||
|
}
|
||||||
const setAlert = () => (showAlert = true);
|
const setAlert = () => (showAlert = true);
|
||||||
|
|
||||||
let dto: RegisterDto = $state({ password: '', username: '', email: '', displayName: '' });
|
let dto: RegisterDto = $state({ password: '', username: '', email: '', displayName: '' });
|
||||||
|
|
||||||
const handleSubmit = async (e: SubmitEvent) => {
|
const handleSubmit = async (e: SubmitEvent) => {
|
||||||
|
if (esUsuarioValido == false) return;
|
||||||
|
if (repetirContraseña !== dto.password) return;
|
||||||
|
|
||||||
cargando = true;
|
cargando = true;
|
||||||
await register(e, dto, setAlert);
|
await register(e, dto, setAlert);
|
||||||
cargando = false;
|
cargando = false;
|
||||||
@@ -73,13 +87,25 @@
|
|||||||
</Field.Field>
|
</Field.Field>
|
||||||
|
|
||||||
<Field.Field>
|
<Field.Field>
|
||||||
<Field.Label for="email">Email</Field.Label>
|
<div class="flex justify-between">
|
||||||
|
<Field.Label for="email">Email</Field.Label>
|
||||||
|
{#if checkeandoEmail == null}
|
||||||
|
<div hidden></div>
|
||||||
|
{:else if checkeandoEmail == true}
|
||||||
|
<Spinner></Spinner>
|
||||||
|
{:else if esEmailValido}
|
||||||
|
<Check class="text-green-500" />
|
||||||
|
{:else}
|
||||||
|
<Cross class="text-red-500" />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
<Input
|
<Input
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
bind:value={dto.email}
|
bind:value={dto.email}
|
||||||
placeholder="m@ejemplo.com"
|
placeholder="m@ejemplo.com"
|
||||||
required
|
required
|
||||||
|
onchange={checkEmaill}
|
||||||
/>
|
/>
|
||||||
</Field.Field>
|
</Field.Field>
|
||||||
<Field.Field>
|
<Field.Field>
|
||||||
@@ -89,7 +115,7 @@
|
|||||||
</Field.Field>
|
</Field.Field>
|
||||||
<Field.Field>
|
<Field.Field>
|
||||||
<Field.Label for="confirm-password">Confirmar Contraseña</Field.Label>
|
<Field.Label for="confirm-password">Confirmar Contraseña</Field.Label>
|
||||||
<Input id="confirm-password" type="password" required />
|
<Input id="confirm-password" type="password" required bind:value={repetirContraseña} />
|
||||||
<Field.Description>Confirma la contraseña</Field.Description>
|
<Field.Description>Confirma la contraseña</Field.Description>
|
||||||
</Field.Field>
|
</Field.Field>
|
||||||
<Field.Group>
|
<Field.Group>
|
||||||
|
|||||||
16
src/lib/hooks/checkEmail.ts
Normal file
16
src/lib/hooks/checkEmail.ts
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user