Trims trailing spaces from email address

[gutofoletto]

Changes the onEmailChange method to trim spaces from the email address on SignIn form as requested on opencollective/opencollective#1701. Also, added a cypress test to verify the 'feature'.

This is to prevent users from getting validation errors when copying and pasting from password managers

If there is anything that could be improved, let me know :D

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[albarnaz]

What about test the trim, changing the field and check if has no spaces?

[gutofoletto]

done!

[znarf]

@gutofoletto Thank you so much looks great. I re-triggered CI because it was failing, let's see.

[Betree]

Why not handling the trim at the lowest level - in the SignIn component? There are places in the code where we may want to use the SignIn component outside of the SignInOrJoinFree.
It would also make it testable on our styleguide page.

Otherwise the feature looks good to me, it works as intended. We should be aware that users with an email like "my email address"@website.com (it's a valid address) will have troubles to input their addresses but they can still do it and most websites actually consider this as invalid (such users are looking for troubles anyway).

Thanks for writing cypress tests here, much appreciated!

[gutofoletto]

@Betree I just thought it would be better to transform the string in the same place the state is being set. But I could easily move the trim function to the SignIn component and trim target.value. It makes sense to have that logic encapsulated inside the component.

Don't know if I got it right. But, yeah...that would just trim the spaces from both ends. I don't know if an email like "my email address@provider.com" should be valid though. Perhaps we could use a regex instead of the trim() function. What do you think?

Thanks for the feedback :D

[Betree]

@gutofoletto I like the idea of trimming the target.value. Trim is great, there's no perfect Regex for emails anyway so the simpler the better :)

Unfortunatelly "my email address"@provider.com is indeed valid though providers like GMail probably don't allow it:

space and special characters "(),:;<>@[] are allowed with restrictions (they are only allowed inside a quoted string, as described in the paragraph below, and in addition, a backslash or double-quote must be preceded by a backslash);

But with the fix you've made they could still add it by playing a little bit with the input, so I'm good with the solution you proposed. Again, such users would be looking for troubles anyway 😉

[znarf]

@gutofoletto Could you please rebase the branch against master? It should fix the circleci failure.

Sorry for that! 🙏

[gutofoletto]

Sure! No problem! I will do that ASAP ;)