Login token is retrieved but not stored.

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

@@ -1,76 +1,77 @@
 import React from "react";
-
-import FormInput from "../form-input/form-input.component";
-import CustomButton from "../custom-button/custom-button.component";
-
-import { auth, signInWithGoogle } from "../../firebase/firebase.utils";
-
-//Styling imports
-import { Typography } from "antd";
-import { Input } from "antd";
-import { Button } from "antd";
+import { auth } from "../../firebase/firebase.utils";
+import { Form, Icon, Input, Button, Alert } from "antd";
 
 class SignIn extends React.Component {
-  constructor(props) {
-    super(props);
-
+  constructor() {
+    super();
     this.state = {
-      email: "",
-      password: ""
+      errorMessage: null
     };
   }
 
-  handleSubmit = async event => {
-    event.preventDefault();
-
-    const { email, password } = this.state;
-
-    try {
-      await auth.signInWithEmailAndPassword(email, password);
-      this.setState({ email: "", password: "" });
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  handleChange = event => {
-    const { value, name } = event.target;
-
-    this.setState({ [name]: value });
+  handleSubmit = e => {
+    e.preventDefault();
+    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 });
+        }
+      }
+    });
   };
 
   render() {
+    const { getFieldDecorator } = this.props.form;
+    const { errorMessage } = this.state;
     return (
-      <div className="sign-in">
-        <Typography.Title>Sign In</Typography.Title>
-        <form onSubmit={this.handleSubmit}>
-          <Input
-            placeholder="Email"
-            name="Email"
-            type="email"
-            handleChange={this.handleChange}
-            value={this.state.email}
-            label="email"
-            required
-          />
-          <Input.Password
-            name="password"
-            type="password"
-            value={this.state.password}
-            handleChange={this.handleChange}
-            label="password"
-            required
-          />
-          <div className="buttons">
-            <Button type="submit"> Sign in </Button>
-            <Button onClick={signInWithGoogle}>
-              Sign in with Google
-            </Button>
-          </div>
-        </form>
-      </div>
+      <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>
     );
   }
 }
-
-export default SignIn;
+export default Form.create({ name: "sign_in" })(SignIn);