Initial commit

frontend/app/ui/HeaderIdentity.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
+
+export default function HeaderIdentity() {
+  const [identity, setIdentity] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    const token = getToken()
+    if (!token) {
+      setIdentity(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(`${data.username}${data.role ? ` (${data.role})` : ''}`)
+        }
+      } catch (err) {
+        console.error(err)
+        setIdentity(null)
+      }
+    }
+    void load()
+  }, [])
+
+  if (!identity) {
+    return null
+  }
+
+  return (
+    <div className="signed-in-menu">
+      <button type="button" className="signed-in" onClick={() => setOpen((prev) => !prev)}>
+        Signed in as {identity}
+      </button>
+      {open && (
+        <div className="signed-in-dropdown">
+          <a href="/profile">My profile</a>
+        </div>
+      )}
+    </div>
+  )
+}