// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import FormError from 'components/form_error.jsx'; import LoadingScreen from 'components/loading_screen.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; import {track} from 'actions/analytics_actions.jsx'; import BrowserStore from 'stores/browser_store.jsx'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; import Client from 'client/web_client.jsx'; import Constants from 'utils/constants.jsx'; import React from 'react'; import ReactDOM from 'react-dom'; import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; import {browserHistory, Link} from 'react-router/es6'; import logoImage from 'images/logo.png'; export default class SignupUserComplete extends React.Component { static get propTypes() { return { location: React.PropTypes.object }; } constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.handleLdapSignup = this.handleLdapSignup.bind(this); this.handleLdapIdChange = this.handleLdapIdChange.bind(this); this.handleLdapPasswordChange = this.handleLdapPasswordChange.bind(this); this.state = { data: '', hash: '', usedBefore: false, email: '', teamDisplayName: '', teamName: '', teamId: '', openServer: false, loading: true, inviteId: '', ldapId: '', ldapPassword: '' }; } componentWillMount() { let data = this.props.location.query.d; let hash = this.props.location.query.h; const inviteId = this.props.location.query.id; let usedBefore = false; let email = ''; let teamDisplayName = ''; let teamName = ''; let teamId = ''; let openServer = false; let loading = true; if ((inviteId && inviteId.length > 0) || (hash && hash.length > 0)) { // if we are already logged in then attempt to just join the team if (UserStore.getCurrentUser()) { loading = true; Client.addUserToTeamFromInvite( data, hash, inviteId, (team) => { GlobalActions.emitInitialLoad( () => { browserHistory.push('/' + team.name); } ); }, (err) => { this.setState({ noOpenServerError: true, serverError: err.message, loading: false }); } ); } else if (hash) { // If we have a hash in the url then we are attempting to access a private team const parsedData = JSON.parse(data); usedBefore = BrowserStore.getGlobalItem(hash); email = parsedData.email; teamDisplayName = parsedData.display_name; teamName = parsedData.name; teamId = parsedData.id; loading = false; } else { loading = true; Client.getInviteInfo( inviteId, (inviteData) => { if (!inviteData) { return; } this.setState({ serverError: null, teamDisplayName: inviteData.display_name, teamName: inviteData.name, teamId: inviteData.id, loading: false }); }, () => { this.setState({ noOpenServerError: true, loading: false, serverError: }); } ); data = ''; hash = ''; } } else if (global.window.mm_config.EnableOpenServer === 'true' || UserStore.getNoAccounts()) { // If this is the first account then let them create an account anyway. // The server will verify it's the first account before allowing creation. // Of if the server is open then we don't care. openServer = true; loading = false; } else { loading = false; this.setState({ noOpenServerError: true, serverError: , loading: false }); } this.setState({ data, hash, usedBefore, email, teamDisplayName, teamName, teamId, openServer, inviteId, loading }); } handleLdapSignup(e) { e.preventDefault(); this.setState({ldapError: ''}); Client.webLoginByLdap( this.state.ldapId, this.state.ldapPassword, null, () => { if (this.props.location.query.id || this.props.location.query.h) { Client.addUserToTeamFromInvite( this.props.location.query.d, this.props.location.query.h, this.props.location.query.id, () => { this.finishSignup(); }, () => { // there's not really a good way to deal with this, so just let the user log in like normal this.finishSignup(); } ); return; } this.finishSignup(); }, (err) => { if (err.id === 'ent.ldap.do_login.user_not_registered.app_error' || err.id === 'ent.ldap.do_login.user_filtered.app_error') { this.setState({ ldapError: ( ) }); } else if (err.id === 'ent.ldap.do_login.invalid_password.app_error') { this.setState({ ldapError: ( ) }); } else { this.setState({ldapError: err.message}); } } ); } finishSignup() { GlobalActions.emitInitialLoad( () => { GlobalActions.loadDefaultLocale(); browserHistory.push('/select_team'); } ); } handleUserCreated(user, data) { track('signup', 'signup_user_02_complete'); Client.loginById( data.id, user.password, '', () => { if (this.state.hash > 0) { BrowserStore.setGlobalItem(this.state.hash, JSON.stringify({usedBefore: true})); } GlobalActions.emitInitialLoad( () => { browserHistory.push('/select_team'); } ); }, (err) => { if (err.id === 'api.user.login.not_verified.app_error') { browserHistory.push('/should_verify_email?email=' + encodeURIComponent(user.email) + '&teamname=' + encodeURIComponent(this.state.teamName)); } else { this.setState({serverError: err.message}); } } ); } handleSubmit(e) { e.preventDefault(); const providedEmail = ReactDOM.findDOMNode(this.refs.email).value.trim(); if (!providedEmail) { this.setState({ nameError: '', emailError: (), passwordError: '', serverError: '' }); return; } if (!Utils.isEmail(providedEmail)) { this.setState({ nameError: '', emailError: (), passwordError: '', serverError: '' }); return; } const providedUsername = ReactDOM.findDOMNode(this.refs.name).value.trim().toLowerCase(); if (!providedUsername) { this.setState({ nameError: (), emailError: '', passwordError: '', serverError: '' }); return; } const usernameError = Utils.isValidUsername(providedUsername); if (usernameError === 'Cannot use a reserved word as a username.') { this.setState({ nameError: (), emailError: '', passwordError: '', serverError: '' }); return; } else if (usernameError) { this.setState({ nameError: ( ), emailError: '', passwordError: '', serverError: '' }); return; } const providedPassword = ReactDOM.findDOMNode(this.refs.password).value; const pwdError = Utils.isValidPassword(providedPassword); if (pwdError != null) { this.setState({ nameError: '', emailError: '', passwordError: pwdError, serverError: '' }); } this.setState({ nameError: '', emailError: '', passwordError: '', serverError: '' }); const user = { email: providedEmail, username: providedUsername, password: providedPassword, allow_marketing: true }; Client.createUserWithInvite(user, this.state.data, this.state.hash, this.state.inviteId, this.handleUserCreated.bind(this, user), (err) => { this.setState({serverError: err.message}); } ); } handleLdapIdChange(e) { e.preventDefault(); this.setState({ ldapId: e.target.value }); } handleLdapPasswordChange(e) { e.preventDefault(); this.setState({ ldapPassword: e.target.value }); } renderLdapLogin() { let ldapIdPlaceholder; if (global.window.mm_config.LdapLoginFieldName) { ldapIdPlaceholder = global.window.mm_config.LdapLoginFieldName; } else { ldapIdPlaceholder = Utils.localizeMessage('login.ldap_username', 'LDAP Username'); } let errorClass = ''; if (this.state.ldapError) { errorClass += ' has-error'; } return (
); } render() { track('signup', 'signup_user_01_welcome'); // If we have been used then just display a message if (this.state.usedBefore) { return (
); } if (this.state.loading) { 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.email) { yourEmailIs = ( ); } var emailContainerStyle = 'margin--extra'; if (this.state.email) { emailContainerStyle = 'hidden'; } var email = (
{emailError} {emailHelpText}
); let signupMessage = []; if (global.window.mm_config.EnableSignUpWithGitLab === 'true') { signupMessage.push( ); } if (global.window.mm_config.EnableSignUpWithGoogle === 'true') { signupMessage.push( ); } if (global.window.mm_config.EnableSaml === 'true' && global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.SAML === 'true') { signupMessage.push( {global.window.mm_config.SamlLoginButtonText} ); } let ldapSignup; if (global.window.mm_config.EnableLdap === 'true' && global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.LDAP) { ldapSignup = (
{this.renderLdapLogin()}
); } let emailSignup; if (global.window.mm_config.EnableSignUpWithEmail === 'true') { emailSignup = (
{email} {yourEmailIs}
{nameError} {nameHelpText}
{passwordError}

); } if (signupMessage.length > 0 && (emailSignup || ldapSignup)) { signupMessage = (
{signupMessage}
); } if (ldapSignup && emailSignup) { ldapSignup = (
{ldapSignup}
); } let terms = null; if (!this.state.noOpenServerError && (emailSignup || ldapSignup)) { terms = (

); } if (signupMessage.length === 0 && !emailSignup && !ldapSignup) { emailSignup = (
); } if (this.state.noOpenServerError) { signupMessage = null; emailSignup = null; ldapSignup = null; } return (

{global.window.mm_config.SiteName}

{' '} {signupMessage} {ldapSignup} {emailSignup} {serverError} {terms}
); } }