RustProjects/Arkendro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update profile menu to reflect actual name & role

Browse Source
This commit is contained in:
Mathias Wagner
2025-09-09 17:57:36 +02:00
parent 87efa1cf0e
commit 2d2b1b9c00
2 changed files with 10 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
webui/src/common/components/ProfileMenu/ProfileMenu.jsx
View File

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

27
webui/src/common/contexts/UserContext.jsx
View File

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