feat(login): login page and progress on login form

Author: patrickocoffeyo

src/App.js

@@ -7,13 +7,16 @@ import React, { Fragment } from 'react';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { CssBaseline } from '@material-ui/core';
 
-import { Home } from './pages';
+import { Home, Login } from './pages';
 
 const App = () => (
   <Fragment>
     <CssBaseline />
     <Router>
-      <Route exact path="/" component={Home} />
+      <Fragment>
+        <Route exact path="/" component={Home} />
+        <Route path="/login" component={Login} />
+      </Fragment>
     </Router>
   </Fragment>
 );

src/components/LoginForm/LoginForm.js

@@ -0,0 +1,83 @@
+/**
+ * @file LoginForm.js
+ * Exports a component that allows users to log into EditVR.
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TextField, Button, withStyles } from '@material-ui/core';
+
+import LoginFormStyles from './LoginForm.style';
+
+class LoginForm extends Component {
+  static propTypes = {
+    classes: PropTypes.shape({
+      textField: PropTypes.string.isRequired,
+      button: PropTypes.string.isRequired
+    }).isRequired
+  };
+
+  state = {
+    username: null,
+    password: null,
+    apiLoading: false,
+    apiMessage: null
+  };
+
+  /**
+   * Handles field update action.
+   *
+   * @param {object} event - Field update event.
+   */
+  handleFieldUpdate = event => {
+    const state = {};
+    state[event.target.id] = event.target.value;
+    this.setState(state);
+  };
+
+  /**
+   * Handles a login form submit action.
+   *
+   * @param {object} event - Submit event object.
+   */
+  handleSubmit = event => {};
+
+  /**
+   * {@inheretdoc}
+   */
+  render() {
+    const { classes } = this.props;
+    const { apiLoading, apiMessage } = this.state;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <TextField
+          id="username"
+          label="Username"
+          type="text"
+          required
+          onChange={this.handleFieldUpdate}
+          className={classes.textField}
+        />
+        <TextField
+          id="password"
+          label="Password"
+          type="password"
+          required
+          onChange={this.handleFieldUpdate}
+          className={classes.textField}
+        />
+        <Button
+          variant="raised"
+          color="primary"
+          type="submit"
+          className={classes.button}
+        >
+          Log In
+        </Button>
+      </form>
+    );
+  }
+}
+
+export default withStyles(LoginFormStyles)(LoginForm);

src/components/LoginForm/LoginForm.style.js

@@ -0,0 +1,15 @@
+/**
+ * @file LoginForm.style.js
+ * Exports LoginForm component styles.
+ */
+
+export default theme => ({
+  textField: {
+    width: '100%',
+    marginTop: `${theme.spacing.unit * 2}px`
+  },
+  button: {
+    marginTop: `${theme.spacing.unit * 3}px`,
+    marginRight: theme.spacing.unit
+  }
+});

src/components/index.js

@@ -0,0 +1,8 @@
+/**
+ * @file index.js
+ * Exports all components.
+ */
+
+import LoginForm from './LoginForm/LoginForm';
+
+export { LoginForm };

src/layouts/Footer.style.js

@@ -15,12 +15,17 @@ export default () => ({
     position: 'relative'
   },
   logo: {
-    width: '230px'
+    maxWidth: '230px',
+    width: '100%'
   },
   text: {
     color: 'rgba(255,255,255,.5)',
-    left: '86px',
-    top: '-1px',
-    position: 'absolute'
+    marginBottom: '10px'
+  },
+  '@media (min-width: 380px)': {
+    text: {
+      marginLeft: '86px',
+      marginBottom: '-20px'
+    }
   }
 });

src/layouts/Layout.style.js

@@ -12,7 +12,7 @@ export default theme => ({
     position: 'absolute',
     overflowX: 'scroll'
   },
-  centerColumn: {
+  thinWrapper: {
     padding: '0 1rem',
     maxWidth: 600,
     margin: '0 auto',

src/layouts/HomeLayout.js renamed to src/layouts/ThinLayout.js

@@ -1,6 +1,6 @@
 /**
- * @file Home.js
- * Exports a React component that renders EditVR's home page layout.
+ * @file ThinLayout.js
+ * Exports a React component that renders EditVR's thin layout.
  */
 
 import React from 'react';
@@ -12,28 +12,26 @@ import Footer from './Footer';
 import Header from './Header';
 import LayoutStyles from './Layout.style';
 
-const Home = ({ children, classes }) => (
+const ThinLayout = ({ children, classes }) => (
   <div id="layout__wrapper" className={classes.wrapper}>
-    <div id="layout__center" className={classes.centerColumn}>
+    <div id="layout__thin-wrapper" className={classes.thinWrapper}>
       <Header />
       {children}
       <Footer />
     </div>
   </div>
 );
 
-Home.propTypes = {
+ThinLayout.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.shape({
     wrapper: PropTypes.string.isRequired,
-    centerColumn: PropTypes.string.isRequired
+    thinWrapper: PropTypes.string.isRequired
   }).isRequired
 };
 
-Home.defaultProps = {
+ThinLayout.defaultProps = {
   children: null
 };
 
-const HomeLayout = ThemeProvider(withStyles(LayoutStyles)(Home));
-
-export { HomeLayout };
+export default ThemeProvider(withStyles(LayoutStyles)(ThinLayout));

src/layouts/HomeLayout.test.js renamed to src/layouts/ThinLayout.test.js

@@ -1,21 +1,21 @@
 /**
- * @file HomeLayout.test.js
- * Contains tests for HomeLayout.js.
+ * @file ThinLayout.test.js
+ * Contains tests for ThinLayout.js.
  */
 
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import { HomeLayout } from './index';
+import { ThinLayout } from './index';
 
-describe('<HomeLayout />', () => {
+describe('<ThinLayout />', () => {
   it('Matches its snapshot', () => {
     expect(
       renderer
         .create(
-          <HomeLayout>
+          <ThinLayout>
             <div>child</div>
-          </HomeLayout>
+          </ThinLayout>
         )
         .toJSON()
     ).toMatchSnapshot();

src/layouts/__snapshots__/ThinLayout.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ThinLayout /> Matches its snapshot 1`] = `
+<div
+  className="ThinLayout-wrapper-1"
+  id="layout__wrapper"
+>
+  <div
+    className={undefined}
+    id="layout__thin-wrapper"
+  >
+    <header
+      className="Header-wrapper-3"
+    >
+      <img
+        alt="EditVR logo"
+        className="Header-logo-4"
+        src="editvr-logo.svg"
+      />
+    </header>
+    <div>
+      child
+    </div>
+    <footer
+      className="Footer-wrapper-5"
+    >
+      <div
+        className="Footer-elements-6"
+      >
+        <a
+          href="https://fourkitchens.com"
+        >
+          <p
+            className="MuiTypography-root-9 MuiTypography-body1-18 Footer-text-8"
+            type="body1"
+          >
+            EditVR is a product of
+          </p>
+          <img
+            alt="Four Kitchens"
+            className="Footer-logo-7"
+            src="4k-logo-reversed.svg"
+          />
+        </a>
+      </div>
+    </footer>
+  </div>
+</div>
+`;

src/layouts/index.js

@@ -3,4 +3,6 @@
  * Exports all layout components.
  */
 
-export * from './HomeLayout';
+import ThinLayout from './ThinLayout';
+
+export { ThinLayout };

src/pages/Home.js

@@ -0,0 +1,42 @@
+/**
+ * @file Home.js
+ * Exports a React component that renders EditVR's home page.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Button, withStyles } from '@material-ui/core';
+import { NavLink } from 'react-router-dom';
+
+import { ThinLayout } from '../../layouts';
+import HomeStyles from './Home.style';
+
+const Home = ({ classes }) => (
+  <ThinLayout>
+    <Typography type="body1">
+      <b>EditVR is a free, open-source WebVR editor</b> that lets you produce
+      interactive and affordable 360 tours and VR stories. EditVR makes
+      immersive experiences available to everyone using devices they already
+      own. Nothing to buy, download, or install!
+    </Typography>
+
+    <NavLink to="/login">
+      <Button className={classes.button} variant="raised" color="primary">
+        Login
+      </Button>
+    </NavLink>
+    <NavLink to="/register">
+      <Button className={classes.button} variant="raised" color="primary">
+        Register
+      </Button>
+    </NavLink>
+  </ThinLayout>
+);
+
+Home.propTypes = {
+  classes: PropTypes.shape({
+    button: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default withStyles(HomeStyles)(Home);

src/pages/Home/Home.js

@@ -0,0 +1,11 @@
+/**
+ * @file Home.style.js
+ * Exports Home component styles.
+ */
+
+export default theme => ({
+  button: {
+    marginTop: `${theme.spacing.unit * 3}px`,
+    marginRight: theme.spacing.unit
+  }
+});

src/pages/Home/Home.style.js

@@ -0,0 +1,19 @@
+/**
+ * @file Login.js
+ * Exports a React component that renders EditVR's login.
+ */
+
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { LoginForm } from '../../components';
+import { ThinLayout } from '../../layouts';
+
+const Login = () => (
+  <ThinLayout>
+    <Typography variant="headline">Log into EditVR</Typography>
+    <LoginForm />
+  </ThinLayout>
+);
+
+export default Login;

src/pages/Login/Login.js

@@ -3,4 +3,7 @@
  * Exports all page components.
  */
 
-export * from './Home';
+import Home from './Home/Home';
+import Login from './Login/Login';
+
+export { Home, Login };