// Copyright (c) 2015 Spinpunch, 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.hash = this.props.hash; initialState.data = this.props.data; initialState.original_email = this.props.email; } this.state = initialState; } handleSubmit(e) { e.preventDefault(); this.state.user.username = React.findDOMNode(this.refs.name).value.trim().toLowerCase(); if (!this.state.user.username) { this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''}); return; } var usernameError = utils.isValidUsername(this.state.user.username); 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; } this.state.user.email = React.findDOMNode(this.refs.email).value.trim(); if (!this.state.user.email) { this.setState({nameError: '', emailError: 'This field is required', passwordError: ''}); return; } this.state.user.password = React.findDOMNode(this.refs.password).value.trim(); if (!this.state.user.password || this.state.user.password .length < 5) { this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''}); return; } this.setState({nameError: '', emailError: '', passwordError: '', serverError: ''}); this.state.user.allow_marketing = true; client.createUser(this.state.user, this.state.data, this.state.hash, function createUserSuccess() { client.track('signup', 'signup_user_02_complete'); client.loginByEmail(this.props.teamName, this.state.user.email, this.state.user.password, function emailLoginSuccess(data) { UserStore.setLastEmail(this.state.user.email); UserStore.setCurrentUser(data); if (this.props.hash > 0) { BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'})); } window.location.href = '/'; }.bind(this), function emailLoginFailure(err) { if (err.message === 'Login failed because email address has not been verified') { window.location.href = '/verify_email?email=' + encodeURIComponent(this.state.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 };