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 { apiBase } from "@/stores/url";
import { sesionStore } from "@/stores/usuario";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import type { RegisterDto } from "../../types"; import type { RegisterDto } from "../../types";
@@ -24,9 +23,7 @@ export async function register(e:FormDataEvent,dto: RegisterDto, callbackfn:()=>
}); });
if (req.ok) { if (req.ok) {
const data= await req.json(); const data= await req.json();
goto("/login", { state: { goto("/login?msg="+data.message);
message: data.message,
}});
} else { } else {
callbackfn(); 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 * as Alert from '@/components/ui/alert';
import LoginForm from '@/components/ui/login-form/login-form.svelte'; import LoginForm from '@/components/ui/login-form/login-form.svelte';
import AlertCircleIcon from "@lucide/svelte/icons/alert-circle"; import AlertCircleIcon from "@lucide/svelte/icons/alert-circle";
import { fade } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
let showAlert: boolean = $state(false); import Info from '@lucide/svelte/icons/info';
let {data} = $props();
let showAlert: boolean = $state(false);
let message = $state(data.message);
$effect(()=>{ $effect(()=>{
resetAlert(); resetAlert();
if (data.message) {
history.replaceState(history.state, "", "/login");
setTimeout(() => {
message = "";
}, 7000);
}
}); });
async function resetAlert (){ async function resetAlert (){
@@ -15,22 +27,33 @@
showAlert=false; showAlert=false;
} }
} }
</script> </script>
<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10"> <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
<div class="w-full max-w-sm"> <div class="w-full max-w-sm">
<LoginForm bind:showAlert={showAlert} id="1" /> {#if message}
{#if showAlert} <div class="mb-2" transition:fly>
<div class="mt-2" transition:fade> <Alert.Root>
<Alert.Root variant="destructive"> <Info />
<AlertCircleIcon /> <Alert.Title>Info</Alert.Title>
<Alert.Title>No se pudo iniciar sesion</Alert.Title> <Alert.Description>
<Alert.Description> Ingrese las credenciales de la cuenta recien creada
Revise su usuario o contraseña </Alert.Description>
</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> </Alert.Root>
</div> </div>
{/if} {/if}