public/glowing-fiesta-original
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

[Closes #8] Added authentication
All checks were successful
Production Build and Deploy / Build (push) Successful in 1m7s
Details
Production Build and Deploy / Deploy (push) Successful in 29s
Details

Browse source
This commit is contained in:
Liviu Burcusel 2026-01-07 11:11:35 +01:00
parent 6eefa137bb
commit 6d3cdb560d
Signed by: liviu
GPG key ID: 6CDB37A4AD2C610C
65 changed files with 5834 additions and 440 deletions
Download patch file Download diff file Expand all files Collapse all files

149
app/layouts/default/SidebarFooter.vue Normal file
View file

@ -0,0 +1,149 @@
<script setup lang="ts">
import { computed } from "vue";
import { SidebarFooter, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "~/components/ui/sidebar";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogIn, LogOut } from "lucide-vue-next";
import type { User } from "better-auth";
const { isMobile } = useSidebar();
const props = defineProps<{ user?: User | null | undefined }>();
const userInititials = computed(() => {
if (!props.user) return "";
return props.user.name
.split(" ")
.map((name) => name.charAt(0).toUpperCase())
.join("");
});
const handleLogout = () => {
navigateTo("/member/auth/logout");
};
const handleLogin = () => {
navigateTo("/member/auth/login");
};
</script>
<template>
<ClientOnly>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu v-if="user">
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user?.image || ''" :alt="user?.name" />
<AvatarFallback class="rounded-lg">{{ userInititials }}</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">{{ user?.name }}</span>
<span class="truncate text-xs">{{ user?.email }}</span>
</div>
<ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user?.image || ''" :alt="user?.name" />
<AvatarFallback class="rounded-lg">{{ userInititials }}</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">{{ user.name }}</span>
<span class="truncate text-xs">{{ user.email }}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheck />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<Bell />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem @click="handleLogout">
<LogOut />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu v-else>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src="/images/human.png" alt="Anonymous" />
<AvatarFallback class="rounded-lg">Anon</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">Anonymous</span>
<span class="truncate text-xs">No email</span>
</div>
<ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
:side="isMobile ? 'bottom' : 'right'"
align="end"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage src="/images/human.png" alt="Anonymous" />
<AvatarFallback class="rounded-lg">Anon</AvatarFallback>
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Anonymous</span>
<span class="truncate text-xs">No email</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem @click="handleLogin">
<LogIn />
Log in
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</ClientOnly>
</template>