3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-04-29 10:26:29 +02:00
Code Issues Projects Releases Packages Wiki Activity

dashboard: fix missing avatar and logout menu (#3819)

Browse source
This commit is contained in:
Caleb Doxsey 2022-12-17 09:04:01 -07:00 • committed by GitHub
parent 539fd51579
commit 191eeceb05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
ui/src/components/Header.tsx
View file

@ -1,8 +1,3 @@
import { PageData } from "../types";
import { Avatar } from "./Avatar";
import Logo from "./Logo";
import { ToolbarOffset } from "./ToolbarOffset";
import UserSidebarContent from "./UserSidebarContent";
import { import {
Drawer, Drawer,
IconButton, IconButton,
@ -18,7 +13,13 @@ import styled from "@mui/material/styles/styled";
import { get } from "lodash"; import { get } from "lodash";
import React, { FC, useState } from "react"; import React, { FC, useState } from "react";
import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather"; import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather";
import LogoURL from "../static/logo_white.svg"; import LogoURL from "../static/logo_white.svg";
import { PageData } from "../types";
import { Avatar } from "./Avatar";
import Logo from "./Logo";
import { ToolbarOffset } from "./ToolbarOffset";
import UserSidebarContent from "./UserSidebarContent";
const DrawerHeader = styled("div")(({ theme }) => ({ const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex", display: "flex",
@ -47,7 +48,15 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
setAnchorEl(null); setAnchorEl(null);
}; };
const userName = const userName =
get(data, "user.name") || get(data, "user.claims.given_name"); get(data, "user.name") ||
get(data, "user.claims.given_name") ||
get(data, "profile.claims.name") ||
get(data, "profile.claims.given_name") ||
"";
const userPictureUrl =
get(data, "user.claims.picture") ||
get(data, "profile.claims.picture") ||
null;
const handleDrawerOpen = () => { const handleDrawerOpen = () => {
setDrawerOpen(true); setDrawerOpen(true);
@ -109,32 +118,25 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
</> </>
) : ( ) : (
<a href="/.pomerium"> <a href="/.pomerium">
<Logo src={ data?.logoUrl || LogoURL }/> <Logo src={data?.logoUrl || LogoURL} />
</a> </a>
)} )}
<Box flexGrow={1} /> <Box flexGrow={1} />
{userName && ( <IconButton color="inherit" onClick={handleMenuOpen}>
<> <Avatar name={userName} url={userPictureUrl} />
<IconButton color="inherit" onClick={handleMenuOpen}> </IconButton>
<Avatar <Menu
name={userName} onClose={handleMenuClose}
url={get(data, "user.claims.picture", null)} anchorOrigin={{
/> vertical: "bottom",
</IconButton> horizontal: "center",
<Menu }}
onClose={handleMenuClose} keepMounted
anchorOrigin={{ open={!!anchorEl}
vertical: "bottom", anchorEl={anchorEl}
horizontal: "center", >
}} <MenuItem onClick={handleLogout}>Logout</MenuItem>
keepMounted </Menu>
open={!!anchorEl}
anchorEl={anchorEl}
>
<MenuItem onClick={handleLogout}>Logout</MenuItem>
</Menu>
</>
)}
</Toolbar> </Toolbar>
</AppBar> </AppBar>
); );