basic login flow complete

client/src/App.jsx

@@ -8,6 +8,7 @@ import history from './state/historyConfig';
 import HomePage from './views/pages/home.jsx';
 import AboutPage from './views/pages/about.jsx';
 import ContactPage from './views/pages/contact.jsx';
+import Dashboard from './views/pages/dashboard.jsx';
 import MainLayout from './views/layouts/main.jsx';
 import store from './state/configureStore';
 
@@ -22,6 +23,7 @@ const App = () => {
           <Route exact path="/" component={HomePage}/>
           <Route path="/about" component={AboutPage}/>
           <Route path="/contact" component={ContactPage}/>
+          <Route path="/dashboard" component={Dashboard}/>
         </div>
       </ConnectedRouter>
     </Provider>

client/src/state/authentication/actions.js

@@ -26,4 +26,31 @@ export const userRegisterFailure = function(error, meta) {
     error: true,
     meta
   }
+}
+
+export const userLoginRequest = function(params) {
+  return {
+    type: types.USER_LOGIN_REQUEST,
+    payload: params,
+    meta: {
+      thunk: true 
+    }
+  }
+}
+
+export const userLoginSuccess = function(params, meta) {
+  return {
+    type: types.USER_LOGIN_SUCCESS,
+    payload: params,
+    meta
+  }
+}
+
+export const userLoginFailure = function(error, meta) {
+  return {
+    type: types.USER_LOGIN_FAILURE,
+    payload: error,
+    error: true,
+    meta
+  }
 }

client/src/state/authentication/api.js

@@ -14,6 +14,18 @@ const registerUser = async (params) => {
   }
 }
 
+const loginUser = async (params) => {
+  try {
+    const response = await axios.post(
+      BASE_URL.concat('/auth/login'),
+      params);
+    return response.data;
+  } catch(err) {
+    throw err.response;
+  }
+}
+
 export default {
-  registerUser
+  registerUser,
+  loginUser
 }

client/src/state/authentication/reducers.js

@@ -17,6 +17,16 @@ export default function(
         ...state,
         error: action.payload.error
       }
+    case types.USER_LOGIN_SUCCESS:
+      return {
+        ...state,
+        user: action.payload.data
+      }
+    case types.USER_LOGIN_FAILURE:
+      return {
+        ...state,
+        error: action.payload.error
+      }
     default:
       return state;
   }

client/src/state/authentication/sagas.js

@@ -11,7 +11,7 @@ export function* userRegister(action) {
   try {
     const data = yield call(api.registerUser, action.payload);
     yield put(actions.userRegisterSuccess(data, meta));
-    yield put(push('/')); // redirect back to dashboard
+    yield put(push('/dashboard'));
   } catch(err) {
     console.log(err);
     yield put(actions.userRegisterFailure(err, meta));
@@ -24,9 +24,26 @@ export function* watchUserRegisterRequest() {
   yield takeEvery(types.USER_REGISTER_REQUEST, userRegister);
 }
 
+export function* userLogin(action) {
+  const { payload, meta } = action;
+  try {
+    const data = yield call(api.loginUser, action.payload);
+    yield put(actions.userLoginSuccess(data, meta));
+    yield put(push('/dashboard')); // redirect back to dashboard
+  } catch(err) {
+    console.log(err);
+    yield put(actions.userLoginFailure(err, meta));
+  }
+}
+
+export function* watchUserLoginRequest() {
+  yield takeEvery(types.USER_LOGIN_REQUEST, userLogin);
+}
+
 // export only watcher sagas in one variable
 export const sagas = [
-  watchUserRegisterRequest
+  watchUserRegisterRequest,
+  watchUserLoginRequest
 ];
 
 

client/src/views/components/common/navbar.jsx

@@ -27,6 +27,7 @@ const NavBar = (props) => {
         <div className='navbar-menu'
           role="navigation" aria-label="main navigation">
           <div className="navbar-start">
+            {user && <Link to="/dashboard" className="navbar-item">Dashboard</Link>}
             <Link to="/" className="navbar-item">Home</Link>
             <Link to="/about" className="navbar-item">About</Link>
             <Link to="/contact" className="navbar-item">Contact</Link>

client/src/views/containers/loginRegisterModal/index.jsx

@@ -16,6 +16,7 @@ class LoginRegisterModal extends React.Component {
 
     this.setActiveTab = this.setActiveTab.bind(this);
     this.handleRegister = this.handleRegister.bind(this);
+    this.handleLogin = this.handleLogin.bind(this);
   }
 
   // sets active tab by string
@@ -31,14 +32,18 @@ class LoginRegisterModal extends React.Component {
     return this.props.actions.userRegisterRequest(params)
   }
 
+  handleLogin(params) {
+    return this.props.actions.userLoginRequest(params)
+  }
+
   // chooses which form to render
   getForm() {
     const activeTab = this.state.activeTab;
     switch (activeTab) {
       case 'loginForm':
         return (
           <LoginForm 
-          handleLogin={(values) => {console.log('handle login')}}
+          handleLogin={this.handleLogin}
           toggleActive={this.props.toggleActive} 
           />
         );
@@ -103,7 +108,8 @@ class LoginRegisterModal extends React.Component {
 const mapDispatchToProps = (dispatch) => {
   return {
       actions: bindActionCreators({
-        userRegisterRequest: authActions.userRegisterRequest
+        userRegisterRequest: authActions.userRegisterRequest,
+        userLoginRequest: authActions.userLoginRequest
       }, dispatch)
   }
 }

client/src/views/containers/loginRegisterModal/loginForm.jsx

@@ -1,15 +1,12 @@
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import Yup from 'yup';
 import { Form, Formik } from 'formik';
 
 class LoginForm extends React.Component {
 
   getSubmitBtnClasses(isSubmitting, isValid) {
     let names = ['button', 'is-primary'];
-      // if(isSubmitting) {
-      //   names.push('is-loading');
-      // } else if(isValid) {
       if(isValid) {
         names.push('is-primary');
       }
@@ -33,9 +30,14 @@ class LoginForm extends React.Component {
           password: ''
         }}
         onSubmit={(values, actions) => {
-          alert(JSON.stringify(values));
-          this.props.handleLogin(values);
-          console.log(values);
+          this.props.handleLogin(values)
+          .then((response) => {
+            this.props.toggleActive();
+          })
+          .catch((err) => {
+            actions.setSubmitting(false);
+            actions.setStatus(err.data.message || 'An Error has occured.');
+          })
         }}
         render={({
           values,
@@ -45,11 +47,22 @@ class LoginForm extends React.Component {
           handleBlur,
           handleSubmit,
           isSubmitting,
-          isValid
+          isValid,
+          status
         }) => (
-          <div>
-            <form onSubmit={handleSubmit}>
+          <Fragment>
             <section className="modal-card-body">
+            {status && 
+              <article className="message is-danger">
+                <div className="message-header">
+                  <p>Error</p> 
+                </div> 
+                <div className="message-body">
+                {status} 
+                </div>
+              </article>
+            }
+            <form onSubmit={handleSubmit}>
               {/* form body */}
                 <div className="field">
                   <label htmlFor="username">Username</label> 
@@ -79,11 +92,17 @@ class LoginForm extends React.Component {
                   </div>
                   {touched.password && errors.password && <div className="help is-danger">{errors.password}</div> }
                 </div>
+                <input type="submit"
+                  style = {
+                    {display: 'none'} // invisible input, so we can submit form by hitting enter
+                  }/>
+            </form>
               </section>
             {/* footer */}
             <footer className="modal-card-foot">
               <button 
-                type="submit"
+                onClick={handleSubmit}
+                type="button"
                 className={this.getSubmitBtnClasses(isSubmitting, isValid)}
                 disabled={!isValid || isSubmitting}>
                 Login
@@ -95,8 +114,7 @@ class LoginForm extends React.Component {
                 Cancel
                 </button> 
             </footer>
-            </form>
-          </div>
+          </Fragment>
         )}
       />
     )

client/src/views/containers/loginRegisterModal/registerForm.jsx

@@ -37,14 +37,11 @@ class LoginForm extends React.Component {
           password_confirmation: '',
         }}
         onSubmit={(values, actions) => {
-          // alert(JSON.stringify(values));
           this.props.handleRegister(values)
           .then((response) => {
             this.props.toggleActive();
           })
           .catch((err) => {
-            console.log('failure?');
-            console.log(err);
             actions.setSubmitting(false);
             actions.setStatus('Username is already taken');
           })

client/src/views/pages/dashboard.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Dashboard = () => {
+  return(
+    <div>
+      <section className="hero is-primary">
+        <div className="hero-body">
+          <div className="container">
+            <h1 className="title">Dashboard</h1>
+          </div>
+        </div> 
+      </section>   
+      <div className="section">
+        <div className="container">
+          <p>Dashboard page</p>
+        </div>
+      </div>
+    </div>
+
+  )
+}
+
+export default Dashboard;

client/webpack.config.js

@@ -53,7 +53,7 @@ module.exports = {
 
   plugins: [
     new HtmlWebpackPlugin({
-      title: "Webpack demo",
+      title: "Xtra-Folder Megaman Battle Network Folder Builder",
       template: './src/index.html',
       filename: 'index.html'
     }),