chore: standardize security and quality foundations

frontend/app/ui/HeaderIdentity.tsx

@@ -1,78 +1,78 @@
-'use client'
+"use client";
 
-import { useEffect, useState } from 'react'
-import { authFetch, clearToken, getApiBase, getToken, logout } from '../lib/auth'
-import { setUserViewPreview, useUserViewPreview } from '../lib/viewMode'
+import { useEffect, useState } from "react";
+import { authFetch, clearToken, getApiBase, getToken, logout } from "../lib/auth";
+import { setUserViewPreview, useUserViewPreview } from "../lib/viewMode";
 
 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)
-  const viewAsUser = useUserViewPreview()
+  const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null);
+  const [buildNumber, setBuildNumber] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+  const viewAsUser = useUserViewPreview();
 
   useEffect(() => {
-    const token = getToken()
+    const token = getToken();
     if (!token) {
-      setIdentity(null)
-      setBuildNumber(null)
-      return
+      setIdentity(null);
+      setBuildNumber(null);
+      return;
     }
     const load = async () => {
       try {
-        const baseUrl = getApiBase()
-        const response = await authFetch(`${baseUrl}/auth/me`)
+        const baseUrl = getApiBase();
+        const response = await authFetch(`${baseUrl}/auth/me`);
         if (!response.ok) {
-          clearToken()
-          setIdentity(null)
-          return
+          clearToken();
+          setIdentity(null);
+          return;
         }
-        const data = await response.json()
+        const data = await response.json();
         if (data?.username) {
-          setIdentity({ username: data.username, role: data.role })
-          if (data.role !== 'admin') {
-            setUserViewPreview(false)
+          setIdentity({ username: data.username, role: data.role });
+          if (data.role !== "admin") {
+            setUserViewPreview(false);
           }
         }
-        const siteResponse = await fetch(`${baseUrl}/site/public`)
+        const siteResponse = await fetch(`${baseUrl}/site/public`);
         if (siteResponse.ok) {
-          const siteInfo = await siteResponse.json()
+          const siteInfo = await siteResponse.json();
           if (siteInfo?.buildNumber) {
-            setBuildNumber(siteInfo.buildNumber)
+            setBuildNumber(siteInfo.buildNumber);
           }
         }
       } catch (err) {
-        console.error(err)
-        setIdentity(null)
+        console.error(err);
+        setIdentity(null);
       }
-    }
-    void load()
-  }, [])
+    };
+    void load();
+  }, []);
 
   if (!identity) {
-    return null
+    return null;
   }
 
-  const label = `${identity.username}${identity.role ? ` (${identity.role})` : ''}`
-  const initial = identity.username.slice(0, 1).toUpperCase()
+  const label = `${identity.username}${identity.role ? ` (${identity.role})` : ""}`;
+  const initial = identity.username.slice(0, 1).toUpperCase();
   const signOut = async () => {
-    setUserViewPreview(false)
-    await logout().catch(() => undefined)
-    clearToken()
-    if (typeof window !== 'undefined') {
-      window.location.href = '/login'
+    setUserViewPreview(false);
+    await logout().catch(() => undefined);
+    clearToken();
+    if (typeof window !== "undefined") {
+      window.location.href = "/login";
     }
-  }
+  };
 
   return (
     <div className="signed-in-context">
-      {identity.role === 'admin' ? (
+      {identity.role === "admin" ? (
         <button
           type="button"
-          className={`user-view-toggle ${viewAsUser ? 'is-active' : ''}`}
+          className={`user-view-toggle ${viewAsUser ? "is-active" : ""}`}
           aria-pressed={viewAsUser}
           onClick={() => setUserViewPreview(!viewAsUser)}
         >
-          {viewAsUser ? 'Exit user view' : 'View as user'}
+          {viewAsUser ? "Exit user view" : "View as user"}
         </button>
       ) : null}
       <div className="signed-in-menu">
@@ -93,12 +93,16 @@ export default function HeaderIdentity() {
               {viewAsUser ? <span>Previewing user view</span> : null}
             </div>
             <div className="signed-in-actions">
-              <a href="/welcome" onClick={() => setOpen(false)}>Welcome page</a>
-              <a href="/how-it-works" onClick={() => setOpen(false)}>How it works</a>
+              <a href="/welcome" onClick={() => setOpen(false)}>
+                Welcome page
+              </a>
+              <a href="/how-it-works" onClick={() => setOpen(false)}>
+                How it works
+              </a>
               <a href="/profile" onClick={() => setOpen(false)}>
                 My profile
               </a>
-              {identity.role === 'admin' ? (
+              {identity.role === "admin" ? (
                 <a href="/admin" onClick={() => setOpen(false)}>
                   Settings
                 </a>
@@ -112,5 +116,5 @@ export default function HeaderIdentity() {
         )}
       </div>
     </div>
-  )
+  );
 }