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 {

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>
                 );

webapp/i18n/en.json

@@ -1340,9 +1340,9 @@
   "user.settings.general.title": "General Settings",
   "user.settings.general.uploadImage": "Click 'Edit' to upload an image.",
   "user.settings.general.username": "Username",
-  "user.settings.general.usernameInfo": "Pick something easy for teammates to recognize and recall.",
+  "user.settings.general.usernameInfo": "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 '_'.",
   "user.settings.general.usernameReserved": "This username is reserved, please choose a new one.",
-  "user.settings.general.usernameRestrictions": "Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'.",
+  "user.settings.general.usernameRestrictions": "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 '_'.",
   "user.settings.general.validEmail": "Please enter a valid email address",
   "user.settings.general.validImage": "Only JPG or PNG images may be used for profile pictures",
   "user.settings.import_theme.cancel": "Cancel",

webapp/i18n/es.json

@@ -1340,9 +1340,7 @@
   "user.settings.general.title": "Configuración General",
   "user.settings.general.uploadImage": "Pinchar 'Editar' para subir una imagen.",
   "user.settings.general.username": "Nombre de usuario",
-  "user.settings.general.usernameInfo": "Escoje algo fácil para que tus compañeros de equipo puedan reconocerte y recordar.",
   "user.settings.general.usernameReserved": "Este nombre de usuario está reservado, por favor escoge otro",
-  "user.settings.general.usernameRestrictions": "El nombre de usuario debe empezar con una letra, y contener entre {min} a {max} caracteres en minúscula con números, lettras, y los símbolos '.', '-' y '_'.",
   "user.settings.general.validEmail": "Por favor ingresa una dirección de correo electrónico válida",
   "user.settings.general.validImage": "Sólo pueden ser utilizadas imágenes JPG o PNG en el perfil",
   "user.settings.import_theme.cancel": "Cancelar",

webapp/i18n/fr.json

@@ -1169,9 +1169,7 @@
   "user.settings.general.title": "Configuration générale",
   "user.settings.general.uploadImage": "Cliquez sur \"Modifier\" pour télécharger une image.",
   "user.settings.general.username": "Nom d'utilisateur",
-  "user.settings.general.usernameInfo": "Choisissez un nom facile à reconnaitre et à mémoriser pour les autres membres de l'équipe.",
   "user.settings.general.usernameReserved": "Ce nom est réservé, veuillez en choisir un autre.",
-  "user.settings.general.usernameRestrictions": "Les noms d'utilisateurs doivent commencer par une lettre et contenir entre {min} et {max} caractères composés de chiffres, lettres minuscules et des symboles '.', '-' et '_'",
   "user.settings.general.validEmail": "Veuillez entrer une adresse électronique valide",
   "user.settings.general.validImage": "Seules les images JPG ou PNG sont autorisées pour les photos de profil",
   "user.settings.import_theme.cancel": "Annuler",

webapp/i18n/ja.json

@@ -1276,9 +1276,7 @@
   "user.settings.general.title": "全般の設定",
   "user.settings.general.uploadImage": "画像をアップロードするには「編集する」をクリックしてください",
   "user.settings.general.username": "ユーザー名",
-  "user.settings.general.usernameInfo": "チームメイトが簡単に認識し覚えておけるものを選択してください。",
   "user.settings.general.usernameReserved": "このユーザー名は予約されています。他のユーザー名を使ってください。",
-  "user.settings.general.usernameRestrictions": "ユーザー名は英小文字で始めてください。また{min}から{max} 文字の英数字と'.'、'-'、'_'の記号だけで構成してください。",
   "user.settings.general.validEmail": "有効な電子メールアドレスを入力してください",
   "user.settings.general.validImage": "JPGまたはPNG画像だけがプロフィール画像として使用できます",
   "user.settings.import_theme.cancel": "キャンセル",

webapp/i18n/pt.json

@@ -1325,9 +1325,7 @@
   "user.settings.general.title": "Definições Gerais",
   "user.settings.general.uploadImage": "Clique em 'Editar' para enviar uma imagem.",
   "user.settings.general.username": "Usuário",
-  "user.settings.general.usernameInfo": "Coloque alguma coisa fácil para sua equipe de trabalho te reconhecer e lembrar.",
   "user.settings.general.usernameReserved": "Este nome de usuário é reservado, por favor escolha um novo.",
-  "user.settings.general.usernameRestrictions": "O nome de usuário precisa começar com uma letra, e conter entre {min} e {max} caracteres minúsculos contendo números, letras, e os símbolos '.', '-' e '_'.",
   "user.settings.general.validEmail": "Por favor entre um endereço de e-mail válido",
   "user.settings.general.validImage": "Somente imagens em JPG ou PNG podem ser usadas como imagem do perfil",
   "user.settings.import_theme.cancel": "Cancelar",

webapp/utils/constants.jsx

@@ -634,7 +634,7 @@ export default {
     },
     OVERLAY_TIME_DELAY: 400,
     MIN_USERNAME_LENGTH: 3,
-    MAX_USERNAME_LENGTH: 64,
+    MAX_USERNAME_LENGTH: 22,
     MIN_PASSWORD_LENGTH: 5,
     MAX_PASSWORD_LENGTH: 50,
     TIME_SINCE_UPDATE_INTERVAL: 30000,