Merge pull request #1927 from rgarmsen2295/plt-1668

PLT-1668 Removes duplicate short username error message

9 files changed, 57 insertions, 44 deletions

diff --git a/web/react/components/admin_console/reset_password_modal.jsx b/web/react/components/admin_console/reset_password_modal.jsx
index 5ff7c3413..bf7d5f7e5 100644
--- a/web/react/components/admin_console/reset_password_modal.jsx
+++ b/web/react/components/admin_console/reset_password_modal.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import * as Client from '../../utils/client.jsx';
+import Constants from '../../utils/constants.jsx';
 var Modal = ReactBootstrap.Modal;
 
 export default class ResetPasswordModal extends React.Component {
@@ -20,8 +21,8 @@ export default class ResetPasswordModal extends React.Component {
         e.preventDefault();
         var password = ReactDOM.findDOMNode(this.refs.password).value;
 
-        if (!password || password.length < 5) {
-            this.setState({serverError: 'Please enter at least 5 characters.'});
+        if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) {
+            this.setState({serverError: 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters.'});
             return;
         }
 
diff --git a/web/react/components/password_reset_form.jsx b/web/react/components/password_reset_form.jsx
index 812911569..8063db05a 100644
--- a/web/react/components/password_reset_form.jsx
+++ b/web/react/components/password_reset_form.jsx
@@ -1,7 +1,8 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import * as client from '../utils/client.jsx';
+import * as Client from '../utils/client.jsx';
+import Constants from '../utils/constants.jsx';
 
 export default class PasswordResetForm extends React.Component {
     constructor(props) {
@@ -16,8 +17,8 @@ export default class PasswordResetForm extends React.Component {
         var state = {};
 
         var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
-        if (!password || password.length < 5) {
-            state.error = 'Please enter at least 5 characters.';
+        if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) {
+            state.error = 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters.';
             this.setState(state);
             return;
         }
@@ -31,7 +32,7 @@ export default class PasswordResetForm extends React.Component {
         data.data = this.props.data;
         data.name = this.props.teamName;
 
-        client.resetPassword(data,
+        Client.resetPassword(data,
             function resetSuccess() {
                 this.setState({error: null, updateText: 'Your password has been updated successfully.'});
             }.bind(this),
@@ -59,7 +60,7 @@ export default class PasswordResetForm extends React.Component {
         return (
             <div className='col-sm-12'>
                 <div className='signup-team__container'>
-                    <h3>Password Reset</h3>
+                    <h3>{'Password Reset'}</h3>
                     <form onSubmit={this.handlePasswordReset}>
                         <p>{'Enter a new password for your ' + this.props.teamDisplayName + ' ' + global.window.mm_config.SiteName + ' account.'}</p>
                         <div className={formClass}>
@@ -77,7 +78,7 @@ export default class PasswordResetForm extends React.Component {
                             type='submit'
                             className='btn btn-primary'
                         >
-                            Change my password
+                            {'Change my password'}
                         </button>
                         {updateText}
                     </form>
diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index df11fe045..ace0d28ae 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -5,6 +5,7 @@ import * as Utils from '../utils/utils.jsx';
 import * as client from '../utils/client.jsx';
 import UserStore from '../stores/user_store.jsx';
 import BrowserStore from '../stores/browser_store.jsx';
+import Constants from '../utils/constants.jsx';
 
 export default class SignupUserComplete extends React.Component {
     constructor(props) {
@@ -51,7 +52,7 @@ export default class SignupUserComplete extends React.Component {
             return;
         } else if (usernameError) {
             this.setState({
-                nameError: 'Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\' and \'_\'.',
+                nameError: '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 \'_\'.',
                 emailError: '',
                 passwordError: '',
                 serverError: ''
@@ -60,8 +61,8 @@ export default class SignupUserComplete extends React.Component {
         }
 
         const providedPassword = ReactDOM.findDOMNode(this.refs.password).value.trim();
-        if (!providedPassword || providedPassword.length < 5) {
-            this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''});
+        if (!providedPassword || providedPassword.length < Constants.MIN_PASSWORD_LENGTH) {
+            this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters', serverError: ''});
             return;
         }
 
@@ -111,7 +112,7 @@ export default class SignupUserComplete extends React.Component {
         client.track('signup', 'signup_user_01_welcome');
 
         if (this.state.wizard === 'finished') {
-            return <div>You've already completed the signup process for this invitation or this invitation has expired.</div>;
+            return <div>{"You've already completed the signup process for this invitation or this invitation has expired."}</div>;
         }
 
         // set up error labels
@@ -123,9 +124,11 @@ export default class SignupUserComplete extends React.Component {
         }
 
         var nameError = null;
+        var nameHelpText = <span className='help-block'>{'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>;
         var nameDivStyle = 'form-group';
         if (this.state.nameError) {
             nameError = <label className='control-label'>{this.state.nameError}</label>;
+            nameHelpText = '';
             nameDivStyle += ' has-error';
         }
 
@@ -148,7 +151,7 @@ export default class SignupUserComplete extends React.Component {
         // set up the email entry and hide it if an email was provided
         var yourEmailIs = '';
         if (this.state.user.email) {
-            yourEmailIs = <span>Your email address is <strong>{this.state.user.email}</strong>. You'll use this address to sign in to {global.window.mm_config.SiteName}.</span>;
+            yourEmailIs = <span>{'Your email address is '}<strong>{this.state.user.email}</strong>{". You'll use this address to sign in to " + global.window.mm_config.SiteName + '.'}</span>;
         }
 
         var emailContainerStyle = 'margin--extra';
@@ -158,7 +161,7 @@ export default class SignupUserComplete extends React.Component {
 
         var email = (
             <div className={emailContainerStyle}>
-                <h5><strong>What's your email address?</strong></h5>
+                <h5><strong>{"What's your email address?"}</strong></h5>
                 <div className={emailDivStyle}>
                     <input
                         type='email'
@@ -208,7 +211,7 @@ export default class SignupUserComplete extends React.Component {
                         {email}
                         {yourEmailIs}
                         <div className='margin--extra'>
-                            <h5><strong>Choose your username</strong></h5>
+                            <h5><strong>{'Choose your username'}</strong></h5>
                             <div className={nameDivStyle}>
                                 <input
                                     type='text'
@@ -219,11 +222,11 @@ export default class SignupUserComplete extends React.Component {
                                     spellCheck='false'
                                 />
                                 {nameError}
-                                <span className='help-block'>Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'</span>
+                                {nameHelpText}
                             </div>
                         </div>
                         <div className='margin--extra'>
-                            <h5><strong>Choose your password</strong></h5>
+                            <h5><strong>{'Choose your password'}</strong></h5>
                             <div className={passwordDivStyle}>
                             <input
                                 type='password'
@@ -243,7 +246,7 @@ export default class SignupUserComplete extends React.Component {
                             onClick={this.handleSubmit}
                             className='btn-primary btn'
                         >
-                            Create Account
+                            {'Create Account'}
                         </button>
                     </p>
                 </div>
@@ -255,7 +258,7 @@ export default class SignupUserComplete extends React.Component {
                 <div>
                     {signupMessage}
                     <div className='or__container'>
-                        <span>or</span>
+                        <span>{'or'}</span>
                     </div>
                 </div>
             );
@@ -268,10 +271,10 @@ export default class SignupUserComplete extends React.Component {
                         className='signup-team-logo'
                         src='/static/images/logo.png'
                     />
-                    <h5 className='margin--less'>Welcome to:</h5>
+                    <h5 className='margin--less'>{'Welcome to:'}</h5>
                     <h2 className='signup-team__name'>{this.props.teamDisplayName}</h2>
-                    <h2 className='signup-team__subdomain'>on {global.window.mm_config.SiteName}</h2>
-                    <h4 className='color--light'>Let's create your account</h4>
+                    <h2 className='signup-team__subdomain'>{'on ' + global.window.mm_config.SiteName}</h2>
+                    <h4 className='color--light'>{"Let's create your account"}</h4>
                     {signupMessage}
                     {emailSignup}
                     {serverError}
diff --git a/web/react/components/team_signup_password_page.jsx b/web/react/components/team_signup_password_page.jsx
index 378c7fe2c..7e11d38c3 100644
--- a/web/react/components/team_signup_password_page.jsx
+++ b/web/react/components/team_signup_password_page.jsx
@@ -4,6 +4,7 @@
 import * as Client from '../utils/client.jsx';
 import BrowserStore from '../stores/browser_store.jsx';
 import UserStore from '../stores/user_store.jsx';
+import Constants from '../utils/constants.jsx';
 
 export default class TeamSignupPasswordPage extends React.Component {
     constructor(props) {
@@ -23,8 +24,8 @@ export default class TeamSignupPasswordPage extends React.Component {
         e.preventDefault();
 
         var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
-        if (!password || password.length < 5) {
-            this.setState({passwordError: 'Please enter at least 5 characters'});
+        if (!password || password.length < Constants.MIN_PASSWORD_LENGTH) {
+            this.setState({passwordError: 'Please enter at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters'});
             return;
         }
 
@@ -92,15 +93,15 @@ export default class TeamSignupPasswordPage extends React.Component {
                         className='signup-team-logo'
                         src='/static/images/logo.png'
                     />
-                    <h2 className='margin--less'>Your password</h2>
-                    <h5 className='color--light'>Select a password that you'll use to login with your email address:</h5>
+                    <h2 className='margin--less'>{'Your password'}</h2>
+                    <h5 className='color--light'>{"Select a password that you'll use to login with your email address:"}</h5>
                     <div className='inner__content margin--extra'>
-                        <h5><strong>Email</strong></h5>
+                        <h5><strong>{'Email'}</strong></h5>
                         <div className='block--gray form-group'>{this.props.state.team.email}</div>
                         <div className={passwordDivStyle}>
                             <div className='row'>
                                 <div className='col-sm-11'>
-                                    <h5><strong>Choose your password</strong></h5>
+                                    <h5><strong>{'Choose your password'}</strong></h5>
                                     <input
                                         autoFocus={true}
                                         type='password'
@@ -110,7 +111,7 @@ export default class TeamSignupPasswordPage extends React.Component {
                                         maxLength='128'
                                         spellCheck='false'
                                     />
-                                    <span className='color--light help-block'>Passwords must contain 5 to 50 characters. Your password will be strongest if it contains a mix of symbols, numbers, and upper and lowercase characters.</span>
+                                    <span className='color--light help-block'>{'Passwords must contain ' + Constants.MIN_PASSWORD_LENGTH + ' to ' + Constants.MAX_PASSWORD_LENGTH + ' characters. Your password will be strongest if it contains a mix of symbols, numbers, and upper and lowercase characters.'}</span>
                                 </div>
                             </div>
                             {passwordError}
@@ -125,7 +126,7 @@ export default class TeamSignupPasswordPage extends React.Component {
                             data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Creating team...'}
                             onClick={this.submitNext}
                         >
-                            Finish
+                            {'Finish'}
                         </button>
                     </div>
                     <p>By proceeding to create your account and use {global.window.mm_config.SiteName}, you agree to our <a href='/static/help/terms.html'>Terms of Service</a> and <a href='/static/help/privacy.html'>Privacy Policy</a>. If you do not agree, you cannot use {global.window.mm_config.SiteName}.</p>
@@ -134,7 +135,7 @@ export default class TeamSignupPasswordPage extends React.Component {
                             href='#'
                             onClick={this.submitBack}
                         >
-                            Back to previous step
+                            {'Back to previous step'}
                         </a>
                     </div>
                 </form>
diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx
index de239f169..6ccab6656 100644
--- a/web/react/components/team_signup_username_page.jsx
+++ b/web/react/components/team_signup_username_page.jsx
@@ -3,6 +3,7 @@
 
 import * as Utils from '../utils/utils.jsx';
 import * as Client from '../utils/client.jsx';
+import Constants from '../utils/constants.jsx';
 
 export default class TeamSignupUsernamePage extends React.Component {
     constructor(props) {
@@ -33,7 +34,7 @@ export default class TeamSignupUsernamePage extends React.Component {
             this.setState({nameError: 'This username is reserved, please choose a new one.'});
             return;
         } else if (usernameError) {
-            this.setState({nameError: 'Username must begin with a letter, and contain 3 to 15 characters in total, which may be numbers, lowercase letters, or any of the symbols \'.\', \'-\', or \'_\''});
+            this.setState({nameError: 'Username must begin with a letter, and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + ' characters in total, which may be numbers, lowercase letters, or any of the symbols \'.\', \'-\', or \'_\''});
             return;
         }
 
@@ -45,9 +46,11 @@ export default class TeamSignupUsernamePage extends React.Component {
         Client.track('signup', 'signup_team_06_username');
 
         var nameError = null;
+        var nameHelpText = <span className='color--light help-block'>{'Usernames must begin with a letter and contain between ' + Constants.MIN_USERNAME_LENGTH + ' to ' + Constants.MAX_USERNAME_LENGTH + " characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'"}</span>;
         var nameDivClass = 'form-group';
         if (this.state.nameError) {
             nameError = <label className='control-label'>{this.state.nameError}</label>;
+            nameHelpText = '';
             nameDivClass += ' has-error';
         }
 
@@ -58,13 +61,13 @@ export default class TeamSignupUsernamePage extends React.Component {
                         className='signup-team-logo'
                         src='/static/images/logo.png'
                     />
-                    <h2 className='margin--less'>Your username</h2>
+                    <h2 className='margin--less'>{'Your username'}</h2>
                     <h5 className='color--light'>{'Select a memorable username that makes it easy for teammates to identify you:'}</h5>
                     <div className='inner__content margin--extra'>
                         <div className={nameDivClass}>
                             <div className='row'>
                                 <div className='col-sm-11'>
-                                    <h5><strong>Choose your username</strong></h5>
+                                    <h5><strong>{'Choose your username'}</strong></h5>
                                     <input
                                         autoFocus={true}
                                         type='text'
@@ -75,7 +78,7 @@ export default class TeamSignupUsernamePage extends React.Component {
                                         maxLength='128'
                                         spellCheck='false'
                                     />
-                                    <span className='color--light help-block'>Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</span>
+                                    {nameHelpText}
                                 </div>
                             </div>
                             {nameError}
@@ -86,7 +89,7 @@ export default class TeamSignupUsernamePage extends React.Component {
                         className='btn btn-primary margin--extra'
                         onClick={this.submitNext}
                     >
-                        Next
+                        {'Next'}
                         <i className='glyphicon glyphicon-chevron-right'></i>
                     </button>
                     <div className='margin--extra'>
@@ -94,7 +97,7 @@ export default class TeamSignupUsernamePage extends React.Component {
                             href='#'
                             onClick={this.submitBack}
                         >
-                            Back to previous step
+                            {'Back to previous step'}
                         </a>
                     </div>
                 </form>
diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx
index 75a0e6b6a..df7ae4a25 100644
--- a/web/react/components/user_settings/user_settings_general.jsx
+++ b/web/react/components/user_settings/user_settings_general.jsx
@@ -47,7 +47,7 @@ export default class UserSettingsGeneralTab extends React.Component {
             this.setState({clientError: 'This username is reserved, please choose a new one.'});
             return;
         } else if (usernameError) {
-            this.setState({clientError: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'."});
+            this.setState({clientError: '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 '_'."});
             return;
         }
 
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index d1266dd3f..5a21abd19 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -48,8 +48,8 @@ export default class SecurityTab extends React.Component {
             return;
         }
 
-        if (newPassword.length < 5) {
-            this.setState({passwordError: 'New passwords must be at least 5 characters', serverError: ''});
+        if (newPassword.length < Constants.MIN_PASSWORD_LENGTH) {
+            this.setState({passwordError: 'New passwords must be at least ' + Constants.MIN_PASSWORD_LENGTH + ' characters', serverError: ''});
             return;
         }
 
@@ -337,7 +337,7 @@ export default class SecurityTab extends React.Component {
                         className='security-links theme'
                         dialogType={AccessHistoryModal}
                     >
-                        <i className='fa fa-clock-o'></i>View Access History
+                        <i className='fa fa-clock-o'></i>{'View Access History'}
                     </ToggleModalButton>
                     <b> </b>
                     <ToggleModalButton
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index d0f34293f..5d6aa9329 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -453,5 +453,9 @@ export default {
             description: 'Show preview snippet of links below message'
         }
     },
-    OVERLAY_TIME_DELAY: 400
+    OVERLAY_TIME_DELAY: 400,
+    MIN_USERNAME_LENGTH: 3,
+    MAX_USERNAME_LENGTH: 15,
+    MIN_PASSWORD_LENGTH: 5,
+    MAX_PASSWORD_LENGTH: 50
 };
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index db469952b..32373b4a3 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -879,8 +879,8 @@ export function isValidUsername(name) {
     var error = '';
     if (!name) {
         error = 'This field is required';
-    } else if (name.length < 3 || name.length > 15) {
-        error = 'Must be between 3 and 15 characters';
+    } else if (name.length < Constants.MIN_USERNAME_LENGTH || name.length > Constants.MAX_USERNAME_LENGTH) {
+        error = 'Must be between ' + Constants.MIN_USERNAME_LENGTH + ' and ' + Constants.MAX_USERNAME_LENGTH + ' characters';
     } else if (!(/^[a-z0-9\.\-\_]+$/).test(name)) {
         error = "Must contain only letters, numbers, and the symbols '.', '-', and '_'.";
     } else if (!(/[a-z]/).test(name.charAt(0))) { //eslint-disable-line no-negated-condition