// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. var Utils = require('../utils/utils.jsx'); var Client = require('../utils/client.jsx'); export default class TeamSignupUsernamePage 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 = 'send_invites'; this.props.updateParent(this.props.state); } submitNext(e) { e.preventDefault(); 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.'}); 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 \'_\''}); return; } this.props.state.wizard = 'password'; this.props.state.user.username = name; this.props.updateParent(this.props.state); } render() { Client.track('signup', 'signup_team_06_username'); var nameError = null; var nameDivClass = 'form-group'; if (this.state.nameError) { nameError = ; nameDivClass += ' has-error'; } return (

Your username

{'Select a memorable username that makes it easy for teammates to identify you:'}
Choose your username
Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'
{nameError}
Back to previous step
); } } TeamSignupUsernamePage.defaultProps = { state: null }; TeamSignupUsernamePage.propTypes = { state: React.PropTypes.object, updateParent: React.PropTypes.func };