From ca351b617fc1d412d1a4ae37835a697468769fe6 Mon Sep 17 00:00:00 2001 From: David Lu Date: Mon, 22 Aug 2016 15:33:01 -0400 Subject: PLT-2951 Improved signup process (#3771) --- webapp/components/signup_user_complete.jsx | 840 ----------------------------- 1 file changed, 840 deletions(-) delete mode 100644 webapp/components/signup_user_complete.jsx (limited to 'webapp/components/signup_user_complete.jsx') diff --git a/webapp/components/signup_user_complete.jsx b/webapp/components/signup_user_complete.jsx deleted file mode 100644 index 9bb208c84..000000000 --- a/webapp/components/signup_user_complete.jsx +++ /dev/null @@ -1,840 +0,0 @@ -// 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: '', - signupDisabledError: '', - 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()) { - Client.addUserToTeamFromInvite( - data, - hash, - inviteId, - (team) => { - loading = true; - GlobalActions.emitInitialLoad( - () => { - browserHistory.push('/' + team.name + '/channels/town-square'); - } - ); - }, - (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 - }); - }, - () => { - this.setState({ - noOpenServerError: true, - serverError: - - }); - } - ); - - loading = false; - 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: - - }); - } - - this.setState({ - data, - hash, - usedBefore, - email, - teamDisplayName, - teamName, - teamId, - openServer, - inviteId, - loading - }); - - this.setState({ - signupDisabledError: ( - - ) - }); - } - - 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( - () => { - const query = this.props.location.query; - GlobalActions.loadDefaultLocale(); - if (query.redirect_to) { - browserHistory.push(query.redirect_to); - } else { - 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( - () => { - const query = this.props.location.query; - if (query.redirect_to) { - browserHistory.push(query.redirect_to); - } else { - 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.EnableSignUpWithOffice365 === '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; - } - - let description = null; - if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.CustomBrand === 'true' && global.window.mm_config.EnableCustomBrand === 'true') { - description = global.window.mm_config.CustomDescriptionText; - } else { - description = ( - - ); - } - - return ( -
-
- - - - -
-
-
- -

{global.window.mm_config.SiteName}

-

- {description} -

-

- -

- - - {' '} - - - - - {signupMessage} - {ldapSignup} - {emailSignup} - {serverError} - {terms} -
-
-
- ); - } -} -- cgit v1.2.3-1-g7c22