Fix: InfoAlert

correjido que no llegaba el estado del alert a la pagina de login
This commit is contained in:
2025-11-14 22:18:20 -03:00
parent e5f9a6f1ec
commit 5c6415c41e
3 changed files with 42 additions and 17 deletions

View File

@@ -1,5 +1,4 @@
import { apiBase } from "@/stores/url";
import { sesionStore } from "@/stores/usuario";
import { goto } from "$app/navigation";
import type { RegisterDto } from "../../types";
@@ -24,9 +23,7 @@ export async function register(e:FormDataEvent,dto: RegisterDto, callbackfn:()=>
});
if (req.ok) {
const data= await req.json();
goto("/login", { state: {
message: data.message,
}});
goto("/login?msg="+data.message);
} else {
callbackfn();
}

View File

@@ -0,0 +1,5 @@
export function load({ url }) {
return {
message: url.searchParams.get('msg')
};
}

View File

@@ -2,11 +2,23 @@
import * as Alert from '@/components/ui/alert';
import LoginForm from '@/components/ui/login-form/login-form.svelte';
import AlertCircleIcon from "@lucide/svelte/icons/alert-circle";
import { fade } from 'svelte/transition';
let showAlert: boolean = $state(false);
import { fade, fly } from 'svelte/transition';
import Info from '@lucide/svelte/icons/info';
let {data} = $props();
let showAlert: boolean = $state(false);
let message = $state(data.message);
$effect(()=>{
resetAlert();
if (data.message) {
history.replaceState(history.state, "", "/login");
setTimeout(() => {
message = "";
}, 7000);
}
});
async function resetAlert (){
@@ -15,22 +27,33 @@
showAlert=false;
}
}
</script>
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
<div class="w-full max-w-sm">
<LoginForm bind:showAlert={showAlert} id="1" />
{#if showAlert}
<div class="mt-2" transition:fade>
<Alert.Root variant="destructive">
<AlertCircleIcon />
<Alert.Title>No se pudo iniciar sesion</Alert.Title>
<Alert.Description>
Revise su usuario o contraseña
</Alert.Description>
<div class="w-full max-w-sm">
{#if message}
<div class="mb-2" transition:fly>
<Alert.Root>
<Info />
<Alert.Title>Info</Alert.Title>
<Alert.Description>
Ingrese las credenciales de la cuenta recien creada
</Alert.Description>
</Alert.Root>
</div>
{/if}
<LoginForm bind:showAlert={showAlert} id="1" />
{#if showAlert}
<div class="mt-2" transition:fade>
<Alert.Root variant="destructive">
<AlertCircleIcon />
<Alert.Title>No se pudo iniciar sesion</Alert.Title>
<Alert.Description>
Revise su usuario o contraseña
</Alert.Description>
</Alert.Root>
</div>
{/if}