Initial git

app/components/Login.jsx

@@ -0,0 +1,212 @@
+// - Import external components
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { NavLink, withRouter } from 'react-router-dom'
+import { push } from 'react-router-redux'
+import Paper from 'material-ui/Paper'
+import TextField from 'material-ui/TextField'
+import RaisedButton from 'material-ui/RaisedButton'
+import FlatButton from 'material-ui/FlatButton'
+
+// - Import actions
+import * as authorizeActions from 'authorizeActions'
+
+
+// - Create Login component class
+export class Login extends Component {
+
+  /**
+   * Component constructor
+   * @param  {object} props is an object properties of component
+   */
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      emailInput: '',
+      emailInputError: '',
+      passwordInput: '',
+      passwordInputError: '',
+
+
+    }
+    // Binding function to `this`
+    this.handleForm = this.handleForm.bind(this)
+
+  }
+
+  /**
+   * Handle data on input change
+   * @param  {event} evt is an event of inputs of element on change
+   */
+  handleInputChange = (evt) => {
+    const target = evt.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+    this.setState({
+      [name]: value
+    });
+
+
+    switch (name) {
+      case 'emailInput':
+        this.setState({
+          emailInputError: ''
+        })
+        break
+      case 'passwordInput':
+        this.setState({
+          confirmInputError: '',
+          passwordInputError: ''
+        })
+
+        break;
+      default:
+
+    }
+  }
+
+  /**
+   * Handle register form
+   */
+  handleForm = () => {
+
+    var error = false
+    if (this.state.emailInput === '') {
+      this.setState({
+        emailInputError: 'This field is required'
+      })
+      error = true
+
+    }
+    if (this.state.passwordInput === '') {
+      this.setState({
+        passwordInputError: 'This field is required'
+      })
+      error = true
+
+    }
+
+    if (!error) {
+      this.props.login(
+        this.state.emailInput,
+        this.state.passwordInput
+      )
+    }
+
+  }
+
+
+  /**
+   * Reneder component DOM
+   * @return {react element} return the DOM which rendered by component
+   */
+  render() {
+
+    const paperStyle = {
+      minHeight: 370,
+      width: 450,
+      margin: 20,
+      textAlign: 'center',
+      display: 'block',
+      margin: "auto"
+    };
+    return (
+      <form>
+
+        <h1 style={{
+          textAlign: "center",
+          padding: "20px",
+          fontSize: "30px",
+          fontWeight: 500,
+          lineHeight: "32px",
+          margin: "auto",
+          color: "rgba(138, 148, 138, 0.2)"
+        }}>Green</h1>
+
+        <div className="animate-bottom">
+          <Paper style={paperStyle} zDepth={1} rounded={false} >
+            <div style={{ padding: "48px 40px 36px" }}>
+              <div style={{
+                paddingLeft: "40px",
+                paddingRight: "40px"
+              }}>
+
+                <h2 style={{
+                  textAlign: "left",
+                  paddingTop: "16px",
+                  fontSize: "24px",
+                  fontWeight: 400,
+                  lineHeight: "32px",
+                  margin: 0
+                }}>Sign in</h2>
+              </div>
+
+              <TextField
+                onChange={this.handleInputChange}
+                errorText={this.state.emailInputError}
+                name="emailInput"
+                floatingLabelStyle={{ fontSize: "15px" }}
+                floatingLabelText="Email"
+                type="email"
+                tabIndex={1}
+              /><br />
+              <TextField
+                onChange={this.handleInputChange}
+                errorText={this.state.passwordInputError}
+                name="passwordInput"
+                floatingLabelStyle={{ fontSize: "15px" }}
+                floatingLabelText="Password"
+                type="password"
+                tabIndex={2}
+              /><br />
+              <br />
+              <br />
+              <div className="login__button-box">
+                <div>
+                  <FlatButton label="Create an account" onClick={this.props.signupPage} tabIndex={4} />
+                </div>
+                <div >
+                  <RaisedButton label="Login" primary={true} onClick={this.handleForm} tabIndex={3} />
+                </div>
+              </div>
+
+            </div>
+          </Paper>
+        </div>
+      </form>
+    )
+  }
+}
+
+/**
+ * Map dispatch to props
+ * @param  {func} dispatch is the function to dispatch action to reducers
+ * @param  {object} ownProps is the props belong to component
+ * @return {object}          props of component
+ */
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    login: (username, password) => {
+      dispatch(authorizeActions.dbLogin(username, password))
+    },
+    signupPage: () => {
+      dispatch(push("/signup"))
+    }
+  }
+}
+
+/**
+ * Map state to props
+ * @param  {object} state is the obeject from redux store
+ * @param  {object} ownProps is the props belong to component
+ * @return {object}          props of component
+ */
+const mapStateToProps = (state, ownProps) => {
+  return {
+
+  }
+}
+
+// - Connect component to redux store
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login))