Files
mattermost/webapp/components/signup/signup_controller.jsx
Joram Wilander abd0466a42 PLT-3466 E10: Add announcement bar feature (#6509)
* E10 - Add announcement bar feature

* Updates per feedback

* Add component tests and snapshots

* Update snapshots

* Updating color picker UI (#6543)

* Add class to body tag when banner is not dismissable and clean up localstorage items when banner changes

* Fixing links (#6544)

* Updating UI for fixed error bar (#6552)

* Truncating text on fixed banner (#6561)

* Plt 3466 - Error bar link states (#6577)

* Updating error bar hover state

* Updating error bar link states
2017-06-05 12:49:38 -04:00

381 lines
14 KiB
JavaScript

import PropTypes from 'prop-types';
// Copyright (c) 2016-present 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 {addUserToTeamFromInvite, getInviteInfo} from 'actions/team_actions.jsx';
import {loadMe} from 'actions/user_actions.jsx';
import logoImage from 'images/logo.png';
import AnnouncementBar from 'components/announcement_bar';
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) {
const hash = props.location.query.h;
const inviteId = props.location.query.id;
if (inviteId) {
loading = true;
} else if (hash && !UserStore.getCurrentUser()) {
usedBefore = BrowserStore.getGlobalItem(hash);
} else if (!inviteId && global.window.mm_config.EnableOpenServer !== 'true' && !UserStore.getNoAccounts()) {
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.state = {
loading,
serverError,
noOpenServerError,
usedBefore
};
}
componentDidMount() {
AsyncClient.checkVersion();
BrowserStore.removeGlobalItem('team');
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;
const userLoggedIn = UserStore.getCurrentUser() != null;
if ((inviteId || hash) && userLoggedIn) {
addUserToTeamFromInvite(
data,
hash,
inviteId,
(team) => {
loadMe(
() => {
browserHistory.push('/' + team.name + '/channels/town-square');
}
);
},
() => {
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.'
/>
)
});
}
);
return;
}
if (inviteId) {
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.'
/>
)
});
}
);
return;
}
if (userLoggedIn) {
GlobalActions.redirectUserToDefaultTeam();
}
}
}
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>
<span className='icon fa fa-envelope'/>
<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>
<span className='icon'/>
<span>
<FormattedMessage
id='signup.gitlab'
defaultMessage='GitLab Single-Sign-On'
/>
</span>
</span>
</a>
);
}
if (global.window.mm_license.IsLicensed === 'true' && 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>
<span className='icon'/>
<span>
<FormattedMessage
id='signup.google'
defaultMessage='Google Account'
/>
</span>
</span>
</a>
);
}
if (global.window.mm_license.IsLicensed === 'true' && 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>
<span className='icon'/>
<span>
<FormattedMessage
id='signup.office365'
defaultMessage='Office 365'
/>
</span>
</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' + window.location.search}
>
<span>
<span className='icon fa fa-folder-open fa--margin-top'/>
<span>
<FormattedMessage
id='signup.ldap'
defaultMessage='AD/LDAP Credentials'
/>
</span>
</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>
<span className='icon fa fa-lock fa--margin-top'/>
<span>
{global.window.mm_config.SamlLoginButtonText}
</span>
</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}
/>
);
} else if (signupControls.length === 1) {
if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
return browserHistory.push('/signup_email' + window.location.search);
} else if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_config.EnableLdap === 'true') {
return browserHistory.push('/signup_ldap' + window.location.search);
}
}
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 serverError = null;
if (this.state.serverError) {
serverError = (
<div className={'form-group has-error'}>
<label className='control-label'>{this.state.serverError}</label>
</div>
);
}
let signupControls;
if (this.state.noOpenServerError || this.state.usedBefore) {
signupControls = null;
} else {
signupControls = this.renderSignupControls();
}
return (
<div>
<AnnouncementBar/>
<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>
<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>
</div>
</div>
</div>
);
}
}
SignupController.propTypes = {
location: PropTypes.object
};