Timothy Yin
2cb89c74b3
feat(auth): implement login page and authentication middleware feat(sidebar): create sidebar component with user info and navigation links feat(api): establish API client for interacting with backend services
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import { ArrowRightFromSquare, PersonFill } from '@gravity-ui/icons'
|
|
import { signOut, useSession } from '@/lib/auth-client'
|
|
|
|
export default function SidebarFooter() {
|
|
const router = useRouter()
|
|
const { data: session } = useSession()
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut({ fetchOptions: { credentials: 'include' } })
|
|
router.push('/login')
|
|
router.refresh()
|
|
}
|
|
|
|
return (
|
|
<div className="border-t border-border p-3">
|
|
{/* User info */}
|
|
{session?.user && (
|
|
<div className="mb-2 flex items-center gap-2.5 rounded-lg px-2 py-1.5">
|
|
<div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-accent-soft">
|
|
<PersonFill className="size-3.5 text-accent" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium leading-tight text-foreground">
|
|
{session.user.name || session.user.email}
|
|
</p>
|
|
<p className="truncate text-xs leading-tight text-muted capitalize">
|
|
{session.user.role ?? 'user'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
|
|
onClick={handleSignOut}
|
|
>
|
|
<ArrowRightFromSquare className="size-4 shrink-0" />
|
|
<span>退出登录</span>
|
|
</button>
|
|
|
|
<p className="mt-2 px-2 text-[11px] text-muted/60">OCPP 1.6-J • v0.1.0</p>
|
|
</div>
|
|
)
|
|
}
|