[WIP] generate LoginPage container and LoginForm component

app/components/LoginForm/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LoginForm = props => {
+  console.log({ props });
+  return (
+    <form onSubmit={props.onSubmit}>
+      <div className="field">
+        <label htmlFor="username">Username</label>
+        <input
+          type="text"
+          id="username"
+          name="username"
+          placeholder="Username"
+          value={props.username}
+          onChange={props.onChange}
+          required
+        />
+      </div>
+      <div className="field">
+        <label htmlFor="password">Password</label>
+        <input
+          type="password"
+          id="password"
+          name="password"
+          placeholder="Password"
+          value={props.password}
+          onChange={props.onChange}
+          required
+        />
+      </div>
+      <button type="submit">Login</button>
+    </form>
+  );
+};
+
+LoginForm.propTypes = {
+  username: PropTypes.string.isRequired,
+  password: PropTypes.string.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default LoginForm;

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/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import LoginForm from 'components/LoginForm';
+
+/* eslint-disable react/prefer-stateless-function */
+export default class LoginPage extends React.PureComponent {
+  state = {
+    username: '',
+    password: '',
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    console.log('Submitted: ', this.state);
+  };
+
+  handleChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const { username, password } = this.state;
+    return (
+      <LoginForm
+        username={username}
+        password={password}
+        onSubmit={this.handleSubmit}
+        onChange={this.handleChange}
+      />
+    );
+  }
+}