BREAKING CHANGES: Converted to use Redux stores. Login now working using Redux.

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -1,76 +1,97 @@
+import { Button, Form, Icon, Input } from "antd";
 import React from "react";
-import { auth } from "../../firebase/firebase.utils";
-import { Form, Icon, Input, Button, Alert } from "antd";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import Logo from "../../assets/logo240.png";
+import { emailSignInStart } from "../../redux/user/user.actions";
+import {
+  selectCurrentUser,
+  selectSignInError
+} from "../../redux/user/user.selectors";
+import { Redirect } from "react-router-dom";
 
-class SignInForm extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      errorMessage: null
-    };
-  }
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  signInError: selectSignInError
+});
 
-  handleSubmit = e => {
-    e.preventDefault();
+const mapDispatchToProps = dispatch => ({
+  emailSignInStart: (email, password) =>
+    dispatch(emailSignInStart({ email, password }))
+});
 
-    this.props.form.validateFields(async (err, values) => {
-      if (!err) {
-        const { email, password } = values;
-        try {
-          await auth.signInWithEmailAndPassword(email, password);
-
-          this.props.form.resetFields();
-        } catch (error) {
-          this.setState({ ...this.state, errorMessage: error.message });
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(
+  Form.create({ name: "sign_in" })(function SignInComponent({
+    form,
+    emailSignInStart,
+    currentUser,
+    signInError
+  }) {
+    const handleSubmit = e => {
+      e.preventDefault();
+      form.validateFields(async (err, values) => {
+        if (!err) {
+          const { email, password } = values;
+          emailSignInStart(email, password);
+          //Try to do the login using a saga here.
         }
-      }
-    });
-  };
-
-  render() {
-    const { getFieldDecorator } = this.props.form;
-    const { errorMessage } = this.state;
+      });
+    };
 
+    console.log("currentUser", currentUser);
+    const { getFieldDecorator } = form;
     return (
-      <Form onSubmit={this.handleSubmit} className="login-form">
-        <Form.Item label="E-mail">
-          {getFieldDecorator("email", {
-            rules: [
-              {
-                type: "email",
-                message: "Please enter a valid email."
-              },
-              {
-                required: true,
-                message: "Please your email."
-              }
-            ]
-          })(<Input />)}
-        </Form.Item>
-        <Form.Item>
-          {getFieldDecorator("password", {
-            rules: [{ required: true, message: "Please enter your password." }]
-          })(
-            <Input
-              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
-              type="password"
-              placeholder="Password"
-            />
-          )}
-        </Form.Item>
-        <Form.Item>
-          <div className="login-form-forgot">Forgot password</div>
-          <Button
-            type="primary"
-            htmlType="submit"
-            className="login-form-button"
-          >
-            Log in
-          </Button>
-        </Form.Item>
-        {errorMessage ? <Alert message={errorMessage} type="error" /> : null}
-      </Form>
+      <div>
+        {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
+
+        <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
+
+        <Form onSubmit={handleSubmit} className="login-form">
+          <Form.Item label="E-mail">
+            {getFieldDecorator("email", {
+              rules: [
+                {
+                  type: "email",
+                  message: "Please enter a valid email."
+                },
+                {
+                  required: true,
+                  message: "Please your email."
+                }
+              ]
+            })(<Input />)}
+          </Form.Item>
+          <Form.Item>
+            {getFieldDecorator("password", {
+              rules: [
+                { required: true, message: "Please enter your password." }
+              ]
+            })(
+              <Input
+                prefix={
+                  <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
+                }
+                type="password"
+                placeholder="Password"
+              />
+            )}
+          </Form.Item>
+          <Form.Item>
+            <div className="login-form-forgot">Forgot password</div>
+            <Button
+              type="primary"
+              htmlType="submit"
+              className="login-form-button"
+            >
+              Log in
+            </Button>
+          </Form.Item>
+          {signInError ? <div>{signInError.message}</div> : null}
+        </Form>
+      </div>
     );
-  }
-}
-export default Form.create({ name: "sign_in" })(SignInForm);
+  })
+);