Removed extraneous error when providing a short username

1 files changed, 9 insertions, 6 deletions

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>