// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import LoadingScreen from 'components/loading_screen.jsx';
import * as GlobalActions from 'actions/global_actions.jsx';
import {trackEvent} from 'actions/diagnostics_actions.jsx';
import BrowserStore from 'stores/browser_store.jsx';
import {getInviteInfo} from 'actions/team_actions.jsx';
import {loginById, createUserWithInvite} from 'actions/user_actions.jsx';
import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
import React from 'react';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
import {browserHistory, Link} from 'react-router/es6';
import logoImage from 'images/logo.png';
export default class SignupEmail extends React.Component {
static get propTypes() {
return {
location: React.PropTypes.object
};
}
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.getInviteInfo = this.getInviteInfo.bind(this);
this.renderEmailSignup = this.renderEmailSignup.bind(this);
this.isUserValid = this.isUserValid.bind(this);
this.state = this.getInviteInfo();
}
componentDidMount() {
trackEvent('signup', 'signup_user_01_welcome');
}
getInviteInfo() {
let data = this.props.location.query.d;
let hash = this.props.location.query.h;
const inviteId = this.props.location.query.id;
let email = '';
let teamDisplayName = '';
let teamName = '';
let teamId = '';
let loading = true;
let serverError = '';
let noOpenServerError = false;
if (hash && hash.length > 0) {
const parsedData = JSON.parse(data);
email = parsedData.email;
teamDisplayName = parsedData.display_name;
teamName = parsedData.name;
teamId = parsedData.id;
loading = false;
} else if (inviteId && inviteId.length > 0) {
loading = true;
getInviteInfo(
inviteId,
(inviteData) => {
if (!inviteData) {
return;
}
serverError = '';
teamDisplayName = inviteData.display_name;
teamName = inviteData.name;
teamId = inviteData.id;
},
() => {
noOpenServerError = true;
serverError = (
);
}
);
loading = false;
data = null;
hash = null;
} else {
loading = false;
}
return {
data,
hash,
email,
teamDisplayName,
teamName,
teamId,
inviteId,
loading,
serverError,
noOpenServerError
};
}
finishSignup() {
GlobalActions.emitInitialLoad(
() => {
const query = this.props.location.query;
GlobalActions.loadDefaultLocale();
if (query.redirect_to) {
browserHistory.push(query.redirect_to);
} else {
GlobalActions.redirectUserToDefaultTeam();
}
}
);
}
handleSignupSuccess(user, data) {
trackEvent('signup', 'signup_user_02_complete');
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 {
GlobalActions.redirectUserToDefaultTeam();
}
}
);
},
(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});
}
}
);
}
isUserValid() {
const providedEmail = this.refs.email.value.trim();
if (!providedEmail) {
this.setState({
nameError: '',
emailError: (),
passwordError: '',
serverError: ''
});
return false;
}
if (!Utils.isEmail(providedEmail)) {
this.setState({
nameError: '',
emailError: (),
passwordError: '',
serverError: ''
});
return false;
}
const providedUsername = this.refs.name.value.trim().toLowerCase();
if (!providedUsername) {
this.setState({
nameError: (),
emailError: '',
passwordError: '',
serverError: ''
});
return false;
}
const usernameError = Utils.isValidUsername(providedUsername);
if (usernameError === 'Cannot use a reserved word as a username.') {
this.setState({
nameError: (),
emailError: '',
passwordError: '',
serverError: ''
});
return false;
} else if (usernameError) {
this.setState({
nameError: (
),
emailError: '',
passwordError: '',
serverError: ''
});
return false;
}
const providedPassword = this.refs.password.value;
const pwdError = Utils.isValidPassword(providedPassword);
if (pwdError) {
this.setState({
nameError: '',
emailError: '',
passwordError: pwdError,
serverError: ''
});
return false;
}
return true;
}
handleSubmit(e) {
e.preventDefault();
if (this.isUserValid()) {
this.setState({
nameError: '',
emailError: '',
passwordError: '',
serverError: ''
});
const user = {
email: this.refs.email.value.trim(),
username: this.refs.name.value.trim().toLowerCase(),
password: this.refs.password.value,
allow_marketing: true
};
createUserWithInvite(user,
this.state.data,
this.state.hash,
this.state.inviteId,
this.handleSignupSuccess.bind(this, user),
(err) => {
this.setState({serverError: err.message});
}
);
}
}
renderEmailSignup() {
let emailError = null;
let emailHelpText = (
);
let emailDivStyle = 'form-group';
if (this.state.emailError) {
emailError = ();
emailHelpText = '';
emailDivStyle += ' has-error';
}
let nameError = null;
let nameHelpText = (
);
let nameDivStyle = 'form-group';
if (this.state.nameError) {
nameError = ;
nameHelpText = '';
nameDivStyle += ' has-error';
}
let passwordError = null;
let passwordDivStyle = 'form-group';
if (this.state.passwordError) {
passwordError = ;
passwordDivStyle += ' has-error';
}
let yourEmailIs = null;
if (this.state.email) {
yourEmailIs = (
);
}
let emailContainerStyle = 'margin--extra';
if (this.state.email) {
emailContainerStyle = 'hidden';
}
return (
);
}
render() {
let serverError = null;
if (this.state.serverError) {
serverError = (
);
}
if (this.state.loading) {
return ();
}
let emailSignup;
if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
emailSignup = this.renderEmailSignup();
} else {
return null;
}
let terms = null;
if (!this.state.noOpenServerError && emailSignup) {
terms = (
);
}
if (this.state.noOpenServerError) {
emailSignup = 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}
{' '}
{emailSignup}
{serverError}
{terms}
);
}
}