frontend auth is setup, needs close buttons on the forms and styling

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 6
+}

Gemfile

@@ -29,7 +29,6 @@ gem 'jbuilder', '~> 2.5'
 gem 'bcrypt', '~> 3.1.7'
 gem 'jquery-rails'
 gem 'pry-rails'
-
 # gem to validates email
 
 # Use Capistrano for deployment

app/assets/stylesheets/api/sessions.scss

@@ -1,3 +1,20 @@
 // Place all the styles related to the api/sessions controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+.modal-background {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 10;
+}
+
+.modal-child {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+}

app/views/static_pages/root.html.erb

@@ -1 +1,10 @@
+<% if logged_in? %>
+  <script type="text/javascript">
+    window.currentUser = <%= render(
+      'api/users/user.json.jbuilder',
+      user: current_user
+    ).html_safe %>
+  </script>
+<% end %>
+
 <main id="root"></main>

frontend/actions/modal_actions.js

@@ -0,0 +1,15 @@
+export const OPEN_MODAL = 'OPEN_MODAL';
+export const CLOSE_MODAL = 'CLOSE_MODAL';
+
+export const openModal = modal => {
+  return {
+    type: OPEN_MODAL,
+    modal
+  };
+};
+
+export const closeModal = () => {
+  return {
+    type: CLOSE_MODAL
+  };
+};

frontend/basana.jsx

@@ -3,11 +3,24 @@ import ReactDOM from 'react-dom';
 import configureStore from './store/store';
 import Root from './components/root';
 //test
-import {signup, login, logout} from './util/session_api_util';
+import {signup, login, logout} from './actions/session_actions';
 
 document.addEventListener('DOMContentLoaded', () => {
   const root = document.getElementById('root');
-  const store = configureStore();
+  let store;
+  if (window.currentUser) {
+    const preloadedState = {
+      entities: {
+        users: { [window.currentUser.id]: window.currentUser }
+      },
+      session: { id: window.currentUser.id }
+    };
+    store = configureStore(preloadedState);
+    delete window.currentUser;
+  } else {
+    store = configureStore();
+  }
+
   ReactDOM.render(
     <Root store={ store } />,
     root

frontend/components/App.jsx

@@ -1,9 +1,18 @@
 import React from 'react';
+import GreetingContainer from './greeting/greeting_container';
+import { Route } from 'react-router-dom';
+import LoginFormContainer from './session/login_form_container';
+import SignupFormContainer from './session/signup_form_container';
+import Modal from './modal/modal';
 
 const App = () => {
   return (
     <div>
-      <h1>Basana</h1>
+      <Modal />
+      <header>
+        <h1>Basana</h1>
+        <GreetingContainer />
+      </header>
     </div>
   );
 };

frontend/components/greeting/greeting.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Greeting = props => {
+  const { currentUser, logout, openModal } = props;
+
+  if (currentUser) {
+    return (
+      <div>
+      <span>{currentUser.username}</span>
+      <button onClick={() => logout()}>Log out</button>
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <button onClick={() => openModal('login')}>Log in</button>
+        <button onClick={() => openModal('signup')}>Sign up</button>
+      </div>
+    );
+  }
+};
+
+export default Greeting;

frontend/components/greeting/greeting_container.jsx

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { logout } from '../../actions/session_actions';
+import Greeting from './greeting';
+import { openModal } from '../../actions/modal_actions';
+
+const mapStateToProps = state => {
+  return {
+    currentUser: state.entities.users[state.session.id]
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    logout: () => dispatch(logout()),
+    openModal: (modal) => dispatch(openModal(modal))
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Greeting);

frontend/components/modal/modal.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { closeModal } from '../../actions/modal_actions';
+import { connect } from 'react-redux';
+import LoginFormContainer from '../session/login_form_container';
+import SignupFormContainer from '../session/signup_form_container';
+
+const mapStateToProps = state => {
+  return {
+    modal: state.ui.modal
+  };
+};
+
+const mapDispatchToProps = dispatch =>{
+  return {
+    closeModal: () => dispatch(closeModal())
+  };
+};
+
+const Modal = ({ modal, closeModal}) => {
+  if (!modal) {
+    return null;
+  }
+
+  let component;
+  switch (modal) {
+    case 'login':
+      component = <LoginFormContainer />;
+      break;
+    case 'signup':
+      component = <SignupFormContainer />;
+      break;
+    default:
+      return null;
+  }
+
+  return (
+    <div className='modal-background' onClick={closeModal}>
+      <div className='modal-child' onClick={ e => e.stopPropagation() }>
+        {component}
+      </div>
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Modal);

frontend/components/session/login_form_container.jsx

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import { login } from '../../actions/session_actions';
+import SessionForm from './session_form';
+import { openModal, closeModal } from '../../actions/modal_actions';
+
+const mapStateToProps = state => {
+  return {
+    errors: state.errors.session,
+    formType: 'Log in',
+    otherType: 'Sign up'
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    processForm: user => dispatch(login(user)),
+    closeModal: () => dispatch(closeModal()),
+    openModal: () => dispatch(openModal('signup')) 
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);

frontend/components/session/session_form.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+class SessionForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state={
+      username: '',
+      password: ''
+    };
+
+    this.handleSumbit = this.handleSumbit.bind(this);
+  }
+
+  update(field) {
+    return (e) => {
+      this.setState({[field]: e.currentTarget.value});
+    };
+  }
+
+  handleSumbit(e) {
+    e.preventDefault();
+    const user = Object.assign({}, this.state);
+    this.props.processForm(user).then(
+      () => this.props.history.push('/')
+    );
+  }
+
+  render() {
+    const {
+      errors,
+      formType,
+      otherType,
+      openModal,
+      closeModal
+    } = this.props;
+
+    return (
+      <div>
+        <h1>{formType}</h1>
+        <form onSubmit={this.handleSumbit}>
+          <input
+            type='text'
+            onChange={this.update('username')} />
+          <input
+            type='password'
+            onChange={this.update('password')} />
+          <input type='submit' value='Submit'/>
+        </form>
+        <ul>
+          {errors}
+        </ul>
+        <button onClick={() => openModal()}>{otherType}</button>
+      </div>
+    );
+  }
+}
+
+export default SessionForm;

frontend/components/session/signup_form_container.jsx

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import { signup } from '../../actions/session_actions';
+import SessionForm from './session_form';
+import { openModal, closeModal } from '../../actions/modal_actions';
+
+const mapStateToProps = state => {
+  return {
+    errors: state.errors.session,
+    formType: 'Sign up',
+    otherType: 'Log in'
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    processForm: user => dispatch(signup(user)),
+    closeModal: () => dispatch(closeModal()),
+    openModal: () => dispatch(openModal('login'))
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);

frontend/reducers/modal_reducer.js

@@ -0,0 +1,14 @@
+import { OPEN_MODAL, CLOSE_MODAL } from '../actions/modal_actions';
+
+const modalReducer = (state = null, action) => {
+  switch(action.type) {
+    case OPEN_MODAL:
+      return action.modal;
+    case CLOSE_MODAL:
+      return null;
+    default:
+      return state;
+  }
+};
+
+export default modalReducer;

frontend/reducers/root_reducer.js

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 import entitiesReducer from './entities_reducer';
 import sessionReducer from './session_reducer';
 import errorsReducer from './errors_reducer';
+import uiReducer from './ui_reducer';
 
 const rootReducer = combineReducers({
   entities: entitiesReducer,
   session: sessionReducer,
-  errors: errorsReducer
+  errors: errorsReducer,
+  ui: uiReducer
 });
 
 export default rootReducer;

frontend/reducers/session_reducer.js

@@ -7,7 +7,6 @@ const sessionReducer = (state = { id: null }, action) => {
   Object.freeze(state);
   switch(action.type) {
     case RECEIVE_CURRENT_USER:
-      debugger
       return Object.assign({}, { id: action.user.id });
     case LOGOUT_CURRENT_USER:
       return Object.assign({}, { id: null });

frontend/reducers/ui_reducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import modalReducer from './modal_reducer';
+
+const uiReducer = combineReducers({
+  modal: modalReducer
+});
+
+export default uiReducer;