diff --git a/app/soapbox/features/migration/index.js b/app/soapbox/features/migration/index.js deleted file mode 100644 index b323c833c3..0000000000 Binary files a/app/soapbox/features/migration/index.js and /dev/null differ diff --git a/app/soapbox/features/migration/index.tsx b/app/soapbox/features/migration/index.tsx new file mode 100644 index 0000000000..d84e055760 --- /dev/null +++ b/app/soapbox/features/migration/index.tsx @@ -0,0 +1,125 @@ +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, useAppSelector } 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 cooldownPeriod = useAppSelector((state) => state.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 = 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 ( + +
+ + + + + ), + }} + /> + {!!cooldownPeriod && (<> + {' '} + + )} + + + + + + + + +