Invites: Add invites create validation methods

[lezama]

Closes #2844

• Adds actions and stores for invites creation validation.
• Hooks validation to "Usernames or Emails" tokens.

HOW TO TEST

• Checkout add/invites-create-validation-action-store
• Go to http://calypso.dev:3000/people/new/wpcom_site
• Play with the Usernames or Emails field :)

[ebinnion]

I don't think this matches with the API. The validation endpoint doesn't return errors for usernames or emails that don't validate. The endpoint returns an object that looks a bit like:

{
  errors: [ WP_Error objects ],
  success: [ user1, useremail@test.com ]
}

[lezama]

😄 this is still in progress, I need to iterate on invites-create-validation.js that I copied from invites-accept-validation.js

[ebinnion]

Just giving early feedback 😜

[ebinnion]

#3058 is merged, which might be of interest if we want to go ahead and tie that UI into the validation that you're working on here.

[ebinnion]

While this test works, I don't think it matches what we'll want from the API. On an error, we'll probably receive an array of objects, where each object contains the invitee as well as the error message. That currently looks like:

{
    "errors": {
        "test@gmail.com": {
            "errors": {
                "form-error-username-or-email": [
                    "User already has a role on your site."
                ]
            },
            "error_data": []
        }
    },
    "success": []
}

We could simplify errors a bit to be something like this perhaps:

errors: [
  {
    invitee: "test@gmail.com",
    error: "form-error-username-or-email",
    error_message: "User already has a role on your site."
  }
]

[ebinnion]

I left a couple of comments. I had issues with getting an error to show properly. When I attempted to invite someone that was already a user on my site, I got a green "successful" token instead of a red one.

Besides that, this feels pretty close.

[lezama]

When I attempted to invite someone that was already a user on my site, I got a green "successful" token instead of a red one

that's probably an API error 😞

[ebinnion]

I rebased the PR to fix a merge conflict and have updated the PR to fix an issue where validation was not happening because the site ID wasn't being sent to the API.

Of note, I also removed the is-success status when an invite is validated successfully. After a chat with @rickybanister it looks like we're going to just show the $gray-dark color for successful invites and $gray while validating. That is currently being worked on in #3195.

Note: Since I rebased against master, the new styles for isBorderless are now being shown. This also means that the error state is not currently visible. But, you can verify that the is-error class is being applied to the token.

@lezama – I think this is ready for another review. If you're fine with my changes, let's 🚢.