add and test logout

client/components/Nav.js

@@ -85,10 +85,34 @@ function Nav(props) {
         </li>
       </ul>
       <ul className="nav__items-right" title="user-menu">
-        <li className="nav__item">
-          {props.user.authenticated && <p>Hello, {props.user.username}!</p>}
-          {!props.user.authenticated && <p><Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link></p>}
-        </li>
+        {(() => {
+          if (!props.user.authenticated) {
+            return (
+              <li className="nav__item">
+                <p>
+                  <Link to="/login">Login</Link> or <Link to="/signup">Sign Up</Link>
+                </p>
+              </li>
+            );
+          }
+          return (
+            <li className="nav__item">
+              <a>Hello, {props.user.username}!</a>
+              <ul className="nav__dropdown">
+                <li>
+                  <Link to="/sketches">
+                    My Sketches
+                  </Link>
+                </li>
+                <li>
+                  <a onClick={props.logoutUser} >
+                    Logout
+                  </a>
+                </li>
+              </ul>
+            </li>
+          );
+        })()}
       </ul>
     </nav>
   );
@@ -105,7 +129,8 @@ Nav.propTypes = {
   }).isRequired,
   project: PropTypes.shape({
     id: PropTypes.string
-  })
+  }),
+  logoutUser: PropTypes.func.isRequired
 };
 
 export default Nav;

client/modules/IDE/pages/IDEView.js

@@ -15,6 +15,7 @@ import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
 import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
+import * as UserActions from '../../User/actions';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
 import SplitPane from 'react-split-pane';
 import Overlay from '../../App/components/Overlay';
@@ -117,6 +118,7 @@ class IDEView extends React.Component {
           exportProjectAsZip={this.props.exportProjectAsZip}
           cloneProject={this.props.cloneProject}
           project={this.props.project}
+          logoutUser={this.props.logoutUser}
         />
         <Toolbar
           className="Toolbar"
@@ -366,7 +368,8 @@ IDEView.propTypes = {
   hideEditFileName: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
   showEditProjectName: PropTypes.func.isRequired,
-  hideEditProjectName: PropTypes.func.isRequired
+  hideEditProjectName: PropTypes.func.isRequired,
+  logoutUser: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
@@ -390,7 +393,8 @@ function mapDispatchToProps(dispatch) {
     FileActions,
     ProjectActions,
     IDEActions,
-    PreferencesActions),
+    PreferencesActions,
+    UserActions),
   dispatch);
 }
 

client/modules/User/actions.js

@@ -56,3 +56,16 @@ export function getUser() {
       });
   };
 }
+
+export function logoutUser() {
+  return (dispatch) => {
+    axios.get(`${ROOT_URL}/logout`, { withCredentials: true })
+      .then(() => {
+        dispatch({
+          type: ActionTypes.UNAUTH_USER
+        });
+      })
+      .catch(response => dispatch(authError(response.data.error)));
+  };
+}
+

client/modules/User/reducers.js

@@ -5,6 +5,10 @@ const user = (state = { authenticated: false }, action) => {
     case ActionTypes.AUTH_USER:
       return { ...action.user,
               authenticated: true };
+    case ActionTypes.UNAUTH_USER:
+      return {
+        authenticated: false
+      };
     case ActionTypes.AUTH_ERROR:
       return {
         authenticated: false

client/styles/base/_base.scss

@@ -11,6 +11,10 @@ body, input, button {
 	color: $light-primary-text-color;
 }
 
+body {
+	background-color: $light-background-color;
+}
+
 .root-app, .app {
 	min-height: 100%;
 	height: 100%;

client/styles/components/_nav.scss

@@ -1,6 +1,6 @@
 .nav {
 	width: 100%;
-	padding: #{10 / $base-font-size}rem #{40 / $base-font-size}rem;
+	padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
 	padding-left: #{170 / $base-font-size}rem;
 	display: flex;
 	flex-direction: row;
@@ -24,4 +24,22 @@
 	& + & {
 		margin-left: #{20 / $base-font-size}rem;
 	}
+	position: relative;
+	&:hover .nav__dropdown {
+		display: flex;
+	}
+}
+
+.nav__dropdown {
+	display: none;
+	position: absolute;
+	flex-direction: column;
+	background-color: $light-background-color;
+	padding: #{10 / $base-font-size}rem;
+	left: #{-10 / $base-font-size}rem;
+	border: 1px solid $ide-border-color;
+	& li + li {
+		margin-top: #{10 / $base-font-size}rem;
+	}
+	width: #{140 / $base-font-size}rem;
 }

server/controllers/session.controller.js

@@ -30,3 +30,9 @@ export function getSession(req, res) {
   }
   return res.status(404).send({ message: 'Session does not exist' });
 }
+
+export function destroySession(req, res) {
+  req.logout();
+  res.json({success: true});
+}
+

server/routes/session.routes.js

@@ -7,6 +7,8 @@ router.route('/login').post(SessionController.createSession);
 
 router.route('/session').get(SessionController.getSession);
 
+router.route('/logout').get(SessionController.destroySession);
+
 export default router;
 
 // TODO add github authentication stuff