STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.

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

@@ -26,89 +26,74 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(
-  Form.create({ name: "sign_in" })(function SignInComponent({
-    form,
-    emailSignInStart,
-    currentUser,
-    signInError
-  }) {
-    const apolloClient = useApolloClient();
+)(function SignInComponent({ emailSignInStart, currentUser, signInError }) {
+  const apolloClient = useApolloClient();
 
-    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.
+  const handleFinish = values => {
+    console.log("Login");
+
+    const { email, password } = values;
+    emailSignInStart(email, password);
+    //Try to do the login using a saga here.
+  };
+
+  if (currentUser.authorized === true) {
+    apolloClient
+      .mutate({
+        mutation: UPSERT_USER,
+        variables: {
+          authEmail: currentUser.email,
+          authToken: currentUser.uid
         }
+      })
+      .then()
+      .catch(error => {
+        console.log("User login upsert error.", error);
       });
-    };
+  }
 
-    if (currentUser.authorized === true) {
-      apolloClient
-        .mutate({
-          mutation: UPSERT_USER,
-          variables: {
-            authEmail: currentUser.email,
-            authToken: currentUser.uid
-          }
-        })
-        .then()
-        .catch(error => {
-          console.log("User login upsert error.", error);
-        });
-    }
+  return (
+    <div>
+      {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
 
-    const { getFieldDecorator } = form;
-    return (
-      <div>
-        {currentUser.authorized === true ? <Redirect to="/manage?" /> : null}
+      <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
 
-        <img src={Logo} height="100" width="100" alt="Bodyshop.app" />
+      <Form onFinish={handleFinish}>
+        <Form.Item
+          name="email"
+          label="E-mail"
+          rules={[
+            {
+              //TODO Ensure using translations.
+              type: "email",
+              message: "Please enter a valid email."
+            },
+            {
+              required: true,
+              message: "Please your email."
+            }
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          rules={[{ required: true, message: "Please enter your password." }]}
+        >
+          <Input
+            prefix={<LockFilled style={{ color: "rgba(0,0,0,.25)" }} />}
+            type="password"
+            placeholder="Password"
+          />
+        </Form.Item>
 
-        <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={<LockFilled 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>
-    );
-  })
-);
+        <div>Forgot password</div>
+        <Button type="primary" htmlType="submit">
+          Log in
+        </Button>
+
+        {signInError ? <div>{signInError.message}</div> : null}
+      </Form>
+    </div>
+  );
+});