1 files changed, 59 insertions, 10 deletions

diff --git a/web/react/components/team_signup_username_page.jsx b/web/react/components/team_signup_username_page.jsx
index 6ccab6656..a7332975d 100644
--- a/web/react/components/team_signup_username_page.jsx
+++ b/web/react/components/team_signup_username_page.jsx
@@ -5,7 +5,20 @@ 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 {
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+
+const holders = defineMessages({
+    reserved: {
+        id: 'team_signup_username.reserved',
+        defaultMessage: 'This username is reserved, please choose a new one.'
+    },
+    invalid: {
+        id: 'team_signup_username.invalid',
+        defaultMessage: 'Username must begin with a letter, and contain between {min} to {max} characters in total, which may be numbers, lowercase letters, or any of the symbols \'.\', \'-\', or \'_\''
+    }
+});
+
+class TeamSignupUsernamePage extends React.Component {
     constructor(props) {
         super(props);
 
@@ -27,14 +40,15 @@ export default class TeamSignupUsernamePage extends React.Component {
     submitNext(e) {
         e.preventDefault();
 
+        const {formatMessage} = this.props.intl;
         var name = ReactDOM.findDOMNode(this.refs.name).value.trim().toLowerCase();
 
         var usernameError = Utils.isValidUsername(name);
-        if (usernameError === 'Cannot use a reserved word as a username.') {
-            this.setState({nameError: 'This username is reserved, please choose a new one.'});
+        if (usernameError === 'Cannot use a reserved word as a username.') { //this should be change to some kind of ID
+            this.setState({nameError: formatMessage(holders.reserved)});
             return;
         } else if (usernameError) {
-            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 \'_\''});
+            this.setState({nameError: formatMessage(holders.invalid, {min: Constants.MIN_USERNAME_LENGTH, max: Constants.MAX_USERNAME_LENGTH})});
             return;
         }
 
@@ -46,7 +60,18 @@ 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 nameHelpText = (
+            <span className='color--light help-block'>
+                <FormattedMessage
+                    id='team_signup_username.hint'
+                    defaultMessage="Usernames must begin with a letter and contain between {min} to {max} characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'"
+                    values={{
+                        min: Constants.MIN_USERNAME_LENGTH,
+                        max: Constants.MAX_USERNAME_LENGTH
+                    }}
+                />
+            </span>
+        );
         var nameDivClass = 'form-group';
         if (this.state.nameError) {
             nameError = <label className='control-label'>{this.state.nameError}</label>;
@@ -61,13 +86,28 @@ export default class TeamSignupUsernamePage extends React.Component {
                         className='signup-team-logo'
                         src='/static/images/logo.png'
                     />
-                    <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>
+                    <h2 className='margin--less'>
+                        <FormattedMessage
+                            id='team_signup_username.username'
+                            defaultMessage='Your username'
+                        />
+                    </h2>
+                    <h5 className='color--light'>
+                        <FormattedMessage
+                            id='team_signup_username.memorable'
+                            defaultMessage='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>
+                                        <FormattedMessage
+                                            id='team_signup_username.chooseUsername'
+                                            defaultMessage='Choose your username'
+                                        />
+                                    </strong></h5>
                                     <input
                                         autoFocus={true}
                                         type='text'
@@ -89,7 +129,10 @@ export default class TeamSignupUsernamePage extends React.Component {
                         className='btn btn-primary margin--extra'
                         onClick={this.submitNext}
                     >
-                        {'Next'}
+                        <FormattedMessage
+                            id='team_signup_username.next'
+                            defaultMessage='Next'
+                        />
                         <i className='glyphicon glyphicon-chevron-right'></i>
                     </button>
                     <div className='margin--extra'>
@@ -97,7 +140,10 @@ export default class TeamSignupUsernamePage extends React.Component {
                             href='#'
                             onClick={this.submitBack}
                         >
-                            {'Back to previous step'}
+                            <FormattedMessage
+                                id='team_signup_username.back'
+                                defaultMessage='Back to previous step'
+                            />
                         </a>
                     </div>
                 </form>
@@ -110,6 +156,9 @@ TeamSignupUsernamePage.defaultProps = {
     state: null
 };
 TeamSignupUsernamePage.propTypes = {
+    intl: intlShape.isRequired,
     state: React.PropTypes.object,
     updateParent: React.PropTypes.func
 };
+
+export default injectIntl(TeamSignupUsernamePage);
\ No newline at end of file