From 406866ffd5f6cb4167c38bcb903d4adf07b086ae Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 6 Jun 2017 10:55:09 +0300
Subject: [PATCH] Use InputField in login and signup forms

---
 src/containers/LoginForm/LoginForm.js         |  97 +++++------
 .../__snapshots__/LoginForm.test.js.snap      |   8 +-
 src/containers/SignupForm/SignupForm.js       | 163 ++++++++----------
 .../__snapshots__/SignupForm.test.js.snap     |  16 +-
 4 files changed, 133 insertions(+), 151 deletions(-)

diff --git a/src/containers/LoginForm/LoginForm.js b/src/containers/LoginForm/LoginForm.js
index 2e1d8a6f..7ee2fc9b 100644
--- a/src/containers/LoginForm/LoginForm.js
+++ b/src/containers/LoginForm/LoginForm.js
@@ -1,65 +1,58 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { InputField, Button } from '../../components';
 import * as validators from '../../util/validators';
-import { enhancedField } from '../../util/forms';
 
 import css from './LoginForm.css';
 
-class LoginFormComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.EnhancedInput = enhancedField('input');
-  }
-  render() {
-    const { handleSubmit, pristine, submitting, inProgress, intl } = this.props;
+const LoginFormComponent = props => {
+  const { handleSubmit, pristine, submitting, inProgress, intl } = props;
 
-    // email
-    const emailLabel = intl.formatMessage({
-      id: 'LoginForm.emailLabel',
-    });
-    const emailRequiredMessage = intl.formatMessage({
-      id: 'LoginForm.emailRequired',
-    });
-    const emailRequired = validators.required(emailRequiredMessage);
+  // email
+  const emailLabel = intl.formatMessage({
+    id: 'LoginForm.emailLabel',
+  });
+  const emailRequiredMessage = intl.formatMessage({
+    id: 'LoginForm.emailRequired',
+  });
+  const emailRequired = validators.required(emailRequiredMessage);
 
-    // password
-    const passwordLabel = intl.formatMessage({
-      id: 'LoginForm.passwordLabel',
-    });
-    const passwordRequiredMessage = intl.formatMessage({
-      id: 'LoginForm.passwordRequired',
-    });
-    const passwordRequired = validators.required(passwordRequiredMessage);
+  // password
+  const passwordLabel = intl.formatMessage({
+    id: 'LoginForm.passwordLabel',
+  });
+  const passwordRequiredMessage = intl.formatMessage({
+    id: 'LoginForm.passwordRequired',
+  });
+  const passwordRequired = validators.required(passwordRequiredMessage);
 
-    const submitDisabled = pristine || submitting || inProgress;
-    return (
-      <form className={css.form} onSubmit={handleSubmit}>
-        <div>
-          <Field
-            name="email"
-            type="email"
-            label={emailLabel}
-            component={this.EnhancedInput}
-            validate={emailRequired}
-          />
-          <Field
-            name="password"
-            type="password"
-            label={passwordLabel}
-            component={this.EnhancedInput}
-            validate={passwordRequired}
-          />
-        </div>
-        <Button className={css.button} type="submit" disabled={submitDisabled}>
-          <FormattedMessage id="LoginForm.logIn" />
-        </Button>
-      </form>
-    );
-  }
-}
+  const submitDisabled = pristine || submitting || inProgress;
+  return (
+    <form className={css.form} onSubmit={handleSubmit}>
+      <div>
+        <Field
+          name="email"
+          type="email"
+          label={emailLabel}
+          component={InputField}
+          validate={emailRequired}
+        />
+        <Field
+          name="password"
+          type="password"
+          label={passwordLabel}
+          component={InputField}
+          validate={passwordRequired}
+        />
+      </div>
+      <Button className={css.button} type="submit" disabled={submitDisabled}>
+        <FormattedMessage id="LoginForm.logIn" />
+      </Button>
+    </form>
+  );
+};
 
 LoginFormComponent.defaultProps = { inProgress: false };
 
diff --git a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
index a5b7ab68..55938fe0 100644
--- a/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
+++ b/src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
@@ -6,7 +6,7 @@ exports[`LoginForm matches snapshot 1`] = `
     <div
       className="">
       <label
-        className=""
+        className={undefined}
         htmlFor="email">
         Email
       </label>
@@ -18,14 +18,14 @@ exports[`LoginForm matches snapshot 1`] = `
         onDragStart={[Function]}
         onDrop={[Function]}
         onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
         type="email"
         value="" />
     </div>
     <div
       className="">
       <label
-        className=""
+        className={undefined}
         htmlFor="password">
         Password
       </label>
@@ -37,7 +37,7 @@ exports[`LoginForm matches snapshot 1`] = `
         onDragStart={[Function]}
         onDrop={[Function]}
         onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
         type="password"
         value="" />
     </div>
diff --git a/src/containers/SignupForm/SignupForm.js b/src/containers/SignupForm/SignupForm.js
index 0e5d8133..a3b67794 100644
--- a/src/containers/SignupForm/SignupForm.js
+++ b/src/containers/SignupForm/SignupForm.js
@@ -1,107 +1,96 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
-import { Button } from '../../components';
+import { InputField, Button } from '../../components';
 import * as validators from '../../util/validators';
-import { enhancedField } from '../../util/forms';
 
 import css from './SignupForm.css';
 
-class SignupFormComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.EnhancedInput = enhancedField('input');
-    this.EnhancedFirstNameInput = enhancedField('input', {
-      rootClassName: css.firstNameRoot,
-    });
-    this.EnhancedLastNameInput = enhancedField('input', {
-      rootClassName: css.lastNameRoot,
-    });
-  }
-  render() {
-    const { handleSubmit, pristine, submitting, inProgress, intl } = this.props;
+const SignupFormComponent = props => {
+  const { handleSubmit, pristine, submitting, inProgress, intl } = props;
 
-    // email
-    const emailLabel = intl.formatMessage({
-      id: 'SignupForm.emailLabel',
-    });
-    const emailRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.emailRequired',
-    });
-    const emailRequired = validators.required(emailRequiredMessage);
+  // email
+  const emailLabel = intl.formatMessage({
+    id: 'SignupForm.emailLabel',
+  });
+  const emailRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.emailRequired',
+  });
+  const emailRequired = validators.required(emailRequiredMessage);
 
-    // password
-    const passwordLabel = intl.formatMessage({
-      id: 'SignupForm.passwordLabel',
-    });
-    const passwordRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.passwordRequired',
-    });
-    const passwordRequired = validators.required(passwordRequiredMessage);
+  // password
+  const passwordLabel = intl.formatMessage({
+    id: 'SignupForm.passwordLabel',
+  });
+  const passwordRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.passwordRequired',
+  });
+  const passwordRequired = validators.required(passwordRequiredMessage);
 
-    // firstName
-    const firstNameLabel = intl.formatMessage({
-      id: 'SignupForm.firstNameLabel',
-    });
-    const firstNameRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.firstNameRequired',
-    });
-    const firstNameRequired = validators.required(firstNameRequiredMessage);
+  // firstName
+  const firstNameLabel = intl.formatMessage({
+    id: 'SignupForm.firstNameLabel',
+  });
+  const firstNameRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.firstNameRequired',
+  });
+  const firstNameRequired = validators.required(firstNameRequiredMessage);
 
-    // lastName
-    const lastNameLabel = intl.formatMessage({
-      id: 'SignupForm.lastNameLabel',
-    });
-    const lastNameRequiredMessage = intl.formatMessage({
-      id: 'SignupForm.lastNameRequired',
-    });
-    const lastNameRequired = validators.required(lastNameRequiredMessage);
+  // lastName
+  const lastNameLabel = intl.formatMessage({
+    id: 'SignupForm.lastNameLabel',
+  });
+  const lastNameRequiredMessage = intl.formatMessage({
+    id: 'SignupForm.lastNameRequired',
+  });
+  const lastNameRequired = validators.required(lastNameRequiredMessage);
 
-    const submitDisabled = pristine || submitting || inProgress;
-    return (
-      <form className={css.root} onSubmit={handleSubmit}>
-        <div>
+  const submitDisabled = pristine || submitting || inProgress;
+  return (
+    <form className={css.root} onSubmit={handleSubmit}>
+      <div>
+        <Field
+          name="email"
+          type="email"
+          label={emailLabel}
+          validate={emailRequired}
+          component={InputField}
+        />
+        <div className={css.name}>
           <Field
-            name="email"
-            type="email"
-            label={emailLabel}
-            validate={emailRequired}
-            component={this.EnhancedInput}
+            className={css.firstNameRoot}
+            name="firstName"
+            type="text"
+            label={firstNameLabel}
+            validate={firstNameRequired}
+            component={InputField}
           />
-          <div className={css.name}>
-            <Field
-              name="firstName"
-              type="text"
-              label={firstNameLabel}
-              validate={firstNameRequired}
-              component={this.EnhancedFirstNameInput}
-            />
-            <Field
-              name="lastName"
-              type="text"
-              label={lastNameLabel}
-              validate={lastNameRequired}
-              component={this.EnhancedLastNameInput}
-            />
-          </div>
           <Field
-            name="password"
-            type="password"
-            label={passwordLabel}
-            validate={passwordRequired}
-            component={this.EnhancedInput}
+            className={css.lastNameRoot}
+            name="lastName"
+            type="text"
+            label={lastNameLabel}
+            validate={lastNameRequired}
+            component={InputField}
           />
         </div>
-        <div>
-          <Button className={css.button} type="submit" disabled={submitDisabled}>
-            <FormattedMessage id="SignupForm.signUp" />
-          </Button>
-        </div>
-      </form>
-    );
-  }
-}
+        <Field
+          name="password"
+          type="password"
+          label={passwordLabel}
+          validate={passwordRequired}
+          component={InputField}
+        />
+      </div>
+      <div>
+        <Button className={css.button} type="submit" disabled={submitDisabled}>
+          <FormattedMessage id="SignupForm.signUp" />
+        </Button>
+      </div>
+    </form>
+  );
+};
 
 SignupFormComponent.defaultProps = { inProgress: false };
 
diff --git a/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap b/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap
index 42f9f9be..caece9b1 100644
--- a/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap
+++ b/src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap
@@ -6,7 +6,7 @@ exports[`SignupForm matches snapshot 1`] = `
     <div
       className="">
       <label
-        className=""
+        className={undefined}
         htmlFor="email">
         Email
       </label>
@@ -18,7 +18,7 @@ exports[`SignupForm matches snapshot 1`] = `
         onDragStart={[Function]}
         onDrop={[Function]}
         onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
         type="email"
         value="" />
     </div>
@@ -27,7 +27,7 @@ exports[`SignupForm matches snapshot 1`] = `
       <div
         className="">
         <label
-          className=""
+          className={undefined}
           htmlFor="firstName">
           First name
         </label>
@@ -39,14 +39,14 @@ exports[`SignupForm matches snapshot 1`] = `
           onDragStart={[Function]}
           onDrop={[Function]}
           onFocus={[Function]}
-          placeholder=""
+          placeholder={null}
           type="text"
           value="" />
       </div>
       <div
         className="">
         <label
-          className=""
+          className={undefined}
           htmlFor="lastName">
           Last name
         </label>
@@ -58,7 +58,7 @@ exports[`SignupForm matches snapshot 1`] = `
           onDragStart={[Function]}
           onDrop={[Function]}
           onFocus={[Function]}
-          placeholder=""
+          placeholder={null}
           type="text"
           value="" />
       </div>
@@ -66,7 +66,7 @@ exports[`SignupForm matches snapshot 1`] = `
     <div
       className="">
       <label
-        className=""
+        className={undefined}
         htmlFor="password">
         Password
       </label>
@@ -78,7 +78,7 @@ exports[`SignupForm matches snapshot 1`] = `
         onDragStart={[Function]}
         onDrop={[Function]}
         onFocus={[Function]}
-        placeholder=""
+        placeholder={null}
         type="password"
         value="" />
     </div>