summaryrefslogtreecommitdiffstats
path: root/webapp/components
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/components')
-rw-r--r--webapp/components/admin_console/admin_sidebar.jsx16
-rw-r--r--webapp/components/admin_console/mfa_settings.jsx99
-rw-r--r--webapp/components/admin_console/password_settings.jsx32
-rw-r--r--webapp/components/claim/components/email_to_ldap.jsx81
-rw-r--r--webapp/components/claim/components/email_to_oauth.jsx73
-rw-r--r--webapp/components/claim/components/ldap_to_email.jsx64
-rw-r--r--webapp/components/login/components/login_mfa.jsx2
-rw-r--r--webapp/components/mfa/components/confirm.jsx75
-rw-r--r--webapp/components/mfa/components/setup.jsx156
-rw-r--r--webapp/components/mfa/mfa_controller.jsx66
-rw-r--r--webapp/components/user_settings/user_settings_security.jsx168
11 files changed, 638 insertions, 194 deletions
diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 25a06cecf..2b304f11d 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -194,6 +194,7 @@ export default class AdminSidebar extends React.Component {
let clusterSettings = null;
let metricsSettings = null;
let complianceSettings = null;
+ let mfaSettings = null;
let license = null;
let audits = null;
@@ -284,6 +285,20 @@ export default class AdminSidebar extends React.Component {
);
}
+ if (global.window.mm_license.MFA === 'true') {
+ mfaSettings = (
+ <AdminSidebarSection
+ name='mfa'
+ title={
+ <FormattedMessage
+ id='admin.sidebar.mfa'
+ defaultMessage='MFA'
+ />
+ }
+ />
+ );
+ }
+
oauthSettings = (
<AdminSidebarSection
name='oauth'
@@ -507,6 +522,7 @@ export default class AdminSidebar extends React.Component {
{oauthSettings}
{ldapSettings}
{samlSettings}
+ {mfaSettings}
</AdminSidebarSection>
<AdminSidebarSection
name='security'
diff --git a/webapp/components/admin_console/mfa_settings.jsx b/webapp/components/admin_console/mfa_settings.jsx
new file mode 100644
index 000000000..df6346fe4
--- /dev/null
+++ b/webapp/components/admin_console/mfa_settings.jsx
@@ -0,0 +1,99 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import AdminSettings from './admin_settings.jsx';
+import SettingsGroup from './settings_group.jsx';
+import BooleanSetting from './boolean_setting.jsx';
+
+import React from 'react';
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+
+export default class MfaSettings extends AdminSettings {
+ constructor(props) {
+ super(props);
+
+ this.getConfigFromState = this.getConfigFromState.bind(this);
+
+ this.renderSettings = this.renderSettings.bind(this);
+
+ this.state = Object.assign(this.state, {
+ enableMultifactorAuthentication: props.config.ServiceSettings.EnableMultifactorAuthentication,
+ enforceMultifactorAuthentication: props.config.ServiceSettings.EnforceMultifactorAuthentication
+ });
+ }
+
+ getConfigFromState(config) {
+ config.ServiceSettings.EnableMultifactorAuthentication = this.state.enableMultifactorAuthentication;
+ config.ServiceSettings.EnforceMultifactorAuthentication = this.state.enableMultifactorAuthentication && this.state.enforceMultifactorAuthentication;
+
+ return config;
+ }
+
+ getStateFromConfig(config) {
+ return {
+ enableMultifactorAuthentication: config.ServiceSettings.EnableMultifactorAuthentication,
+ enforceMultifactorAuthentication: config.ServiceSettings.EnableMultifactorAuthentication && config.ServiceSettings.EnforceMultifactorAuthentication
+ };
+ }
+
+ renderTitle() {
+ return (
+ <h3>
+ <FormattedMessage
+ id='admin.mfa.title'
+ defaultMessage='Multi-factor Authentication'
+ />
+ </h3>
+ );
+ }
+
+ renderSettings() {
+ return (
+ <SettingsGroup>
+ <div className='banner'>
+ <div className='banner__content'>
+ <FormattedMessage
+ id='admin.mfa.bannerDesc'
+ defaultMessage='Multi-factor authentication is only available for accounts with LDAP and email login methods. If there are users on your system with other login methods, it is recommended you set up multi-factor authentication directly with the SSO or SAML provider.'
+ />
+ </div>
+ </div>
+ <BooleanSetting
+ id='enableMultifactorAuthentication'
+ label={
+ <FormattedMessage
+ id='admin.service.mfaTitle'
+ defaultMessage='Enable Multi-factor Authentication:'
+ />
+ }
+ helpText={
+ <FormattedMessage
+ id='admin.service.mfaDesc'
+ defaultMessage='When true, users will be given the option to add multi-factor authentication to their account. They will need a smartphone and an authenticator app such as Google Authenticator.'
+ />
+ }
+ value={this.state.enableMultifactorAuthentication}
+ onChange={this.handleChange}
+ />
+ <BooleanSetting
+ id='enforceMultifactorAuthentication'
+ label={
+ <FormattedMessage
+ id='admin.service.enforceMfaTitle'
+ defaultMessage='Enforce Multi-factor Authentication:'
+ />
+ }
+ helpText={
+ <FormattedHTMLMessage
+ id='admin.service.enforceMfaDesc'
+ defaultMessage='When true, users on the system will be required to set up [multi-factor authentication]. Any logged in users will be redirected to the multi-factor authentication setup page until they successfully add MFA to their account.<br/><br/>It is recommended you turn on enforcement during non-peak hours, when people are less likely to be using the system. New users will be required to set up multi-factor authentication when they first sign up. After set up, users will not be able to remove multi-factor authentication unless enforcement is disabled.<br/><br/>Please note that multi-factor authentication is only available for accounts with LDAP and email login methods. Mattermost will not enforce multi-factor authentication for other login methods. If there are users on your system using other login methods, it is recommended you set up and enforce multi-factor authentication directly with the SSO or SAML provider.'
+ />
+ }
+ disabled={!this.state.enableMultifactorAuthentication}
+ value={this.state.enforceMultifactorAuthentication}
+ onChange={this.handleChange}
+ />
+ </SettingsGroup>
+ );
+ }
+}
diff --git a/webapp/components/admin_console/password_settings.jsx b/webapp/components/admin_console/password_settings.jsx
index 6fa1dc9c4..3707977b8 100644
--- a/webapp/components/admin_console/password_settings.jsx
+++ b/webapp/components/admin_console/password_settings.jsx
@@ -6,7 +6,6 @@ import AdminSettings from './admin_settings.jsx';
import {FormattedMessage} from 'react-intl';
import SettingsGroup from './settings_group.jsx';
import TextSetting from './text_setting.jsx';
-import BooleanSetting from './boolean_setting.jsx';
import Setting from './setting.jsx';
import * as Utils from 'utils/utils.jsx';
import Constants from 'utils/constants.jsx';
@@ -32,7 +31,6 @@ export default class PasswordSettings extends AdminSettings {
passwordUppercase: props.config.PasswordSettings.Uppercase,
passwordSymbol: props.config.PasswordSettings.Symbol,
maximumLoginAttempts: props.config.ServiceSettings.MaximumLoginAttempts,
- enableMultifactorAuthentication: props.config.ServiceSettings.EnableMultifactorAuthentication,
passwordResetSalt: props.config.EmailSettings.PasswordResetSalt
});
@@ -75,9 +73,6 @@ export default class PasswordSettings extends AdminSettings {
config.ServiceSettings.MaximumLoginAttempts = this.parseIntNonZero(this.state.maximumLoginAttempts);
config.EmailSettings.PasswordResetSalt = this.state.passwordResetSalt;
- if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.MFA === 'true') {
- config.ServiceSettings.EnableMultifactorAuthentication = this.state.enableMultifactorAuthentication;
- }
return config;
}
@@ -90,7 +85,6 @@ export default class PasswordSettings extends AdminSettings {
passwordUppercase: config.PasswordSettings.Uppercase,
passwordSymbol: config.PasswordSettings.Symbol,
maximumLoginAttempts: config.ServiceSettings.MaximumLoginAttempts,
- enableMultifactorAuthentication: config.ServiceSettings.EnableMultifactorAuthentication,
passwordResetSalt: config.EmailSettings.PasswordResetSalt
};
}
@@ -154,29 +148,6 @@ export default class PasswordSettings extends AdminSettings {
}
renderSettings() {
- let mfaSetting = null;
- if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.MFA === 'true') {
- mfaSetting = (
- <BooleanSetting
- id='enableMultifactorAuthentication'
- label={
- <FormattedMessage
- id='admin.service.mfaTitle'
- defaultMessage='Enable Multi-factor Authentication:'
- />
- }
- helpText={
- <FormattedMessage
- id='admin.service.mfaDesc'
- defaultMessage='When true, users will be given the option to add multi-factor authentication to their account. They will need a smartphone and an authenticator app such as Google Authenticator.'
- />
- }
- value={this.state.enableMultifactorAuthentication}
- onChange={this.handleChange}
- />
- );
- }
-
let passwordSettings = null;
if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.PasswordRequirements === 'true') {
passwordSettings = (
@@ -332,8 +303,7 @@ export default class PasswordSettings extends AdminSettings {
value={this.state.maximumLoginAttempts}
onChange={this.handleChange}
/>
- {mfaSetting}
</SettingsGroup>
);
}
-} \ No newline at end of file
+}
diff --git a/webapp/components/claim/components/email_to_ldap.jsx b/webapp/components/claim/components/email_to_ldap.jsx
index a0b0b10e9..890512803 100644
--- a/webapp/components/claim/components/email_to_ldap.jsx
+++ b/webapp/components/claim/components/email_to_ldap.jsx
@@ -1,11 +1,14 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+import LoginMfa from 'components/login/components/login_mfa.jsx';
+
import * as Utils from 'utils/utils.jsx';
import Client from 'client/web_client.jsx';
+import {checkMfa} from 'actions/user_actions.jsx';
+
import React from 'react';
-import ReactDOM from 'react-dom';
import {FormattedMessage} from 'react-intl';
export default class EmailToLDAP extends React.Component {
@@ -13,16 +16,20 @@ export default class EmailToLDAP extends React.Component {
super(props);
this.submit = this.submit.bind(this);
+ this.preSubmit = this.preSubmit.bind(this);
this.state = {
passwordError: '',
ldapError: '',
ldapPasswordError: '',
- serverError: ''
+ serverError: '',
+ showMfa: false
};
}
- submit(e) {
+
+ preSubmit(e) {
e.preventDefault();
+
var state = {
passwordError: '',
ldapError: '',
@@ -30,44 +37,65 @@ export default class EmailToLDAP extends React.Component {
serverError: ''
};
- const password = ReactDOM.findDOMNode(this.refs.emailpassword).value;
+ const password = this.refs.emailpassword.value;
if (!password) {
state.passwordError = Utils.localizeMessage('claim.email_to_ldap.pwdError', 'Please enter your password.');
this.setState(state);
return;
}
- const ldapId = ReactDOM.findDOMNode(this.refs.ldapid).value.trim();
+ const ldapId = this.refs.ldapid.value.trim();
if (!ldapId) {
state.ldapError = Utils.localizeMessage('claim.email_to_ldap.ldapIdError', 'Please enter your AD/LDAP ID.');
this.setState(state);
return;
}
- const ldapPassword = ReactDOM.findDOMNode(this.refs.ldappassword).value;
+ const ldapPassword = this.refs.ldappassword.value;
if (!ldapPassword) {
state.ldapPasswordError = Utils.localizeMessage('claim.email_to_ldap.ldapPasswordError', 'Please enter your AD/LDAP password.');
this.setState(state);
return;
}
+ state.password = password;
+ state.ldapId = ldapId;
+ state.ldapPassword = ldapPassword;
this.setState(state);
- Client.emailToLdap(
+ checkMfa(
this.props.email,
+ (requiresMfa) => {
+ if (requiresMfa) {
+ this.setState({showMfa: true});
+ } else {
+ this.submit(this.props.email, password, '', ldapId, ldapPassword);
+ }
+ },
+ (err) => {
+ this.setState({error: err.message});
+ }
+ );
+ }
+
+ submit(loginId, password, token, ldapId, ldapPassword) {
+ Client.emailToLdap(
+ loginId,
password,
- ldapId,
- ldapPassword,
+ token,
+ ldapId || this.state.ldapId,
+ ldapPassword || this.state.ldapPassword,
(data) => {
if (data.follow_link) {
window.location.href = data.follow_link;
}
},
(err) => {
- this.setState({serverError: err.message});
+ this.setState({serverError: err.message, showMfa: false});
}
);
}
+
render() {
let serverError = null;
let formClass = 'form-group';
@@ -111,16 +139,19 @@ export default class EmailToLDAP extends React.Component {
passwordPlaceholder = Utils.localizeMessage('claim.email_to_ldap.ldapPwd', 'AD/LDAP Password');
}
- return (
- <div>
- <h3>
- <FormattedMessage
- id='claim.email_to_ldap.title'
- defaultMessage='Switch Email/Password Account to AD/LDAP'
- />
- </h3>
+ let content;
+ if (this.state.showMfa) {
+ content = (
+ <LoginMfa
+ loginId={this.props.email}
+ password={this.state.password}
+ submit={this.submit}
+ />
+ );
+ } else {
+ content = (
<form
- onSubmit={this.submit}
+ onSubmit={this.preSubmit}
className={formClass}
>
<p>
@@ -202,6 +233,18 @@ export default class EmailToLDAP extends React.Component {
</button>
{serverError}
</form>
+ );
+ }
+
+ return (
+ <div>
+ <h3>
+ <FormattedMessage
+ id='claim.email_to_ldap.title'
+ defaultMessage='Switch Email/Password Account to AD/LDAP'
+ />
+ </h3>
+ {content}
</div>
);
}
diff --git a/webapp/components/claim/components/email_to_oauth.jsx b/webapp/components/claim/components/email_to_oauth.jsx
index d7c4956a6..3cede15a3 100644
--- a/webapp/components/claim/components/email_to_oauth.jsx
+++ b/webapp/components/claim/components/email_to_oauth.jsx
@@ -1,10 +1,14 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+import LoginMfa from 'components/login/components/login_mfa.jsx';
+
import * as Utils from 'utils/utils.jsx';
import Client from 'client/web_client.jsx';
import Constants from 'utils/constants.jsx';
+import {checkMfa} from 'actions/user_actions.jsx';
+
import React from 'react';
import ReactDOM from 'react-dom';
import {FormattedMessage} from 'react-intl';
@@ -14,10 +18,12 @@ export default class EmailToOAuth extends React.Component {
super(props);
this.submit = this.submit.bind(this);
+ this.preSubmit = this.preSubmit.bind(this);
- this.state = {};
+ this.state = {showMfa: false, password: ''};
}
- submit(e) {
+
+ preSubmit(e) {
e.preventDefault();
var state = {};
@@ -28,12 +34,31 @@ export default class EmailToOAuth extends React.Component {
return;
}
+ this.setState({password});
+
state.error = null;
this.setState(state);
- Client.emailToOAuth(
+ checkMfa(
this.props.email,
+ (requiresMfa) => {
+ if (requiresMfa) {
+ this.setState({showMfa: true});
+ } else {
+ this.submit(this.props.email, password, '');
+ }
+ },
+ (err) => {
+ this.setState({error: err.message});
+ }
+ );
+ }
+
+ submit(loginId, password, token) {
+ Client.emailToOAuth(
+ loginId,
password,
+ token,
this.props.newType,
(data) => {
if (data.follow_link) {
@@ -41,10 +66,11 @@ export default class EmailToOAuth extends React.Component {
}
},
(err) => {
- this.setState({error: err.message});
+ this.setState({error: err.message, showMfa: false});
}
);
}
+
render() {
var error = null;
if (this.state.error) {
@@ -59,18 +85,18 @@ export default class EmailToOAuth extends React.Component {
const type = (this.props.newType === Constants.SAML_SERVICE ? Constants.SAML_SERVICE.toUpperCase() : Utils.toTitleCase(this.props.newType));
const uiType = `${type} SSO`;
- return (
- <div>
- <h3>
- <FormattedMessage
- id='claim.email_to_oauth.title'
- defaultMessage='Switch Email/Password Account to {uiType}'
- values={{
- uiType
- }}
- />
- </h3>
- <form onSubmit={this.submit}>
+ let content;
+ if (this.state.showMfa) {
+ content = (
+ <LoginMfa
+ loginId={this.props.email}
+ password={this.state.password}
+ submit={this.submit}
+ />
+ );
+ } else {
+ content = (
+ <form onSubmit={this.preSubmit}>
<p>
<FormattedMessage
id='claim.email_to_oauth.ssoType'
@@ -122,6 +148,21 @@ export default class EmailToOAuth extends React.Component {
/>
</button>
</form>
+ );
+ }
+
+ return (
+ <div>
+ <h3>
+ <FormattedMessage
+ id='claim.email_to_oauth.title'
+ defaultMessage='Switch Email/Password Account to {uiType}'
+ values={{
+ uiType
+ }}
+ />
+ </h3>
+ {content}
</div>
);
}
diff --git a/webapp/components/claim/components/ldap_to_email.jsx b/webapp/components/claim/components/ldap_to_email.jsx
index b7ff93b59..39056cd0d 100644
--- a/webapp/components/claim/components/ldap_to_email.jsx
+++ b/webapp/components/claim/components/ldap_to_email.jsx
@@ -1,9 +1,11 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+import LoginMfa from 'components/login/components/login_mfa.jsx';
+
import * as Utils from 'utils/utils.jsx';
-import {switchFromLdapToEmail} from 'actions/user_actions.jsx';
+import {checkMfa, switchFromLdapToEmail} from 'actions/user_actions.jsx';
import React from 'react';
import {FormattedMessage} from 'react-intl';
@@ -13,6 +15,7 @@ export default class LDAPToEmail extends React.Component {
super(props);
this.submit = this.submit.bind(this);
+ this.preSubmit = this.preSubmit.bind(this);
this.state = {
passwordError: '',
@@ -22,8 +25,9 @@ export default class LDAPToEmail extends React.Component {
};
}
- submit(e) {
+ preSubmit(e) {
e.preventDefault();
+
var state = {
passwordError: '',
confirmError: '',
@@ -60,14 +64,33 @@ export default class LDAPToEmail extends React.Component {
return;
}
+ state.password = password;
+ state.ldapPassword = ldapPassword;
this.setState(state);
+ checkMfa(
+ this.props.email,
+ (requiresMfa) => {
+ if (requiresMfa) {
+ this.setState({showMfa: true});
+ } else {
+ this.submit(this.props.email, password, '', ldapPassword);
+ }
+ },
+ (err) => {
+ this.setState({error: err.message});
+ }
+ );
+ }
+
+ submit(loginId, password, token, ldapPassword) {
switchFromLdapToEmail(
this.props.email,
password,
- ldapPassword,
+ token,
+ ldapPassword || this.state.ldapPassword,
null,
- (err) => this.setState({serverError: err.message})
+ (err) => this.setState({serverError: err.message, showMfa: false})
);
}
@@ -107,16 +130,19 @@ export default class LDAPToEmail extends React.Component {
passwordPlaceholder = Utils.localizeMessage('claim.ldap_to_email.ldapPwd', 'AD/LDAP Password');
}
- return (
- <div>
- <h3>
- <FormattedMessage
- id='claim.ldap_to_email.title'
- defaultMessage='Switch AD/LDAP Account to Email/Password'
- />
- </h3>
+ let content;
+ if (this.state.showMfa) {
+ content = (
+ <LoginMfa
+ loginId={this.props.email}
+ password={this.state.password}
+ submit={this.submit}
+ />
+ );
+ } else {
+ content = (
<form
- onSubmit={this.submit}
+ onSubmit={this.preSubmit}
className={formClass}
>
<p>
@@ -194,6 +220,18 @@ export default class LDAPToEmail extends React.Component {
</button>
{serverError}
</form>
+ );
+ }
+
+ return (
+ <div>
+ <h3>
+ <FormattedMessage
+ id='claim.ldap_to_email.title'
+ defaultMessage='Switch AD/LDAP Account to Email/Password'
+ />
+ </h3>
+ {content}
</div>
);
}
diff --git a/webapp/components/login/components/login_mfa.jsx b/webapp/components/login/components/login_mfa.jsx
index ce77c9fa9..1a3393fa0 100644
--- a/webapp/components/login/components/login_mfa.jsx
+++ b/webapp/components/login/components/login_mfa.jsx
@@ -17,6 +17,7 @@ export default class LoginMfa extends React.Component {
serverError: ''
};
}
+
handleSubmit(e) {
e.preventDefault();
const state = {};
@@ -33,6 +34,7 @@ export default class LoginMfa extends React.Component {
this.props.submit(this.props.loginId, this.props.password, token);
}
+
render() {
let serverError;
let errorClass = '';
diff --git a/webapp/components/mfa/components/confirm.jsx b/webapp/components/mfa/components/confirm.jsx
new file mode 100644
index 000000000..026d12c6e
--- /dev/null
+++ b/webapp/components/mfa/components/confirm.jsx
@@ -0,0 +1,75 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import Constants from 'utils/constants.jsx';
+const KeyCodes = Constants.KeyCodes;
+
+import React from 'react';
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+import {browserHistory} from 'react-router/es6';
+
+export default class Confirm extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.onKeyPress = this.onKeyPress.bind(this);
+ }
+
+ componentDidMount() {
+ document.body.addEventListener('keydown', this.onKeyPress);
+ }
+
+ componentWillUnmount() {
+ document.body.removeEventListener('keydown', this.onKeyPress);
+ }
+
+ submit(e) {
+ e.preventDefault();
+ browserHistory.push('/');
+ }
+
+ onKeyPress(e) {
+ if (e.which === KeyCodes.ENTER) {
+ this.submit(e);
+ }
+ }
+
+ render() {
+ return (
+ <div>
+ <form
+ onSubmit={this.submit}
+ onKeyPress={this.onKeyPress}
+ className='form-group'
+ >
+ <p>
+ <FormattedHTMLMessage
+ id='mfa.confirm.complete'
+ defaultMessage='<strong>Set up complete!</strong>'
+ />
+ </p>
+ <p>
+ <FormattedMessage
+ id='mfa.confirm.secure'
+ defaultMessage='Your account is now secure. Next time you sign in, you will be asked to enter a code from the Google Authenticator app on your phone.'
+ />
+ </p>
+ <button
+ type='submit'
+ className='btn btn-primary'
+ >
+ <FormattedMessage
+ id='mfa.confirm.okay'
+ defaultMessage='Okay'
+ />
+ </button>
+ </form>
+ </div>
+ );
+ }
+}
+
+Confirm.defaultProps = {
+};
+Confirm.propTypes = {
+};
diff --git a/webapp/components/mfa/components/setup.jsx b/webapp/components/mfa/components/setup.jsx
new file mode 100644
index 000000000..f7a287c15
--- /dev/null
+++ b/webapp/components/mfa/components/setup.jsx
@@ -0,0 +1,156 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {generateMfaSecret, activateMfa} from 'actions/user_actions.jsx';
+
+import UserStore from 'stores/user_store.jsx';
+
+import * as Utils from 'utils/utils.jsx';
+
+import React from 'react';
+import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
+import {browserHistory} from 'react-router/es6';
+
+export default class Setup extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.submit = this.submit.bind(this);
+
+ this.state = {secret: '', qrCode: ''};
+ }
+
+ componentDidMount() {
+ const user = UserStore.getCurrentUser();
+ if (!user || user.mfa_active) {
+ browserHistory.push('/');
+ return;
+ }
+
+ generateMfaSecret(
+ (data) => this.setState({secret: data.secret, qrCode: data.qr_code}),
+ (err) => this.setState({serverError: err.message})
+ );
+ }
+
+ submit(e) {
+ e.preventDefault();
+ const code = this.refs.code.value.replace(/\s/g, '');
+ if (!code || code.length === 0) {
+ this.setState({error: Utils.localizeMessage('mfa.setup.codeError', 'Please enter the code from Google Authenticator.')});
+ return;
+ }
+
+ this.setState({error: null});
+
+ activateMfa(
+ code,
+ () => {
+ browserHistory.push('/mfa/confirm');
+ },
+ (err) => {
+ if (err.id === 'ent.mfa.activate.authenticate.app_error') {
+ this.setState({error: Utils.localizeMessage('mfa.setup.badCode', 'Invalid code. If this issue persists, contact your System Administrator.')});
+ return;
+ }
+ this.setState({error: err.message});
+ }
+ );
+ }
+
+ render() {
+ let formClass = 'form-group';
+ let errorContent;
+ if (this.state.error) {
+ errorContent = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
+ formClass += ' has-error';
+ }
+
+ let mfaRequired;
+ if (global.window.mm_config.EnforceMultifactorAuthentication) {
+ mfaRequired = (
+ <p>
+ <FormattedHTMLMessage
+ id='mfa.setup.required'
+ defaultMessage='<strong>Multi-factor authentication is required on {siteName}.</strong>'
+ values={{
+ siteName: global.window.mm_config.SiteName
+ }}
+ />
+ </p>
+ );
+ }
+
+ return (
+ <div>
+ <form
+ onSubmit={this.submit}
+ className={formClass}
+ >
+ {mfaRequired}
+ <p>
+ <FormattedHTMLMessage
+ id='mfa.setup.step1'
+ defaultMessage="<strong>Step 1: </strong>On your phone, download Google Authenticator from <a target='_blank' href='https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8'>iTunes</a> or <a target='_blank' href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en'>Google Play</a>"
+ />
+ </p>
+ <p>
+ <FormattedHTMLMessage
+ id='mfa.setup.step2'
+ defaultMessage='<strong>Step 2: </strong>Use Google Authenticator to scan this QR code, or manually type in the secret key'
+ />
+ </p>
+ <div className='form-group'>
+ <div className='col-sm-12'>
+ <img
+ style={{maxHeight: 170}}
+ src={'data:image/png;base64,' + this.state.qrCode}
+ />
+ </div>
+ </div>
+ <br/>
+ <div className='form-group'>
+ <p className='col-sm-12'>
+ <FormattedMessage
+ id='mfa.setup.secret'
+ defaultMessage='Secret: {secret}'
+ values={{
+ secret: this.state.secret
+ }}
+ />
+ </p>
+ </div>
+ <p>
+ <FormattedHTMLMessage
+ id='mfa.setup.step3'
+ defaultMessage='<strong>Step 3: </strong>Enter the code generated by Google Authenticator'
+ />
+ </p>
+ <p>
+ <input
+ ref='code'
+ className='form-control'
+ placeholder={Utils.localizeMessage('mfa.setup.code', 'MFA Code')}
+ autoFocus={true}
+ />
+ </p>
+ {errorContent}
+ <button
+ type='submit'
+ className='btn btn-primary'
+ >
+ <FormattedMessage
+ id='mfa.setup.save'
+ defaultMessage='Save'
+ />
+ </button>
+ </form>
+ </div>
+ );
+ }
+}
+
+Setup.defaultProps = {
+};
+Setup.propTypes = {
+};
diff --git a/webapp/components/mfa/mfa_controller.jsx b/webapp/components/mfa/mfa_controller.jsx
new file mode 100644
index 000000000..21b9737f8
--- /dev/null
+++ b/webapp/components/mfa/mfa_controller.jsx
@@ -0,0 +1,66 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {browserHistory, Link} from 'react-router/es6';
+
+import logoImage from 'images/logo.png';
+
+export default class MFAController extends React.Component {
+ componentDidMount() {
+ if (window.mm_license.MFA !== 'true' || window.mm_config.EnableMultifactorAuthentication !== 'true') {
+ browserHistory.push('/');
+ }
+ }
+
+ render() {
+ let backButton;
+ if (window.mm_config.EnforceMultifactorAuthentication !== 'true') {
+ backButton = (
+ <div className='signup-header'>
+ <Link to='/'>
+ <span className='fa fa-chevron-left'/>
+ <FormattedMessage
+ id='web.header.back'
+ />
+ </Link>
+ </div>
+ );
+ }
+
+ return (
+ <div className='inner-wrap sticky'>
+ <div className='content'>
+ <div>
+ {backButton}
+ <div className='col-sm-12'>
+ <div className='signup-team__container'>
+ <h3>
+ <FormattedMessage
+ id='mfa.setupTitle'
+ defaultMessage='Multi-factor Authentication Setup'
+ />
+ </h3>
+ <img
+ className='signup-team-logo'
+ src={logoImage}
+ />
+ <div id='mfa'>
+ {React.cloneElement(this.props.children, {})}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
+
+MFAController.defaultProps = {
+};
+MFAController.propTypes = {
+ location: React.PropTypes.object.isRequired,
+ children: React.PropTypes.node
+};
diff --git a/webapp/components/user_settings/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security.jsx
index 5f231e499..3484b8183 100644
--- a/webapp/components/user_settings/user_settings_security.jsx
+++ b/webapp/components/user_settings/user_settings_security.jsx
@@ -9,8 +9,6 @@ import ToggleModalButton from '../toggle_modal_button.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
-import {generateMfaSecret} from 'actions/user_actions.jsx';
-
import Client from 'client/web_client.jsx';
import * as AsyncClient from 'utils/async_client.jsx';
import * as Utils from 'utils/utils.jsx';
@@ -18,8 +16,8 @@ import Constants from 'utils/constants.jsx';
import $ from 'jquery';
import React from 'react';
-import {FormattedMessage, FormattedHTMLMessage, FormattedTime, FormattedDate} from 'react-intl';
-import {Link} from 'react-router/es6';
+import {FormattedMessage, FormattedTime, FormattedDate} from 'react-intl';
+import {browserHistory, Link} from 'react-router/es6';
import icon50 from 'images/icon50x50.png';
@@ -28,17 +26,15 @@ export default class SecurityTab extends React.Component {
super(props);
this.submitPassword = this.submitPassword.bind(this);
- this.activateMfa = this.activateMfa.bind(this);
+ this.setupMfa = this.setupMfa.bind(this);
this.deactivateMfa = this.deactivateMfa.bind(this);
this.updateCurrentPassword = this.updateCurrentPassword.bind(this);
this.updateNewPassword = this.updateNewPassword.bind(this);
this.updateConfirmPassword = this.updateConfirmPassword.bind(this);
- this.updateMfaToken = this.updateMfaToken.bind(this);
this.getDefaultState = this.getDefaultState.bind(this);
this.createPasswordSection = this.createPasswordSection.bind(this);
this.createSignInSection = this.createSignInSection.bind(this);
this.createOAuthAppsSection = this.createOAuthAppsSection.bind(this);
- this.showQrCode = this.showQrCode.bind(this);
this.deauthorizeApp = this.deauthorizeApp.bind(this);
this.state = this.getDefaultState();
@@ -51,9 +47,7 @@ export default class SecurityTab extends React.Component {
confirmPassword: '',
passwordError: '',
serverError: '',
- authService: this.props.user.auth_service,
- mfaShowQr: false,
- mfaToken: ''
+ authService: this.props.user.auth_service
};
}
@@ -119,26 +113,9 @@ export default class SecurityTab extends React.Component {
);
}
- activateMfa() {
- Client.updateMfa(
- this.state.mfaToken,
- true,
- () => {
- this.props.updateSection('');
- AsyncClient.getMe();
- this.setState(this.getDefaultState());
- },
- (err) => {
- const state = this.getDefaultState();
- if (err.message) {
- state.serverError = err.message;
- } else {
- state.serverError = err;
- }
- state.mfaError = '';
- this.setState(state);
- }
- );
+ setupMfa(e) {
+ e.preventDefault();
+ browserHistory.push('/mfa/setup');
}
deactivateMfa() {
@@ -146,6 +123,13 @@ export default class SecurityTab extends React.Component {
'',
false,
() => {
+ if (global.window.mm_license.MFA === 'true' &&
+ global.window.mm_config.EnableMultifactorAuthentication === 'true' &&
+ global.window.mm_config.EnforceMultifactorAuthentication === 'true') {
+ window.location.href = '/mfa/setup';
+ return;
+ }
+
this.props.updateSection('');
AsyncClient.getMe();
this.setState(this.getDefaultState());
@@ -157,7 +141,6 @@ export default class SecurityTab extends React.Component {
} else {
state.serverError = err;
}
- state.mfaError = '';
this.setState(state);
}
);
@@ -175,18 +158,6 @@ export default class SecurityTab extends React.Component {
this.setState({confirmPassword: e.target.value});
}
- updateMfaToken(e) {
- this.setState({mfaToken: e.target.value});
- }
-
- showQrCode(e) {
- e.preventDefault();
- generateMfaSecret(
- (data) => this.setState({mfaShowQr: true, secret: data.secret, qrCode: data.qr_code}),
- (err) => this.setState({serverError: err.message})
- );
- }
-
deauthorizeApp(e) {
e.preventDefault();
const appId = e.currentTarget.getAttribute('data-app');
@@ -212,6 +183,39 @@ export default class SecurityTab extends React.Component {
let content;
let extraInfo;
if (this.props.user.mfa_active) {
+ let mfaRemoveHelp;
+ let mfaButtonText;
+
+ if (global.window.mm_config.EnforceMultifactorAuthentication === 'true') {
+ mfaRemoveHelp = (
+ <FormattedMessage
+ id='user.settings.mfa.requiredHelp'
+ defaultMessage='Multi-factor authentication is required on this server. Resetting is only recommended when you need to switch code generation to a new mobile device. You will be required to set it up again immediately.'
+ />
+ );
+
+ mfaButtonText = (
+ <FormattedMessage
+ id='user.settings.mfa.reset'
+ defaultMessage='Reset MFA on your account'
+ />
+ );
+ } else {
+ mfaRemoveHelp = (
+ <FormattedMessage
+ id='user.settings.mfa.removeHelp'
+ defaultMessage='Removing multi-factor authentication means you will no longer require a phone-based passcode to sign-in to your account.'
+ />
+ );
+
+ mfaButtonText = (
+ <FormattedMessage
+ id='user.settings.mfa.remove'
+ defaultMessage='Remove MFA from your account'
+ />
+ );
+ }
+
content = (
<div key='mfaQrCode'>
<a
@@ -219,10 +223,7 @@ export default class SecurityTab extends React.Component {
href='#'
onClick={this.deactivateMfa}
>
- <FormattedMessage
- id='user.settings.mfa.remove'
- defaultMessage='Remove MFA from your account'
- />
+ {mfaButtonText}
</a>
<br/>
</div>
@@ -230,78 +231,16 @@ export default class SecurityTab extends React.Component {
extraInfo = (
<span>
- <FormattedMessage
- id='user.settings.mfa.removeHelp'
- defaultMessage='Removing multi-factor authentication will make your account more vulnerable to attacks.'
- />
+ {mfaRemoveHelp}
</span>
);
- } else if (this.state.mfaShowQr) {
- content = (
- <div key='mfaButton'>
- <div className='form-group'>
- <label className='col-sm-3 control-label'>
- <FormattedMessage
- id='user.settings.mfa.qrCode'
- defaultMessage='Bar Code'
- />
- </label>
- <div className='col-sm-5'>
- <img
- className='qr-code-img'
- src={'data:image/png;base64,' + this.state.qrCode}
- />
- </div>
- </div>
- <div className='form-group'>
- <label className='col-sm-3 control-label'>
- <FormattedMessage
- id='user.settings.mfa.secret'
- defaultMessage='Secret'
- />
- </label>
- <div className='col-sm-9 padding-top'>
- {this.state.secret}
- </div>
- </div>
- <hr/>
- <div className='form-group'>
- <label className='col-sm-5 control-label'>
- <FormattedMessage
- id='user.settings.mfa.enterToken'
- defaultMessage='Token (numbers only)'
- />
- </label>
- <div className='col-sm-7'>
- <input
- className='form-control'
- type='number'
- autoFocus={true}
- onChange={this.updateMfaToken}
- value={this.state.mfaToken}
- />
- </div>
- </div>
- </div>
- );
-
- extraInfo = (
- <span>
- <FormattedMessage
- id='user.settings.mfa.addHelpQr'
- defaultMessage='Please scan the QR code with the Google Authenticator app on your smartphone and fill in the token with one provided by the app. If you are unable to scan the code, you can manually enter the secret provided.'
- />
- </span>
- );
-
- submit = this.activateMfa;
} else {
content = (
<div key='mfaQrCode'>
<a
className='btn btn-primary'
href='#'
- onClick={this.showQrCode}
+ onClick={this.setupMfa}
>
<FormattedMessage
id='user.settings.mfa.add'
@@ -314,9 +253,9 @@ export default class SecurityTab extends React.Component {
extraInfo = (
<span>
- <FormattedHTMLMessage
+ <FormattedMessage
id='user.settings.mfa.addHelp'
- defaultMessage="You can require a smartphone-based token, in addition to your password, to sign into Mattermost.<br/><br/>To enable, download Google Authenticator from <a target='_blank' href='https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8'>iTunes</a> or <a target='_blank' href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en'>Google Play</a> for your phone, then<br/><br/>1. Click the <strong>Add MFA to your account</strong> button above.<br/>2. Use Google Authenticator to scan the QR code that appears or type in the secret manually.<br/>3. Type in the Token generated by Google Authenticator and click <strong>Save</strong>.<br/><br/>When logging in, you will be asked to enter a token from Google Authenticator in addition to your regular credentials."
+ defaultMessage='Adding multi-factor authentication will make your account more secure by requiring a code from your mobile phone each time you sign in.'
/>
</span>
);
@@ -334,7 +273,7 @@ export default class SecurityTab extends React.Component {
updateSectionStatus = function resetSection(e) {
this.props.updateSection('');
- this.setState({mfaToken: '', mfaShowQr: false, mfaError: null, serverError: null});
+ this.setState({serverError: null});
e.preventDefault();
}.bind(this);
@@ -345,7 +284,6 @@ export default class SecurityTab extends React.Component {
extraInfo={extraInfo}
submit={submit}
server_error={this.state.serverError}
- client_error={this.state.mfaError}
updateSection={updateSectionStatus}
width='medium'
/>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-26 13:30:59 +0000