Update forms to use custom Input ui component

[stephanethomas]

This pull request fixes https://github.com/Automattic/delphin/issues/249 to make the forms on the Login, Signup, and Verify User pages more consistent with the rest of the forms. More specifically, it makes sure the custom <Input> component is used in every appropriate places so validation errors are correctly displayed. This pull request also updates the code to address several React warnings that were generated by the redux-form library.

Testing instructions

You should keep an eye on your browser's console for possible warning and error messages:

1. Run git checkout update/forms and start your server, or open a live branch
2. Open the Search page
3. Proceed until the end of the checkout
4. Check that no warning or error (except the one mentioned below) is thrown in the console
5. Check that everything works as before

Additional notes

Note the following warning is still displayed in the console when inline validation is triggered:

warning.js:44 Warning: Unknown prop `xmlns` on <svg> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
  in svg
  in Gridicon (created by Input)

This is something that has been addressed in facebook/react#6471 and that will be available in React 15.3.0.

Reviews

• Code
• Product
• Tests

@Automattic/sdev-feed

[drewblaisdell]

What is the purpose of removing asyncValidating from this list?

[stephanethomas]

That's because it's useless since it's not part of the list of props that redux-form provides inside the fields object.

[drewblaisdell]

Code 👍

[fabianapsimoes]

Product 👍

[Tug]

It seems v6 won't fix this, it just provides a cleaner syntax to create input components.

[Tug]

Oh ok it has this input prop with all the valid properties