Account migrations

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/actions/security.js

@@ -35,6 +35,10 @@ export const DELETE_ACCOUNT_REQUEST = 'DELETE_ACCOUNT_REQUEST';
 export const DELETE_ACCOUNT_SUCCESS = 'DELETE_ACCOUNT_SUCCESS';
 export const DELETE_ACCOUNT_FAIL    = 'DELETE_ACCOUNT_FAIL';
 
+export const MOVE_ACCOUNT_REQUEST = 'MOVE_ACCOUNT_REQUEST';
+export const MOVE_ACCOUNT_SUCCESS = 'MOVE_ACCOUNT_SUCCESS';
+export const MOVE_ACCOUNT_FAIL    = 'MOVE_ACCOUNT_FAIL';
+
 export function fetchOAuthTokens() {
   return (dispatch, getState) => {
     dispatch({ type: FETCH_TOKENS_REQUEST });
@@ -124,3 +128,19 @@ export function deleteAccount(intl, password) {
     });
   };
 }
+
+export function moveAccount(targetAccount, password) {
+  return (dispatch, getState) => {
+    dispatch({ type: MOVE_ACCOUNT_REQUEST });
+    return api(getState).post('/api/pleroma/move_account', {
+      password,
+      target_account: targetAccount,
+    }).then(response => {
+      if (response.data.error) throw response.data.error; // This endpoint returns HTTP 200 even on failure
+      dispatch({ type: MOVE_ACCOUNT_SUCCESS, response });
+    }).catch(error => {
+      dispatch({ type: MOVE_ACCOUNT_FAIL, error, skipAlert: true });
+      throw error;
+    });
+  };
+}

app/soapbox/features/migration/index.js

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import { moveAccount } from 'soapbox/actions/security';
+import snackbar from 'soapbox/actions/snackbar';
+import ShowablePassword from 'soapbox/components/showable_password';
+import { FieldsGroup, SimpleForm, TextInput } from 'soapbox/features/forms';
+import Column from 'soapbox/features/ui/components/column';
+
+const messages = defineMessages({
+  heading: { id: 'column.migration', defaultMessage: 'Account migration' },
+  submit: { id: 'migration.submit', defaultMessage: 'Move followers' },
+  moveAccountSuccess: { id: 'migration.move_account.success', defaultMessage: 'Account successfully moved.' },
+  moveAccountFail: { id: 'migration.move_account.fail', defaultMessage: 'Account migration failed.' },
+  acctFieldLabel: { id: 'migration.fields.acct.label', defaultMessage: 'Handle of the new account' },
+  acctFieldPlaceholder: { id: 'migration.fields.acct.placeholder', defaultMessage: 'username@domain' },
+  currentPasswordFieldLabel: { id: 'migration.fields.confirm_password.label', defaultMessage: 'Current password' },
+});
+
+export default @connect()
+@injectIntl
+class Migration extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    targetAccount: '',
+    password: '',
+    isLoading: false,
+  }
+
+  handleInputChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  }
+
+  clearForm = () => {
+    this.setState({ targetAccount: '', password: '' });
+  }
+
+  handleSubmit = e => {
+    const { targetAccount, password } = this.state;
+    const { dispatch, intl } = this.props;
+    this.setState({ isLoading: true });
+    return dispatch(moveAccount(targetAccount, password)).then(() => {
+      this.clearForm();
+      dispatch(snackbar.success(intl.formatMessage(messages.moveAccountSuccess)));
+    }).catch(error => {
+      dispatch(snackbar.error(intl.formatMessage(messages.moveAccountFail)));
+    }).then(() => {
+      this.setState({ isLoading: false });
+    });
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    return (
+      <Column heading={intl.formatMessage(messages.heading)}>
+        <SimpleForm onSubmit={this.handleSubmit}>
+          <fieldset disabled={this.state.isLoading}>
+            <FieldsGroup>
+              <p className='hint'>
+                <FormattedMessage
+                  id='migration.hint'
+                  defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
+                  values={{
+                    link: (
+                      <Link to='/settings/aliases'>
+                        <FormattedMessage
+                          id='migration.hint.link'
+                          defaultMessage='create an account alias'
+                        />
+                      </Link>
+                    ),
+                  }}
+                />
+              </p>
+              <TextInput
+                label={intl.formatMessage(messages.acctFieldLabel)}
+                placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
+                name='targetAccount'
+                value={this.state.targetAccount}
+                onChange={this.handleInputChange}
+              />
+              <ShowablePassword
+                label={intl.formatMessage(messages.currentPasswordFieldLabel)}
+                name='password'
+                value={this.state.password}
+                onChange={this.handleInputChange}
+              />
+              <div className='actions'>
+                <button
+                  name='button'
+                  type='submit'
+                  className='btn button button-primary'
+                  disabled={!this.state.password || !this.state.targetAccount}
+                >
+                  {intl.formatMessage(messages.submit)}
+                </button>
+              </div>
+            </FieldsGroup>
+          </fieldset>
+        </SimpleForm>
+      </Column>
+    );
+  }
+
+}

app/soapbox/features/ui/index.js

@@ -104,6 +104,7 @@ import {
   UserIndex,
   FederationRestrictions,
   Aliases,
+  Migration,
   FollowRecommendations,
   Directory,
   SidebarMenu,
@@ -314,6 +315,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />
         <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />
         <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />
+        <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />
         <WrappedRoute path='/backups' page={DefaultPage} component={Backups} content={children} />
         <WrappedRoute path='/soapbox/config' adminOnly page={DefaultPage} component={SoapboxConfig} content={children} />
 

app/soapbox/features/ui/util/async-components.js

@@ -414,6 +414,10 @@ export function Aliases() {
   return import(/* webpackChunkName: "features/aliases" */'../../aliases');
 }
 
+export function Migration() {
+  return import(/* webpackChunkName: "features/migration" */'../../migration');
+}
+
 export function ScheduleForm() {
   return import(/* webpackChunkName: "features/compose" */'../../compose/components/schedule_form');
 }

app/styles/components/buttons.scss

@@ -67,7 +67,7 @@ button {
 
   &:disabled,
   &.disabled {
-    background-color: var(--brand-color--med);
+    opacity: 0.2;
     cursor: default;
   }