Merge pull request #44 from sdslabs/integrate-login/signup/logout-flow

Integrate login/signup and logout flow
sdslabs · May 14, 2020 · 9ae5ac3 · 9ae5ac3
2 parents b0100f5 + bdbfc8b
commit 9ae5ac3
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 91 deletions.
diff --git a/src/components/common/userMenu.js b/src/components/common/userMenu.js
@@ -30,7 +30,7 @@ class UserMenu extends Component {
               <div className='usermenu--activitylog link'>Activity Log</div>
             </Link>
             <div className='usermenu--profile'><a href='http://accounts.sdslabs.co' className='link'>Profile</a></div>
-            <div className='usermenu--logout'>Logout</div>
+            <div className='usermenu--logout' onClick={() => this.props.loginHandler('logout')}>Logout</div>
           </div>
         </div> :
         <Fragment/> }
@@ -49,5 +49,7 @@ UserMenu.propTypes = {
   /** Function to toggle state of modals */
   handleClick: PropTypes.func,
   /** Function to close modals. */
-  close: PropTypes.func
+  close: PropTypes.func,
+  /** Function to login/register/logout */
+  loginHandler: PropTypes.func
 };
diff --git a/src/components/coursecard/coursePage.js b/src/components/coursecard/coursePage.js
@@ -141,10 +141,12 @@ class CoursePage extends Component {
     async checkCourse(props) {
       if(props.user.login) {
         this.setState({ mycourse:false });
-        await props.user.courses.forEach(course => {
-          if(course.code === props.course_code)
-            this.setState({ mycourse:true });
-        });
+        if(props.user.courses) {
+          await props.user.courses.forEach(course => {
+            if(course.code === props.course_code)
+              this.setState({ mycourse:true });
+          });
+        }
       }
     }
 

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -57,13 +57,14 @@ class Header extends Component {
                             </div>
                             <div className='header--user'>
                                 <UserMenu userMenu={this.props.userMenu}
+                                    loginHandler={this.props.loginHandler}
                                     handleClick={this.props.handleClick}
                                     close={this.props.close}/>
                             </div>
                         </Fragment>) :
                         (<Fragment>
-                            <button className='header--login'>Login</button>
-                            <button className='header--signup'>Sign Up</button>
+                            <button className='header--login' onClick={() => this.props.loginHandler('login')}>Login</button>
+                            <button className='header--signup' onClick={() => this.props.loginHandler('register')}>Sign Up</button>
                         </Fragment>)
                     }
                 </div>
@@ -88,5 +89,7 @@ Header.propTypes = {
     /** Function to toggle see-all modal. */
     handleSeeAllClick: PropTypes.func,
     /** Holds user data which is handled through Redux. */
-    user: PropTypes.object
+    user: PropTypes.object,
+    /** Function to login/register/logout */
+    loginHandler: PropTypes.func
 };
diff --git a/src/components/home/header.js b/src/components/home/header.js
@@ -41,13 +41,14 @@ class Header extends Component {
                       </div>
                       <div className='landingheader--user'>
                         <UserMenu userMenu={this.props.userMenu}
+                          loginHandler={this.props.loginHandler}
                           handleClick={this.props.handleClick}
                           close={this.props.close}/>
                       </div>
                     </div> :
                     <div className='landingheader--user_nologin'>
-                      <button className='landingheader--login'>Login</button>
-                      <button className='landingheader--signup'>Sign Up</button>
+                      <button className='landingheader--login' onClick={() => this.props.loginHandler('login')}>Login</button>
+                      <button className='landingheader--signup' onClick={() => this.props.loginHandler('register')}>Sign Up</button>
                     </div> }
             </div>
         );
@@ -70,5 +71,7 @@ Header.propTypes = {
   /** Function to toggle see-all modal. */
   handleSeeAllClick: PropTypes.func,
   /** Holds user data which is handled through Redux. */
-  user: PropTypes.object
+  user: PropTypes.object,
+  /** Function to login/register/logout */
+  loginHandler: PropTypes.func
 };
diff --git a/src/components/sidebar/courseHandle.js b/src/components/sidebar/courseHandle.js
@@ -68,8 +68,11 @@ class CourseHandle extends Component {
      * Check if course is registered for user.
      */
     checkMyCourse(props) {
-        if(props.user.courses.find(o => o.code === props.code) !== undefined)
-            return true;
+        if(props.user.courses) {
+            if(props.user.courses.find(o => o.code === props.code) !== undefined)
+                return true;
+            else return false;
+        }
         else return false;
     }
 

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
@@ -118,7 +118,7 @@ class Sidebar extends Component {
                     </div>
                     <div className='sidebar--course-name'>
                         <div className='sidebar--course-table'>
-                          { this.props.user.courses.map((course) => (
+                          { this.props.user.courses ? this.props.user.courses.map((course) => (
                             <Link to={ `/mycourse/departments/${course.department.abbreviation}/courses/${course.code}/` } key={ course.id }>
                                 <CourseHandle login
                                               name={ `${course.title} ${course.code}` }
@@ -128,7 +128,7 @@ class Sidebar extends Component {
                                               active={this.active}
                                               handleClick={this.handleClick}/>
                             </Link>
-                          )) }
+                          )) : null}
                         </div>
                     </div>
                   </div>

diff --git a/src/config/config.js b/src/config/config.js
@@ -1,3 +1,5 @@
 export const CONFIG = {
-    nexusRoot: "http://localhost:8005/api/v1"
+    nexusRoot: "http://localhost:8005/api/v1",
+    arceusRoot: "http://arceus.sdslabs.local",
+    studyRoot: "http://studyportal.sdslabs.local"
 };
diff --git a/src/pages/department.js b/src/pages/department.js
@@ -16,6 +16,7 @@ import { setUser, resetApp } from 'actions/actions';
 import { loginUserWithToken, loginUserWithCookie } from 'api/userApi';
 import { getCookie, removeCookie } from 'utils/handleCookies';
 import ShowMoreFiles from 'components/header/showMoreFiles';
+import { CONFIG } from 'config/config';
 
 function mapStateToProps(state) {
     return { user: state };
@@ -70,6 +71,7 @@ class Department extends Component {
         this.handleSeeAllClick = this.handleSeeAllClick.bind(this);
         this.close = this.close.bind(this);
         this.error = this.error.bind(this);
+        this.loginHandler = this.loginHandler.bind(this);
     }
 
     // eslint-disable-next-line react/no-deprecated
@@ -190,80 +192,100 @@ class Department extends Component {
      * Fetch user details.
      */
     getUserDetails() {
-    const token = getCookie('token');
-    const cookie = getCookie('sdslabs');
-    if (token) {
-      loginUserWithToken(token).then((res) => {
-        const user = {
-          login: true,
-          id: res.user.falcon_id,
-          username: res.user.username,
-          email: res.user.email,
-          profile_image: res.user.profile_image,
-          courses: res.courses
-        };
-        if(!_.isEqual(user, this.props.user)) {
-          this.props.setUser(user);
-          // Logged in with token
-        }
-      })
-        .catch(() => {
-          // Token is corrupted
-          if (cookie) {
-            loginUserWithCookie().then((res) => {
-              const user = {
-                login: true,
-                id: res.user.falcon_id,
-                username: res.user.username,
-                email: res.user.email,
-                profile_image: res.user.profile_image,
-                courses: res.courses
-              };
-              if(!_.isEqual(user, this.props.user)) {
-                this.props.setUser(user);
-                // Logged in with cookie and the invalid token replaced
-              }
-            })
-              .catch(() => {
-                this.props.resetApp();
-                removeCookie('sdslabs');
-                removeCookie('token');
-                // The cookie is corrupted, both the token and the cookie have been removed
-              });
+      const token = getCookie('token');
+      const cookie = getCookie('sdslabs');
+      if (token) {
+        loginUserWithToken(token).then((res) => {
+          const user = {
+            login: true,
+            id: res.user.falcon_id,
+            username: res.user.username,
+            email: res.user.email,
+            profile_image: res.user.profile_image,
+            courses: res.courses
+          };
+          if(!_.isEqual(user, this.props.user)) {
+            this.props.setUser(user);
+            // Logged in with token
           }
-          else {
-            this.props.resetApp();
-            // No cookie present and the token is corrupted
-            removeCookie('token');
+        })
+          .catch(() => {
+            // Token is corrupted
+            if (cookie) {
+              loginUserWithCookie().then((res) => {
+                const user = {
+                  login: true,
+                  id: res.user.falcon_id,
+                  username: res.user.username,
+                  email: res.user.email,
+                  profile_image: res.user.profile_image,
+                  courses: res.courses
+                };
+                if(!_.isEqual(user, this.props.user)) {
+                  this.props.setUser(user);
+                  // Logged in with cookie and the invalid token replaced
+                }
+              })
+                .catch(() => {
+                  this.props.resetApp();
+                  removeCookie('sdslabs');
+                  removeCookie('token');
+                  // The cookie is corrupted, both the token and the cookie have been removed
+                });
+            }
+            else {
+              this.props.resetApp();
+              // No cookie present and the token is corrupted
+              removeCookie('token');
+            }
+          });
+      }
+      else if (cookie) {
+        loginUserWithCookie().then((res) => {
+          const user = {
+            login: true,
+            id: res.user.falcon_id,
+            username: res.user.username,
+            email: res.user.email,
+            profile_image: res.user.profile_image,
+            courses: res.courses
+          };
+          if(!_.isEqual(user, this.props.user)) {
+            this.props.setUser(user);
+            // The user did not have the token but is logged in by the cookie and now the token has been created
           }
-        });
-    }
-    else if (cookie) {
-      loginUserWithCookie().then((res) => {
-        const user = {
-          login: true,
-          id: res.user.falcon_id,
-          username: res.user.username,
-          email: res.user.email,
-          profile_image: res.user.profile_image,
-          courses: res.courses
-        };
-        if(!_.isEqual(user, this.props.user)) {
-          this.props.setUser(user);
-          // The user did not have the token but is logged in by the cookie and now the token has been created
-        }
-      })
-        .catch(() => {
-          this.props.resetApp();
-          removeCookie('sdslabs');
-          // The cookie is corrupted and removed
-        });
+        })
+          .catch(() => {
+            this.props.resetApp();
+            removeCookie('sdslabs');
+            // The cookie is corrupted and removed
+          });
+      }
+      else {
+        this.props.resetApp();
+        // Neither cookie nor token present
+      }
     }
-    else {
-      this.props.resetApp();
-      // Neither cookie nor token present
+
+    /**
+     * Login/Register/Logout user.
+     *
+     * @param {string} value
+     */
+    loginHandler(value) {
+      if (value === 'login') {
+        window.location.href = `${CONFIG.arceusRoot}/${value}?redirect=${window.location.href}`;
+      }
+      else if (value === 'register') {
+        window.location.href = `${CONFIG.arceusRoot}/${value}?redirect=${window.location.href}`;
+      }
+      else if (value === 'logout') {
+        this.props.resetApp();
+        window.location.href = CONFIG.studyRoot;
+        removeCookie('token');
+        removeCookie('sdslabs');
+      }
     }
-  }
 
     /**
      * Toggle state of different modals.
@@ -390,6 +412,7 @@ class Department extends Component {
                           userMenu={this.state.userMenu}
                           handleClick ={this.handleClick}
                           handleSeeAllClick={this.handleSeeAllClick}
+                          loginHandler={this.loginHandler}
                           close={this.close}/>
               <Sidebar activity='mycourse'
                       department={this.state.department.title}
@@ -427,6 +450,7 @@ class Department extends Component {
                           userMenu={this.state.userMenu}
                           handleClick ={this.handleClick}
                           handleSeeAllClick={this.handleSeeAllClick}
+                          loginHandler={this.loginHandler}
                           close={this.close}/>
               <Sidebar activity='activity'
                       active={this.props.match.params.type}
@@ -452,6 +476,7 @@ class Department extends Component {
                           userMenu={this.state.userMenu}
                           handleClick ={this.handleClick}
                           handleSeeAllClick={this.handleSeeAllClick}
+                          loginHandler={this.loginHandler}
                           close={this.close}/>
                   <Sidebar login={false}
                           department={this.state.department.title}
@@ -488,6 +513,7 @@ class Department extends Component {
                           userMenu={this.state.userMenu}
                           handleClick ={this.handleClick}
                           handleSeeAllClick={this.handleSeeAllClick}
+                          loginHandler={this.loginHandler}
                           close={this.close}/>
                   <Request request={this.state.request} close={this.close} refreshRequest={this.refreshRequest}/>
                   <Upload upload={this.state.upload} close={this.close}/>