// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. const Utils = require('../utils/utils.jsx'); const Client = require('../utils/client.jsx'); const Constants = require('../utils/constants.jsx'); export default class TeamSignupUrlPage extends React.Component { constructor(props) { super(props); this.submitBack = this.submitBack.bind(this); this.submitNext = this.submitNext.bind(this); this.handleFocus = this.handleFocus.bind(this); this.state = {nameError: ''}; } submitBack(e) { e.preventDefault(); this.props.state.wizard = 'team_display_name'; this.props.updateParent(this.props.state); } submitNext(e) { e.preventDefault(); const name = ReactDOM.findDOMNode(this.refs.name).value.trim(); if (!name) { this.setState({nameError: 'This field is required'}); return; } const cleanedName = Utils.cleanUpUrlable(name); const urlRegex = /^[a-z]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g; if (cleanedName !== name || !urlRegex.test(name)) { this.setState({nameError: "Use only lower case letters, numbers and dashes. Must start with a letter and can't end in a dash."}); return; } else if (cleanedName.length < 4 || cleanedName.length > 15) { this.setState({nameError: 'Name must be 4 or more characters up to a maximum of 15'}); return; } if (global.window.mm_config.RestrictTeamNames === 'true') { for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) { if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) { this.setState({nameError: 'URL is taken or contains a reserved word'}); return; } } } Client.findTeamByName(name, (data) => { if (data) { this.setState({nameError: 'This URL is unavailable. Please try another.'}); } else { if (global.window.mm_config.SendEmailNotifications === 'true') { this.props.state.wizard = 'send_invites'; } else { this.props.state.wizard = 'username'; } this.props.state.team.type = 'O'; this.props.state.team.name = name; this.props.updateParent(this.props.state); } }, (err) => { this.setState({nameError: err.message}); } ); } handleFocus(e) { e.preventDefault(); e.currentTarget.select(); } render() { $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); Client.track('signup', 'signup_team_03_url'); let nameError = null; let nameDivClass = 'form-group'; if (this.state.nameError) { nameError = ; nameDivClass += ' has-error'; } const title = `${Utils.getWindowLocationOrigin()}/`; return (

{`Team URL`}

{title}
{nameError}

{`Choose the web address of your new team:`}

Back to previous step
); } } TeamSignupUrlPage.propTypes = { state: React.PropTypes.object, updateParent: React.PropTypes.func };