Update profile menu to reflect actual name & role

webui/src/common/components/ProfileMenu/ProfileMenu.jsx

@@ -4,11 +4,10 @@ import {UserContext} from '@/common/contexts/UserContext.jsx';
 import './styles.sass';
 
 export const ProfileMenu = () => {
-    const {logout} = useContext(UserContext);
+    const {logout, user} = useContext(UserContext);
     const [isOpen, setIsOpen] = useState(false);
     const menuRef = useRef(null);
 
-    // Close menu when clicking outside
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -22,7 +21,6 @@ export const ProfileMenu = () => {
         };
     }, []);
 
-    // Close menu on escape key
     useEffect(() => {
         const handleEscapeKey = (event) => {
             if (event.key === 'Escape') {
@@ -58,7 +56,7 @@ export const ProfileMenu = () => {
                 <div className="profile-menu-avatar">
                     <UserCircleIcon size={16} weight="fill"/>
                 </div>
-                <span className="profile-menu-name">Admin</span>
+                <span className="profile-menu-name">{user.username}</span>
                 <CaretDownIcon
                     size={14}
                     className={`profile-menu-caret ${isOpen ? 'rotated' : ''}`}
@@ -72,8 +70,8 @@ export const ProfileMenu = () => {
                             <UserCircleIcon size={20} weight="fill"/>
                         </div>
                         <div className="profile-menu-info">
-                            <div className="profile-menu-name-large">Admin User</div>
-                            <div className="profile-menu-role">Administrator</div>
+                            <div className="profile-menu-name-large">{user.username}</div>
+                            <div className="profile-menu-role">{user.role === 'admin' ? 'Administrator' : 'User'}</div>
                         </div>
                     </div>
 

webui/src/common/contexts/UserContext.jsx

@@ -7,7 +7,7 @@ export const UserContext = createContext({});
 export const UserProvider = ({ children }) => {
 
     const [sessionToken, setSessionToken] = useState(localStorage.getItem("sessionToken"));
-    const [isSetupCompleted, setIsSetupCompleted] = useState(null); // null = unknown, true/false = known
+    const [isSetupCompleted, setIsSetupCompleted] = useState(null);
     const [user, setUser] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
 
@@ -24,7 +24,7 @@ export const UserProvider = ({ children }) => {
             return response?.first_user_exists;
         } catch (error) {
             console.error(error);
-            setIsSetupCompleted(false); // Default to setup mode if we can't check
+            setIsSetupCompleted(false);
             return false;
         }
     };
@@ -33,7 +33,6 @@ export const UserProvider = ({ children }) => {
         try {
             const userObj = await getRequest("accounts/me");
             setUser(userObj);
-            // If login is successful, setup must be completed
             if (isSetupCompleted === null) {
                 setIsSetupCompleted(true);
             }
@@ -42,7 +41,6 @@ export const UserProvider = ({ children }) => {
                 setSessionToken(null);
                 localStorage.removeItem("sessionToken");
                 setUser(null);
-                // Check setup status when unauthorized
                 await checkFirstTimeSetup();
             }
         } finally {
@@ -56,13 +54,11 @@ export const UserProvider = ({ children }) => {
         } catch (e) {
             // ignore
         }
-        
-        // Clear user state
+
         setUser(null);
         setSessionToken(null);
         localStorage.removeItem("sessionToken");
-        
-        // Re-check setup status after logout
+
         setIsLoading(true);
         await checkFirstTimeSetup();
         setIsLoading(false);
@@ -85,39 +81,24 @@ export const UserProvider = ({ children }) => {
             setIsLoading(true);
             
             if (sessionToken) {
-                // Try to login with existing token
                 await login();
             } else {
-                // No token, check setup status
                 await checkFirstTimeSetup();
                 setIsLoading(false);
             }
         };
 
         initializeAuth();
-    }, []); // Only run once on mount
+    }, []);
 
-    // Handle session token changes
     useEffect(() => {
         if (sessionToken && user === null && !isLoading) {
             login();
         }
     }, [sessionToken]);
 
-    // Show loading state while determining auth status
     if (isLoading || isSetupCompleted === null) {
-        return (
-            <div style={{ 
-                display: 'flex', 
-                justifyContent: 'center', 
-                alignItems: 'center', 
-                height: '100vh',
-                background: 'var(--bg)',
-                color: 'var(--text-dim)'
-            }}>
-                Loading...
-            </div>
-        );
+        return (<></>);
     }
 
     return (