3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-05-30 01:17:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

userinfo: fix logout button, add sign out confirm page (#3058)

Browse source 
* userinfo: fix logout button, add sign out confirm page

* fix test
This commit is contained in:
Caleb Doxsey 2022-02-23 08:15:00 -07:00 • committed by GitHub
parent 9300208e87
commit 38c7089642
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 251 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,23 +1,29 @@
import { PageData } from "../types";
import { Avatar } from "./Avatar";
import Logo from "./Logo";
import { ToolbarOffset } from "./ToolbarOffset";
import UserSidebarContent from "./UserSidebarContent";
import {
Drawer,
IconButton,
Menu,
MenuItem,
useMediaQuery,
} from "@mui/material";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import React, {FC, useState} from "react";
import {useTheme} from "@mui/material/styles";
import {Drawer, IconButton, Menu, MenuItem, useMediaQuery} from "@mui/material";
import {ToolbarOffset} from "./ToolbarOffset";
import UserSidebarContent from "./UserSidebarContent";
import {ChevronLeft, ChevronRight, Menu as MenuIcon} from "react-feather";
import { useTheme } from "@mui/material/styles";
import styled from "@mui/material/styles/styled";
import {Avatar} from "./Avatar";
import {PageData} from "../types";
import {get} from 'lodash';
import { get } from "lodash";
import React, { FC, useState } from "react";
import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather";
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
const DrawerHeader = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
padding: theme.spacing(0, 1),
justifyContent: 'flex-end',
justifyContent: "flex-end",
}));
type HeaderProps = {
@ -26,33 +32,34 @@ type HeaderProps = {
};
const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
const theme = useTheme();
const mdUp = useMediaQuery(() => theme.breakpoints.up('md'), {
const mdUp = useMediaQuery(() => theme.breakpoints.up("md"), {
defaultMatches: true,
noSsr: false
noSsr: false,
});
const [drawerOpen, setDrawerOpen] = useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleMenuOpen = e => {
const handleMenuOpen = (e) => {
setAnchorEl(e.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
const userName = get(data, 'user.name') || get(data, 'user.claims.given_name');
const userName =
get(data, "user.name") || get(data, "user.claims.given_name");
const handleDrawerOpen = () => {
setDrawerOpen(true);
};
const handleDrawerClose = ():void => {
const handleDrawerClose = (): void => {
setDrawerOpen(false);
};
const handleLogout = (evt: React.MouseEvent):void => {
const handleLogout = (evt: React.MouseEvent): void => {
evt.preventDefault();
location.href = "/.pomerium/sign_out";
}
};
return (
<AppBar
@ -67,7 +74,7 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{ mr: 2, ...(drawerOpen && { display: 'none' }) }}
sx={{ mr: 2, ...(drawerOpen && { display: "none" }) }}
>
<MenuIcon />
</IconButton>
@ -75,11 +82,11 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
sx={{
width: 256,
flexShrink: 0,
'& .MuiDrawer-paper': {
"& .MuiDrawer-paper": {
width: 256,
boxSizing: 'border-box',
backgroundColor: 'neutral.900',
height: '100vh',
boxSizing: "border-box",
backgroundColor: "neutral.900",
height: "100vh",
},
}}
variant="persistent"
@ -88,10 +95,14 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
>
<DrawerHeader>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'ltr' ? <ChevronLeft /> : <ChevronRight />}
{theme.direction === "ltr" ? (
<ChevronLeft />
) : (
<ChevronRight />
)}
</IconButton>
</DrawerHeader>
<UserSidebarContent close={handleDrawerClose}/>
<UserSidebarContent close={handleDrawerClose} />
<ToolbarOffset />
</Drawer>
</>
@ -104,13 +115,16 @@ const Header: FC<HeaderProps> = ({ includeSidebar, data }) => {
{userName && (
<>
<IconButton color="inherit" onClick={handleMenuOpen}>
<Avatar name={userName} url={get(data, 'user.claims.picture', null)} />
<Avatar
name={userName}
url={get(data, "user.claims.picture", null)}
/>
</IconButton>
<Menu
onClose={handleMenuClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
vertical: "bottom",
horizontal: "center",
}}
keepMounted
open={!!anchorEl}

43
ui/src/components/SignOutConfirmPage.tsx Normal file
View file

@ -0,0 +1,43 @@
import Button from "@mui/material/Button";
import Container from "@mui/material/Container";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import styled from "@mui/material/styles/styled";
import React, { FC } from "react";
import { SignOutConfirmPageData } from "src/types";
type SignOutConfirmPageProps = {
data: SignOutConfirmPageData;
};
const SignOutConfirmPage: FC<SignOutConfirmPageProps> = ({ data }) => {
function handleClickCancel(evt: React.MouseEvent) {
evt.preventDefault();
history.back();
}
function handleClickLogout(evt: React.MouseEvent) {
evt.preventDefault();
location.href = data.url;
}
return (
<Container>
<Dialog open={true} disableEscapeKeyDown={true}>
<DialogTitle>Logout?</DialogTitle>
<DialogContent>
<DialogContentText>
Are you sure you want to logout?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClickCancel}>Cancel</Button>
<Button onClick={handleClickLogout}>Logout</Button>
</DialogActions>
</Dialog>
</Container>
);
};
export default SignOutConfirmPage;