web: conditionally show avatar when logged in

web/src/app/_components/header.tsx

@@ -1,6 +1,11 @@
+"use client"
+
 import Link from "next/link"
+import Image from "next/image";
 
 import "./styles/header.scss"
+import { UserInfo } from "@/app/ts/User";
+import { useState, useEffect } from "react";
 
 interface HeaderButton {
 	name: string,
@@ -19,6 +24,21 @@ export default function Header() {
 		window.location.href = "https://auth.staging.strafes.net/oauth2/login?redirect=" + window.location.href;
 	};
 
+	const [valid, setValid] = useState<boolean>(false)
+	const [user, setUser] = useState<UserInfo | null>(null)
+
+	useEffect(() => {
+		async function getLoginInfo() {
+			const [validateData, userData] = await Promise.all([
+				fetch("/api/session/validate").then(validateResponse => validateResponse.json()),
+				fetch("/api/session/user").then(userResponse => userResponse.json())
+			]);
+			setValid(validateData)
+			setUser(userData)
+		}
+		getLoginInfo()
+	}, [])
+
 	return (
 		<header className="header-bar">
 			<nav className="left">
@@ -28,7 +48,16 @@ export default function Header() {
 			</nav>
 			<nav className="right">
 				<HeaderButton name="Submit" href="/submit"/>
-				<button onClick={handleLoginClick}>Login</button>
+				{valid && user ? (
+					<div className="author">
+						<Link href="https://auth.staging.strafes.net/">
+							<Image className="avatar" width={28} height={28} priority={true} src={user.AvatarURL} alt={user.Username}/>
+							<button>{user.Username}</button>
+						</Link>
+					</div>
+				) : (
+					<button onClick={handleLoginClick}>Login</button>
+				)}
 			</nav>
 		</header>
 	)

web/src/app/ts/User.ts

@@ -0,0 +1,5 @@
+export interface UserInfo {
+    readonly UserID:    number,
+    readonly Username:  string,
+    readonly AvatarURL: string,
+}