[WIP] generate LoginPage container and LoginForm component

app/containers/App/index.js

@@ -12,6 +12,7 @@ import { Switch, Route } from 'react-router-dom';
 
 import HomePage from 'containers/HomePage/Loadable';
 import NotFoundPage from 'containers/NotFoundPage/Loadable';
+import LoginPage from 'containers/LoginPage/Loadable';
 
 import '../../global-styles.scss';
 
@@ -20,6 +21,7 @@ export default function App() {
     <div>
       <Switch>
         <Route exact path="/" component={HomePage} />
+        <Route exact path="/login" component={LoginPage} />
         <Route component={NotFoundPage} />
       </Switch>
     </div>

app/containers/LoginPage/Loadable.js

@@ -0,0 +1,6 @@
+/**
+ * Asynchronously loads the component for LoginPage
+ */
+import loadable from 'loadable-components';
+
+export default loadable(() => import('./index'));

app/containers/LoginPage/actions.js

@@ -0,0 +1,14 @@
+/*
+ *
+ * LoginPage actions
+ *
+ */
+
+import { AUTHENTICATION } from './constants';
+
+export function login(credentials) {
+  console.log({ credentials });
+  return {
+    type: AUTHENTICATION.LOGIN_REQUEST,
+  };
+}

app/containers/LoginPage/constants.js

@@ -0,0 +1,11 @@
+/*
+ *
+ * LoginPage constants
+ *
+ */
+
+export const AUTHENTICATION = {
+  LOGIN_REQUEST: 'USER_LOGIN_REQUEST',
+  LOGIN_SUCCESS: 'USER_LOGIN_SUCCESS',
+  LOGIN_FAILURE: 'USER_LOGIN_FAILURE',
+};

app/containers/LoginPage/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { login } from './actions';
+
+/* eslint-disable react/prefer-stateless-function */
+class LoginPage extends React.PureComponent {
+  static propTypes = {
+    login: PropTypes.func.isRequired,
+  };
+
+  state = {
+    username: '',
+    password: '',
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    this.props.login(this.state);
+  };
+
+  handleChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const { username, password } = this.state;
+
+    return (
+      <form className="login-form" onSubmit={this.handleSubmit}>
+        <div className="login-form__field">
+          <label htmlFor="username">Username</label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            placeholder="Username"
+            value={username}
+            onChange={this.handleChange}
+            required
+          />
+        </div>
+        <div className="login-form__field">
+          <label htmlFor="password">Password</label>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Password"
+            value={password}
+            onChange={this.handleChange}
+            required
+          />
+        </div>
+        <button type="submit">Login</button>
+      </form>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  username: state.username,
+  password: state.password,
+});
+
+export default connect(
+  mapStateToProps,
+  { login },
+)(LoginPage);

app/containers/LoginPage/reducer.js

@@ -0,0 +1,25 @@
+/*
+ *
+ * LoginPage reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+
+import { AUTHENTICATION } from './constants';
+import { retrieveFromLocalStorage } from '../../utils/localStorage';
+
+export const initialState = fromJS({
+  isAuthenticated: !!retrieveFromLocalStorage('xSessionToken'),
+});
+
+function loginPageReducer(state = initialState, action) {
+  switch (action.type) {
+    case AUTHENTICATION.LOGIN_REQUEST:
+      return state.set('isAuthenticated', false);
+    default:
+      return state;
+  }
+}
+
+export default loginPageReducer;

app/containers/LoginPage/tests/index.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { browserHistory } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+import LoginPage from 'containers/LoginPage';
+
+import configureStore from '../../../configureStore';
+
+describe('<LoginPage />', () => {
+  let mountedLoginPage;
+
+  let store;
+
+  beforeAll(() => {
+    store = configureStore({}, browserHistory);
+  });
+
+  beforeEach(() => {
+    mountedLoginPage = mount(
+      <Provider store={store}>
+        <LoginPage />
+      </Provider>,
+    );
+  });
+
+  it('should render without crashing', () => {
+    mount(
+      <Provider store={store}>
+        <LoginPage />
+      </Provider>,
+    );
+  });
+
+  it('should renders its children ', () => {
+    const children = mountedLoginPage.find('form.login-form');
+    expect(children.length).toBe(1);
+  });
+});

app/utils/localStorage.js

@@ -0,0 +1,11 @@
+export function storeInLocalStorage({ label, value }) {
+  localStorage.setItem(label, value);
+}
+
+export function retrieveFromLocalStorage(item) {
+  return localStorage.getItem(item);
+}
+
+export function removeFromLocalStorage(item) {
+  return localStorage.removeItem(item);
+}