3 authentication

netlify.toml

@@ -0,0 +1,13 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[context.production.environment]
+  REACT_APP_SVR_API = "https://stonehaven-academy.herokuapp.com/api"
+
+[context.branch-deploy.environment]
+  REACT_APP_SVR_API = "https://stonehaven-server-staging.herokuapp.com/api"
+
+[context.deploy-preview.environment]
+  REACT_APP_SVR_API = "https://stonehaven-server-staging.herokuapp.com/api"

package.json

@@ -10,6 +10,7 @@
     "axios": "^0.19.0",
     "dotenv": "^8.1.0",
     "isotope-layout": "^3.0.6",
+    "jwt-decode": "^2.2.0",
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
@@ -39,6 +40,7 @@
     ]
   },
   "devDependencies": {
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.4.0"
   }
 }

src/App.js

@@ -2,14 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import DUMMY_DATA from './DUMMY_DATA';
+import { tokenServices, ProtectedRoute } from './utils';
 import {
   NavBar,
   HomePage,
   PathPage,
   LessonPage,
   CatalogPage,
-  // RegistrationPage,
-  // DashboardPage,
+  RegistrationPage,
+  DashboardPage,
   SupportPage,
   AboutPage,
   ErrorPage,
@@ -27,54 +28,115 @@ const links = {
   dashboard: '/dashboard',
 };
 
-function App() {
-  const { courses } = DUMMY_DATA;
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      user: null,
+      isAuthenticated: false,
+    };
+  }
 
-  return (
-    <div id="start-page">
-      <NavBar links={links} />
-      <Switch>
-        <Route exact path="/" component={HomePage} />
-        <Route
-          exact
-          path={links.path}
-          render={props => <PathPage {...props} path_data={DUMMY_DATA} />}
-        />
-        <Route exact path={links.catalog} component={CatalogPage} />
-        {/* <Route exact path={links.login} component={RegistrationPage} /> */}
-        {/* <Route exact path={links.dashboard} component={DashboardPage} /> */}
-        <Route exact path={links.support} component={SupportPage} />
-        <Route exact path={links.about} component={AboutPage} />
+  // componentWillMount = () => {
+  //   const { history, location } = this.props;
+  //   console.log(history);
+  //   console.log(location);
+  // }
+
+  /**
+   * get user data from database
+   */
+  componentDidMount = () => {
+    const user = tokenServices.getToken();
+    if (user) {
+      this.setState({ isAuthenticated: true, user });
+    }
+  };
+
+  handleLogin = () => {
+    const user = tokenServices.getToken();
+    if (user) {
+      this.setState({ isAuthenticated: true, user });
+    } else {
+      this.setState({ isAuthenticated: null, user: null });
+    }
+  };
 
-        <Redirect exact from="/courses/:course" to="/courses/:course/0" />
-        <Route
-          path="/courses/:course/:order"
-          render={props => {
-            const courseObj = courses.find(
-              course => course.slug === props.match.params.course,
-            );
-            const prevCourse = courses.find(course => course.order === courseObj.order - 1);
-            const nextCourse = courses.find(course => course.order === courseObj.order + 1);
-            const order = parseInt(props.match.params.order, 10);
-            if (!courseObj || order >= courseObj.lessons.length) return <ErrorPage />;
-            return (
-              <LessonPage
-                {...props}
-                course_title={courseObj.title}
-                lessons={courseObj.lessons}
-                curr_lesson_num={order}
-                base_path={courseObj.slug}
-                prev_slug={prevCourse ? prevCourse.slug : undefined}
-                next_slug={nextCourse ? nextCourse.slug : undefined}
+  handleLogoff = () => {
+    tokenServices.removeToken();
+    this.setState({ isAuthenticated: false, user: null });
+  };
 
-              />
-            );
-          }}
+  render() {
+    const { courses } = DUMMY_DATA;
+    const { user, isAuthenticated } = this.state;
+
+    return (
+      <div id="start-page">
+        <NavBar
+          links={links}
+          isAuthenticated={isAuthenticated}
+          handleLogoff={this.handleLogoff}
         />
-        <Route component={ErrorPage} />
-      </Switch>
-    </div>
-  );
+        <Switch>
+          <Route exact path="/" component={HomePage} />
+          <Route
+            exact
+            path={links.path}
+            render={props => <PathPage {...props} path_data={DUMMY_DATA} />}
+          />
+          <Route exact path={links.catalog} component={CatalogPage} />
+          {/* Login Protected Route */}
+          <ProtectedRoute
+            path={links.login}
+            isAuthenticated={!isAuthenticated}
+            redirectLink={links.dashboard}
+            component={RegistrationPage}
+            handleLogin={this.handleLogin}
+          />
+          {/* Dashboard Protected Route */}
+          <ProtectedRoute
+            path={links.dashboard}
+            isAuthenticated={isAuthenticated}
+            redirectLink={links.login}
+            component={DashboardPage}
+          />
+          <Route exact path={links.support} component={SupportPage} />
+          <Route exact path={links.about} component={AboutPage} />
+
+          <Redirect exact from="/courses/:course" to="/courses/:course/0" />
+          <Route
+            path="/courses/:course/:order"
+            render={props => {
+              const courseObj = courses.find(
+                course => course.slug === props.match.params.course,
+              );
+              const prevCourse = courses.find(
+                course => course.order === courseObj.order - 1,
+              );
+              const nextCourse = courses.find(
+                course => course.order === courseObj.order + 1,
+              );
+              const order = parseInt(props.match.params.order, 10);
+              if (!courseObj || order >= courseObj.lessons.length) return <ErrorPage />;
+              return (
+                <LessonPage
+                  {...props}
+                  course_title={courseObj.title}
+                  lessons={courseObj.lessons}
+                  curr_lesson_num={order}
+                  base_path={courseObj.slug}
+                  prev_slug={prevCourse ? prevCourse.slug : undefined}
+                  next_slug={nextCourse ? nextCourse.slug : undefined}
+                />
+              );
+            }}
+          />
+          <Route component={ErrorPage} />
+        </Switch>
+      </div>
+    );
+  }
 }
 
 App.propTypes = {

src/components/NavBar.js

@@ -11,9 +11,17 @@ class NavBar extends React.Component {
 
     this.state = {
       menuOpen: false,
+      isAuthenticated: false,
     };
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const { isAuthenticated } = this.props;
+    if (isAuthenticated !== prevState.isAuthenticated) {
+      this.setState({ isAuthenticated });
+    }
+  }
+
   // This keeps your state in sync with the opening/closing of the menu
   // via the default means, e.g. clicking the X, pressing the ESC key etc.
   handleStateChange(state) {
@@ -61,14 +69,14 @@ class NavBar extends React.Component {
           <li>
             <NavLink to={links.catalog}>Catalog</NavLink>
           </li>
-          {/* Commented out until implemented */}
           <li>
             <NavLink to={links.about}>About</NavLink>
           </li>
           <li><NavLink to={links.support}>Support</NavLink></li>
           <li><a onClick={() => this.closeMenu()} target="_blank" rel="noopener noreferrer" href="https://forms.gle/2YMiTeQ4iuZByx4ZA">Feedback</a></li>
-          {/* <li><NavLink to={links.dashboard}>Dashboard</NavLink></li> */}
-          {/* <li><NavLink to={links.login}>Login</NavLink></li> */}
+          {this.state.isAuthenticated ? (<li><NavLink to={links.dashboard}>Dashboard</NavLink></li>) : null}
+          {this.state.isAuthenticated ? (<li><NavLink onClick={()=>{this.props.handleLogoff();}} to="/">Log Off</NavLink></li>) : (
+            <li><NavLink to={links.login}>Login</NavLink></li>)}
         </ul>
         <div className="mobile-nav">
           <Menu
@@ -88,14 +96,21 @@ class NavBar extends React.Component {
             <NavLink onClick={() => this.closeMenu()} to={links.about}>
               About
             </NavLink>
-            <NavLink onClick={() => this.closeMenu()} to={links.login}>
-              LogIn
-            </NavLink>
-            <NavLink onClick={() => this.closeMenu()} to={links.dashboard} />
             <NavLink onClick={() => this.closeMenu()} to={links.support}>
               Support
             </NavLink>
             <a onClick={() => this.closeMenu()} target="_blank" rel="noopener noreferrer" href="https://forms.gle/2YMiTeQ4iuZByx4ZA">Feedback</a>
+
+            {this.state.isAuthenticated ? (
+              <NavLink onClick={() => this.closeMenu()} to={links.dashboard}>
+              Dashboard
+              </NavLink>
+            ) : (null
+            )}
+            {this.state.isAuthenticated ? (<NavLink onClick={()=>{ this.props.handleLogoff();}} to="/">Log Off</NavLink>) : (
+              <NavLink to={links.login}>Login</NavLink>)}
+
+
           </Menu>
         </div>
       </div>
@@ -107,6 +122,7 @@ NavBar.propTypes = {
   links: PropTypes.shape({
     home: PropTypes.string,
   }).isRequired,
+  isAuthenticated: PropTypes.bool,
 };
 
 export default NavBar;

src/components/dashboard/DashboardMenu.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Dashboard navigation menu
+ * @param {Object} props Passed props
+ * @param {string} activeView Active navigation text
+ * @param {Function} showOverview Display function handler
+ * @param {Function} showSettings Display function handler
+ * @param {Function} logout Logout function handler
+ */
+const DashboardMenu = ({ activeView, showOverview, showSettings, logout }) => (
+  <div className="accountMenu">
+    <h1 className="menuHeader">My Dashboard</h1> 
+    <ul>
+      <li>
+        {activeView === 'overview' ? (
+          <span className="activeView">Overview</span>
+        ) : (
+          <button type="button" className="linkButton" onClick={() => showOverview()}>
+            Overview
+          </button>
+        )}
+      </li>
+      <li>
+        {activeView === 'settings' ? (
+          <span className="activeView">Account Settings</span>
+        ) : (
+          <button type="button" className="linkButton" onClick={() => showSettings()}>
+            Account Settings
+          </button>
+        )}
+      </li>
+      {/* <li>
+        <button type="button" className="linkButton" onClick={() => logout()}>
+          Logout
+        </button>
+      </li> */}
+    </ul>
+  </div>
+);
+
+DashboardMenu.propTypes = {
+  activeView: PropTypes.string.isRequired,
+  showOverview: PropTypes.func.isRequired,
+  showSettings: PropTypes.func.isRequired,
+  logout: PropTypes.func,
+};
+
+export default DashboardMenu;