diff --git a/Birdmap.API/Birdmap.API.csproj b/Birdmap.API/Birdmap.API.csproj index 1ef8321..3ca4171 100644 --- a/Birdmap.API/Birdmap.API.csproj +++ b/Birdmap.API/Birdmap.API.csproj @@ -9,6 +9,14 @@ $(DefaultItemExcludes);$(SpaRoot)node_modules\** + + + + + + + + diff --git a/Birdmap.API/ClientApp/package-lock.json b/Birdmap.API/ClientApp/package-lock.json index c1a4c06..506d86f 100644 --- a/Birdmap.API/ClientApp/package-lock.json +++ b/Birdmap.API/ClientApp/package-lock.json @@ -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": { "version": "4.0.0-alpha.56", "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz", diff --git a/Birdmap.API/ClientApp/package.json b/Birdmap.API/ClientApp/package.json index d96a7b2..31aa884 100644 --- a/Birdmap.API/ClientApp/package.json +++ b/Birdmap.API/ClientApp/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^4.11.0", + "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "bootstrap": "^4.3.1", "connected-react-router": "6.5.2", diff --git a/Birdmap.API/ClientApp/src/App.tsx b/Birdmap.API/ClientApp/src/App.tsx index 4222906..b810209 100644 --- a/Birdmap.API/ClientApp/src/App.tsx +++ b/Birdmap.API/ClientApp/src/App.tsx @@ -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 blue from '@material-ui/core/colors/blue'; 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 classes = useDefaultLayoutStyles(); + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + const handleMenu = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; const renderNavLinks = () => { return Authenticated @@ -93,6 +104,29 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, ... Dashboard Devices Heatmap + + + + + Logout + : null; }; @@ -123,6 +157,14 @@ const useDefaultLayoutStyles = makeStyles((theme: Theme) => nav_menu: { display: 'flex', flexDirection: 'row', + alignItems: 'center', + }, + nav_menu_icon: { + color: 'inherit', + marginLeft: '24px', + '&:hover': { + color: 'inherit', + } }, nav_menu_item: { textDecoration: 'none', diff --git a/Birdmap.API/ClientApp/src/components/auth/AuthService.js b/Birdmap.API/ClientApp/src/components/auth/AuthService.js index 713ba8a..f4f876c 100644 --- a/Birdmap.API/ClientApp/src/components/auth/AuthService.js +++ b/Birdmap.API/ClientApp/src/components/auth/AuthService.js @@ -6,6 +6,9 @@ exports.default = { isAuthenticated: function () { return sessionStorage.getItem('user') !== null; }, + isAdmin: function () { + return sessionStorage.getItem('role') === 'Admin'; + }, login: function (username, password) { var body = { username: username, @@ -21,6 +24,7 @@ exports.default = { return ServiceBase_1.default.makeRequest(login_url, options) .then(function (response) { sessionStorage.setItem('user', response.token_type + " " + response.access_token); + sessionStorage.setItem('role', response.role); return Promise.resolve(); }); } diff --git a/Birdmap.API/ClientApp/src/components/auth/AuthService.js.map b/Birdmap.API/ClientApp/src/components/auth/AuthService.js.map index 634c337..e4e1839 100644 --- a/Birdmap.API/ClientApp/src/components/auth/AuthService.js.map +++ b/Birdmap.API/ClientApp/src/components/auth/AuthService.js.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/Birdmap.API/ClientApp/src/components/auth/AuthService.ts b/Birdmap.API/ClientApp/src/components/auth/AuthService.ts index 8470427..0b51cd8 100644 --- a/Birdmap.API/ClientApp/src/components/auth/AuthService.ts +++ b/Birdmap.API/ClientApp/src/components/auth/AuthService.ts @@ -7,6 +7,10 @@ export default { return sessionStorage.getItem('user') !== null; }, + isAdmin() { + return sessionStorage.getItem('role') === 'Admin'; + }, + login(username: string, password: string) { let body = { username: username, @@ -23,6 +27,7 @@ export default { return ServiceBase.makeRequest(login_url, options) .then(response => { sessionStorage.setItem('user', `${response.token_type} ${response.access_token}`); + sessionStorage.setItem('role', response.role); return Promise.resolve(); }); }