From 23a0e3d8d0e18dd7c4624c1d7c2b80e16977f2e3 Mon Sep 17 00:00:00 2001
From: Hawk <falk.ba@gmx.de>
Date: Sun, 3 May 2020 20:46:53 +0200
Subject: [PATCH 1/2] added logout functionality close #47

---
 backend/index.js                              |  5 ++
 .../src/components/accountMenu/accountMenu.js | 69 +++++++++++++++++++
 frontend/src/components/navigation.js         | 45 ++++++------
 3 files changed, 99 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/accountMenu/accountMenu.js

diff --git a/backend/index.js b/backend/index.js
index 2218a5c..322d9bb 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -147,6 +147,11 @@ app.post("/API/user/login", passport.authenticate('local-login'), function (req,
     return res.status(status.OK).send("login success");
 });
 
+app.delete("/API/user/logout", function (req, res) {
+    req.logout();
+    return res.status(status.OK).send("logout success");
+});
+
 app.put("/API/user/create", function (req, res) {
     let { email, password } = req.body;
     if (email && password) {
diff --git a/frontend/src/components/accountMenu/accountMenu.js b/frontend/src/components/accountMenu/accountMenu.js
new file mode 100644
index 0000000..bbea135
--- /dev/null
+++ b/frontend/src/components/accountMenu/accountMenu.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import IconButton from '@material-ui/core/IconButton';
+
+
+export default function AccountMenu(props) {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const openMenu = Boolean(anchorEl);
+
+    const handleMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const logout = async () => {
+        await fetch(`/simcompanies/API/user/logout`, {
+            method: 'DELETE',
+            mode: 'cors',
+            cache: 'no-cache',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            redirect: 'follow',
+            referrerPolicy: 'no-referrer'
+        }).then(
+            () => { window.location.reload() }
+        )
+    }
+
+    const handleLogout = () => {
+        logout()
+    };
+
+    return (
+        <div>
+            <IconButton
+                onClick={handleMenu}
+                color="inherit"
+            >
+                <AccountCircle fontSize="large" />
+            </IconButton>
+            <Menu
+                id="menu-appbar"
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }}
+                keepMounted
+                getContentAnchorEl={null}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                open={openMenu}
+                onClose={handleClose}
+            >
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                <MenuItem onClick={handleLogout}>Logout</MenuItem>
+            </Menu>
+        </div>
+
+    );
+}
diff --git a/frontend/src/components/navigation.js b/frontend/src/components/navigation.js
index 0598abe..5956fe4 100644
--- a/frontend/src/components/navigation.js
+++ b/frontend/src/components/navigation.js
@@ -23,6 +23,11 @@ import EmojiObjectsIcon from '@material-ui/icons/EmojiObjects';
 import { ListItemIcon } from '@material-ui/core';
 import Tooltip from '@material-ui/core/Tooltip';
 import Zoom from '@material-ui/core/Zoom';
+import ApartmentIcon from '@material-ui/icons/Apartment';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import AccountMenu from './accountMenu/accountMenu';
 
 const drawerWidth = 64;
 const drawerWidthOpen = 240;
@@ -168,6 +173,20 @@ export default function Navigation() {
         return <ListItem button component={Link1} {...props} />;
     }
 
+    const showIcon = (text) => {
+        if (text === "Resources") {
+            return (
+                <EmojiObjectsIcon fontSize="large" color="secondary"></EmojiObjectsIcon>
+            )
+        } else if (text === "Traders") {
+            return (
+                <ApartmentIcon fontSize="large" color="secondary"></ApartmentIcon>
+            )
+        } else {
+            return null
+        }
+    }
+
     return (
         <div className={classes.root}>
             <CssBaseline />
@@ -188,19 +207,7 @@ export default function Navigation() {
                     </IconButton>
                     <Link1 href="/simcompanies" className="logo">Sim Companies Dashboard</Link1>
                     <div className={classes.grow} />
-                    <div className={classes.search}>
-                        <div className={classes.searchIcon}>
-                            <SearchIcon />
-                        </div>
-                        <InputBase
-                            placeholder="Search…"
-                            classes={{
-                                root: classes.inputRoot,
-                                input: classes.inputInput,
-                            }}
-                            inputProps={{ 'aria-label': 'search' }}
-                        />
-                    </div>
+                    <AccountMenu></AccountMenu>
                 </Toolbar>
             </AppBar>
             <Drawer
@@ -223,17 +230,15 @@ export default function Navigation() {
                 </div>
                 <Divider />
                 <List>
-                    {['Resources'].map((text, index) => (
-
+                    {['Resources', 'Traders'].map((text, index) => (
                         <ListItemLink key={text} to={"/" + text.toLowerCase()} component={Link}>
-                            <Tooltip TransitionComponent={Zoom} placement='right' title="Resources" arrow enterDelay={500}>
-                                <ListItemIcon><EmojiObjectsIcon fontSize="large" color="secondary"></EmojiObjectsIcon></ListItemIcon>
+                            <Tooltip TransitionComponent={Zoom} placement='right' title={text} arrow enterDelay={500}>
+                                <ListItemIcon>
+                                    {showIcon(text)}
+                                </ListItemIcon>
                             </Tooltip>
                             <ListItemText primary={text} />
-
                         </ListItemLink>
-
-
                     ))}
                 </List>
             </Drawer>

From 5806373236b4ed682145e8e7636be9120489bb09 Mon Sep 17 00:00:00 2001
From: Hawk <falk.ba@gmx.de>
Date: Sun, 3 May 2020 20:56:52 +0200
Subject: [PATCH 2/2] added profile #48

---
 frontend/src/components/accountMenu/accountMenu.js   |  7 ++++++-
 frontend/src/components/content.js                   |  2 ++
 frontend/src/components/profile/profile.js           | 12 ++++++++++++
 .../src/components/selectResource/resourceCard.js    |  2 --
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/profile/profile.js

diff --git a/frontend/src/components/accountMenu/accountMenu.js b/frontend/src/components/accountMenu/accountMenu.js
index bbea135..be4a719 100644
--- a/frontend/src/components/accountMenu/accountMenu.js
+++ b/frontend/src/components/accountMenu/accountMenu.js
@@ -3,7 +3,12 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import IconButton from '@material-ui/core/IconButton';
+import { Link } from 'react-router-dom';
+import Link1 from '@material-ui/core/Link';
 
+function MenuItemLink(props) {
+    return <MenuItem component={Link1} {...props} />;
+}
 
 export default function AccountMenu(props) {
     const [anchorEl, setAnchorEl] = React.useState(null);
@@ -60,7 +65,7 @@ export default function AccountMenu(props) {
                 open={openMenu}
                 onClose={handleClose}
             >
-                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                <MenuItemLink to={"/profile"} onClick={handleClose} component={Link}>Profile</MenuItemLink>
                 <MenuItem onClick={handleLogout}>Logout</MenuItem>
             </Menu>
         </div>
diff --git a/frontend/src/components/content.js b/frontend/src/components/content.js
index 0174833..e0fc26e 100644
--- a/frontend/src/components/content.js
+++ b/frontend/src/components/content.js
@@ -6,6 +6,7 @@ import {
 } from "react-router-dom";
 import SelectResource from './selectResource';
 import ResourceChart from './resourcechart/resourcechart';
+import Profile from './profile/profile';
 
 
 const useStyles = makeStyles(theme => ({
@@ -23,6 +24,7 @@ export default function Content() {
 
         <div className={classes.root}>
             <Route exact path="/" component={Overview} />
+            <Route path="/profile" component={Profile} />
             <Route path="/resources" component={SelectResource} />
             <Route path="/resourcechart/:id" component={ResourceChart} />
         </div>
diff --git a/frontend/src/components/profile/profile.js b/frontend/src/components/profile/profile.js
new file mode 100644
index 0000000..0fc1d69
--- /dev/null
+++ b/frontend/src/components/profile/profile.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+
+export default function Profile(props) {
+    return (
+        <div>
+            <Typography variant="h4">
+                Profile Page
+            </Typography>
+        </div>
+    );
+}
diff --git a/frontend/src/components/selectResource/resourceCard.js b/frontend/src/components/selectResource/resourceCard.js
index 54ded6e..a3f24f2 100644
--- a/frontend/src/components/selectResource/resourceCard.js
+++ b/frontend/src/components/selectResource/resourceCard.js
@@ -2,12 +2,10 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { Link } from 'react-router-dom';
 import Link1 from '@material-ui/core/Link';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Tooltip from '@material-ui/core/Tooltip';
 import Zoom from '@material-ui/core/Zoom';