bigbuffet-rw/app/soapbox/features/migration/index.tsx

import React, { useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';

import { moveAccount } from 'soapbox/actions/security';
import snackbar from 'soapbox/actions/snackbar';
import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
import { useAppDispatch, useInstance } from 'soapbox/hooks';

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.' },
  moveAccountFailCooldownPeriod: { id: 'migration.move_account.fail.cooldown_period', defaultMessage: 'You have moved your account too recently. Please try again later.' },
  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' },
});

const Migration = () => {
  const intl = useIntl();
  const dispatch = useAppDispatch();
  const instance = useInstance();

  const cooldownPeriod = instance.pleroma.getIn(['metadata', 'migration_cooldown_period']) as number | undefined;

  const [targetAccount, setTargetAccount] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e => {
    if (e.target.name === 'password') setPassword(e.target.value);
    else setTargetAccount(e.target.value);
  };

  const clearForm = () => {
    setTargetAccount('');
    setPassword('');
  };

  const handleSubmit: React.FormEventHandler = e => {
    setIsLoading(true);
    return dispatch(moveAccount(targetAccount, password)).then(() => {
      clearForm();
      dispatch(snackbar.success(intl.formatMessage(messages.moveAccountSuccess)));
    }).catch(error => {
      let message = intl.formatMessage(messages.moveAccountFail);

      const errorMessage = (error.response?.data)?.error;
      if (errorMessage === 'You are within cooldown period.') {
        message = intl.formatMessage(messages.moveAccountFailCooldownPeriod);
      }

      dispatch(snackbar.error(message));
    }).then(() => {
      setIsLoading(false);
    });
  };

  return (
    <Column label={intl.formatMessage(messages.heading)}>
      <Form onSubmit={handleSubmit}>
        <Text theme='muted'>
          <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
                  className='hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500'
                  to='/settings/aliases'
                >
                  <FormattedMessage
                    id='migration.hint.link'
                    defaultMessage='create an account alias'
                  />
                </Link>
              ),
            }}
          />
          {!!cooldownPeriod && (<>
            {' '}
            <FormattedMessage
              id='migration.hint.cooldown_period'
              defaultMessage='If you migrate your account, you will not be able to migrate your account for {cooldownPeriod, plural, one {one day} other {the next # days}}.'
              values={{ cooldownPeriod }}
            />
          </>)}
        </Text>
        <FormGroup
          labelText={intl.formatMessage(messages.acctFieldLabel)}
        >
          <Input
            name='targetAccount'
            placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
            onChange={handleInputChange}
            value={targetAccount}
            required
          />
        </FormGroup>
        <FormGroup
          labelText={intl.formatMessage(messages.currentPasswordFieldLabel)}
        >
          <Input
            type='password'
            name='password'
            onChange={handleInputChange}
            value={password}
            required
          />
        </FormGroup>
        <FormActions>
          <Button
            theme='primary'
            text={intl.formatMessage(messages.submit)}
            onClick={handleSubmit}
            disabled={isLoading}
          />
        </FormActions>
      </Form>
    </Column>
  );
};

export default Migration;