Changed language in error message to reflect better English and did cosmetic refactoring

This commit is contained in:
nickago
2015-07-30 09:57:02 -07:00
parent e699acb808
commit cd2e035b25
+22 -24
View File
@@ -496,60 +496,58 @@ SendInivtesPage = React.createClass({
});
UsernamePage = React.createClass({
submitBack: function (e) {
submitBack: function(e) {
e.preventDefault();
this.props.state.wizard = "send_invites";
this.props.state.wizard = 'send_invites';
this.props.updateParent(this.props.state);
},
submitNext: function (e) {
submitNext: function(e) {
e.preventDefault();
var name = this.refs.name.getDOMNode().value.trim();
var username_error = utils.isValidUsername(name);
if (username_error === "Cannot use a reserved word as a username.") {
this.setState({name_error: "This username is reserved, please choose a new one." });
if (username_error === 'Cannot use a reserved word as a username.') {
this.setState({name_error: 'This username is reserved, please choose a new one.'});
return;
} else if (username_error) {
this.setState({name_error: "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({name_error: "Username must begin with a letter, and contain between 3 to 15 characters made up of numbers, lowercase letters, and the symbols '.', '-', and '_'"});
return;
}
this.props.state.wizard = "password";
this.props.state.wizard = 'password';
this.props.state.user.username = name;
this.props.updateParent(this.props.state);
},
getInitialState: function() {
return { };
return {};
},
render: function() {
client.track('signup', 'signup_team_06_username');
var name_error = this.state.name_error ? <label className="control-label">{ this.state.name_error }</label> : null;
var name_error = this.state.name_error ? <label className='control-label'>{this.state.name_error}</label> : null;
return (
<div>
<form>
<img 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 " + strings.Team + "mates to identify you:"}</h5>
<div className="inner__content margin--extra">
<div className={ name_error ? "form-group has-error" : "form-group" }>
<div className="row">
<div className="col-sm-11">
<img 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 ' + strings.Team + 'mates to identify you:'}</h5>
<div className='inner__content margin--extra'>
<div className={name_error ? 'form-group has-error' : 'form-group'}>
<div className='row'>
<div className='col-sm-11'>
<h5><strong>Choose your username</strong></h5>
<input autoFocus={true} type="text" ref="name" className="form-control" placeholder="" defaultValue={this.props.state.user.username} maxLength="128" />
<div className="color--light form__hint">Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</div>
<input autoFocus={true} type='text' ref='name' className='form-control' placeholder='' defaultValue={this.props.state.user.username} maxLength='128' />
<div className='color--light form__hint'>Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</div>
</div>
</div>
{ name_error }
{name_error}
</div>
</div>
<button type="submit" className="btn btn-primary margin--extra" onClick={this.submitNext}>Next<i className="glyphicon glyphicon-chevron-right"></i></button>
<div className="margin--extra">
<a href="#" onClick={this.submitBack}>Back to previous step</a>
<button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button>
<div className='margin--extra'>
<a href='#' onClick={this.submitBack}>Back to previous step</a>
</div>
</form>
</div>