fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-21 16:27:32 -03:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Logout Front

Browse Source
This commit is contained in:
fedpo
2025-11-14 22:16:15 -03:00
parent a380adb940
commit 23ee793c74
1 changed files with 73 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/lib/head/Header.svelte
View File

@@ -4,9 +4,45 @@
import ButtonGroup from '@/components/ui/button-group/button-group.svelte'; import ButtonGroup from '@/components/ui/button-group/button-group.svelte';
import { page } from '$app/state'; import { page } from '$app/state';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { sesionStore } from '@/stores/usuario';
import { onMount } from 'svelte';
import { apiBase } from '@/stores/url';
let menuOpen = $state(false); let menuOpen = $state(false);
const toggleMenu = () => (menuOpen = !menuOpen); const toggleMenu = () => (menuOpen = !menuOpen);
let showCerrarSesion = $state(false);
onMount(()=>{
sesionStore.subscribe((value)=>{
showCerrarSesion = !!value?.accessToken;
})
});
async function cerrarSesion(){
try{
const req = await fetch($apiBase+"/api/auth/logout", {
method: 'POST',
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${$sesionStore?.accessToken}`
},
credentials: "include"
});
if(req.ok){
sesionStore.reset();
menuOpen = false;
}
}catch{
console.log("fallo el lougout")
} finally{
sesionStore.reset();
}
}
</script> </script>
<header class="border-b bg-background/95 backdrop-blur"> <header class="border-b bg-background/95 backdrop-blur">
@@ -22,19 +58,24 @@
<!-- Desktop menu --> <!-- Desktop menu -->
<div class="hidden flex-1 items-center justify-end md:flex"> <div class="hidden flex-1 items-center justify-end md:flex">
<ButtonGroup> <ButtonGroup>
<Button {#if showCerrarSesion}
variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'} <Button onclick={cerrarSesion}> Cerrar Sesion
href="/login" </Button>
class="text-foreground/60 transition-colors hover:text-foreground/80" {:else}
>Iniciar Sesion</Button <Button
> variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'}
<Button href="/login"
variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'} class="text-foreground/60 transition-colors hover:text-foreground/80"
href="/register" >Iniciar Sesion
class="text-foreground/60 transition-colors hover:text-foreground/80">Registrarse</Button </Button>
> <Button
</ButtonGroup> variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'}
href="/register"
class="text-foreground/60 transition-colors hover:text-foreground/80">Registrarse
</Button>
{/if}
</ButtonGroup>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
@@ -64,20 +105,25 @@
<!-- Mobile menu --> <!-- Mobile menu -->
{#if menuOpen} {#if menuOpen}
<div class="md:hidden" transition:slide> <div class="md:hidden" transition:slide>
<div class="space-y-1 border-t bg-background/95 px-2 pt-2 pb-3"> <div class="space-y-1 border-t bg-background/95 px-2 pt-2 pb-3">
<Button {#if showCerrarSesion}
variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'} <Button onclick={cerrarSesion}> Cerrar Sesion
href="/login" </Button>
class="mb-2 w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80" {:else}
onclick={() => (menuOpen = false)}>Iniciar Sesion</Button <Button
> variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'}
<Button href="/login"
variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'} class="mb-2 w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
href="/register" onclick={() => (menuOpen = false)}>Iniciar Sesion</Button
class="w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80" >
onclick={() => (menuOpen = false)}>Registrarse</Button <Button
> variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'}
</div> href="/register"
class="w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
onclick={() => (menuOpen = false)}>Registrarse
</Button>
{/if}
</div>
</div> </div>
{/if} {/if}
</header> </header>