91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
|
|
|
|
export default function HeaderIdentity() {
|
|
const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null)
|
|
const [buildNumber, setBuildNumber] = useState<string | null>(null)
|
|
const [open, setOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const token = getToken()
|
|
if (!token) {
|
|
setIdentity(null)
|
|
setBuildNumber(null)
|
|
return
|
|
}
|
|
const load = async () => {
|
|
try {
|
|
const baseUrl = getApiBase()
|
|
const response = await authFetch(`${baseUrl}/auth/me`)
|
|
if (!response.ok) {
|
|
clearToken()
|
|
setIdentity(null)
|
|
return
|
|
}
|
|
const data = await response.json()
|
|
if (data?.username) {
|
|
setIdentity({ username: data.username, role: data.role })
|
|
}
|
|
const siteResponse = await fetch(`${baseUrl}/site/public`)
|
|
if (siteResponse.ok) {
|
|
const siteInfo = await siteResponse.json()
|
|
if (siteInfo?.buildNumber) {
|
|
setBuildNumber(siteInfo.buildNumber)
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
setIdentity(null)
|
|
}
|
|
}
|
|
void load()
|
|
}, [])
|
|
|
|
if (!identity) {
|
|
return null
|
|
}
|
|
|
|
const label = `${identity.username}${identity.role ? ` (${identity.role})` : ''}`
|
|
const initial = identity.username.slice(0, 1).toUpperCase()
|
|
const signOut = () => {
|
|
clearToken()
|
|
if (typeof window !== 'undefined') {
|
|
window.location.href = '/login'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="signed-in-menu">
|
|
<button
|
|
type="button"
|
|
className="avatar-button"
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
aria-haspopup="true"
|
|
aria-expanded={open}
|
|
title={label}
|
|
>
|
|
{initial}
|
|
</button>
|
|
{open && (
|
|
<div className="signed-in-dropdown">
|
|
<div className="signed-in-header">Signed in as {label}</div>
|
|
<div className="signed-in-actions">
|
|
<a href="/profile" onClick={() => setOpen(false)}>
|
|
My profile
|
|
</a>
|
|
<a href="/changelog" onClick={() => setOpen(false)}>
|
|
Changelog
|
|
</a>
|
|
<button type="button" className="signed-in-signout" onClick={signOut}>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
{buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|