// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import * as Utils from '../utils/utils.jsx'; import * as client from '../utils/client.jsx'; import UserStore from '../stores/user_store.jsx'; import BrowserStore from '../stores/browser_store.jsx'; import Constants from '../utils/constants.jsx'; import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'mm-intl'; const holders = defineMessages({ required: { id: 'signup_user_completed.required', defaultMessage: 'This field is required' }, validEmail: { id: 'signup_user_completed.validEmail', defaultMessage: 'Please enter a valid email address' }, reserved: { id: 'signup_user_completed.reserved', defaultMessage: 'This username is reserved, please choose a new one.' }, usernameLength: { id: 'signup_user_completed.usernameLength', defaultMessage: 'Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols \'.\', \'-\' and \'_\'.' }, passwordLength: { id: 'signup_user_completed.passwordLength', defaultMessage: 'Please enter at least {min} characters' } }); 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 {formatMessage} = this.props.intl; const providedEmail = ReactDOM.findDOMNode(this.refs.email).value.trim(); if (!providedEmail) { this.setState({nameError: '', emailError: formatMessage(holders.required), passwordError: ''}); return; } if (!Utils.isEmail(providedEmail)) { this.setState({nameError: '', emailError: formatMessage(holders.validEmail), passwordError: ''}); return; } const providedUsername = ReactDOM.findDOMNode(this.refs.name).value.trim().toLowerCase(); if (!providedUsername) { this.setState({nameError: formatMessage(holders.required), emailError: '', passwordError: '', serverError: ''}); return; } const usernameError = Utils.isValidUsername(providedUsername); if (usernameError === 'Cannot use a reserved word as a username.') { this.setState({nameError: formatMessage(holders.reserved), emailError: '', passwordError: '', serverError: ''}); return; } else if (usernameError) { this.setState({ nameError: formatMessage(holders.usernameLength, {min: Constants.MIN_USERNAME_LENGTH, max: Constants.MAX_USERNAME_LENGTH}), emailError: '', passwordError: '', serverError: '' }); return; } const providedPassword = ReactDOM.findDOMNode(this.refs.password).value.trim(); if (!providedPassword || providedPassword.length < Constants.MIN_PASSWORD_LENGTH) { this.setState({nameError: '', emailError: '', passwordError: formatMessage(holders.passwordLength, {min: Constants.MIN_PASSWORD_LENGTH}), 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, () => { client.track('signup', 'signup_user_02_complete'); client.loginByEmail(this.props.teamName, user.email, user.password, () => { UserStore.setLastEmail(user.email); if (this.props.hash > 0) { BrowserStore.setGlobalItem(this.props.hash, JSON.stringify({wizard: 'finished'})); } window.location.href = '/' + this.props.teamName + '/channels/town-square'; }, (err) => { if (err.id === 'api.user.login.not_verified.app_error') { window.location.href = '/verify_email?email=' + encodeURIComponent(user.email) + '&teamname=' + encodeURIComponent(this.props.teamName); } else { this.setState({serverError: err.message}); } } ); }, (err) => { this.setState({serverError: err.message}); } ); } render() { client.track('signup', 'signup_user_01_welcome'); if (this.state.wizard === 'finished') { return (
); } // set up error labels var emailError = null; var emailHelpText = ( ); var emailDivStyle = 'form-group'; if (this.state.emailError) { emailError = ; emailHelpText = ''; emailDivStyle += ' has-error'; } var nameError = null; var nameHelpText = ( ); var nameDivStyle = 'form-group'; if (this.state.nameError) { nameError = ; nameHelpText = ''; 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 = ( ); } var emailContainerStyle = 'margin--extra'; if (this.state.original_email) { emailContainerStyle = 'hidden'; } var email = (
{emailError} {emailHelpText}
); var signupMessage = []; if (global.window.mm_config.EnableSignUpWithGitLab === 'true') { signupMessage.push( ); } if (global.window.mm_config.EnableSignUpWithGoogle === 'true') { signupMessage.push( ); } var emailSignup; if (global.window.mm_config.EnableSignUpWithEmail === 'true') { emailSignup = (
{email} {yourEmailIs}
{nameError} {nameHelpText}
{passwordError}

); } if (signupMessage.length > 0 && emailSignup) { signupMessage = (
{signupMessage}
); } return (

{this.props.teamDisplayName}

{signupMessage} {emailSignup} {serverError}
); } } SignupUserComplete.defaultProps = { teamName: '', hash: '', teamId: '', email: '', data: null, teamDisplayName: '' }; SignupUserComplete.propTypes = { intl: intlShape.isRequired, teamName: React.PropTypes.string, hash: React.PropTypes.string, teamId: React.PropTypes.string, email: React.PropTypes.string, data: React.PropTypes.string, teamDisplayName: React.PropTypes.string }; export default injectIntl(SignupUserComplete);