PLT-2765 Limit username UI to 22 characters (#2918)

* Shortened username length to 22 characters

* Update user_settings_general.jsx

* Added username requirements to account settings page

* Switched to double quotes

to escape ' in JSX, must use double quotes

* Update en.json

* Update user_settings_general.jsx

* Update es.json

* Update fr.json

* Update ja.json

* Update pt.json

* Added missing {

1 files changed, 3 insertions, 3 deletions

diff --git a/webapp/components/user_settings/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general.jsx
index 718ad5ed8..b48026a39 100644
--- a/webapp/components/user_settings/user_settings_general.jsx
+++ b/webapp/components/user_settings/user_settings_general.jsx
@@ -23,7 +23,7 @@ const holders = defineMessages({
     },
     usernameRestrictions: {
         id: 'user.settings.general.usernameRestrictions',
-        defaultMessage: "Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'."
+        defaultMessage: "Pick something easy for teammates to recognize and recall. Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-', and '_'"
     },
     validEmail: {
         id: 'user.settings.general.validEmail',
@@ -108,7 +108,7 @@ class UserSettingsGeneralTab extends React.Component {
             this.setState({clientError: formatMessage(holders.usernameReserved)});
             return;
         } else if (usernameError) {
-            this.setState({clientError: formatMessage(holders.usernameRestrictions, {min: Constants.MIN_USERNAME_LENGTH, max: Constants.MAX_USERNAME_LENGTH})});
+            this.setState({clientError: formatMessage(holders.usernameRestrictions, {min: Constants.MIN_USERNAME_LENGTH}, {max: Constants.MAX_USERNAME_LENGTH})});
             return;
         }
 
@@ -773,7 +773,7 @@ class UserSettingsGeneralTab extends React.Component {
                     <span>
                         <FormattedMessage
                             id='user.settings.general.usernameInfo'
-                            defaultMessage='Pick something easy for teammates to recognize and recall.'
+                            defaultMessage="Pick something easy for teammates to recognize and recall. Username must begin with a letter, and contain between {Constants.MIN_USERNAME_LENGTH to {Constants.MAX_USERNAME_LENGTH} lowercase characters made up of numbers, letters, and the symbols '.', '-', and '_'"
                         />
                     </span>
                 );