Display user name in application header

matrixgw_backend/src/main.rs

@@ -17,6 +17,7 @@ async fn main() -> std::io::Result<()> {
 
     let secret_key = Key::from(AppConfig::get().secret().as_bytes());
 
+    log::info!("Connect to Redis session store...");
     let redis_store = RedisSessionStore::new(AppConfig::get().redis_connection_string())
         .await
         .expect("Failed to connect to Redis!");

matrixgw_frontend/src/api/AuthApi.ts

@@ -1,6 +1,6 @@
 import { APIClient } from "./ApiClient";
 
-export interface AuthInfo {
+export interface UserInfo {
   id: number;
   time_create: number;
   time_update: number;
@@ -58,9 +58,9 @@ export class AuthApi {
   }
 
   /**
-   * Get auth information
+   * Get user information
    */
-  static async GetAuthInfo(): Promise<AuthInfo> {
+  static async GetUserInfo(): Promise<UserInfo> {
     return (
       await APIClient.exec({
         uri: "/auth/info",

matrixgw_frontend/src/widgets/dashboard/BaseAuthenticatedPage.tsx

@@ -3,13 +3,39 @@ import { useTheme } from "@mui/material/styles";
 import Toolbar from "@mui/material/Toolbar";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import * as React from "react";
-import { Outlet } from "react-router";
+import { Outlet, useNavigate } from "react-router";
 import DashboardHeader from "./DashboardHeader";
 import DashboardSidebar from "./DashboardSidebar";
+import { AuthApi, type UserInfo } from "../../api/AuthApi";
+import { AsyncWidget } from "../AsyncWidget";
+import { Button } from "@mui/material";
+import { useAuth } from "../../App";
+
+interface UserInfoContext {
+  info: UserInfo;
+  reloadUserInfo: () => void;
+  signOut: () => void;
+}
+
+const UserInfoContextK = React.createContext<UserInfoContext | null>(null);
 
 export default function BaseAuthenticatedPage(): React.ReactElement {
   const theme = useTheme();
 
+  const [userInfo, setuserInfo] = React.useState<null | UserInfo>(null);
+  const loadUserInfo = async () => {
+    setuserInfo(await AuthApi.GetUserInfo());
+  };
+
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  const signOut = () => {
+    AuthApi.SignOut();
+    navigate("/");
+    auth.setSignedIn(false);
+  };
+
   const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] =
     React.useState(false);
   const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] =
@@ -46,6 +72,23 @@ export default function BaseAuthenticatedPage(): React.ReactElement {
   const layoutRef = React.useRef<HTMLDivElement>(null);
 
   return (
+    <AsyncWidget
+      loadKey="1"
+      load={loadUserInfo}
+      errMsg="Failed to load user information!"
+      errAdditionalElement={() => (
+        <>
+          <Button onClick={signOut}>Sign out</Button>
+        </>
+      )}
+      build={() => (
+        <UserInfoContextK
+          value={{
+            info: userInfo!,
+            reloadUserInfo: loadUserInfo,
+            signOut,
+          }}
+        >
           <Box
             ref={layoutRef}
             sx={{
@@ -88,5 +131,12 @@ export default function BaseAuthenticatedPage(): React.ReactElement {
               </Box>
             </Box>
           </Box>
+        </UserInfoContextK>
+      )}
+    />
   );
 }
+
+export function userUserInfo(): UserInfoContext {
+  return React.use(UserInfoContextK)!;
+}

matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx

@@ -1,7 +1,9 @@
 import { mdiMessageTextFast } from "@mdi/js";
 import Icon from "@mdi/react";
+import LogoutIcon from "@mui/icons-material/Logout";
 import MenuIcon from "@mui/icons-material/Menu";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import { Avatar } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
@@ -12,6 +14,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { RouterLink } from "../RouterLink";
+import { userUserInfo as useUserInfo } from "./BaseAuthenticatedPage";
 import ThemeSwitcher from "./ThemeSwitcher";
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
@@ -42,6 +45,8 @@ export default function DashboardHeader({
   menuOpen,
   onToggleMenu,
 }: DashboardHeaderProps) {
+  const user = useUserInfo();
+
   const handleMenuOpen = React.useCallback(() => {
     onToggleMenu(!menuOpen);
   }, [menuOpen, onToggleMenu]);
@@ -101,6 +106,7 @@ export default function DashboardHeader({
                     ml: 1,
                     whiteSpace: "nowrap",
                     lineHeight: 1,
+                    display: { xs: "none", sm: "block" },
                   }}
                 >
                   MatrixGW
@@ -108,18 +114,42 @@ export default function DashboardHeader({
               </Stack>
             </RouterLink>
           </Stack>
+
+          {/* User avatar */}
           <Stack
             direction="row"
-            alignItems="center"
+            sx={{
-            spacing={1}
+              p: 2,
-            sx={{ marginLeft: "auto" }}
+              gap: 1,
+              alignItems: "center",
+              borderTop: "1px solid",
+              borderColor: "divider",
+            }}
           >
-            <Stack direction="row" alignItems="center">
+            <Avatar
+              sizes="small"
+              alt={user.info.name}
+              sx={{ width: 36, height: 36 }}
+            />
+            <Box sx={{ mr: "auto", display: { xs: "none", md: "block" } }}>
+              <Typography
+                variant="body2"
+                sx={{ fontWeight: 500, lineHeight: "16px" }}
+              >
+                {user.info.name}
+              </Typography>
+              <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                {user.info.email}
+              </Typography>
+            </Box>
             <ThemeSwitcher />
+            <Tooltip title="Sign out">
+              <IconButton size="small" onClick={user.signOut}>
+                <LogoutIcon />
+              </IconButton>
+            </Tooltip>
           </Stack>
         </Stack>
-          Hi TODO USER SIGN OUT
-        </Stack>
       </Toolbar>
     </AppBar>
   );

matrixgw_frontend/src/widgets/dashboard/ThemeSwitcher.tsx

@@ -34,7 +34,6 @@ export default function ThemeSwitcher() {
           } mode`}
           onClick={toggleMode}
         >
-          <React.Fragment>
           <LightModeIcon
             sx={{
               display: "inline",
@@ -51,7 +50,6 @@ export default function ThemeSwitcher() {
               },
             }}
           />
-          </React.Fragment>
         </IconButton>
       </div>
     </Tooltip>