Added login and register modal layouts with corresponding reducers

src/app/layout/App.js

@@ -10,11 +10,13 @@ import HomePage from "../../features/home/HomePage";
 import Navbar from "../../features/nav/Navbar/NavBar";
 import PeopleDashboard from "../../features/user/PeopleDashboard/PeopleDashBoard";
 import TestComponent from "../../features/testArea/TestComponent";
+import ModalManager from "../../features/modals/modalManager";
 
 class App extends Component {
   render() {
     return (
       <div>
+        <ModalManager />
         <Switch>
           <Route exact path="/" component={HomePage} />
         </Switch>

src/app/reducers/rootReducer.js

@@ -3,12 +3,14 @@ import { reducer as formReducer } from "redux-form";
 import testReducer from "../../features/testArea/testReducer";
 import eventReducer from "../../features/event/eventReducer";
 import modalReducer from "../../features/modals/modalReducer";
+import authReducer from "../../features/auth/authReducer";
 
 const rootReducer = combineReducers({
   form: formReducer,
   test: testReducer,
   events: eventReducer,
-  modals: modalReducer
+  modals: modalReducer,
+  auth: authReducer
 });
 
 export default rootReducer;

src/features/auth/Login/LoginForm.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Form, Segment, Button } from "semantic-ui-react";
+import { Field, reduxForm } from "redux-form";
+import TextInput from "../../../app/common/form/TextInput";
+
+const LoginForm = () => {
+  return (
+    <Form error size="large">
+      <Segment>
+        <Field
+          name="email"
+          component={TextInput}
+          type="text"
+          placeholder="Email Address"
+        />
+        <Field
+          name="password"
+          component={TextInput}
+          type="password"
+          placeholder="password"
+        />
+        <Button fluid size="large" color="teal">
+          Login
+        </Button>
+      </Segment>
+    </Form>
+  );
+};
+
+export default reduxForm({ form: "loginForm" })(LoginForm);

src/features/auth/Register/RegisterForm.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Form, Segment, Button } from "semantic-ui-react";
+import { Field, reduxForm } from "redux-form";
+import TextInput from "../../../app/common/form/TextInput";
+
+const RegisterForm = () => {
+  return (
+    <div>
+      <Form size="large">
+        <Segment>
+          <Field
+            name="displayName"
+            type="text"
+            component={TextInput}
+            placeholder="Known As"
+          />
+          <Field
+            name="email"
+            type="text"
+            component={TextInput}
+            placeholder="Email"
+          />
+          <Field
+            name="password"
+            type="password"
+            component={TextInput}
+            placeholder="Password"
+          />
+          <Button fluid size="large" color="teal">
+            Register
+          </Button>
+        </Segment>
+      </Form>
+    </div>
+  );
+};
+
+export default reduxForm({ form: "registerForm" })(RegisterForm);

src/features/auth/authActions.js

@@ -0,0 +1,14 @@
+export const login = creds => {
+  return {
+    type: "LOGIN_USER",
+    payload: {
+      creds
+    }
+  };
+};
+
+export const logout = () => {
+  return {
+    type: "SIGN_OUT_USER"
+  };
+};

src/features/auth/authReducer.js

@@ -0,0 +1,17 @@
+import { createReducer } from "../../app/common/util/ReducerUtil.js";
+
+const initialState = {
+  currentUser: {}
+};
+export const loginUser = (state, payload) => {
+  return { ...state, authenticated: true, currentUser: payload.creds.email };
+};
+
+export const signOutUser = (state, payload) => {
+  return { ...state, authenticated: false, currentUser: {} };
+};
+
+export default createReducer(initialState, {
+  ["LOGIN_USER"]: loginUser,
+  ["SIGN_OUT_USER"]: signOutUser
+});

src/features/modals/LoginModal.js

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import { Modal } from "semantic-ui-react";
+import { connect } from "react-redux";
+
+import LoginForm from "../auth/Login/LoginForm";
+import { closeModal } from "./modalActions";
+
+const actions = { closeModal };
+
+class LoginModal extends Component {
+  render() {
+    return (
+      <Modal size="mini" open={true} onClose={this.props.closeModal}>
+        <Modal.Header>Login to Bunch Up</Modal.Header>
+        <Modal.Content>
+          <Modal.Description>
+            <LoginForm />
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+    );
+  }
+}
+
+export default connect(
+  null,
+  actions
+)(LoginModal);

src/features/modals/RegisterModal.js

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+import { Modal } from "semantic-ui-react";
+import { connect } from "react-redux";
+
+import { closeModal } from "./modalActions";
+import RegisterForm from "../auth/Register/RegisterForm";
+
+const actions = { closeModal };
+
+class RegisterModal extends Component {
+  render() {
+    return (
+      <Modal size="mini" open={true} onClose={this.props.closeModal}>
+        <Modal.Header>Sign Up to Bunch Up</Modal.Header>
+        <Modal.Content>
+          <Modal.Description>
+            <RegisterForm />
+          </Modal.Description>
+        </Modal.Content>
+      </Modal>
+    );
+  }
+}
+
+export default connect(
+  null,
+  actions
+)(RegisterModal);

src/features/modals/modalManager.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { connect } from "react-redux";
+import LoginModal from "./LoginModal";
+import RegisterModal from "./RegisterModal";
+
+const modalLookup = {
+  LoginModal,
+  RegisterModal
+};
+
+const ModalManager = ({ currentModal }) => {
+  let renderedModal;
+  if (currentModal) {
+    const { modalType, modalProps } = currentModal;
+    const ModalComponent = modalLookup[modalType];
+    renderedModal = <ModalComponent {...modalProps} />;
+  }
+  return <span>{renderedModal}</span>;
+};
+
+const mapStateToProps = state => {
+  return { currentModal: state.modals };
+};
+
+export default connect(mapStateToProps)(ModalManager);

src/features/nav/Menus/SignedOutMenu.js

@@ -1,13 +1,14 @@
 import React from "react";
 import { Menu, Button } from "semantic-ui-react";
 
-const SignedOutMenu = ({ signIn }) => {
+const SignedOutMenu = ({ signIn, register }) => {
   return (
     <Menu.Item position="right">
       <Button onClick={signIn} basic inverted content="Login" />
       <Button
         basic
         inverted
+        onClick={register}
         content="Register"
         style={{ marginLeft: "0.5em" }}
       />

src/features/nav/Navbar/Navbar.js

@@ -1,18 +1,22 @@
 import React, { Component } from "react";
+import { connect } from "react-redux";
 import { Menu, Container, Button } from "semantic-ui-react";
 import { NavLink, Link, withRouter } from "react-router-dom";
 import SignedOutMenu from "../Menus/SignedOutMenu";
 import SignedInMenu from "../Menus/SignedInMenu";
+import { openModal } from "../../modals/modalActions";
 
 class NavBar extends Component {
   state = {
     authenticated: false
   };
 
   handleSignIn = () => {
-    this.setState({
-      authenticated: true
-    });
+    this.props.openModal("LoginModal");
+  };
+
+  handleRegister = () => {
+    this.props.openModal("RegisterModal");
   };
 
   handleSignOut = () => {
@@ -51,12 +55,20 @@ class NavBar extends Component {
           {authenticated ? (
             <SignedInMenu signOut={this.handleSignOut} />
           ) : (
-            <SignedOutMenu signIn={this.handleSignIn} />
+            <SignedOutMenu
+              signIn={this.handleSignIn}
+              register={this.handleRegister}
+            />
           )}
         </Container>
       </Menu>
     );
   }
 }
 
-export default withRouter(NavBar);
+export default withRouter(
+  connect(
+    null,
+    { openModal }
+  )(NavBar)
+);