STEP 1: fixing issue for sign up and login modal

Intl/localizationData/en.js

@@ -3,7 +3,7 @@ export default {
   messages: {
     siteTitle: 'MERN Starter Blog',
     addPost: 'Add Post',
-    signUp: 'Sign up',
+    signup: 'Sign up',
     login: 'Login',
     switchLanguage: 'Switch Language',
     twitterMessage: 'We are on Twitter',

Intl/localizationData/fr.js

@@ -3,7 +3,7 @@ export default {
   messages: {
     siteTitle: 'MERN blog de démarrage',
     addPost: 'Ajouter Poster',
-    signUp: 'Sinscrire',
+    signup: 'Sinscrire',
     login: 'Sidentifier',
     switchLanguage: 'Changer de langue',
     twitterMessage: 'Nous sommes sur Twitter',

client/modules/App/App.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { showSignupModal, showLoginModal } from '../Auth/AuthActions';
 
 // Import Style
 import styles from './App.css';
@@ -10,6 +11,9 @@ import DevTools from './components/DevTools';
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 
+import SignupModal from '../Auth/components/SignupModal';
+import LoginModal from '../Auth/components/LoginModal';
+
 // Import Actions
 import { toggleAddPost } from './AppActions';
 import { switchLanguage } from '../../modules/Intl/IntlActions';
@@ -28,6 +32,14 @@ export class App extends Component {
     this.props.dispatch(toggleAddPost());
   };
 
+  showLoginModal = () => {
+    this.props.dispatch(showLoginModal());
+  }
+
+  showSignupModal = () => {
+    this.props.dispatch(showSignupModal());
+  }
+
   render() {
     return (
       <div>
@@ -52,9 +64,15 @@ export class App extends Component {
             switchLanguage={lang => this.props.dispatch(switchLanguage(lang))}
             intl={this.props.intl}
             toggleAddPost={this.toggleAddPostSection}
+            isAuthenticated = {this.props.isAuthenticated}
+            showLoginModal = {this.showLoginModal}
+            showSignupModal = {this.showSignupModal}
           />
+          <SignupModal />
+          <LoginModal />
           <div className={styles.container}>
             {this.props.children}
+
           </div>
           <Footer />
         </div>
@@ -67,13 +85,15 @@ App.propTypes = {
   children: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired,
   intl: PropTypes.object.isRequired,
+  isAuthenticated: PropTypes.bool.isRequired
 };
 
 // Retrieve data from store as props
-function mapStateToProps(store) {
+function mapStoreToProps(store) {
   return {
     intl: store.intl,
+    isAuthenticated: store.auth.isAuthenticated
   };
 }
 
-export default connect(mapStateToProps)(App);
+export default connect(mapStoreToProps)(App);

client/modules/App/components/Header/Header.js

@@ -28,7 +28,12 @@ export function Header(props, context) {
             : null
         }
         {
-
+          !props.isAuthenticated &&
+          <a className={styles['add-post-button']} href="#" onClick={props.showLoginModal}><FormattedMessage id="login" /></a>
+        }
+        {
+          !props.isAuthenticated &&
+          <a className={styles['add-post-button']} href="#" onClick={props.showSignupModal}><FormattedMessage id="signup" /></a>
         }
       </div>
     </div>
@@ -42,6 +47,8 @@ Header.contextTypes = {
 Header.propTypes = {
   toggleAddPost: PropTypes.func.isRequired,
   switchLanguage: PropTypes.func.isRequired,
+  showLoginModal: PropTypes.func.isRequired,
+  showSignupModal: PropTypes.func.isRequired,
   intl: PropTypes.object.isRequired,
 };
 

client/modules/Auth/AuthActions.js

@@ -14,7 +14,7 @@ export function login(user) {
           email: user.email,
           passsword: user.password
         },
-      }).then(res => dispatch(loggedIn({ email: res.email, token: res.token }));
+      }).then(res => dispatch(loggedIn({ email: res.email, token: res.token })));
   };
 }
 
@@ -27,17 +27,17 @@ export function signup(user) {
           first_name: user.first_name,
           last_name: user.last_name,
         },
-      }).then(res => dispatch(hideSignUpModal()));
+      }).then(res => dispatch(hideSignupModal()));
   };
 }
 
-export function hideSignUpModal() {
+export function hideSignupModal() {
   return {
     type: HIDE_SIGNUP_MODAL
   }
 }
 
-export function showSignUpModal() {
+export function showSignupModal() {
   return {
     type: SHOW_SIGNUP_MODAL
   }

client/modules/Auth/AuthReducer.js

@@ -1,10 +1,10 @@
-import { LOGGED_IN } from './AuthReducer'
+import { LOGGED_IN, SHOW_SIGNUP_MODAL, HIDE_SIGNUP_MODAL, SHOW_LOGIN_MODAL, HIDE_LOGIN_MODAL } from './AuthActions'
 
 const initialState = {
   isAuthenticated: false,
   user: null,
   isShowLoginModal: false,
-  isShowSignUpModal: false
+  isShowSignupModal: false
 };
 
 const AuthReducer = (state = initialState, action) => {
@@ -36,6 +36,10 @@ const AuthReducer = (state = initialState, action) => {
   }
 };
 
-export isShowLoginModal = state => state.isShowLoginModal;
+export const isShowLoginModal = state => state.auth.isShowLoginModal;
 
-export isShowSignUpModal = state => state.isShowSignUpModal;
+export const isShowSignupModal = state => state.auth.isShowSignupModal;
+
+export const isAuthenticated = state => state.auth.isAuthenticated;
+
+export default AuthReducer;

client/modules/Auth/components/LoginModal.js

@@ -1,13 +1,14 @@
 import React, { Component, PropTypes } from 'react';
 import Modal from 'react-bootstrap/lib/Modal'
+import { connect } from 'react-redux';
 
 import { hideLoginModal } from '../AuthActions';
 import { isShowLoginModal } from '../AuthReducer';
 
 export class LoginModal extends Component {
 
   hideModal = () => {
-    this.props.dispatch(hideLoginModal();
+    this.props.dispatch(hideLoginModal());
   };
 
   login = () => {
@@ -22,18 +23,18 @@ export class LoginModal extends Component {
   render() {
     return (
       <Modal
-        show={ this.props.isShowLoginModal }
+        show={ this.props.isShowModal }
         aria-labelledby='contained-modal-title'>
             <Modal.Header>
               <Modal.title>Sign Up</Modal.title>
             </Modal.Header>
             <Modal.body>
-              <div onBlur={this.props.hideModal}>
-                <input type='text' name='first_name' ref='first_name'>
-                <input type='text' name='last_name' ref='last_name'>
-                <input type='text' name='email' ref='email'>
-                <input type='password' name='password' ref='password'>
-                <a href='javascript:void(0);' onClick={this.props.signup} >Sign Up</a>
+              <div onBlur={this.hideModal}>
+                <input type='text' name='first_name' ref='first_name' />
+                <input type='text' name='last_name' ref='last_name' />
+                <input type='text' name='email' ref='email' />
+                <input type='password' name='password' ref='password' />
+                <a href='javascript:void(0);' onClick={this.login} >Sign Up</a>
               </div>
             </Modal.body>
     </Modal>

client/modules/Auth/components/SignupModal.js

@@ -1,13 +1,14 @@
 import React, { Component, PropTypes } from 'react';
 import Modal from 'react-bootstrap/lib/Modal'
 
-import { hideSignUpModal, signup } from '../AuthActions';
-import { isShowSignUpModal } from '../AuthReducer';
+import { connect } from 'react-redux';
+import { hideSignupModal, signup } from '../AuthActions';
+import { isShowSignupModal } from '../AuthReducer';
 
-export class SignUpModal extends Component {
+export class SignupModal extends Component {
 
   hideModal = () => {
-    this.props.dispatch(hideSignUpModal();
+    this.props.dispatch(hideSignupModal());
   };
 
   signup = () => {
@@ -23,38 +24,36 @@ export class SignUpModal extends Component {
     }));
   };
 
-  render() {
+  render = () => {
     return (
       <Modal
-        show={ this.props.isShowSignUpModal }
+        show={ this.props.isShowModal }
         aria-labelledby='contained-modal-title'>
             <Modal.Header>
               <Modal.title>Sign Up</Modal.title>
             </Modal.Header>
             <Modal.body>
-              <div onBlur={this.props.hideModal}>
-                <input type='text' name='first_name' ref='first_name'>
-                <input type='text' name='last_name' ref='last_name'>
-                <input type='text' name='email' ref='email'>
-                <input type='password' name='password' ref='password'>
-                <a href='javascript:void(0);' onClick={this.props.signup} >Sign Up</a>
+              <div onBlur={this.hideModal}>
+                <input type='text' name='first_name' ref='first_name' />
+                <input type='text' name='last_name' ref='last_name' />
+                <input type='text' name='email' ref='email' />
+                <input type='password' name='password' ref='password' />
+                <a href='javascript:void(0);' onClick={this.signup} >Sign Up</a>
               </div>
             </Modal.body>
     </Modal>
     );
   }
 }
 
-SignUpModal.propTypes = {
-  hideModal: PropTypes.func.isRequired,
-  signup: PropTypes.func.isRequired,
+SignupModal.propTypes = {
   isShowModal: PropTypes.bool.isRequired,
 };
 
 function mapStateToProps(state) {
   return {
-    isShowModal: isShowSignUpModal(state)
+    isShowModal: isShowSignupModal(state)
   };
 }
 
-export default connect(mapStateToProps)(SignUpModal);
+export default connect(mapStateToProps)(SignupModal);

client/reducers.js

@@ -5,12 +5,14 @@ import { combineReducers } from 'redux';
 
 // Import Reducers
 import app from './modules/App/AppReducer';
+import auth from './modules/Auth/AuthReducer';
 import posts from './modules/Post/PostReducer';
 import intl from './modules/Intl/IntlReducer';
 
 // Combine all reducers into one root reducer
 export default combineReducers({
   app,
+  auth,
   posts,
   intl,
 });