import PropTypes from 'prop-types'; import * as React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { deleteAccount } from 'soapbox/actions/security'; import snackbar from 'soapbox/actions/snackbar'; import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; const messages = defineMessages({ passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' }, deleteHeader: { id: 'security.headers.delete', defaultMessage: 'Delete Account' }, deleteText: { id: 'security.text.delete', defaultMessage: 'To delete your account, enter your password then click Delete Account. This is a permanent action that cannot be undone. Your account will be destroyed from this server, and a deletion request will be sent to other servers. It\'s not guaranteed that all servers will purge your account.' }, 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.' }, }); const DeleteAccount = () => { const intl = useIntl(); const dispatch = useAppDispatch(); const [password, setPassword] = React.useState(''); const [isLoading, setLoading] = React.useState(false); const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => { event.persist(); setPassword(event.target.value); }, []); const handleSubmit = React.useCallback(() => { setLoading(true); dispatch(deleteAccount(intl, password)).then(() => { setPassword(''); dispatch(snackbar.success(intl.formatMessage(messages.deleteAccountSuccess))); }).finally(() => { setLoading(false); }).catch(() => { setPassword(''); dispatch(snackbar.error(intl.formatMessage(messages.deleteAccountFail))); }); }, [password, dispatch, intl]); return ( <Card variant='rounded'> <CardHeader backHref='/settings'> <CardTitle title={intl.formatMessage(messages.deleteHeader)} /> </CardHeader> <CardBody> <p className='text-gray-400 mb-4'> {intl.formatMessage(messages.deleteText)} </p> <Form onSubmit={handleSubmit}> <FormGroup labelText={intl.formatMessage(messages.passwordFieldLabel)}> <Input type='password' name='password' onChange={handleInputChange} value={password} /> </FormGroup> <FormActions> <Button type='submit' theme='danger' disabled={isLoading}> {intl.formatMessage(messages.deleteSubmit)} </Button> </FormActions> </Form> </CardBody> </Card> ); }; DeleteAccount.propTypes = { intl: PropTypes.object, dispatch: PropTypes.func, }; export default DeleteAccount;