fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-17 15:47:31 -03:00
Code Issues Packages Projects Releases Wiki Activity

añadido componente para crear posts y modificado menu auth

Browse Source
This commit is contained in:
fedpo
2025-11-23 17:42:52 -03:00
parent e677e83f27
commit 3fbacce3fe
24 changed files with 618 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/lib/head/AvatarButton.svelte Normal file
View File

@@ -0,0 +1,34 @@
<script>
import AvatarFallback from '@/components/ui/avatar/avatar-fallback.svelte';
import AvatarImage from '@/components/ui/avatar/avatar-image.svelte';
import Avatar from '@/components/ui/avatar/avatar.svelte';
import { DropdownMenu } from '@/components/ui/dropdown-menu';
import DropdownMenuContent from '@/components/ui/dropdown-menu/dropdown-menu-content.svelte';
import DropdownMenuGroup from '@/components/ui/dropdown-menu/dropdown-menu-group.svelte';
import DropdownMenuItem from '@/components/ui/dropdown-menu/dropdown-menu-item.svelte';
import DropdownMenuSeparator from '@/components/ui/dropdown-menu/dropdown-menu-separator.svelte';
import DropdownMenuTrigger from '@/components/ui/dropdown-menu/dropdown-menu-trigger.svelte';
import { logout } from '@/hooks/logout';
import { sesionStore } from '@/stores/usuario';
let { menuOpen = false } = $props();
</script>
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src={$sesionStore?.url} />
<AvatarFallback>{$sesionStore?.displayName[0]}</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>
<a href={'/'}> Mi Perfil </a>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onclick={async () => await logout(menuOpen)}>Cerrar Sesion</DropdownMenuItem
>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>

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

@@ -8,43 +8,40 @@
import { onMount } from 'svelte';
import { apiBase } from '@/stores/url';
import { goto } from '$app/navigation';
import AvatarButton from './AvatarButton.svelte';
let menuOpen = $state(false);
const toggleMenu = () => (menuOpen = !menuOpen);
let showCerrarSesion = $state(false);
let showCerrarSesion = $state(false);
onMount(()=>{
sesionStore.subscribe((value)=>{
showCerrarSesion = !!value?.accessToken;
})
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();
goto("/");
}
}
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();
goto('/');
}
}
</script>
<header class="border-b bg-background/95 backdrop-blur">
@@ -53,31 +50,38 @@
<a href="/" class="mr-6 flex items-center space-x-2">
<p class="leading-7 not-first:mt-6">Mini-X</p>
</a>
<nav class="items-center space-x-6 text-sm font-medium md:flex">
<nav class="me-2 items-center space-x-6 text-sm font-medium md:flex">
<ButtonTheme />
</nav>
<div class="md:hidden">
{#if $sesionStore !== null}
<AvatarButton></AvatarButton>
{/if}
</div>
</div>
<!-- Desktop menu -->
<div class="hidden flex-1 items-center justify-end md:flex">
<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>
{#if showCerrarSesion}
{#if $sesionStore !== null}
<AvatarButton></AvatarButton>
{/if}
{:else}
<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>
{/if}
</div>
<!-- Mobile menu button -->
@@ -107,25 +111,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">
{#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 class="space-y-1 border-t bg-background/95 px-2 pt-2 pb-3">
<!---
{#if showCerrarSesion}{: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>