mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-2258 Unified login screen and related APIs (#2820)

Просмотр исходного кода 
* Unified login screen and related APIs

* Refactored login API call to be less convoluted

* Removed LDAP login prompt from invite process

* Fixed existing LDAP users being able to log in if LDAP was configured, but disabled

* Gofmt

* Future proofed login API

* Updated login APIs based on feedback

* Added additional auditing to login API

* Actually removed loginById
Этот коммит содержится в:
Harrison Healey
2016-05-03 14:10:36 -04:00
коммит произвёл Christopher Speller
родитель e76a30bca0
Коммит 87989b8afd
36 изменённых файлов: 630 добавлений и 1049 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

121
webapp/components/login/components/login_email.jsx
Просмотреть файл

@@ -1,121 +0,0 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import * as Utils from 'utils/utils.jsx';
import UserStore from 'stores/user_store.jsx';
import Constants from 'utils/constants.jsx';
import {FormattedMessage} from 'react-intl';
import React from 'react';
export default class LoginEmail extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
serverError: props.serverError
};
}
componentWillReceiveProps(nextProps) {
this.setState({serverError: nextProps.serverError});
}
handleSubmit(e) {
e.preventDefault();
var state = {};
const email = this.refs.email.value.trim();
if (!email) {
state.serverError = Utils.localizeMessage('login_email.emailReq', 'An email is required');
this.setState(state);
return;
}
const password = this.refs.password.value.trim();
if (!password) {
state.serverError = Utils.localizeMessage('login_email.pwdReq', 'A password is required');
this.setState(state);
return;
}
state.serverError = '';
this.setState(state);
this.props.submit(Constants.EMAIL_SERVICE, email, password);
}
render() {
let serverError;
let errorClass = '';
if (this.state.serverError) {
serverError = <label className='control-label'>{this.state.serverError}</label>;
errorClass = ' has-error';
}
let priorEmail = UserStore.getLastEmail();
let focusEmail = false;
let focusPassword = false;
if (priorEmail === '') {
focusEmail = true;
} else {
focusPassword = true;
}
const emailParam = Utils.getUrlParameter('email');
if (emailParam) {
priorEmail = decodeURIComponent(emailParam);
}
return (
<form onSubmit={this.handleSubmit}>
<div className='signup__email-container'>
<div className={'form-group' + errorClass}>
{serverError}
</div>
<div className={'form-group' + errorClass}>
<input
autoFocus={focusEmail}
type='email'
className='form-control'
name='email'
defaultValue={priorEmail}
ref='email'
placeholder={Utils.localizeMessage('login_email.email', 'Email')}
spellCheck='false'
/>
</div>
<div className={'form-group' + errorClass}>
<input
autoFocus={focusPassword}
type='password'
className='form-control'
name='password'
ref='password'
placeholder={Utils.localizeMessage('login_email.pwd', 'Password')}
spellCheck='false'
/>
</div>
<div className='form-group'>
<button
type='submit'
className='btn btn-primary'
>
<FormattedMessage
id='login_email.signin'
defaultMessage='Sign in'
/>
</button>
</div>
</div>
</form>
);
}
}
LoginEmail.defaultProps = {
};
LoginEmail.propTypes = {
submit: React.PropTypes.func.isRequired,
serverError: React.PropTypes.string
};

115
webapp/components/login/components/login_ldap.jsx
Просмотреть файл

@@ -1,115 +0,0 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
import {FormattedMessage} from 'react-intl';
import React from 'react';
export default class LoginLdap extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
serverError: props.serverError
};
}
componentWillReceiveProps(nextProps) {
this.setState({serverError: nextProps.serverError});
}
handleSubmit(e) {
e.preventDefault();
const state = {};
const id = this.refs.id.value.trim();
if (!id) {
state.serverError = Utils.localizeMessage('login_ldap.idlReq', 'An LDAP ID is required');
this.setState(state);
return;
}
const password = this.refs.password.value.trim();
if (!password) {
state.serverError = Utils.localizeMessage('login_ldap.pwdReq', 'An LDAP password is required');
this.setState(state);
return;
}
state.serverError = '';
this.setState(state);
this.props.submit(Constants.LDAP_SERVICE, id, password);
}
render() {
let serverError;
let errorClass = '';
if (this.state.serverError) {
serverError = <label className='control-label'>{this.state.serverError}</label>;
errorClass = ' has-error';
}
let loginPlaceholder;
if (global.window.mm_config.LdapLoginFieldName) {
loginPlaceholder = global.window.mm_config.LdapLoginFieldName;
} else {
loginPlaceholder = Utils.localizeMessage('login_ldap.username', 'LDAP Username');
}
let passwordPlaceholder;
if (global.window.mm_config.LdapPasswordFieldName) {
passwordPlaceholder = global.window.mm_config.LdapPasswordFieldName;
} else {
passwordPlaceholder = Utils.localizeMessage('login_ldap.pwd', 'LDAP Password');
}
return (
<form onSubmit={this.handleSubmit}>
<div className='signup__email-container'>
<div className={'form-group' + errorClass}>
{serverError}
</div>
<div className={'form-group' + errorClass}>
<input
autoFocus={true}
className='form-control'
ref='id'
placeholder={loginPlaceholder}
spellCheck='false'
/>
</div>
<div className={'form-group' + errorClass}>
<input
type='password'
className='form-control'
ref='password'
placeholder={passwordPlaceholder}
spellCheck='false'
/>
</div>
<div className='form-group'>
<button
type='submit'
className='btn btn-primary'
>
<FormattedMessage
id='login_ldap.signin'
defaultMessage='Sign in'
/>
</button>
</div>
</div>
</form>
);
}
}
LoginLdap.defaultProps = {
};
LoginLdap.propTypes = {
serverError: React.PropTypes.string,
submit: React.PropTypes.func.isRequired
};

3
webapp/components/login/components/login_mfa.jsx
Просмотреть файл

@@ -31,7 +31,7 @@ export default class LoginMfa extends React.Component {
state.serverError = '';
this.setState(state);
this.props.submit(this.props.method, this.props.loginId, this.props.password, token);
this.props.submit(this.props.loginId, this.props.password, token);
}
render() {
let serverError;
@@ -85,7 +85,6 @@ LoginMfa.defaultProps = {
};
LoginMfa.propTypes = {
method: React.PropTypes.string.isRequired,
loginId: React.PropTypes.string.isRequired,
password: React.PropTypes.string.isRequired,
submit: React.PropTypes.func.isRequired

121
webapp/components/login/components/login_username.jsx
Просмотреть файл

@@ -1,121 +0,0 @@
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import * as Utils from 'utils/utils.jsx';
import UserStore from 'stores/user_store.jsx';
import Constants from 'utils/constants.jsx';
import {FormattedMessage} from 'react-intl';
import React from 'react';
export default class LoginUsername extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
serverError: props.serverError
};
}
componentWillReceiveProps(nextProps) {
this.setState({serverError: nextProps.serverError});
}
handleSubmit(e) {
e.preventDefault();
const state = {};
const username = this.refs.username.value.trim();
if (!username) {
state.serverError = Utils.localizeMessage('login_username.usernameReq', 'A username is required');
this.setState(state);
return;
}
const password = this.refs.password.value.trim();
if (!password) {
state.serverError = Utils.localizeMessage('login_username.pwdReq', 'A password is required');
this.setState(state);
return;
}
state.serverError = '';
this.setState(state);
this.props.submit(Constants.USERNAME_SERVICE, username, password);
}
render() {
let serverError;
let errorClass = '';
if (this.state.serverError) {
serverError = <label className='control-label'>{this.state.serverError}</label>;
errorClass = ' has-error';
}
let priorUsername = UserStore.getLastUsername();
let focusUsername = false;
let focusPassword = false;
if (priorUsername === '') {
focusUsername = true;
} else {
focusPassword = true;
}
const emailParam = Utils.getUrlParameter('email');
if (emailParam) {
priorUsername = decodeURIComponent(emailParam);
}
return (
<form onSubmit={this.handleSubmit}>
<div className='signup__email-container'>
<div className={'form-group' + errorClass}>
{serverError}
</div>
<div className={'form-group' + errorClass}>
<input
autoFocus={focusUsername}
type='username'
className='form-control'
name='username'
defaultValue={priorUsername}
ref='username'
placeholder={Utils.localizeMessage('login_username.username', 'Username')}
spellCheck='false'
/>
</div>
<div className={'form-group' + errorClass}>
<input
autoFocus={focusPassword}
type='password'
className='form-control'
name='password'
ref='password'
placeholder={Utils.localizeMessage('login_username.pwd', 'Password')}
spellCheck='false'
/>
</div>
<div className='form-group'>
<button
type='submit'
className='btn btn-primary'
>
<FormattedMessage
id='login_username.signin'
defaultMessage='Sign in'
/>
</button>
</div>
</div>
</form>
);
}
}
LoginUsername.defaultProps = {
};
LoginUsername.propTypes = {
serverError: React.PropTypes.string,
submit: React.PropTypes.func.isRequired
};

322
webapp/components/login/login.jsx
Просмотреть файл

@@ -1,13 +1,11 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import LoginEmail from './components/login_email.jsx';
import LoginUsername from './components/login_username.jsx';
import LoginLdap from './components/login_ldap.jsx';
import LoginMfa from './components/login_mfa.jsx';
import ErrorBar from 'components/error_bar.jsx';
import FormError from 'components/form_error.jsx';
import * as GlobalActions from '../../action_creators/global_actions.jsx';
import * as GlobalActions from 'action_creators/global_actions.jsx';
import UserStore from 'stores/user_store.jsx';
import Client from 'utils/web_client.jsx';
@@ -30,10 +28,16 @@ export default class Login extends React.Component {
this.submit = this.submit.bind(this);
this.finishSignin = this.finishSignin.bind(this);
const state = {};
state.showMfa = false;
this.state = state;
this.handleLoginIdChange = this.handleLoginIdChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.state = {
loginId: '', // the browser will set a default for this
password: '',
showMfa: false
};
}
componentDidMount() {
document.title = global.window.mm_config.SiteName;
@@ -41,31 +45,97 @@ export default class Login extends React.Component {
browserHistory.push('/select_team');
}
}
preSubmit(method, loginId, password) {
if (global.window.mm_config.EnableMultifactorAuthentication !== 'true') {
this.submit(method, loginId, password, '');
preSubmit(e) {
e.preventDefault();
const loginId = this.state.loginId.trim();
if (!loginId) {
const ldapEnabled = global.window.mm_config.EnableLdap === 'true';
const usernameSigninEnabled = global.window.mm_config.EnableSignInWithUsername === 'true';
const emailSigninEnabled = global.window.mm_config.EnableSignInWithEmail === 'true';
this.setState({
serverError: (
<FormattedMessage
id='login.loginIdRequired'
defaultMessage='A {type} is required'
values={{
type: this.createLoginPlaceholder(emailSigninEnabled, usernameSigninEnabled, ldapEnabled)
}}
/>
)
});
return;
}
Client.checkMfa(method, loginId,
const password = this.state.password.trim();
if (!password) {
this.setState({
serverError: (
<FormattedMessage
id='login.passwordRequired'
defaultMessage='A password is required'
/>
)
});
return;
}
if (global.window.mm_config.EnableMultifactorAuthentication !== 'true') {
this.submit(loginId, password, '');
return;
}
Client.checkMfa(
loginId,
(data) => {
if (data.mfa_required === 'true') {
this.setState({showMfa: true, method, loginId, password});
this.setState({showMfa: true});
} else {
this.submit(method, loginId, password, '');
this.submit(loginId, password, '');
}
},
(err) => {
if (method === Constants.EMAIL_SERVICE) {
this.setState({serverEmailError: err.message});
} else if (method === Constants.USERNAME_SERVICE) {
this.setState({serverUsernameError: err.message});
} else if (method === Constants.LDAP_SERVICE) {
this.setState({serverLdapError: err.message});
this.setState({serverError: err.message});
}
);
}
submit(loginId, password, token) {
this.setState({showMfa: false, serverError: null});
Client.webLogin(
loginId,
password,
token,
() => {
this.finishSignin();
},
(err) => {
if (err.id === 'api.user.login.not_verified.app_error') {
browserHistory.push('/should_verify_email?&email=' + encodeURIComponent(loginId));
return;
} else if (err.id === 'store.sql_user.get_for_login.app_error' ||
err.id === 'ent.ldap.do_login.user_not_registered.app_error' ||
err.id === 'ent.ldap.do_login.user_filtered.app_error') {
this.setState({
serverError: (
<FormattedMessage
id='login.userNotFound'
defaultMessage="We couldn't find an existing account matching your login credentials."
/>
)
});
} else {
this.setState({serverError: err.message});
}
}
);
}
finishSignin() {
GlobalActions.emitInitialLoad(
() => {
@@ -74,72 +144,18 @@ export default class Login extends React.Component {
);
}
submit(method, loginId, password, token) {
this.setState({showMfa: false, serverEmailError: null, serverUsernameError: null, serverLdapError: null});
if (method === Constants.EMAIL_SERVICE) {
Client.webLogin(
loginId,
null,
password,
token,
() => {
UserStore.setLastEmail(loginId);
this.finishSignin();
},
(err) => {
if (err.id === 'api.user.login.not_verified.app_error') {
browserHistory.push('/should_verify_email?&email=' + encodeURIComponent(loginId));
return;
}
this.setState({serverEmailError: err.message});
}
);
} else if (method === Constants.USERNAME_SERVICE) {
Client.webLogin(
null,
loginId,
password,
token,
() => {
UserStore.setLastUsername(loginId);
const redirect = Utils.getUrlParameter('redirect');
if (redirect) {
browserHistory.push(decodeURIComponent(redirect));
} else {
this.finishSignin();
}
},
(err) => {
if (err.id === 'api.user.login.not_verified.app_error') {
this.setState({serverUsernameError: Utils.localizeMessage('login_username.verifyEmailError', 'Please verify your email address. Check your inbox for an email.')});
} else if (err.id === 'store.sql_user.get_by_username.app_error') {
this.setState({serverUsernameError: Utils.localizeMessage('login_username.userNotFoundError', 'We couldn\'t find an existing account matching your username for this team.')});
} else {
this.setState({serverUsernameError: err.message});
}
}
);
} else if (method === Constants.LDAP_SERVICE) {
Client.loginByLdap(
loginId,
password,
token,
() => {
const redirect = Utils.getUrlParameter('redirect');
if (redirect) {
browserHistory.push(decodeURIComponent(redirect));
} else {
this.finishSignin();
}
},
(err) => {
this.setState({serverLdapError: err.message});
}
);
}
handleLoginIdChange(e) {
this.setState({
loginId: e.target.value
});
}
handlePasswordChange(e) {
this.setState({
password: e.target.value
});
}
createCustomLogin() {
if (global.window.mm_license.IsLicensed === 'true' &&
global.window.mm_license.CustomBrand === 'true' &&
@@ -158,6 +174,36 @@ export default class Login extends React.Component {
return null;
}
createLoginPlaceholder(emailSigninEnabled, usernameSigninEnabled, ldapEnabled) {
const loginPlaceholders = [];
if (emailSigninEnabled) {
loginPlaceholders.push(Utils.localizeMessage('login.email', 'Email'));
}
if (usernameSigninEnabled) {
loginPlaceholders.push(Utils.localizeMessage('login.username', 'Username'));
}
if (ldapEnabled) {
if (global.window.mm_config.LdapLoginFieldName) {
loginPlaceholders.push(global.window.mm_config.LdapLoginFieldName);
} else {
loginPlaceholders.push(Utils.localizeMessage('login.ldap_username', 'LDAP Username'));
}
}
if (loginPlaceholders.length >= 2) {
return loginPlaceholders.slice(0, loginPlaceholders.length - 1).join(', ') +
Utils.localizeMessage('login.placeholderOr', ' or ') +
loginPlaceholders[loginPlaceholders.length - 1];
} else if (loginPlaceholders.length === 1) {
return loginPlaceholders[0];
}
return '';
}
createLoginOptions() {
const extraParam = Utils.getUrlParameter('extra');
let extraBox = '';
@@ -248,76 +294,52 @@ export default class Login extends React.Component {
);
}
let emailLogin;
if (emailSigninEnabled) {
emailLogin = (
<LoginEmail
serverError={this.state.serverEmailError}
submit={this.preSubmit}
/>
);
let login = null;
if (emailSigninEnabled || usernameSigninEnabled || ldapEnabled) {
let errorClass = '';
if (this.state.serverError) {
errorClass = ' has-error';
}
if (oauthLogins.length > 0) {
emailLogin = (
<div>
<div className='or__container'>
<FormattedMessage
id='login.or'
defaultMessage='or'
login = (
<form onSubmit={this.preSubmit}>
<div className='signup__email-container'>
<FormError error={this.state.serverError}/>
<div className={'form-group' + errorClass}>
<input
className='form-control'
name='loginId'
value={this.state.loginId}
onChange={this.handleLoginIdChange}
placeholder={this.createLoginPlaceholder(emailSigninEnabled, usernameSigninEnabled, ldapEnabled)}
spellCheck='false'
/>
</div>
{emailLogin}
</div>
);
}
}
let usernameLogin;
if (usernameSigninEnabled) {
usernameLogin = (
<LoginUsername
serverError={this.state.serverUsernameError}
submit={this.preSubmit}
/>
);
if (emailSigninEnabled || oauthLogins.length > 0) {
usernameLogin = (
<div>
<div className='or__container'>
<FormattedMessage
id='login.or'
defaultMessage='or'
<div className={'form-group' + errorClass}>
<input
type='password'
className='form-control'
name='password'
value={this.state.password}
onChange={this.handlePasswordChange}
placeholder={Utils.localizeMessage('login.password', 'Password')}
spellCheck='false'
/>
</div>
{usernameLogin}
</div>
);
}
}
let ldapLogin;
if (ldapEnabled) {
ldapLogin = (
<LoginLdap
serverError={this.state.serverLdapError}
submit={this.preSubmit}
/>
);
if (emailSigninEnabled || usernameSigninEnabled || oauthLogins.length > 0) {
ldapLogin = (
<div>
<div className='or__container'>
<FormattedMessage
id='login.or'
defaultMessage='or'
/>
<div className='form-group'>
<button
type='submit'
className='btn btn-primary'
>
<FormattedMessage
id='login.signIn'
defaultMessage='Sign in'
/>
</button>
</div>
{ldapLogin}
</div>
);
}
</form>
);
}
const userSignUp = (
@@ -358,14 +380,13 @@ export default class Login extends React.Component {
<div>
{extraBox}
{oauthLogins}
{emailLogin}
{usernameLogin}
{ldapLogin}
{login}
{userSignUp}
{forgotPassword}
</div>
);
}
render() {
let content;
let customContent;
@@ -373,7 +394,6 @@ export default class Login extends React.Component {
if (this.state.showMfa) {
content = (
<LoginMfa
method={this.state.method}
loginId={this.state.loginId}
password={this.state.password}
submit={this.submit}

65
webapp/components/signup_user_complete.jsx
Просмотреть файл

@@ -2,7 +2,6 @@
// See License.txt for license information.
import LoadingScreen from 'components/loading_screen.jsx';
import LoginLdap from 'components/login/components/login_ldap.jsx';
import * as GlobalActions from 'action_creators/global_actions.jsx';
import BrowserStore from 'stores/browser_store.jsx';
@@ -25,7 +24,6 @@ class SignupUserComplete extends React.Component {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleLdapSignup = this.handleLdapSignup.bind(this);
this.state = {
data: '',
@@ -150,26 +148,6 @@ class SignupUserComplete extends React.Component {
});
}
handleLdapSignup(method, loginId, password, token) {
Client.loginByLdap(loginId, password, token,
() => {
const redirect = Utils.getUrlParameter('redirect');
if (redirect) {
browserHistory.push(decodeURIComponent(redirect));
} else {
GlobalActions.emitInitialLoad(
() => {
browserHistory.push('/select_team');
}
);
}
},
(err) => {
this.setState({serverError: err.message});
}
);
}
handleSubmit(e) {
e.preventDefault();
@@ -268,15 +246,13 @@ class SignupUserComplete extends React.Component {
this.state.data,
this.state.hash,
this.state.inviteId,
() => {
(data) => {
Client.track('signup', 'signup_user_02_complete');
Client.login(
user.email,
null,
Client.loginById(
data.id,
user.password,
'',
() => {
UserStore.setLastEmail(user.email);
if (this.state.hash > 0) {
BrowserStore.setGlobalItem(this.state.hash, JSON.stringify({usedBefore: true}));
}
@@ -455,21 +431,6 @@ class SignupUserComplete extends React.Component {
);
}
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>
<LoginLdap submit={this.handleLdapSignup}/>
</div>
);
}
let emailSignup;
if (global.window.mm_config.EnableSignUpWithEmail === 'true') {
emailSignup = (
@@ -533,7 +494,7 @@ class SignupUserComplete extends React.Component {
);
}
if (signupMessage.length > 0 && (emailSignup || ldapSignup)) {
if (signupMessage.length > 0 && emailSignup) {
signupMessage = (
<div>
{signupMessage}
@@ -547,21 +508,7 @@ class SignupUserComplete extends React.Component {
);
}
if (ldapSignup && emailSignup) {
ldapSignup = (
<div>
{ldapSignup}
<div className='or__container'>
<FormattedMessage
id='signup_user_completed.or'
defaultMessage='or'
/>
</div>
</div>
);
}
if (signupMessage.length === 0 && !emailSignup && !ldapSignup) {
if (signupMessage.length === 0 && !emailSignup) {
emailSignup = (
<div>
<FormattedMessage
@@ -586,7 +533,6 @@ class SignupUserComplete extends React.Component {
if (this.state.noOpenServerError) {
signupMessage = null;
ldapSignup = null;
emailSignup = null;
terms = null;
}
@@ -620,7 +566,6 @@ class SignupUserComplete extends React.Component {
/>
</h4>
{signupMessage}
{ldapSignup}
{emailSignup}
{serverError}
{terms}