Merge pull request #2465 from mattermost/plt-2260

PLT-2260 Add the ability to switch from email to ldap and back
Этот коммит содержится в:
Christopher Speller
2016-03-23 16:26:37 -04:00
родитель 6285ec44bb 934c7c7a7c
Коммит 07bf7c498d
20 изменённых файлов: 927 добавлений и 225 удалений

Просмотреть файл

@@ -1,16 +1,14 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import EmailToSSO from './email_to_sso.jsx';
import SSOToEmail from './sso_to_email.jsx';
import TeamStore from 'stores/team_store.jsx';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import React from 'react';
import logoImage from 'images/logo.png';
export default class ClaimAccount extends React.Component {
export default class Claim extends React.Component {
constructor(props) {
super(props);
@@ -39,7 +37,7 @@ export default class ClaimAccount extends React.Component {
const team = TeamStore.getByName(this.state.teamName);
let displayName = '';
if (team) {
displayName = team.displayName;
displayName = team.display_name;
}
this.setState({
teamDisplayName: displayName
@@ -49,39 +47,6 @@ export default class ClaimAccount extends React.Component {
this.updateStateFromStores();
}
render() {
if (this.state.teamDisplayName === '') {
return (<div/>);
}
let content;
if (this.state.email === '') {
content = (
<p>
<FormattedMessage
id='claim.account.noEmail'
defaultMessage='No email specified'
/>
</p>
);
} else if (this.state.oldType === '' && this.state.newType !== '') {
content = (
<EmailToSSO
email={this.state.email}
type={this.state.newType}
teamName={this.state.teamName}
teamDisplayName={this.state.teamDisplayName}
/>
);
} else {
content = (
<SSOToEmail
email={this.state.email}
currentType={this.state.oldType}
teamName={this.state.teamName}
teamDisplayName={this.state.teamDisplayName}
/>
);
}
return (
<div>
<div className='signup-header'>
@@ -99,7 +64,13 @@ export default class ClaimAccount extends React.Component {
src={logoImage}
/>
<div id='claim'>
{content}
{React.cloneElement(this.props.children, {
teamName: this.state.teamName,
teamDisplayName: this.state.teamDisplayName,
currentType: this.state.oldType,
newType: this.state.newType,
email: this.state.email
})}
</div>
</div>
</div>
@@ -108,9 +79,10 @@ export default class ClaimAccount extends React.Component {
}
}
ClaimAccount.defaultProps = {
Claim.defaultProps = {
};
ClaimAccount.propTypes = {
Claim.propTypes = {
params: React.PropTypes.object.isRequired,
location: React.PropTypes.object.isRequired
location: React.PropTypes.object.isRequired,
children: React.PropTypes.node
};

Просмотреть файл

@@ -0,0 +1,169 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import * as Utils from 'utils/utils.jsx';
import * as Client from 'utils/client.jsx';
import React from 'react';
import ReactDOM from 'react-dom';
import {FormattedMessage} from 'react-intl';
export default class EmailToLDAP extends React.Component {
constructor(props) {
super(props);
this.submit = this.submit.bind(this);
this.state = {};
}
submit(e) {
e.preventDefault();
var state = {};
const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
if (!password) {
state.error = Utils.localizeMessage('claim.email_to_ldap.pwdError', 'Please enter your password.');
this.setState(state);
return;
}
const ldapId = ReactDOM.findDOMNode(this.refs.ldapid).value.trim();
if (!ldapId) {
state.error = Utils.localizeMessage('claim.email_to_ldap.ldapIdError', 'Please enter your LDAP ID.');
this.setState(state);
return;
}
const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value.trim();
if (!ldapPassword) {
state.error = Utils.localizeMessage('claim.email_to_ldap.ldapPasswordError', 'Please enter your LDAP password.');
this.setState(state);
return;
}
state.error = null;
this.setState(state);
var postData = {};
postData.email_password = password;
postData.ldap_id = ldapId;
postData.ldap_password = ldapPassword;
postData.email = this.props.email;
postData.team_name = this.props.teamName;
Client.emailToLDAP(postData,
(data) => {
if (data.follow_link) {
window.location.href = data.follow_link;
}
},
(error) => {
this.setState({error});
}
);
}
render() {
var error = null;
if (this.state.error) {
error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
}
var formClass = 'form-group';
if (error) {
formClass += ' has-error';
}
return (
<div>
<h3>
<FormattedMessage
id='claim.email_to_ldap.title'
defaultMessage='Switch Email/Password Account to LDAP'
/>
</h3>
<form onSubmit={this.submit}>
<p>
<FormattedMessage
id='claim.email_to_ldap.ssoType'
defaultMessage='Upon claiming your account, you will only be able to login with LDAP'
/>
</p>
<p>
<FormattedMessage
id='claim.email_to_ldap.ssoNote'
defaultMessage='You must already have a valid LDAP account'
/>
</p>
<p>
<FormattedMessage
id='claim.email_to_ldap.enterPwd'
defaultMessage='Enter the password for your {team} {site} email account'
values={{
team: this.props.teamDisplayName,
site: global.window.mm_config.SiteName
}}
/>
</p>
<div className={formClass}>
<input
type='password'
className='form-control'
name='password'
ref='password'
placeholder={Utils.localizeMessage('claim.email_to_ldap.pwd', 'Password')}
spellCheck='false'
/>
</div>
<p>
<FormattedMessage
id='claim.email_to_ldap.enterLdapPwd'
defaultMessage='Enter the ID and password for your LDAP account'
values={{
team: this.props.teamDisplayName,
site: global.window.mm_config.SiteName
}}
/>
</p>
<div className={formClass}>
<input
type='text'
className='form-control'
name='ldapId'
ref='ldapid'
placeholder={Utils.localizeMessage('claim.email_to_ldap.ldapId', 'LDAP ID')}
spellCheck='false'
/>
</div>
<div className={formClass}>
<input
type='password'
className='form-control'
name='ldapPassword'
ref='ldappassword'
placeholder={Utils.localizeMessage('claim.email_to_ldap.ldapPwd', 'LDAP Password')}
spellCheck='false'
/>
</div>
{error}
<button
type='submit'
className='btn btn-primary'
>
<FormattedMessage
id='claim.email_to_ldap.switchTo'
defaultMessage='Switch account to LDAP'
/>
</button>
</form>
</div>
);
}
}
EmailToLDAP.defaultProps = {
};
EmailToLDAP.propTypes = {
email: React.PropTypes.string,
teamName: React.PropTypes.string,
teamDisplayName: React.PropTypes.string
};

Просмотреть файл

@@ -1,26 +1,14 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import ReactDOM from 'react-dom';
import * as Utils from 'utils/utils.jsx';
import * as Client from 'utils/client.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
const holders = defineMessages({
pwdError: {
id: 'claim.email_to_sso.pwdError',
defaultMessage: 'Please enter your password.'
},
pwd: {
id: 'claim.email_to_sso.pwd',
defaultMessage: 'Password'
}
});
import React from 'react';
import ReactDOM from 'react-dom';
import {FormattedMessage} from 'react-intl';
class EmailToSSO extends React.Component {
export default class EmailToOAuth extends React.Component {
constructor(props) {
super(props);
@@ -34,7 +22,7 @@ class EmailToSSO extends React.Component {
var password = ReactDOM.findDOMNode(this.refs.password).value.trim();
if (!password) {
state.error = this.props.intl.formatMessage(holders.pwdError);
state.error = Utils.localizeMessage('claim.email_to_oauth.pwdError', 'Please enter your password.');
this.setState(state);
return;
}
@@ -46,9 +34,9 @@ class EmailToSSO extends React.Component {
postData.password = password;
postData.email = this.props.email;
postData.team_name = this.props.teamName;
postData.service = this.props.type;
postData.service = this.props.newType;
Client.switchToSSO(postData,
Client.emailToOAuth(postData,
(data) => {
if (data.follow_link) {
window.location.href = data.follow_link;
@@ -70,41 +58,41 @@ class EmailToSSO extends React.Component {
formClass += ' has-error';
}
const uiType = Utils.toTitleCase(this.props.type) + ' SSO';
const uiType = Utils.toTitleCase(this.props.newType) + ' SSO';
return (
<div>
<h3>
<FormattedMessage
id='claim.email_to_sso.title'
id='claim.email_to_oauth.title'
defaultMessage='Switch Email/Password Account to {uiType}'
values={{
uiType: uiType
uiType
}}
/>
</h3>
<form onSubmit={this.submit}>
<p>
<FormattedMessage
id='claim.email_to_sso.ssoType'
id='claim.email_to_oauth.ssoType'
defaultMessage='Upon claiming your account, you will only be able to login with {type} SSO'
values={{
type: Utils.toTitleCase(this.props.type)
type: Utils.toTitleCase(this.props.newType)
}}
/>
</p>
<p>
<FormattedMessage
id='claim.email_to_sso.ssoNote'
id='claim.email_to_oauth.ssoNote'
defaultMessage='You must already have a valid {type} account'
values={{
type: Utils.toTitleCase(this.props.type)
type: Utils.toTitleCase(this.props.newType)
}}
/>
</p>
<p>
<FormattedMessage
id='claim.email_to_sso.enterPwd'
id='claim.email_to_oauth.enterPwd'
defaultMessage='Enter the password for your {team} {site} account'
values={{
team: this.props.teamDisplayName,
@@ -118,7 +106,7 @@ class EmailToSSO extends React.Component {
className='form-control'
name='password'
ref='password'
placeholder={this.props.intl.formatMessage(holders.pwd)}
placeholder={Utils.localizeMessage('claim.email_to_oauth.pwd', 'Password')}
spellCheck='false'
/>
</div>
@@ -128,10 +116,10 @@ class EmailToSSO extends React.Component {
className='btn btn-primary'
>
<FormattedMessage
id='claim.email_to_sso.switchTo'
id='claim.email_to_oauth.switchTo'
defaultMessage='Switch account to {uiType}'
values={{
uiType: uiType
uiType
}}
/>
</button>
@@ -141,14 +129,11 @@ class EmailToSSO extends React.Component {
}
}
EmailToSSO.defaultProps = {
EmailToOAuth.defaultProps = {
};
EmailToSSO.propTypes = {
intl: intlShape.isRequired,
type: React.PropTypes.string.isRequired,
email: React.PropTypes.string.isRequired,
teamName: React.PropTypes.string.isRequired,
teamDisplayName: React.PropTypes.string.isRequired
EmailToOAuth.propTypes = {
newType: React.PropTypes.string,
email: React.PropTypes.string,
teamName: React.PropTypes.string,
teamDisplayName: React.PropTypes.string
};
export default injectIntl(EmailToSSO);

Просмотреть файл

@@ -0,0 +1,167 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import * as Utils from 'utils/utils.jsx';
import * as Client from 'utils/client.jsx';
import React from 'react';
import ReactDOM from 'react-dom';
import {FormattedMessage} from 'react-intl';
export default class LDAPToEmail extends React.Component {
constructor(props) {
super(props);
this.submit = this.submit.bind(this);
this.state = {};
}
submit(e) {
e.preventDefault();
var state = {};
const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
if (!password) {
state.error = Utils.localizeMessage('claim.ldap_to_email.pwdError', 'Please enter your password.');
this.setState(state);
return;
}
const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim();
if (!confirmPassword || password !== confirmPassword) {
state.error = Utils.localizeMessage('claim.ldap_to_email.pwdNotMatch', 'Passwords do not match.');
this.setState(state);
return;
}
const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value.trim();
if (!ldapPassword) {
state.error = Utils.localizeMessage('claim.ldap_to_email.ldapPasswordError', 'Please enter your LDAP password.');
this.setState(state);
return;
}
state.error = null;
this.setState(state);
var postData = {};
postData.email_password = password;
postData.ldap_password = ldapPassword;
postData.email = this.props.email;
postData.team_name = this.props.teamName;
Client.ldapToEmail(postData,
(data) => {
if (data.follow_link) {
window.location.href = data.follow_link;
}
},
(error) => {
this.setState({error});
}
);
}
render() {
var error = null;
if (this.state.error) {
error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
}
var formClass = 'form-group';
if (error) {
formClass += ' has-error';
}
return (
<div>
<h3>
<FormattedMessage
id='claim.ldap_to_email.title'
defaultMessage='Switch LDAP Account to Email/Password'
/>
</h3>
<form onSubmit={this.submit}>
<p>
<FormattedMessage
id='claim.ldap_to_email.ssoType'
defaultMessage='Upon claiming your account, you will only be able to login with your email and password'
/>
</p>
<p>
<FormattedMessage
id='claim.ldap_to_email.email'
defaultMessage='You will use the email {email} to login'
values={{
email: this.props.email
}}
/>
</p>
<p>
<FormattedMessage
id='claim.ldap_to_email.enterLdapPwd'
defaultMessage='Enter your LDAP password for your {team} {site} email account'
values={{
team: this.props.teamDisplayName,
site: global.window.mm_config.SiteName
}}
/>
</p>
<div className={formClass}>
<input
type='password'
className='form-control'
name='ldapPassword'
ref='ldappassword'
placeholder={Utils.localizeMessage('claim.ldap_to_email.ldapPwd', 'LDAP Password')}
spellCheck='false'
/>
</div>
<p>
<FormattedMessage
id='claim.ldap_to_email.enterPwd'
defaultMessage='Enter a new password for your email account'
/>
</p>
<div className={formClass}>
<input
type='password'
className='form-control'
name='password'
ref='password'
placeholder={Utils.localizeMessage('claim.ldap_to_email.pwd', 'Password')}
spellCheck='false'
/>
</div>
<div className={formClass}>
<input
type='password'
className='form-control'
name='passwordconfirm'
ref='passwordconfirm'
placeholder={Utils.localizeMessage('claim.ldap_to_email.confirm', 'Confirm Password')}
spellCheck='false'
/>
</div>
{error}
<button
type='submit'
className='btn btn-primary'
>
<FormattedMessage
id='claim.ldap_to_email.switchTo'
defaultMessage='Switch account to email/password'
/>
</button>
</form>
</div>
);
}
}
LDAPToEmail.defaultProps = {
};
LDAPToEmail.propTypes = {
email: React.PropTypes.string,
teamName: React.PropTypes.string,
teamDisplayName: React.PropTypes.string
};

Просмотреть файл

@@ -1,34 +1,14 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import ReactDOM from 'react-dom';
import * as Utils from 'utils/utils.jsx';
import * as Client from 'utils/client.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
const holders = defineMessages({
enterPwd: {
id: 'claim.sso_to_email.enterPwd',
defaultMessage: 'Please enter a password.'
},
pwdNotMatch: {
id: 'claim.sso_to_email.pwdNotMatch',
defaultMessage: 'Password do not match.'
},
newPwd: {
id: 'claim.sso_to_email.newPwd',
defaultMessage: 'New Password'
},
confirm: {
id: 'claim.sso_to_email.confirm',
defaultMessage: 'Confirm Password'
}
});
import React from 'react';
import ReactDOM from 'react-dom';
import {FormattedMessage} from 'react-intl';
class SSOToEmail extends React.Component {
export default class OAuthToEmail extends React.Component {
constructor(props) {
super(props);
@@ -37,20 +17,19 @@ class SSOToEmail extends React.Component {
this.state = {};
}
submit(e) {
const {formatMessage} = this.props.intl;
e.preventDefault();
const state = {};
const password = ReactDOM.findDOMNode(this.refs.password).value.trim();
if (!password) {
state.error = formatMessage(holders.enterPwd);
state.error = Utils.localizeMessage('claim.oauth_to_email.enterPwd', 'Please enter a password.');
this.setState(state);
return;
}
const confirmPassword = ReactDOM.findDOMNode(this.refs.passwordconfirm).value.trim();
if (!confirmPassword || password !== confirmPassword) {
state.error = formatMessage(holders.pwdNotMatch);
state.error = Utils.localizeMessage('claim.oauth_to_email.pwdNotMatch', 'Password do not match.');
this.setState(state);
return;
}
@@ -63,7 +42,7 @@ class SSOToEmail extends React.Component {
postData.email = this.props.email;
postData.team_name = this.props.teamName;
Client.switchToEmail(postData,
Client.oauthToEmail(postData,
(data) => {
if (data.follow_link) {
window.location.href = data.follow_link;
@@ -75,7 +54,6 @@ class SSOToEmail extends React.Component {
);
}
render() {
const {formatMessage} = this.props.intl;
var error = null;
if (this.state.error) {
error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
@@ -92,7 +70,7 @@ class SSOToEmail extends React.Component {
<div>
<h3>
<FormattedMessage
id='claim.sso_to_email.title'
id='claim.oauth_to_email.title'
defaultMessage='Switch {type} Account to Email'
values={{
type: uiType
@@ -102,13 +80,13 @@ class SSOToEmail extends React.Component {
<form onSubmit={this.submit}>
<p>
<FormattedMessage
id='claim.sso_to_email.description'
id='claim.oauth_to_email.description'
defaultMessage='Upon changing your account type, you will only be able to login with your email and password.'
/>
</p>
<p>
<FormattedMessage
id='claim.sso_to_email_newPwd'
id='claim.oauth_to_email_newPwd'
defaultMessage='Enter a new password for your {team} {site} account'
values={{
team: this.props.teamDisplayName,
@@ -122,7 +100,7 @@ class SSOToEmail extends React.Component {
className='form-control'
name='password'
ref='password'
placeholder={formatMessage(holders.newPwd)}
placeholder={Utils.localizeMessage('claim.oauth_to_email.newPwd', 'New Password')}
spellCheck='false'
/>
</div>
@@ -132,7 +110,7 @@ class SSOToEmail extends React.Component {
className='form-control'
name='passwordconfirm'
ref='passwordconfirm'
placeholder={formatMessage(holders.confirm)}
placeholder={Utils.localizeMessage('claim.oauth_to_email.confirm', 'Confirm Password')}
spellCheck='false'
/>
</div>
@@ -142,7 +120,7 @@ class SSOToEmail extends React.Component {
className='btn btn-primary'
>
<FormattedMessage
id='claim.sso_to_email.switchTo'
id='claim.oauth_to_email.switchTo'
defaultMessage='Switch {type} to email and password'
values={{
type: uiType
@@ -155,14 +133,11 @@ class SSOToEmail extends React.Component {
}
}
SSOToEmail.defaultProps = {
OAuthToEmail.defaultProps = {
};
SSOToEmail.propTypes = {
intl: intlShape.isRequired,
currentType: React.PropTypes.string.isRequired,
email: React.PropTypes.string.isRequired,
teamName: React.PropTypes.string.isRequired,
teamDisplayName: React.PropTypes.string
OAuthToEmail.propTypes = {
teamName: React.PropTypes.string,
teamDisplayName: React.PropTypes.string,
currentType: React.PropTypes.string,
email: React.PropTypes.string
};
export default injectIntl(SSOToEmail);

Просмотреть файл

@@ -15,6 +15,7 @@ import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedTime, FormattedDate} from 'react-intl';
import {Link} from 'react-router';
const holders = defineMessages({
currentPasswordError: {
@@ -268,17 +269,24 @@ class SecurityTab extends React.Component {
let emailOption;
if (global.window.mm_config.EnableSignUpWithEmail === 'true' && user.auth_service !== '') {
let link;
if (user.auth_service === Constants.LDAP_SERVICE) {
link = '/' + teamName + '/claim/ldap_to_email?email=' + encodeURIComponent(user.email);
} else {
link = '/' + teamName + '/claim/oauth_to_email?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service;
}
emailOption = (
<div>
<a
<Link
className='btn btn-primary'
href={'/' + teamName + '/claim?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service}
to={link}
>
<FormattedMessage
id='user.settings.security.switchEmail'
defaultMessage='Switch to using email and password'
/>
</a>
</Link>
<br/>
</div>
);
@@ -288,15 +296,15 @@ class SecurityTab extends React.Component {
if (global.window.mm_config.EnableSignUpWithGitLab === 'true' && user.auth_service === '') {
gitlabOption = (
<div>
<a
<Link
className='btn btn-primary'
href={'/' + teamName + '/claim?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service + '&new_type=' + Constants.GITLAB_SERVICE}
to={'/' + teamName + '/claim/email_to_oauth?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service + '&new_type=' + Constants.GITLAB_SERVICE}
>
<FormattedMessage
id='user.settings.security.switchGitlab'
defaultMessage='Switch to using GitLab SSO'
/>
</a>
</Link>
<br/>
</div>
);
@@ -306,15 +314,33 @@ class SecurityTab extends React.Component {
if (global.window.mm_config.EnableSignUpWithGoogle === 'true' && user.auth_service === '') {
googleOption = (
<div>
<a
<Link
className='btn btn-primary'
href={'/' + teamName + '/claim?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service + '&new_type=' + Constants.GOOGLE_SERVICE}
to={'/' + teamName + '/claim/email_to_oauth?email=' + encodeURIComponent(user.email) + '&old_type=' + user.auth_service + '&new_type=' + Constants.GOOGLE_SERVICE}
>
<FormattedMessage
id='user.settings.security.switchGoogle'
defaultMessage='Switch to using Google SSO'
/>
</a>
</Link>
<br/>
</div>
);
}
let ldapOption;
if (global.window.mm_config.EnableLdap === 'true' && user.auth_service === '') {
ldapOption = (
<div>
<Link
className='btn btn-primary'
to={'/' + teamName + '/claim/email_to_ldap?email=' + encodeURIComponent(user.email)}
>
<FormattedMessage
id='user.settings.security.switchLdap'
defaultMessage='Switch to using LDAP'
/>
</Link>
<br/>
</div>
);
@@ -325,6 +351,7 @@ class SecurityTab extends React.Component {
{emailOption}
{gitlabOption}
<br/>
{ldapOption}
{googleOption}
</div>
);