Amplify-js: User friendly invalid username error

[finnbear]

Describe the bug
When a username does not meet formatting requirements, for example by having spaces in it, the following error message is displayed to the user

1 validation error detected: Value at 'username' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+

To Reproduce
Steps to reproduce the behavior:

1. Go to user pool sign up page
2. Type a valid email and password, along with a username that includes spaces

Expected behavior
A user friendly error message should be displayed

Username cannot contain spaces

All possible errors should have a user friendly message. The regular expression message should be reserved for documentation.

[kennu]

I see the same problem when a user tries to sign in and accidentally types a trailing space after their email address:

2 validation errors detected: Value '[email protected] ' at 'userName' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+; Value '[email protected] ' at 'userAlias' failed to satisfy constraint: Member must satisfy regular expression pattern: [\p{L}\p{M}\p{S}\p{N}\p{P}]+

My proposal to make it better:

1. Make the error message friendlier as suggested above.
2. Automatically trim leading and trailing whitespaces away from usernames and emails by default.
3. Maybe add an option to NOT trim whitespace if someone really needs it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[haverchuck]

@finnbear @kennu We are merging a change to render a more human readable error. Trimming the input is an appropriate change as well, but I would rather roll that up into a larger change.

[Graham-Stein]

Describe the bug
I am still seeing the behaviour described by kennu when a user leaves a trailing space after their user name.
To Reproduce
Attempt to log in using Amplify UI with a trailing space after username.
Desired behaviour
Present the user with a more user friendly error message.