PLT-2951 Improved signup process (#3771)
Этот коммит содержится в:
David Lu
коммит произвёл
Joram Wilander
Joram Wilander
родитель
391d685aa4
Коммит
ca351b617f
@@ -520,6 +520,7 @@ export default class LoginController extends React.Component {
|
||||
key='saml'
|
||||
href={'/login/sso/saml' + this.props.location.search}
|
||||
>
|
||||
<span className='icon fa fa-lock fa--margin-top'/>
|
||||
<span>
|
||||
{window.mm_config.SamlLoginButtonText}
|
||||
</span>
|
||||
|
||||
507
webapp/components/signup/components/signup_email.jsx
Обычный файл
507
webapp/components/signup/components/signup_email.jsx
Обычный файл
@@ -0,0 +1,507 @@
|
||||
// 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 {track} from 'actions/analytics_actions.jsx';
|
||||
|
||||
import BrowserStore from 'stores/browser_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 {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();
|
||||
}
|
||||
|
||||
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;
|
||||
Client.getInviteInfo(
|
||||
inviteId,
|
||||
(inviteData) => {
|
||||
if (!inviteData) {
|
||||
return;
|
||||
}
|
||||
|
||||
serverError = '';
|
||||
teamDisplayName = inviteData.display_name;
|
||||
teamName = inviteData.name;
|
||||
teamId = inviteData.id;
|
||||
},
|
||||
() => {
|
||||
noOpenServerError = true;
|
||||
serverError = (
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.invalid_invite'
|
||||
defaultMessage='The invite link was invalid. Please speak with your Administrator to receive an invitation.'
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
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 {
|
||||
browserHistory.push('/select_team');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
handleSignupSuccess(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});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
isUserValid() {
|
||||
const providedEmail = this.refs.email.value.trim();
|
||||
if (!providedEmail) {
|
||||
this.setState({
|
||||
nameError: '',
|
||||
emailError: (<FormattedMessage id='signup_user_completed.required'/>),
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!Utils.isEmail(providedEmail)) {
|
||||
this.setState({
|
||||
nameError: '',
|
||||
emailError: (<FormattedMessage id='signup_user_completed.validEmail'/>),
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const providedUsername = this.refs.name.value.trim().toLowerCase();
|
||||
if (!providedUsername) {
|
||||
this.setState({
|
||||
nameError: (<FormattedMessage id='signup_user_completed.required'/>),
|
||||
emailError: '',
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const usernameError = Utils.isValidUsername(providedUsername);
|
||||
if (usernameError === 'Cannot use a reserved word as a username.') {
|
||||
this.setState({
|
||||
nameError: (<FormattedMessage id='signup_user_completed.reserved'/>),
|
||||
emailError: '',
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return false;
|
||||
} else if (usernameError) {
|
||||
this.setState({
|
||||
nameError: (
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.usernameLength'
|
||||
values={{
|
||||
min: Constants.MIN_USERNAME_LENGTH,
|
||||
max: Constants.MAX_USERNAME_LENGTH
|
||||
}}
|
||||
/>
|
||||
),
|
||||
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
|
||||
};
|
||||
|
||||
Client.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 = (
|
||||
<span className='help-block'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.emailHelp'
|
||||
defaultMessage='Valid email required for sign-up'
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
let emailDivStyle = 'form-group';
|
||||
if (this.state.emailError) {
|
||||
emailError = (<label className='control-label'>{this.state.emailError}</label>);
|
||||
emailHelpText = '';
|
||||
emailDivStyle += ' has-error';
|
||||
}
|
||||
|
||||
let nameError = null;
|
||||
let nameHelpText = (
|
||||
<span className='help-block'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.userHelp'
|
||||
defaultMessage="Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'"
|
||||
values={{
|
||||
min: Constants.MIN_USERNAME_LENGTH,
|
||||
max: Constants.MAX_USERNAME_LENGTH
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
let nameDivStyle = 'form-group';
|
||||
if (this.state.nameError) {
|
||||
nameError = <label className='control-label'>{this.state.nameError}</label>;
|
||||
nameHelpText = '';
|
||||
nameDivStyle += ' has-error';
|
||||
}
|
||||
|
||||
let passwordError = null;
|
||||
let passwordDivStyle = 'form-group';
|
||||
if (this.state.passwordError) {
|
||||
passwordError = <label className='control-label'>{this.state.passwordError}</label>;
|
||||
passwordDivStyle += ' has-error';
|
||||
}
|
||||
|
||||
let yourEmailIs = null;
|
||||
if (this.state.email) {
|
||||
yourEmailIs = (
|
||||
<FormattedHTMLMessage
|
||||
id='signup_user_completed.emailIs'
|
||||
defaultMessage="Your email address is <strong>{email}</strong>. You'll use this address to sign in to {siteName}."
|
||||
values={{
|
||||
email: this.state.email,
|
||||
siteName: global.window.mm_config.SiteName
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let emailContainerStyle = 'margin--extra';
|
||||
if (this.state.email) {
|
||||
emailContainerStyle = 'hidden';
|
||||
}
|
||||
|
||||
return (
|
||||
<form>
|
||||
<div className='inner__content'>
|
||||
<div className={emailContainerStyle}>
|
||||
<h5><strong>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.whatis'
|
||||
defaultMessage="What's your email address?"
|
||||
/>
|
||||
</strong></h5>
|
||||
<div className={emailDivStyle}>
|
||||
<input
|
||||
type='email'
|
||||
ref='email'
|
||||
className='form-control'
|
||||
defaultValue={this.state.email}
|
||||
placeholder=''
|
||||
maxLength='128'
|
||||
autoFocus={true}
|
||||
spellCheck='false'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
{emailError}
|
||||
{emailHelpText}
|
||||
</div>
|
||||
</div>
|
||||
{yourEmailIs}
|
||||
<div className='margin--extra'>
|
||||
<h5><strong>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.chooseUser'
|
||||
defaultMessage='Choose your username'
|
||||
/>
|
||||
</strong></h5>
|
||||
<div className={nameDivStyle}>
|
||||
<input
|
||||
type='text'
|
||||
ref='name'
|
||||
className='form-control'
|
||||
placeholder=''
|
||||
maxLength={Constants.MAX_USERNAME_LENGTH}
|
||||
spellCheck='false'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
{nameError}
|
||||
{nameHelpText}
|
||||
</div>
|
||||
</div>
|
||||
<div className='margin--extra'>
|
||||
<h5><strong>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.choosePwd'
|
||||
defaultMessage='Choose your password'
|
||||
/>
|
||||
</strong></h5>
|
||||
<div className={passwordDivStyle}>
|
||||
<input
|
||||
type='password'
|
||||
ref='password'
|
||||
className='form-control'
|
||||
placeholder=''
|
||||
maxLength='128'
|
||||
spellCheck='false'
|
||||
/>
|
||||
{passwordError}
|
||||
</div>
|
||||
</div>
|
||||
<p className='margin--extra'>
|
||||
<button
|
||||
type='submit'
|
||||
onClick={this.handleSubmit}
|
||||
className='btn-primary btn'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.create'
|
||||
defaultMessage='Create Account'
|
||||
/>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
track('signup', 'signup_user_01_welcome');
|
||||
|
||||
let serverError = null;
|
||||
if (this.state.serverError) {
|
||||
serverError = (
|
||||
<div className={'form-group has-error'}>
|
||||
<label className='control-label'>{this.state.serverError}</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.loading) {
|
||||
return (<LoadingScreen/>);
|
||||
}
|
||||
|
||||
let emailSignup;
|
||||
if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
|
||||
emailSignup = this.renderEmailSignup();
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
let terms = null;
|
||||
if (!this.state.noOpenServerError && emailSignup) {
|
||||
terms = (
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id='create_team.agreement'
|
||||
defaultMessage="By proceeding to create your account and use {siteName}, you agree to our <a href='/static/help/terms.html'>Terms of Service</a> and <a href='/static/help/privacy.html'>Privacy Policy</a>. If you do not agree, you cannot use {siteName}."
|
||||
values={{
|
||||
siteName: global.window.mm_config.SiteName
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
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 = (
|
||||
<FormattedMessage
|
||||
id='web.root.signup_info'
|
||||
defaultMessage='All team communication in one place, searchable and accessible anywhere'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='signup-header'>
|
||||
<Link to='/signup_user_complete'>
|
||||
<span className='fa fa-chevron-left'/>
|
||||
<FormattedMessage
|
||||
id='web.header.back'
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='col-sm-12'>
|
||||
<div className='signup-team__container padding--less'>
|
||||
<img
|
||||
className='signup-team-logo'
|
||||
src={logoImage}
|
||||
/>
|
||||
<h1>{global.window.mm_config.SiteName}</h1>
|
||||
<h4 className='color--light'>
|
||||
{description}
|
||||
</h4>
|
||||
<h4 className='color--light'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.lets'
|
||||
defaultMessage="Let's create your account"
|
||||
/>
|
||||
</h4>
|
||||
<span className='color--light'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.haveAccount'
|
||||
defaultMessage='Already have an account?'
|
||||
/>
|
||||
{' '}
|
||||
<Link
|
||||
to={'/login'}
|
||||
query={this.props.location.query}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.signIn'
|
||||
defaultMessage='Click here to sign in.'
|
||||
/>
|
||||
</Link>
|
||||
</span>
|
||||
{emailSignup}
|
||||
{serverError}
|
||||
{terms}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
233
webapp/components/signup/components/signup_ldap.jsx
Обычный файл
233
webapp/components/signup/components/signup_ldap.jsx
Обычный файл
@@ -0,0 +1,233 @@
|
||||
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import FormError from 'components/form_error.jsx';
|
||||
|
||||
import * as GlobalActions from 'actions/global_actions.jsx';
|
||||
import {track} from 'actions/analytics_actions.jsx';
|
||||
|
||||
import * as Utils from 'utils/utils.jsx';
|
||||
import Client from 'client/web_client.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 SignupLdap extends React.Component {
|
||||
static get propTypes() {
|
||||
return {
|
||||
location: React.PropTypes.object
|
||||
};
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleLdapSignup = this.handleLdapSignup.bind(this);
|
||||
this.handleLdapSignupSuccess = this.handleLdapSignupSuccess.bind(this);
|
||||
|
||||
this.state = ({
|
||||
ldapError: ''
|
||||
});
|
||||
}
|
||||
|
||||
handleLdapSignup(e) {
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({ldapError: ''});
|
||||
|
||||
Client.webLoginByLdap(
|
||||
this.refs.id.value.trim(),
|
||||
this.refs.password.value,
|
||||
null,
|
||||
this.handleLdapSignupSuccess,
|
||||
(err) => {
|
||||
this.setState({
|
||||
ldapError: err.message
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
handleLdapSignupSuccess() {
|
||||
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();
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.finishSignup();
|
||||
}
|
||||
}
|
||||
|
||||
finishSignup() {
|
||||
GlobalActions.emitInitialLoad(
|
||||
() => {
|
||||
GlobalActions.loadDefaultLocale();
|
||||
browserHistory.push('/select_team');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
track('signup', 'signup_user_01_welcome');
|
||||
|
||||
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';
|
||||
}
|
||||
|
||||
let ldapSignup;
|
||||
if (global.window.mm_config.EnableLdap === 'true' && global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.LDAP) {
|
||||
ldapSignup = (
|
||||
<div className='inner__content'>
|
||||
<h5>
|
||||
<strong>
|
||||
<FormattedMessage
|
||||
id='signup.ldap'
|
||||
defaultMessage='LDAP Credentials'
|
||||
/>
|
||||
</strong>
|
||||
</h5>
|
||||
<form
|
||||
onSubmit={this.handleLdapSignup}
|
||||
>
|
||||
<div className='signup__email-container'>
|
||||
<FormError
|
||||
error={this.state.ldapError}
|
||||
margin={true}
|
||||
/>
|
||||
<div className={'form-group' + errorClass}>
|
||||
<input
|
||||
className='form-control'
|
||||
name='ldapId'
|
||||
ref='id'
|
||||
placeholder={ldapIdPlaceholder}
|
||||
spellCheck='false'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
</div>
|
||||
<div className={'form-group' + errorClass}>
|
||||
<input
|
||||
type='password'
|
||||
className='form-control'
|
||||
name='password'
|
||||
ref='password'
|
||||
placeholder={Utils.localizeMessage('login.password', 'Password')}
|
||||
spellCheck='false'
|
||||
/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<button
|
||||
type='submit'
|
||||
className='btn btn-primary'
|
||||
disabled={!this.state.ldapId || !this.state.ldapPassword}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='login.signIn'
|
||||
defaultMessage='Sign in'
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
let terms = null;
|
||||
if (ldapSignup) {
|
||||
terms = (
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id='create_team.agreement'
|
||||
defaultMessage="By proceeding to create your account and use {siteName}, you agree to our <a href='/static/help/terms.html'>Terms of Service</a> and <a href='/static/help/privacy.html'>Privacy Policy</a>. If you do not agree, you cannot use {siteName}."
|
||||
values={{
|
||||
siteName: global.window.mm_config.SiteName
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
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 = (
|
||||
<FormattedMessage
|
||||
id='web.root.signup_info'
|
||||
defaultMessage='All team communication in one place, searchable and accessible anywhere'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='signup-header'>
|
||||
<Link to='/signup_user_complete'>
|
||||
<span className='fa fa-chevron-left'/>
|
||||
<FormattedMessage
|
||||
id='web.header.back'
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='col-sm-12'>
|
||||
<div className='signup-team__container padding--less'>
|
||||
<img
|
||||
className='signup-team-logo'
|
||||
src={logoImage}
|
||||
/>
|
||||
<h1>{global.window.mm_config.SiteName}</h1>
|
||||
<h4 className='color--light'>
|
||||
{description}
|
||||
</h4>
|
||||
<h4 className='color--light'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.lets'
|
||||
defaultMessage="Let's create your account"
|
||||
/>
|
||||
</h4>
|
||||
<span className='color--light'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.haveAccount'
|
||||
defaultMessage='Already have an account?'
|
||||
/>
|
||||
{' '}
|
||||
<Link
|
||||
to={'/login'}
|
||||
query={this.props.location.query}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.signIn'
|
||||
defaultMessage='Click here to sign in.'
|
||||
/>
|
||||
</Link>
|
||||
</span>
|
||||
{ldapSignup}
|
||||
{terms}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
333
webapp/components/signup/signup_controller.jsx
Обычный файл
333
webapp/components/signup/signup_controller.jsx
Обычный файл
@@ -0,0 +1,333 @@
|
||||
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import FormError from 'components/form_error.jsx';
|
||||
import LoadingScreen from 'components/loading_screen.jsx';
|
||||
|
||||
import UserStore from 'stores/user_store.jsx';
|
||||
import BrowserStore from 'stores/browser_store.jsx';
|
||||
|
||||
import * as AsyncClient from 'utils/async_client.jsx';
|
||||
import Client from 'client/web_client.jsx';
|
||||
import * as GlobalActions from 'actions/global_actions.jsx';
|
||||
|
||||
import logoImage from 'images/logo.png';
|
||||
import ErrorBar from 'components/error_bar.jsx';
|
||||
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import {browserHistory, Link} from 'react-router/es6';
|
||||
|
||||
export default class SignupController extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.renderSignupControls = this.renderSignupControls.bind(this);
|
||||
|
||||
let loading = false;
|
||||
let serverError = '';
|
||||
let noOpenServerError = false;
|
||||
let usedBefore = false;
|
||||
|
||||
if (props.location.query) {
|
||||
loading = true;
|
||||
const hash = props.location.query.h;
|
||||
|
||||
if (hash && hash.length > 0 && !UserStore.getCurrentUser()) {
|
||||
usedBefore = BrowserStore.getGlobalItem(hash);
|
||||
loading = false;
|
||||
} else if (global.window.mm_config.EnableOpenServer !== 'true' && !UserStore.getNoAccounts()) {
|
||||
noOpenServerError = true;
|
||||
loading = false;
|
||||
serverError = (
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.no_open_server'
|
||||
defaultMessage='This server does not allow open signups. Please speak with your Administrator to receive an invitation.'
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
this.state = {
|
||||
loading,
|
||||
serverError,
|
||||
noOpenServerError,
|
||||
usedBefore
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
AsyncClient.checkVersion();
|
||||
|
||||
if (this.props.location.query) {
|
||||
const hash = this.props.location.query.h;
|
||||
const data = this.props.location.query.d;
|
||||
const inviteId = this.props.location.query.id;
|
||||
|
||||
if ((inviteId && inviteId.length > 0) || (hash && hash.length > 0)) {
|
||||
if (UserStore.getCurrentUser()) {
|
||||
Client.addUserToTeamFromInvite(
|
||||
data,
|
||||
hash,
|
||||
inviteId,
|
||||
(team) => {
|
||||
GlobalActions.emitInitialLoad(
|
||||
() => {
|
||||
browserHistory.push('/' + team.name + '/channels/town-square');
|
||||
}
|
||||
);
|
||||
},
|
||||
(err) => {
|
||||
this.setState({ // eslint-disable-line react/no-did-mount-set-state
|
||||
serverError: err.message
|
||||
});
|
||||
}
|
||||
);
|
||||
} else if (!this.state.usedBefore) {
|
||||
Client.getInviteInfo(
|
||||
inviteId,
|
||||
(inviteData) => {
|
||||
if (!inviteData) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ // eslint-disable-line react/no-did-mount-set-state
|
||||
serverError: '',
|
||||
loading: false
|
||||
});
|
||||
},
|
||||
() => {
|
||||
this.setState({ // eslint-disable-line react/no-did-mount-set-state
|
||||
noOpenServerError: true,
|
||||
loading: false,
|
||||
serverError: (
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.invalid_invite'
|
||||
defaultMessage='The invite link was invalid. Please speak with your Administrator to receive an invitation.'
|
||||
/>
|
||||
)
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
} else if (UserStore.getCurrentUser()) {
|
||||
browserHistory.push('/select_team');
|
||||
} else {
|
||||
this.setState({ // eslint-disable-line react/no-did-mount-set-state
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderSignupControls() {
|
||||
let signupControls = [];
|
||||
|
||||
if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
|
||||
signupControls.push(
|
||||
<Link
|
||||
className='btn btn-custom-login btn--full email'
|
||||
key='email'
|
||||
to={'/signup_email' + window.location.search}
|
||||
>
|
||||
|
||||
<span className='icon fa fa-envelope'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup.email'
|
||||
defaultMessage='Email and Password'
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_config.EnableSignUpWithGitLab === 'true') {
|
||||
signupControls.push(
|
||||
<a
|
||||
className='btn btn-custom-login btn--full gitlab'
|
||||
key='gitlab'
|
||||
href={Client.getOAuthRoute() + '/gitlab/signup' + window.location.search}
|
||||
>
|
||||
<span className='icon'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup.gitlab'
|
||||
defaultMessage='GitLab Single-Sign-On'
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_config.EnableSignUpWithGoogle === 'true') {
|
||||
signupControls.push(
|
||||
<a
|
||||
className='btn btn-custom-login btn--full google'
|
||||
key='google'
|
||||
href={Client.getOAuthRoute() + '/google/signup' + window.location.search}
|
||||
>
|
||||
<span className='icon'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup.google'
|
||||
defaultMessage='Google Account'
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_config.EnableSignUpWithOffice365 === 'true') {
|
||||
signupControls.push(
|
||||
<a
|
||||
className='btn btn-custom-login btn--full office365'
|
||||
key='office365'
|
||||
href={Client.getOAuthRoute() + '/office365/signup' + window.location.search}
|
||||
>
|
||||
<span className='icon'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup.office365'
|
||||
defaultMessage='Office 365'
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_config.EnableLdap === 'true') {
|
||||
signupControls.push(
|
||||
<Link
|
||||
className='btn btn-custom-login btn--full ldap'
|
||||
key='ldap'
|
||||
to={'/signup_ldap'}
|
||||
>
|
||||
<span className='icon fa fa-folder-open fa--margin-top'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup.ldap'
|
||||
defaultMessage='LDAP Credentials'
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_config.EnableSaml === 'true') {
|
||||
let query = '';
|
||||
if (window.location.search) {
|
||||
query = '&action=signup';
|
||||
} else {
|
||||
query = '?action=signup';
|
||||
}
|
||||
|
||||
signupControls.push(
|
||||
<a
|
||||
className='btn btn-custom-login btn--full saml'
|
||||
key='saml'
|
||||
href={'/login/sso/saml' + window.location.search + query}
|
||||
>
|
||||
<span className='icon fa fa-lock fa--margin-top'/>
|
||||
<span>
|
||||
{global.window.mm_config.SamlLoginButtonText}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (signupControls.length === 0) {
|
||||
const signupDisabledError = (
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.none'
|
||||
defaultMessage='No user creation method has been enabled. Please contact an administrator for access.'
|
||||
/>
|
||||
);
|
||||
signupControls = (
|
||||
<FormError
|
||||
error={signupDisabledError}
|
||||
margin={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return signupControls;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.loading) {
|
||||
return (<LoadingScreen/>);
|
||||
}
|
||||
|
||||
if (this.state.usedBefore) {
|
||||
return (
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.expired'
|
||||
defaultMessage="You've already completed the signup process for this invitation or this invitation has expired."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let signupControls = this.renderSignupControls();
|
||||
|
||||
let serverError = null;
|
||||
if (this.state.serverError) {
|
||||
serverError = (
|
||||
<div className={'form-group has-error'}>
|
||||
<label className='control-label'>{this.state.serverError}</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.noOpenServerError || this.state.usedBefore) {
|
||||
signupControls = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ErrorBar/>
|
||||
<div className='signup-header'>
|
||||
<Link to='/'>
|
||||
<span className='fa fa-chevron-left'/>
|
||||
<FormattedMessage
|
||||
id='web.header.back'
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='col-sm-12'>
|
||||
<div className='signup-team__container'>
|
||||
<img
|
||||
className='signup-team-logo'
|
||||
src={logoImage}
|
||||
/>
|
||||
<div className='signup__content'>
|
||||
<h1>{global.window.mm_config.SiteName}</h1>
|
||||
<h4 className='color--light'>
|
||||
<FormattedMessage
|
||||
id='web.root.signup_info'
|
||||
/>
|
||||
</h4>
|
||||
<div className='margin--extra'>
|
||||
<h5><strong>
|
||||
<FormattedMessage
|
||||
id='signup.title'
|
||||
defaultMessage='Create an account with:'
|
||||
/>
|
||||
</strong></h5>
|
||||
</div>
|
||||
{signupControls}
|
||||
{serverError}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SignupController.propTypes = {
|
||||
location: React.PropTypes.object
|
||||
};
|
||||
@@ -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:
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.invalid_invite'
|
||||
defaultMessage='The invite link was invalid. Please speak with your Administrator to receive an invitation.'
|
||||
/>
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
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:
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.no_open_server'
|
||||
defaultMessage='This server does not allow open signups. Please speak with your Administrator to receive an invitation.'
|
||||
/>
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({
|
||||
data,
|
||||
hash,
|
||||
usedBefore,
|
||||
email,
|
||||
teamDisplayName,
|
||||
teamName,
|
||||
teamId,
|
||||
openServer,
|
||||
inviteId,
|
||||
loading
|
||||
});
|
||||
|
||||
this.setState({
|
||||
signupDisabledError: (
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.none'
|
||||
defaultMessage='No user creation method has been enabled. Please contact an administrator for access.'
|
||||
/>
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
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: (
|
||||
<FormattedMessage
|
||||
id='login.userNotFound'
|
||||
defaultMessage="We couldn't find an account matching your login credentials."
|
||||
/>
|
||||
)
|
||||
});
|
||||
} else if (err.id === 'ent.ldap.do_login.invalid_password.app_error') {
|
||||
this.setState({
|
||||
ldapError: (
|
||||
<FormattedMessage
|
||||
id='login.invalidPassword'
|
||||
defaultMessage='Your password is incorrect.'
|
||||
/>
|
||||
)
|
||||
});
|
||||
} 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: (<FormattedMessage id='signup_user_completed.required'/>),
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Utils.isEmail(providedEmail)) {
|
||||
this.setState({
|
||||
nameError: '',
|
||||
emailError: (<FormattedMessage id='signup_user_completed.validEmail'/>),
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const providedUsername = ReactDOM.findDOMNode(this.refs.name).value.trim().toLowerCase();
|
||||
if (!providedUsername) {
|
||||
this.setState({
|
||||
nameError: (<FormattedMessage id='signup_user_completed.required'/>),
|
||||
emailError: '',
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const usernameError = Utils.isValidUsername(providedUsername);
|
||||
if (usernameError === 'Cannot use a reserved word as a username.') {
|
||||
this.setState({
|
||||
nameError: (<FormattedMessage id='signup_user_completed.reserved'/>),
|
||||
emailError: '',
|
||||
passwordError: '',
|
||||
serverError: ''
|
||||
});
|
||||
return;
|
||||
} else if (usernameError) {
|
||||
this.setState({
|
||||
nameError: (
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.usernameLength'
|
||||
values={{
|
||||
min: Constants.MIN_USERNAME_LENGTH,
|
||||
max: Constants.MAX_USERNAME_LENGTH
|
||||
}}
|
||||
/>
|
||||
),
|
||||
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 (
|
||||
<form
|
||||
onSubmit={this.handleLdapSignup}
|
||||
>
|
||||
<div className='signup__email-container'>
|
||||
<FormError
|
||||
error={this.state.ldapError}
|
||||
margin={true}
|
||||
/>
|
||||
<div className={'form-group' + errorClass}>
|
||||
<input
|
||||
className='form-control'
|
||||
name='ldapId'
|
||||
value={this.state.ldapId}
|
||||
onChange={this.handleLdapIdChange}
|
||||
placeholder={ldapIdPlaceholder}
|
||||
spellCheck='false'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
</div>
|
||||
<div className={'form-group' + errorClass}>
|
||||
<input
|
||||
type='password'
|
||||
className='form-control'
|
||||
name='password'
|
||||
value={this.state.ldapPassword}
|
||||
onChange={this.handleLdapPasswordChange}
|
||||
placeholder={Utils.localizeMessage('login.password', 'Password')}
|
||||
spellCheck='false'
|
||||
/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<button
|
||||
type='submit'
|
||||
className='btn btn-primary'
|
||||
disabled={!this.state.ldapId || !this.state.ldapPassword}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='login.signIn'
|
||||
defaultMessage='Sign in'
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
track('signup', 'signup_user_01_welcome');
|
||||
|
||||
// If we have been used then just display a message
|
||||
if (this.state.usedBefore) {
|
||||
return (
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.expired'
|
||||
defaultMessage="You've already completed the signup process for this invitation or this invitation has expired."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.loading) {
|
||||
return (<LoadingScreen/>);
|
||||
}
|
||||
|
||||
// set up error labels
|
||||
var emailError = null;
|
||||
var emailHelpText = (
|
||||
<span className='help-block'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.emailHelp'
|
||||
defaultMessage='Valid email required for sign-up'
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
var emailDivStyle = 'form-group';
|
||||
if (this.state.emailError) {
|
||||
emailError = (<label className='control-label'>{this.state.emailError}</label>);
|
||||
emailHelpText = '';
|
||||
emailDivStyle += ' has-error';
|
||||
}
|
||||
|
||||
var nameError = null;
|
||||
var nameHelpText = (
|
||||
<span className='help-block'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.userHelp'
|
||||
defaultMessage="Username must begin with a letter, and contain between {min} to {max} lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'"
|
||||
values={{
|
||||
min: Constants.MIN_USERNAME_LENGTH,
|
||||
max: Constants.MAX_USERNAME_LENGTH
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
var nameDivStyle = 'form-group';
|
||||
if (this.state.nameError) {
|
||||
nameError = <label className='control-label'>{this.state.nameError}</label>;
|
||||
nameHelpText = '';
|
||||
nameDivStyle += ' has-error';
|
||||
}
|
||||
|
||||
var passwordError = null;
|
||||
var passwordDivStyle = 'form-group';
|
||||
if (this.state.passwordError) {
|
||||
passwordError = <label className='control-label'>{this.state.passwordError}</label>;
|
||||
passwordDivStyle += ' has-error';
|
||||
}
|
||||
|
||||
var serverError = null;
|
||||
if (this.state.serverError) {
|
||||
serverError = (
|
||||
<div className={'form-group has-error'}>
|
||||
<label className='control-label'>{this.state.serverError}</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// set up the email entry and hide it if an email was provided
|
||||
var yourEmailIs = '';
|
||||
if (this.state.email) {
|
||||
yourEmailIs = (
|
||||
<FormattedHTMLMessage
|
||||
id='signup_user_completed.emailIs'
|
||||
defaultMessage="Your email address is <strong>{email}</strong>. You'll use this address to sign in to {siteName}."
|
||||
values={{
|
||||
email: this.state.email,
|
||||
siteName: global.window.mm_config.SiteName
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
var emailContainerStyle = 'margin--extra';
|
||||
if (this.state.email) {
|
||||
emailContainerStyle = 'hidden';
|
||||
}
|
||||
|
||||
var email = (
|
||||
<div className={emailContainerStyle}>
|
||||
<h5><strong>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.whatis'
|
||||
defaultMessage="What's your email address?"
|
||||
/>
|
||||
</strong></h5>
|
||||
<div className={emailDivStyle}>
|
||||
<input
|
||||
type='email'
|
||||
ref='email'
|
||||
className='form-control'
|
||||
defaultValue={this.state.email}
|
||||
placeholder=''
|
||||
maxLength='128'
|
||||
autoFocus={true}
|
||||
spellCheck='false'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
{emailError}
|
||||
{emailHelpText}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let signupMessage = [];
|
||||
if (global.window.mm_config.EnableSignUpWithGitLab === 'true') {
|
||||
signupMessage.push(
|
||||
<a
|
||||
className='btn btn-custom-login gitlab'
|
||||
key='gitlab'
|
||||
href={Client.getOAuthRoute() + '/gitlab/signup' + window.location.search}
|
||||
>
|
||||
<span className='icon'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.gitlab'
|
||||
defaultMessage='with GitLab'
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_config.EnableSignUpWithGoogle === 'true') {
|
||||
signupMessage.push(
|
||||
<a
|
||||
className='btn btn-custom-login google'
|
||||
key='google'
|
||||
href={Client.getOAuthRoute() + '/google/signup' + window.location.search}
|
||||
>
|
||||
<span className='icon'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.google'
|
||||
defaultMessage='with Google'
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_config.EnableSignUpWithOffice365 === 'true') {
|
||||
signupMessage.push(
|
||||
<a
|
||||
className='btn btn-custom-login office365'
|
||||
key='office365'
|
||||
href={Client.getOAuthRoute() + '/office365/signup' + window.location.search}
|
||||
>
|
||||
<span className='icon'/>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.office365'
|
||||
defaultMessage='with Office 365'
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (global.window.mm_config.EnableSaml === 'true' && global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.SAML === 'true') {
|
||||
signupMessage.push(
|
||||
<a
|
||||
className='btn btn-custom-login saml'
|
||||
key='saml'
|
||||
href={`/login/sso/saml${window.location.search}${window.location.search ? '&' : '?'}action=signup`}
|
||||
>
|
||||
<span>
|
||||
{global.window.mm_config.SamlLoginButtonText}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
let ldapSignup;
|
||||
if (global.window.mm_config.EnableLdap === 'true' && global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.LDAP) {
|
||||
ldapSignup = (
|
||||
<div className='inner__content'>
|
||||
<h5>
|
||||
<strong>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.withLdap'
|
||||
defaultMessage='With your LDAP credentials'
|
||||
/>
|
||||
</strong>
|
||||
</h5>
|
||||
{this.renderLdapLogin()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let emailSignup;
|
||||
if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
|
||||
emailSignup = (
|
||||
<form>
|
||||
<div className='inner__content'>
|
||||
{email}
|
||||
{yourEmailIs}
|
||||
<div className='margin--extra'>
|
||||
<h5><strong>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.chooseUser'
|
||||
defaultMessage='Choose your username'
|
||||
/>
|
||||
</strong></h5>
|
||||
<div className={nameDivStyle}>
|
||||
<input
|
||||
type='text'
|
||||
ref='name'
|
||||
className='form-control'
|
||||
placeholder=''
|
||||
maxLength={Constants.MAX_USERNAME_LENGTH}
|
||||
spellCheck='false'
|
||||
autoCapitalize='off'
|
||||
/>
|
||||
{nameError}
|
||||
{nameHelpText}
|
||||
</div>
|
||||
</div>
|
||||
<div className='margin--extra'>
|
||||
<h5><strong>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.choosePwd'
|
||||
defaultMessage='Choose your password'
|
||||
/>
|
||||
</strong></h5>
|
||||
<div className={passwordDivStyle}>
|
||||
<input
|
||||
type='password'
|
||||
ref='password'
|
||||
className='form-control'
|
||||
placeholder=''
|
||||
maxLength='128'
|
||||
spellCheck='false'
|
||||
/>
|
||||
{passwordError}
|
||||
</div>
|
||||
</div>
|
||||
<p className='margin--extra'>
|
||||
<button
|
||||
type='submit'
|
||||
onClick={this.handleSubmit}
|
||||
className='btn-primary btn'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.create'
|
||||
defaultMessage='Create Account'
|
||||
/>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
if (signupMessage.length > 0 && (emailSignup || ldapSignup)) {
|
||||
signupMessage = (
|
||||
<div>
|
||||
{signupMessage}
|
||||
<div className='or__container'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.or'
|
||||
defaultMessage='or'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (ldapSignup && emailSignup) {
|
||||
ldapSignup = (
|
||||
<div>
|
||||
{ldapSignup}
|
||||
<div className='or__container'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.or'
|
||||
defaultMessage='or'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let terms = null;
|
||||
if (!this.state.noOpenServerError && (emailSignup || ldapSignup)) {
|
||||
terms = (
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id='create_team.agreement'
|
||||
defaultMessage="By proceeding to create your account and use {siteName}, you agree to our <a href='/static/help/terms.html'>Terms of Service</a> and <a href='/static/help/privacy.html'>Privacy Policy</a>. If you do not agree, you cannot use {siteName}."
|
||||
values={{
|
||||
siteName: global.window.mm_config.SiteName
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
if (signupMessage.length === 0 && !emailSignup && !ldapSignup) {
|
||||
emailSignup = (
|
||||
<FormError
|
||||
error={this.state.signupDisabledError}
|
||||
margin={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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 = (
|
||||
<FormattedMessage
|
||||
id='web.root.signup_info'
|
||||
defaultMessage='All team communication in one place, searchable and accessible anywhere'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='signup-header'>
|
||||
<Link to='/'>
|
||||
<span className='fa fa-chevron-left'/>
|
||||
<FormattedMessage
|
||||
id='web.header.back'
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className='col-sm-12'>
|
||||
<div className='signup-team__container padding--less'>
|
||||
<img
|
||||
className='signup-team-logo'
|
||||
src={logoImage}
|
||||
/>
|
||||
<h1>{global.window.mm_config.SiteName}</h1>
|
||||
<h4 className='color--light'>
|
||||
{description}
|
||||
</h4>
|
||||
<h4 className='color--light'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.lets'
|
||||
defaultMessage="Let's create your account"
|
||||
/>
|
||||
</h4>
|
||||
<span className='color--light'>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.haveAccount'
|
||||
defaultMessage='Already have an account?'
|
||||
/>
|
||||
{' '}
|
||||
<Link
|
||||
to={'/login'}
|
||||
query={this.props.location.query}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='signup_user_completed.signIn'
|
||||
defaultMessage='Click here to sign in.'
|
||||
/>
|
||||
</Link>
|
||||
</span>
|
||||
{signupMessage}
|
||||
{ldapSignup}
|
||||
{emailSignup}
|
||||
{serverError}
|
||||
{terms}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1597,6 +1597,12 @@
|
||||
"sidebar_right_menu.switch_team": "Team Selection",
|
||||
"sidebar_right_menu.teamLink": "Get Team Invite Link",
|
||||
"sidebar_right_menu.teamSettings": "Team Settings",
|
||||
"signup.title": "Create an account with:",
|
||||
"signup.ldap": "LDAP Credentials",
|
||||
"signup.google": "Google Account",
|
||||
"signup.office365": "Office 365",
|
||||
"signup.gitlab": "GitLab Single-Sign-On",
|
||||
"signup.email": "Email and Password",
|
||||
"signup_team.choose": "Your teams: ",
|
||||
"signup_team.createTeam": "Or Create a Team",
|
||||
"signup_team.disabled": "Team creation has been disabled. Please contact an administrator for access.",
|
||||
|
||||
@@ -66,7 +66,19 @@ export default {
|
||||
{
|
||||
path: 'signup_user_complete',
|
||||
getComponents: (location, callback) => {
|
||||
System.import('components/signup_user_complete.jsx').then(RouteUtils.importComponentSuccess(callback));
|
||||
System.import('components/signup/signup_controller.jsx').then(RouteUtils.importComponentSuccess(callback));
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'signup_email',
|
||||
getComponents: (location, callback) => {
|
||||
System.import('components/signup/components/signup_email.jsx').then(RouteUtils.importComponentSuccess(callback));
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'signup_ldap',
|
||||
getComponents: (location, callback) => {
|
||||
System.import('components/signup/components/signup_ldap.jsx').then(RouteUtils.importComponentSuccess(callback));
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -203,6 +203,11 @@
|
||||
.fa {
|
||||
font-size: 17px;
|
||||
margin-right: 8px;
|
||||
|
||||
&.fa--margin-top {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -210,6 +215,7 @@
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
@@ -218,10 +224,11 @@
|
||||
color: $white;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 34px;
|
||||
line-height: 36px;
|
||||
margin: 1em 0;
|
||||
min-width: 200px;
|
||||
padding: 0 1em;
|
||||
padding: 0 1em 0 2em;
|
||||
text-align: left;
|
||||
width: 200px;
|
||||
|
||||
&.gitlab {
|
||||
@@ -268,16 +275,15 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left:-10px;
|
||||
background-image: url('../images/office365Logo.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.ldap {
|
||||
background: #dd4b39;
|
||||
background: #3AA1CF;
|
||||
|
||||
&:hover {
|
||||
background: darken(#dd4b39, 10%);
|
||||
background: darken(#3AA1CF, 10%);
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -298,10 +304,10 @@
|
||||
}
|
||||
|
||||
&.saml {
|
||||
background: #dd4b39;
|
||||
background: #34a28b;
|
||||
|
||||
&:hover {
|
||||
background: darken(#dd4b39, 10%);
|
||||
background: darken(#34a28b, 10%);
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -309,11 +315,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-full {
|
||||
&.btn--full {
|
||||
max-width: 350px;
|
||||
padding-left: 35px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.btn--large {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-default {
|
||||
@@ -502,4 +513,4 @@
|
||||
.verify_panel {
|
||||
margin: 60px auto auto;
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
Ссылка в новой задаче
Block a user