feat(webui): Display logged-in username

- Add username display in the `SiteHeader` component.
- Update logout button text to include username.
- Add `username` field in auth state.
- Optimize token parsing logic to extract username information.
- pre-commit fix

lightrag_webui/src/stores/state.ts

@@ -21,6 +21,8 @@ interface AuthState {
   isGuestMode: boolean;  // Add guest mode flag
   coreVersion: string | null;
   apiVersion: string | null;
+  username: string | null; // login username
+
   login: (token: string, isGuest?: boolean, coreVersion?: string | null, apiVersion?: string | null) => void;
   logout: () => void;
   setVersion: (coreVersion: string | null, apiVersion: string | null) => void;
@@ -76,36 +78,42 @@ const useBackendState = createSelectors(useBackendStateStoreBase)
 
 export { useBackendState }
 
-// Helper function to check if token is a guest token
-const isGuestToken = (token: string): boolean => {
+const parseTokenPayload = (token: string): { sub?: string; role?: string } => {
   try {
     // JWT tokens are in the format: header.payload.signature
     const parts = token.split('.');
-    if (parts.length !== 3) return false;
-
-    // Decode the payload (second part)
+    if (parts.length !== 3) return {};
     const payload = JSON.parse(atob(parts[1]));
-
-    // Check if the token has a role field with value "guest"
-    return payload.role === 'guest';
+    return payload;
   } catch (e) {
-    console.error('Error parsing token:', e);
-    return false;
+    console.error('Error parsing token payload:', e);
+    return {};
   }
 };
 
-// Initialize auth state from localStorage
-const initAuthState = (): { isAuthenticated: boolean; isGuestMode: boolean; coreVersion: string | null; apiVersion: string | null } => {
+const getUsernameFromToken = (token: string): string | null => {
+  const payload = parseTokenPayload(token);
+  return payload.sub || null;
+};
+
+const isGuestToken = (token: string): boolean => {
+  const payload = parseTokenPayload(token);
+  return payload.role === 'guest';
+};
+
+const initAuthState = (): { isAuthenticated: boolean; isGuestMode: boolean; coreVersion: string | null; apiVersion: string | null; username: string | null } => {
   const token = localStorage.getItem('LIGHTRAG-API-TOKEN');
   const coreVersion = localStorage.getItem('LIGHTRAG-CORE-VERSION');
   const apiVersion = localStorage.getItem('LIGHTRAG-API-VERSION');
+  const username = token ? getUsernameFromToken(token) : null;
 
   if (!token) {
     return {
       isAuthenticated: false,
       isGuestMode: false,
       coreVersion: coreVersion,
-      apiVersion: apiVersion
+      apiVersion: apiVersion,
+      username: null,
     };
   }
 
@@ -113,7 +121,8 @@ const initAuthState = (): { isAuthenticated: boolean; isGuestMode: boolean; core
     isAuthenticated: true,
     isGuestMode: isGuestToken(token),
     coreVersion: coreVersion,
-    apiVersion: apiVersion
+    apiVersion: apiVersion,
+    username: username,
   };
 };
 
@@ -126,6 +135,7 @@ export const useAuthStore = create<AuthState>(set => {
     isGuestMode: initialState.isGuestMode,
     coreVersion: initialState.coreVersion,
     apiVersion: initialState.apiVersion,
+    username: initialState.username,
 
     login: (token, isGuest = false, coreVersion = null, apiVersion = null) => {
       localStorage.setItem('LIGHTRAG-API-TOKEN', token);
@@ -137,11 +147,13 @@ export const useAuthStore = create<AuthState>(set => {
         localStorage.setItem('LIGHTRAG-API-VERSION', apiVersion);
       }
 
+      const username = getUsernameFromToken(token);
       set({
         isAuthenticated: true,
         isGuestMode: isGuest,
+        username: username,
         coreVersion: coreVersion,
-        apiVersion: apiVersion
+        apiVersion: apiVersion,
       });
     },
 
@@ -154,8 +166,9 @@ export const useAuthStore = create<AuthState>(set => {
       set({
         isAuthenticated: false,
         isGuestMode: false,
+        username: null,
         coreVersion: coreVersion,
-        apiVersion: apiVersion
+        apiVersion: apiVersion,
       });
     },