diff options
Diffstat (limited to 'web/react/components/team_signup_display_name_page.jsx')
-rw-r--r-- | web/react/components/team_signup_display_name_page.jsx | 78 |
1 files changed, 54 insertions, 24 deletions
diff --git a/web/react/components/team_signup_display_name_page.jsx b/web/react/components/team_signup_display_name_page.jsx index b5e93de1b..1849f8222 100644 --- a/web/react/components/team_signup_display_name_page.jsx +++ b/web/react/components/team_signup_display_name_page.jsx @@ -3,22 +3,26 @@ var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); +import {strings} from '../utils/config.js'; -module.exports = React.createClass({ - displayName: 'TeamSignupDisplayNamePage', - propTypes: { - state: React.PropTypes.object, - updateParent: React.PropTypes.func - }, - submitBack: function(e) { +export default class TeamSignupDisplayNamePage extends React.Component { + constructor(props) { + super(props); + + this.submitBack = this.submitBack.bind(this); + this.submitNext = this.submitNext.bind(this); + + this.state = {}; + } + submitBack(e) { e.preventDefault(); this.props.state.wizard = 'welcome'; this.props.updateParent(this.props.state); - }, - submitNext: function(e) { + } + submitNext(e) { e.preventDefault(); - var displayName = this.refs.name.getDOMNode().value.trim(); + var displayName = React.findDOMNode(this.refs.name).value.trim(); if (!displayName) { this.setState({nameError: 'This field is required'}); return; @@ -28,15 +32,12 @@ module.exports = React.createClass({ this.props.state.team.display_name = displayName; this.props.state.team.name = utils.cleanUpUrlable(displayName); this.props.updateParent(this.props.state); - }, - getInitialState: function() { - return {}; - }, - handleFocus: function(e) { + } + handleFocus(e) { e.preventDefault(); e.currentTarget.select(); - }, - render: function() { + } + render() { client.track('signup', 'signup_team_02_name'); var nameError = null; @@ -49,24 +50,53 @@ module.exports = React.createClass({ return ( <div> <form> - <img className='signup-team-logo' src='/static/images/logo.png' /> - + <img + className='signup-team-logo' + src='/static/images/logo.png' + /> <h2>{utils.toTitleCase(strings.Team) + ' Name'}</h2> <div className={nameDivClass}> <div className='row'> <div className='col-sm-9'> - <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' defaultValue={this.props.state.team.display_name} autoFocus={true} onFocus={this.handleFocus} /> + <input + type='text' + ref='name' + className='form-control' + placeholder='' + maxLength='128' + defaultValue={this.props.state.team.display_name} + autoFocus={true} + onFocus={this.handleFocus} + /> </div> </div> {nameError} </div> - <div>{'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'}</div> - <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <div> + {'Name your ' + strings.Team + ' in any language. Your ' + strings.Team + ' name shows in menus and headings.'} + </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> + <a + href='#' + onClick={this.submitBack} + > + Back to previous step + </a> </div> </form> </div> ); } -}); +} + +TeamSignupDisplayNamePage.propTypes = { + state: React.PropTypes.object, + updateParent: React.PropTypes.func +}; |