fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -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 { page } from '$app/state';
import { slide } from 'svelte/transition';
import { sesionStore } from '@/stores/usuario';
import { onMount } from 'svelte';
import { apiBase } from '@/stores/url';
let menuOpen = $state(false);
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>
<header class="border-b bg-background/95 backdrop-blur">
@@ -22,19 +58,24 @@
<!-- Desktop menu -->
<div class="hidden flex-1 items-center justify-end md:flex">
<ButtonGroup>
<Button
variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'}
href="/login"
class="text-foreground/60 transition-colors hover:text-foreground/80"
>Iniciar Sesion</Button
>
<Button
variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'}
href="/register"
class="text-foreground/60 transition-colors hover:text-foreground/80">Registrarse</Button
>
</ButtonGroup>
<ButtonGroup>
{#if showCerrarSesion}
<Button onclick={cerrarSesion}> Cerrar Sesion
</Button>
{:else}
<Button
variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'}
href="/login"
class="text-foreground/60 transition-colors hover:text-foreground/80"
>Iniciar Sesion
</Button>
<Button
variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'}
href="/register"
class="text-foreground/60 transition-colors hover:text-foreground/80">Registrarse
</Button>
{/if}
</ButtonGroup>
</div>
<!-- Mobile menu button -->
@@ -64,20 +105,25 @@
<!-- Mobile menu -->
{#if menuOpen}
<div class="md:hidden" transition:slide>
<div class="space-y-1 border-t bg-background/95 px-2 pt-2 pb-3">
<Button
variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'}
href="/login"
class="mb-2 w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
onclick={() => (menuOpen = false)}>Iniciar Sesion</Button
>
<Button
variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'}
href="/register"
class="w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
onclick={() => (menuOpen = false)}>Registrarse</Button
>
</div>
<div class="space-y-1 border-t bg-background/95 px-2 pt-2 pb-3">
{#if showCerrarSesion}
<Button onclick={cerrarSesion}> Cerrar Sesion
</Button>
{:else}
<Button
variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'}
href="/login"
class="mb-2 w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
onclick={() => (menuOpen = false)}>Iniciar Sesion</Button
>
<Button
variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'}
href="/register"
class="w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
onclick={() => (menuOpen = false)}>Registrarse
</Button>
{/if}
</div>
</div>
{/if}
</header>