Merge a954b2e into efa4e31

src/app/navBar/NavbarComponent.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import './navBar.scss';
 
 const NavbarComponent = () => {
+  const isSignedIn = localStorage.getItem('token') !== null;
   return (
     <nav className="navbarbg">
       <div>
@@ -38,12 +39,28 @@ const NavbarComponent = () => {
           <div className="hide-on-med-and-down show">
             <ul>
               <li>
-                <Link to="/login">SignIn</Link>
+                {isSignedIn && (
+                  <Link to="/profile">
+                    <i className="material-icons">account_circle</i>
+                  </Link>
+                )}
               </li>
-              <li>|</li>
               <li>
-                <Link to="/signup">SignUp</Link>
+                {isSignedIn ? (
+                  <Link
+                    to="/"
+                    onClick={() => {
+                      localStorage.removeItem('token');
+                    }}
+                  >
+                    Logout
+                  </Link>
+                ) : (
+                  <Link to="/login">SignIn</Link>
+                )}
               </li>
+              {!isSignedIn && <li>|</li>}
+              <li>{!isSignedIn && <Link to="/signup">SignUp</Link>}</li>
             </ul>
           </div>
         </div>

src/app/navBar/NavbarComponent.test.js

@@ -2,10 +2,35 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import NavbarComponent from './NavbarComponent';
 
+global.localStorage = {
+  getItem: key => {
+    return this.store[key] || null;
+  },
+  setItem: (key, value) => {
+    this.store[key] = value.toString();
+  },
+  removeItem(key) {
+    delete this.store[key];
+  },
+};
+
 describe(' Component', () => {
   it('should render the NavBar', () => {
     const component = shallow(<NavbarComponent />);
     expect(component.exists()).toBe(true);
     expect(component).toMatchSnapshot();
   });
+
+  it('should render the logout button when user is logged in', () => {
+    localStorage.setItem('token', 'sometoken');
+    const component = shallow(<NavbarComponent />);
+    const logoutButton = component.find('Link[onClick]').props();
+    expect(logoutButton.children).toEqual('Logout');
+  });
+
+  it('should delete authorization token when user logs out', () => {
+    const component = shallow(<NavbarComponent />);
+    component.find('Link[onClick]').simulate('click');
+    expect(localStorage.getItem('token')).toEqual(null);
+  });
 });

src/app/navBar/__snapshots__/NavbarComponent.test.js.snap

@@ -86,6 +86,7 @@ exports[` Component should render the NavBar 1`] = `
         className="hide-on-med-and-down show"
       >
         <ul>
+          <li />
           <li>
             <Link
               replace={false}

src/app/signup/SignupComponent.jsx

@@ -12,7 +12,7 @@ const SignupComponent = ({ signupUser, signupState, errorMessage }) => {
     const password = e.target.elements.password.value.trim();
     const rePassword = e.target.elements.rePassword.value.trim();
     if (password !== rePassword) {
-      e.target.elements.rePassword.setCustomValidity('Passwords must match');
+      e.target.elements.rePassword.setCustomValidity('passwords must match');
       return;
     }
     signupUser(userEmail, name, password);
@@ -119,6 +119,9 @@ const SignupComponent = ({ signupUser, signupState, errorMessage }) => {
                     type="password"
                     name="rePassword"
                     placeholder="Confirm Password"
+                    onChange={e => {
+                      e.target.setCustomValidity('');
+                    }}
                     required
                   />
                 </div>

src/app/signup/signup.test.js

@@ -35,6 +35,12 @@ describe('SIGNUP TEST SUITE', () => {
       expect(usernameField.name).toBe('username');
       const passwordField = component.find('input[name="password"]').props();
       expect(passwordField.name).toBe('password');
+      component.find('input[name="rePassword"]').simulate('change', {
+        target: {
+          value: 'newPassword',
+          setCustomValidity: () => {},
+        },
+      });
       const rePassword = component.find('input[name="rePassword"]').props();
       expect(rePassword.name).toBe('rePassword');
     });