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] 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>