Add Sign Up and Login Modal without testing

Intl/localizationData/en.js

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

Intl/localizationData/fr.js

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

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

@@ -27,6 +27,9 @@ export function Header(props, context) {
             ? <a className={styles['add-post-button']} href="#" onClick={props.toggleAddPost}><FormattedMessage id="addPost" /></a>
             : null
         }
+        {
+
+        }
       </div>
     </div>
   );

client/modules/Auth/AuthActions.js

@@ -0,0 +1,63 @@
+// Export Constants
+import callApi from '../../util/apiCaller';
+
+export const LOGGED_IN = 'LOGGED_IN';
+export const SHOW_SIGNUP_MODAL = 'SHOW_SIGNUP_MODAL';
+export const HIDE_SIGNUP_MODAL = 'HIDE_SIGNUP_MODAL';
+export const SHOW_LOGIN_MODAL = 'SHOW_LOGIN_MODAL';
+export const HIDE_LOGIN_MODAL = 'HIDE_LOGIN_MODAL';
+
+export function login(user) {
+  return (dispatch) => {
+    return callApi('login', 'post', {
+        user: {
+          email: user.email,
+          passsword: user.password
+        },
+      }).then(res => dispatch(loggedIn({ email: res.email, token: res.token }));
+  };
+}
+
+export function signup(user) {
+  return (dispatch) => {
+    return callApi('signup', 'post', {
+        user: {
+          email: user.email,
+          passsword: user.password,
+          first_name: user.first_name,
+          last_name: user.last_name,
+        },
+      }).then(res => dispatch(hideSignUpModal()));
+  };
+}
+
+export function hideSignUpModal() {
+  return {
+    type: HIDE_SIGNUP_MODAL
+  }
+}
+
+export function showSignUpModal() {
+  return {
+    type: SHOW_SIGNUP_MODAL
+  }
+}
+
+export function hideLoginModal() {
+  return {
+    type: SHOW_LOGIN_MODAL
+  }
+}
+
+export function showLoginModal() {
+  return {
+    type: HIDE_LOGIN_MODAL
+  }
+}
+
+export function loggedIn(user) {
+  return {
+    type: LOGGED_IN,
+    user
+  }
+}

client/modules/Auth/AuthReducer.js

@@ -0,0 +1,41 @@
+import { LOGGED_IN } from './AuthReducer'
+
+const initialState = {
+  isAuthenticated: false,
+  user: null,
+  isShowLoginModal: false,
+  isShowSignUpModal: false
+};
+
+const AuthReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case LOGGED_IN :
+      return Object.assign({}, state, {
+        isAuthenticated: true,
+        isShowLoginModal: false,
+        user: action.user
+      });
+    case SHOW_SIGNUP_MODAL:
+      return Object.assign({}, state, {
+        isShowSignupModal: true,
+      });
+    case HIDE_SIGNUP_MODAL:
+      return Object.assign({}, state, {
+        isShowSignupModal: false,
+      });
+    case SHOW_LOGIN_MODAL:
+      return Object.assign({}, state, {
+        isShowLoginModal: true,
+      });
+    case HIDE_LOGIN_MODAL:
+      return Object.assign({}, state, {
+        isShowLoginModal: false,
+      });
+    default:
+      return state;
+  }
+};
+
+export isShowLoginModal = state => state.isShowLoginModal;
+
+export isShowSignUpModal = state => state.isShowSignUpModal;

client/modules/Auth/components/LoginModal.js

@@ -0,0 +1,56 @@
+import React, { Component, PropTypes } from 'react';
+import Modal from 'react-bootstrap/lib/Modal'
+
+import { hideLoginModal } from '../AuthActions';
+import { isShowLoginModal } from '../AuthReducer';
+
+export class LoginModal extends Component {
+
+  hideModal = () => {
+    this.props.dispatch(hideLoginModal();
+  };
+
+  login = () => {
+    email = this.ref.email;
+    password = this.ref.password;
+    this.props.dispatch(login({
+      email: email,
+      password: password,
+    }));
+  };
+
+  render() {
+    return (
+      <Modal
+        show={ this.props.isShowLoginModal }
+        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>
+            </Modal.body>
+    </Modal>
+    );
+  }
+}
+
+LoginModal.propTypes = {
+  hideModal: PropTypes.func.isRequired,
+  login: PropTypes.func.isRequired,
+  isShowModal: PropTypes.bool.isRequired,
+};
+
+function mapStateToProps(state) {
+  return {
+    isShowModal: isShowLoginModal(state)
+  };
+}
+
+export default connect(mapStateToProps)(LoginModal);

client/modules/Auth/components/SignupModal.js

@@ -0,0 +1,60 @@
+import React, { Component, PropTypes } from 'react';
+import Modal from 'react-bootstrap/lib/Modal'
+
+import { hideSignUpModal, signup } from '../AuthActions';
+import { isShowSignUpModal } from '../AuthReducer';
+
+export class SignUpModal extends Component {
+
+  hideModal = () => {
+    this.props.dispatch(hideSignUpModal();
+  };
+
+  signup = () => {
+    first_name = this.ref.first_name;
+    last_name = this.ref.last_name;
+    email = this.ref.email;
+    password = this.ref.password;
+    this.props.dispatch(signup({
+      first_name: first_name,
+      last_name: last_name,
+      email: email,
+      password: password,
+    }));
+  };
+
+  render() {
+    return (
+      <Modal
+        show={ this.props.isShowSignUpModal }
+        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>
+            </Modal.body>
+    </Modal>
+    );
+  }
+}
+
+SignUpModal.propTypes = {
+  hideModal: PropTypes.func.isRequired,
+  signup: PropTypes.func.isRequired,
+  isShowModal: PropTypes.bool.isRequired,
+};
+
+function mapStateToProps(state) {
+  return {
+    isShowModal: isShowSignUpModal(state)
+  };
+}
+
+export default connect(mapStateToProps)(SignUpModal);

client/modules/Client/clientAction.js

@@ -0,0 +1,8 @@
+// Export Constants
+
+export function switchLanguage(newLang) {
+  return {
+    type: SWITCH_LANGUAGE,
+    ...localizationData[newLang],
+  };
+}

client/modules/Client/clientReducer.js

@@ -0,0 +1,24 @@
+import { enabledLanguages, localizationData } from '../../../Intl/setup';
+import { SWITCH_LANGUAGE } from './IntlActions';
+
+const initLocale = global.navigator && global.navigator.language || 'en';
+
+const initialState = {
+  locale: initLocale,
+  enabledLanguages,
+  ...(localizationData[initLocale] || {}),
+};
+
+const IntlReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case SWITCH_LANGUAGE: {
+      const { type, ...actionWithoutType } = action; // eslint-disable-line
+      return { ...state, ...actionWithoutType };
+    }
+
+    default:
+      return state;
+  }
+};
+
+export default IntlReducer;

package.json

@@ -43,6 +43,7 @@
     "limax": "^1.3.0",
     "mongoose": "^4.4.20",
     "react": "^15.1.0",
+    "react-bootstrap": "^0.31.1",
     "react-dom": "^15.1.0",
     "react-helmet": "^3.1.0",
     "react-intl": "^2.1.2",