diff --git a/app/soapbox/features/public_timeline/components/column_settings.js b/app/soapbox/features/public_timeline/components/column_settings.js
index d46dd0176..1d7bd7359 100644
--- a/app/soapbox/features/public_timeline/components/column_settings.js
+++ b/app/soapbox/features/public_timeline/components/column_settings.js
@@ -18,6 +18,14 @@ class ColumnSettings extends React.PureComponent {
return (
+
+ } />
+
+
+
+ } />
+
+
} />
diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js
index f69c31f6d..b13305dd1 100644
--- a/app/soapbox/features/security/index.js
+++ b/app/soapbox/features/security/index.js
@@ -5,6 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Column from '../ui/components/column';
+import Button from 'soapbox/components/button';
import {
SimpleForm,
SimpleInput,
@@ -18,7 +19,9 @@ import {
revokeOAuthToken,
deleteAccount,
} from 'soapbox/actions/auth';
+import { fetchUserMfaSettings } from '../../actions/mfa';
import { showAlert } from 'soapbox/actions/alerts';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
/*
Security settings page for user account
@@ -51,9 +54,22 @@ const messages = defineMessages({
deleteSubmit: { id: 'security.submit.delete', defaultMessage: 'Delete Account' },
deleteAccountSuccess: { id: 'security.delete_account.success', defaultMessage: 'Account successfully deleted.' },
deleteAccountFail: { id: 'security.delete_account.fail', defaultMessage: 'Account deletion failed.' },
+ mfa: { id: 'security.mfa', defaultMessage: 'Set up 2-Factor Auth' },
+ mfa_setup_hint: { id: 'security.mfa_setup_hint', defaultMessage: 'Configure multi-factor authentication with OTP' },
+ mfa_enabled: { id: 'security.mfa_enabled', defaultMessage: 'You have multi-factor authentication set up with OTP.' },
+ disable_mfa: { id: 'security.disable_mfa', defaultMessage: 'Disable' },
+ mfaHeader: { id: 'security.mfa_header', defaultMessage: 'Authorization Methods' },
+
});
-export default @injectIntl
+const mapStateToProps = state => ({
+ backup_codes: state.getIn(['auth', 'backup_codes', 'codes']),
+ settings: getSettings(state),
+ tokens: state.getIn(['auth', 'tokens']),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
class SecurityForm extends ImmutablePureComponent {
static propTypes = {
@@ -68,6 +84,7 @@ class SecurityForm extends ImmutablePureComponent {
+
@@ -227,9 +244,56 @@ class ChangePasswordForm extends ImmutablePureComponent {
}
-const mapStateToProps = state => ({
- tokens: state.getIn(['auth', 'tokens']),
-});
+@connect(mapStateToProps)
+@injectIntl
+class SetUpMfa extends ImmutablePureComponent {
+
+ constructor(props) {
+ super(props);
+ this.props.dispatch(fetchUserMfaSettings()).then(response => {
+ this.props.dispatch(changeSetting(['otpEnabled'], response.data.settings.enabled));
+ }).catch(e => e);
+ }
+
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ settings: ImmutablePropTypes.map.isRequired,
+ };
+
+ handleMfaClick = e => {
+ this.context.router.history.push('../auth/mfa');
+ }
+
+ render() {
+ const { intl, settings } = this.props;
+
+ return (
+
+ {intl.formatMessage(messages.mfaHeader)}
+ { settings.get('otpEnabled') === false ?
+
+
+ {intl.formatMessage(messages.mfa_setup_hint)}
+
+
+
+
+ {intl.formatMessage(messages.mfa_enabled)}
+
+
+
+ );
+ }
+
+}
+
@connect(mapStateToProps)
@injectIntl
diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js
new file mode 100644
index 000000000..572579d53
--- /dev/null
+++ b/app/soapbox/features/security/mfa_form.js
@@ -0,0 +1,333 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import QRCode from 'qrcode.react';
+import Column from '../ui/components/column';
+import ColumnSubheading from '../ui/components/column_subheading';
+import LoadingIndicator from 'soapbox/components/loading_indicator';
+import Button from 'soapbox/components/button';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import { showAlert } from 'soapbox/actions/alerts';
+import {
+ SimpleForm,
+ SimpleInput,
+ FieldsGroup,
+ TextInput,
+} from 'soapbox/features/forms';
+import {
+ fetchBackupCodes,
+ fetchToptSetup,
+ confirmToptSetup,
+ fetchUserMfaSettings,
+ disableToptSetup,
+} from '../../actions/mfa';
+
+/*
+Security settings page for user account
+Routed to /auth/mfa
+Includes following features:
+- Set up Multi-factor Auth
+*/
+
+const messages = defineMessages({
+ heading: { id: 'column.security', defaultMessage: 'Security' },
+ subheading: { id: 'column.mfa', defaultMessage: 'Multi-Factor Authentication' },
+ mfa_cancel_button: { id: 'column.mfa_cancel', defaultMessage: 'Cancel' },
+ mfa_setup_button: { id: 'column.mfa_setup', defaultMessage: 'Proceed to Setup' },
+ mfa_setup_confirm_button: { id: 'column.mfa_confirm_button', defaultMessage: 'Confirm' },
+ mfa_setup_disable_button: { id: 'column.mfa_disable_button', defaultMessage: 'Disable' },
+ passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
+ confirmFail: { id: 'security.confirm.fail', defaultMessage: 'Incorrect code or password. Try again.' },
+ qrFail: { id: 'security.qr.fail', defaultMessage: 'Failed to fetch setup key' },
+ codesFail: { id: 'security.codes.fail', defaultMessage: 'Failed to fetch backup codes' },
+ disableFail: { id: 'security.disable.fail', defaultMessage: 'Incorrect password. Try again.' },
+});
+
+const mapStateToProps = state => ({
+ backup_codes: state.getIn(['auth', 'backup_codes', 'codes']),
+ settings: getSettings(state),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class MfaForm extends ImmutablePureComponent {
+
+ constructor(props) {
+ super(props);
+ this.props.dispatch(fetchUserMfaSettings()).then(response => {
+ this.props.dispatch(changeSetting(['otpEnabled'], response.data.settings.enabled));
+ // this.setState({ otpEnabled: response.data.settings.enabled });
+ }).catch(e => e);
+ this.handleSetupProceedClick = this.handleSetupProceedClick.bind(this);
+ }
+
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ settings: ImmutablePropTypes.map.isRequired,
+ };
+
+ state = {
+ displayOtpForm: false,
+ }
+
+ handleSetupProceedClick = e => {
+ e.preventDefault();
+ this.setState({ displayOtpForm: true });
+ }
+
+ render() {
+ const { intl, settings } = this.props;
+ const { displayOtpForm } = this.state;
+
+ return (
+
+
+ { settings.get('otpEnabled') === true && }
+ { settings.get('otpEnabled') === false && }
+ { settings.get('otpEnabled') === false && displayOtpForm && }
+
+ );
+ }
+
+}
+
+
+@connect()
+@injectIntl
+class DisableOtpForm extends ImmutablePureComponent {
+
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ };
+
+ state = {
+ password: '',
+ }
+
+ handleInputChange = e => {
+ this.setState({ [e.target.name]: e.target.value });
+ }
+
+ handleOtpDisableClick = e => {
+ e.preventDefault();
+ const { password } = this.state;
+ const { dispatch, intl } = this.props;
+ dispatch(disableToptSetup(password)).then(response => {
+ this.context.router.history.push('../auth/edit');
+ dispatch(changeSetting(['otpEnabled'], false));
+ }).catch(error => {
+ dispatch(showAlert('', intl.formatMessage(messages.disableFail)));
+ });
+ }
+
+ render() {
+ const { intl } = this.props;
+
+ return (
+
+
+
+ );
+ }
+
+}
+
+
+@connect()
+@injectIntl
+class EnableOtpForm extends ImmutablePureComponent {
+
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ dispatch: PropTypes.func.isRequired,
+ };
+
+ state = {
+ backupCodes: [],
+ }
+
+ componentDidMount() {
+ const { dispatch, intl } = this.props;
+ dispatch(fetchBackupCodes()).then(response => {
+ this.setState({ backupCodes: response.data.codes });
+ }).catch(error => {
+ dispatch(showAlert('', intl.formatMessage(messages.codesFail)));
+ });
+ }
+
+ handleCancelClick = e => {
+ this.context.router.history.push('../auth/edit');
+ }
+
+ render() {
+ const { intl } = this.props;
+ const { backupCodes, displayOtpForm } = this.state;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { backupCodes.length ?
+
+ {backupCodes.map((code, i) => (
+
+ ))}
+
:
+
+ }
+
+ { !displayOtpForm &&
+
+
+ { backupCodes.length ?
+ :
+ null
+ }
+
+ }
+
+ );
+ }
+
+}
+
+
+@connect()
+@injectIntl
+class OtpConfirmForm extends ImmutablePureComponent {
+
+ static contextTypes = {
+ router: PropTypes.object,
+ };
+
+ static propTypes = {
+ intl: PropTypes.object.isRequired,
+ };
+
+ state = {
+ password: '',
+ done: false,
+ code: '',
+ qrCodeURI: '',
+ confirm_key: '',
+ }
+
+ componentDidMount() {
+ const { dispatch, intl } = this.props;
+ dispatch(fetchToptSetup()).then(response => {
+ this.setState({ qrCodeURI: response.data.provisioning_uri, confirm_key: response.data.key });
+ }).catch(error => {
+ dispatch(showAlert('', intl.formatMessage(messages.qrFail)));
+ });
+ }
+
+ handleInputChange = e => {
+ this.setState({ [e.target.name]: e.target.value });
+ }
+
+ handleOtpConfirmClick = e => {
+ e.preventDefault();
+ const { code, password } = this.state;
+ const { dispatch, intl } = this.props;
+ dispatch(confirmToptSetup(code, password)).then(response => {
+ dispatch(changeSetting(['otpEnabled'], true));
+ }).catch(error => {
+ dispatch(showAlert('', intl.formatMessage(messages.confirmFail)));
+ });
+ }
+
+ render() {
+ const { intl } = this.props;
+ const { qrCodeURI, confirm_key } = this.state;
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js
index c5db0cab5..de3969f27 100644
--- a/app/soapbox/features/status/components/action_bar.js
+++ b/app/soapbox/features/status/components/action_bar.js
@@ -311,7 +311,9 @@ class ActionBar extends React.PureComponent {
onMouseLeave={this.handleLikeButtonLeave}
ref={this.setRef}
>
-
+ { emojiSelectorVisible &&
+
+ }
+
+
+
+
+
+ Edit Profile
+
+
+
+
+
+
+ Messages
+
+
+
+
+
+
+ Bookmarks
+
+
+
+
+
+
+ Lists
+
+
+
+
+
+
+ Security
+
+
+
+
+
+
+ Preferences
+
+
+
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index e26dc0125..592d60ee0 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/app/soapbox/features/ui/components/profile_info_panel.js
@@ -59,6 +59,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
const fields = account.get('fields');
const displayNameHtml = { __html: account.get('display_name_html') };
const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
+ const verified = account.get('pleroma').get('tags').includes('verified');
return (