diff options
author | =Corey Hulen <corey@hulen.com> | 2016-02-01 14:44:17 -0800 |
---|---|---|
committer | =Corey Hulen <corey@hulen.com> | 2016-02-01 14:44:17 -0800 |
commit | b4ec6900510077253290e361d1a706e5368a45de (patch) | |
tree | 6fc7c131fa7aa5f32e3aba8102416aa23c65963d /web/react/components/team_signup_username_page.jsx | |
parent | ea71731f838fc010cfc7511c09875184d1b2396b (diff) | |
parent | f28486c4553f7f4bccf7bf69153c2f12699705f9 (diff) | |
download | chat-b4ec6900510077253290e361d1a706e5368a45de.tar.gz chat-b4ec6900510077253290e361d1a706e5368a45de.tar.bz2 chat-b4ec6900510077253290e361d1a706e5368a45de.zip |
Fixing merge
Diffstat (limited to 'web/react/components/team_signup_username_page.jsx')
-rw-r--r-- | web/react/components/team_signup_username_page.jsx | 69 |
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 |