// 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'); var UserStore = require('../stores/user_store.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); export default class SignupUserComplete extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); var initialState = BrowserStore.getGlobalItem(this.props.hash); if (!initialState) { initialState = {}; initialState.wizard = 'welcome'; initialState.user = {}; initialState.user.team_id = this.props.teamId; initialState.user.email = this.props.email; initialState.original_email = this.props.email; } this.state = initialState; } handleSubmit(e) { e.preventDefault(); const providedEmail = ReactDOM.findDOMNode(this.refs.email).value.trim(); if (!providedEmail) { this.setState({nameError: '', emailError: 'This field is required', passwordError: ''}); return; } if (!Utils.isEmail(providedEmail)) { this.setState({nameError: '', emailError: 'Please enter a valid email address', passwordError: ''}); return; } const providedUsername = ReactDOM.findDOMNode(this.refs.name).value.trim().toLowerCase(); if (!providedUsername) { this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''}); return; } const usernameError = Utils.isValidUsername(providedUsername); if (usernameError === 'Cannot use a reserved word as a username.') { this.setState({nameError: 'This username is reserved, please choose a new one.', emailError: '', passwordError: '', serverError: ''}); return; } else if (usernameError) { this.setState({ nameError: 'Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\' and \'_\'.', emailError: '', passwordError: '', serverError: '' }); return; } const providedPassword = ReactDOM.findDOMNode(this.refs.password).value.trim(); if (!providedPassword || providedPassword.length < 5) { this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''}); return; } const user = { team_id: this.props.teamId, email: providedEmail, username: providedUsername, password: providedPassword, allow_marketing: true }; this.setState({ user, nameError: '', emailError: '', passwordError: '', serverError: '' }); client.createUser(user, this.props.data, this.props.hash, function createUserSuccess() { client.track('signup', 'signup_user_02_complete'); client.loginByEmail(this.props.teamName, user.email, user.password, function emailLoginSuccess(data) { UserStore.setLastEmail(user.email); UserStore.setCurrentUser(data); if (this.props.hash > 0) { BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'})); } window.location.href = '/' + this.props.teamName + '/channels/town-square'; }.bind(this), function emailLoginFailure(err) { if (err.message === 'Login failed because email address has not been verified') { window.location.href = '/verify_email?email=' + encodeURIComponent(user.email) + '&teamname=' + encodeURIComponent(this.props.teamName); } else { this.setState({serverError: err.message}); } }.bind(this) ); }.bind(this), function createUserFailure(err) { this.setState({serverError: err.message}); }.bind(this) ); } render() { client.track('signup', 'signup_user_01_welcome'); if (this.state.wizard === 'finished') { return
You've already completed the signup process for this invitation or this invitation has expired.
; } // set up error labels var emailError = null; var emailDivStyle = 'form-group'; if (this.state.emailError) { emailError = ; emailDivStyle += ' has-error'; } var nameError = null; var nameDivStyle = 'form-group'; if (this.state.nameError) { nameError = ; nameDivStyle += ' has-error'; } var passwordError = null; var passwordDivStyle = 'form-group'; if (this.state.passwordError) { passwordError = ; passwordDivStyle += ' has-error'; } var serverError = null; if (this.state.serverError) { serverError = (
); } // set up the email entry and hide it if an email was provided var yourEmailIs = ''; if (this.state.user.email) { yourEmailIs = Your email address is {this.state.user.email}. You'll use this address to sign in to {global.window.config.SiteName}.; } var emailContainerStyle = 'margin--extra'; if (this.state.original_email) { emailContainerStyle = 'hidden'; } var email = (
What's your email address?
{emailError}
); var signupMessage = []; if (global.window.config.EnableSignUpWithGitLab === 'true') { signupMessage.push( with GitLab ); } var emailSignup; if (global.window.config.EnableSignUpWithEmail === 'true') { emailSignup = (
{email} {yourEmailIs}
Choose your username
{nameError} Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'
Choose your password
{passwordError}

); } if (signupMessage.length > 0 && emailSignup) { signupMessage = (
{signupMessage}
or
); } return (
Welcome to:

{this.props.teamDisplayName}

on {global.window.config.SiteName}

Let's create your account

{signupMessage} {emailSignup} {serverError}
); } } SignupUserComplete.defaultProps = { teamName: '', hash: '', teamId: '', email: '', data: null, teamDisplayName: '' }; SignupUserComplete.propTypes = { teamName: React.PropTypes.string, hash: React.PropTypes.string, teamId: React.PropTypes.string, email: React.PropTypes.string, data: React.PropTypes.string, teamDisplayName: React.PropTypes.string };