Picking a username in ILAG with a capital letter fails unpleasantly

[ara4n]

You get a nasty error telling you to change the username to be lowercase in a very cryptic manner. I thought we squashed case to lowercase on the server at registration these days?

[ara4n]

[pafcu]

Related: #5434

[lampholder]

http://jsfiddle.net/5ocu2cqk/20/ for the win!

We should really have microcopy on these fields too, to explain what how a username is used and to lay out the restrictions before a user starts trying to type capitals/Chinese/punctuation/whatever

[lukebarnard1]

Yep, I'm with @lampholder on this one - we already automatically set the display name to the local part, let's kill two birds here and use the fiddle but word it for the user.

I suppose we could handle characters outside of [a-z0-9=_-./] by replacing them with some character? Maybe "-" or "_"?

[turt2live]

With /app this is slightly different now: It automatically lowercases your username for you and happily tries to register it, however the bright red warning about invalid characters is still there.

[lukebarnard1]

It automatically lowercases your username for you

We definitely need to feed this back to the user before they register myusernameisawesome when they thought they were getting MyUsernameIsAWESOME.

The solution above does this.

[turt2live]

@lampholder is cloning the fiddle in #5833 (comment) the expected outcome for this issue?

[lampholder]

I loved this at the time, now I think that there's probably a generally accepted best practice for field validation that we shoudl follow rather than (potentially) surprising people with their keypresses not appearing.

Let's get a designer's opinion: @nadonomy, what do you think?

[nadonomy]

We should definitely avoid swallowing characters (as per the jsfiddle) and silently modifying case server side (to avoid situations like this).

Looking at the current ILAG behaviour on /develop there's a few tweaks we can make to make this feel better:

• Make the error message way more verbose:
  • Only use lower case letters, numbers and '=_-./'
  • (instead of: Username invalid: User ID can only contain characters a-z, 0-9, or '=_-./')
• Stop the modal jiggling size when validating input
  • Instead of using the spinner, I'd just update the feedback underneath to display 'Checking...' in the normal body text colour; your eye knows to expect to see stuff there
• Make the error messages consistent
  • I assume they're coming from different places (client/server?) but e.g. entering # yields 'User names may only contain letters, numbers, dots, hyphens and underscores.' instead of the error message above

[turt2live]

Fixed by matrix-org/matrix-react-sdk#2351