Added Logout button

This commit is contained in:
Richárd Kunkli 2020-11-01 17:27:12 +01:00
parent 5225f85095
commit 8e6759f917
7 changed files with 70 additions and 2 deletions

View File

@ -9,6 +9,14 @@
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes> <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup> </PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
<OutputPath></OutputPath>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<OutputPath></OutputPath>
</PropertyGroup>
<ItemGroup> <ItemGroup>
<PackageReference Include="AutoMapper" Version="10.1.1" /> <PackageReference Include="AutoMapper" Version="10.1.1" />
<PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="8.1.0" /> <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="8.1.0" />

View File

@ -1490,6 +1490,14 @@
} }
} }
}, },
"@material-ui/icons": {
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
"integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
"requires": {
"@babel/runtime": "^7.4.4"
}
},
"@material-ui/lab": { "@material-ui/lab": {
"version": "4.0.0-alpha.56", "version": "4.0.0-alpha.56",
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz", "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",

View File

@ -4,6 +4,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.11.0", "@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/lab": "^4.0.0-alpha.56",
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"connected-react-router": "6.5.2", "connected-react-router": "6.5.2",

View File

@ -1,4 +1,5 @@
import { Box, Container } from '@material-ui/core'; import { Box, Container, IconButton, Menu, MenuItem } from '@material-ui/core';
import AccountCircle from '@material-ui/icons/AccountCircle';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import blue from '@material-ui/core/colors/blue'; import blue from '@material-ui/core/colors/blue';
import orange from '@material-ui/core/colors/orange'; import orange from '@material-ui/core/colors/orange';
@ -86,6 +87,16 @@ const PrivateRoute = ({ component: Component, authenticated: Authenticated, ...r
const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => { const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
const classes = useDefaultLayoutStyles(); const classes = useDefaultLayoutStyles();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const renderNavLinks = () => { const renderNavLinks = () => {
return Authenticated return Authenticated
@ -93,6 +104,29 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...
<NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink> <NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink>
<NavLink exact to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink> <NavLink exact to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
<NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink> <NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink>
<IconButton className={classes.nav_menu_icon}
aria-haspopup="true"
aria-controls="menu-appbar"
aria-label="account of current user"
onClick={handleMenu}>
<AccountCircle/>
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={open}
onClose={handleClose}>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</Container> </Container>
: null; : null;
}; };
@ -123,6 +157,14 @@ const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
nav_menu: { nav_menu: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
},
nav_menu_icon: {
color: 'inherit',
marginLeft: '24px',
'&:hover': {
color: 'inherit',
}
}, },
nav_menu_item: { nav_menu_item: {
textDecoration: 'none', textDecoration: 'none',

View File

@ -6,6 +6,9 @@ exports.default = {
isAuthenticated: function () { isAuthenticated: function () {
return sessionStorage.getItem('user') !== null; return sessionStorage.getItem('user') !== null;
}, },
isAdmin: function () {
return sessionStorage.getItem('role') === 'Admin';
},
login: function (username, password) { login: function (username, password) {
var body = { var body = {
username: username, username: username,
@ -21,6 +24,7 @@ exports.default = {
return ServiceBase_1.default.makeRequest(login_url, options) return ServiceBase_1.default.makeRequest(login_url, options)
.then(function (response) { .then(function (response) {
sessionStorage.setItem('user', response.token_type + " " + response.access_token); sessionStorage.setItem('user', response.token_type + " " + response.access_token);
sessionStorage.setItem('role', response.role);
return Promise.resolve(); return Promise.resolve();
}); });
} }

View File

@ -1 +1 @@
{"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,wDAAmD;AAEnD,IAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAI,IAAI,GAAG;YACP,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC;QACF,IAAI,OAAO,GAAG;YACV,MAAM,EAAE,MAAM;YACd,OAAO,EAAE;gBACL,cAAc,EAAE,kBAAkB;aACrC;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SAC7B,CAAC;QAEF,OAAO,qBAAW,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC;aAC7C,IAAI,CAAC,UAAA,QAAQ;YACV,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,UAAU,SAAI,QAAQ,CAAC,YAAc,CAAC,CAAC;YAClF,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"} {"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,wDAAmD;AAEnD,IAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,CAAC;IAED,OAAO;QACH,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IACtD,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAI,IAAI,GAAG;YACP,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC;QACF,IAAI,OAAO,GAAG;YACV,MAAM,EAAE,MAAM;YACd,OAAO,EAAE;gBACL,cAAc,EAAE,kBAAkB;aACrC;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SAC7B,CAAC;QAEF,OAAO,qBAAW,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC;aAC7C,IAAI,CAAC,UAAA,QAAQ;YACV,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,UAAU,SAAI,QAAQ,CAAC,YAAc,CAAC,CAAC;YAClF,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;YAC9C,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"}

View File

@ -7,6 +7,10 @@ export default {
return sessionStorage.getItem('user') !== null; return sessionStorage.getItem('user') !== null;
}, },
isAdmin() {
return sessionStorage.getItem('role') === 'Admin';
},
login(username: string, password: string) { login(username: string, password: string) {
let body = { let body = {
username: username, username: username,
@ -23,6 +27,7 @@ export default {
return ServiceBase.makeRequest(login_url, options) return ServiceBase.makeRequest(login_url, options)
.then(response => { .then(response => {
sessionStorage.setItem('user', `${response.token_type} ${response.access_token}`); sessionStorage.setItem('user', `${response.token_type} ${response.access_token}`);
sessionStorage.setItem('role', response.role);
return Promise.resolve(); return Promise.resolve();
}); });
} }