bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'improve-delete-button' into 'develop'

Browse source 
Improve design on deleting your account

Closes #961

See merge request soapbox-pub/soapbox-fe!1410
This commit is contained in:
Justin 2022-05-17 14:38:57 +00:00
commit 5a113d3f5e
1 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/soapbox/features/settings/index.tsx
View file

@ -1,11 +1,11 @@
import * as React from 'react';
import React, { useEffect } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { fetchMfa } from 'soapbox/actions/mfa';
import List, { ListItem } from 'soapbox/components/list';
import { Button, Card, CardBody, CardHeader, CardTitle, Column } from 'soapbox/components/ui';
import { Card, CardBody, CardHeader, CardTitle, Column } from 'soapbox/components/ui';
import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
import { getFeatures } from 'soapbox/utils/features';
@ -22,6 +22,7 @@ const messages = defineMessages({
configureMfa: { id: 'settings.configure_mfa', defaultMessage: 'Configure MFA' },
sessions: { id: 'settings.sessions', defaultMessage: 'Active sessions' },
deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
other: { id: 'settings.other', defaultMessage: 'Other options' },
});
/** User settings page. */
@ -34,15 +35,16 @@ const Settings = () => {
const features = useAppSelector((state) => getFeatures(state.instance));
const account = useOwnAccount();
const navigateToChangeEmail = React.useCallback(() => history.push('/settings/email'), [history]);
const navigateToChangePassword = React.useCallback(() => history.push('/settings/password'), [history]);
const navigateToMfa = React.useCallback(() => history.push('/settings/mfa'), [history]);
const navigateToSessions = React.useCallback(() => history.push('/settings/tokens'), [history]);
const navigateToEditProfile = React.useCallback(() => history.push('/settings/profile'), [history]);
const navigateToChangeEmail = () => history.push('/settings/email');
const navigateToChangePassword = () => history.push('/settings/password');
const navigateToMfa = () => history.push('/settings/mfa');
const navigateToSessions = () => history.push('/settings/tokens');
const navigateToEditProfile = () => history.push('/settings/profile');
const navigateToDeleteAccount = () => history.push('/settings/account');
const isMfaEnabled = mfa.getIn(['settings', 'totp']);
React.useEffect(() => {
useEffect(() => {
dispatch(fetchMfa());
}, [dispatch]);
@ -92,12 +94,14 @@ const Settings = () => {
<Preferences />
</CardBody>
<CardHeader>
<CardTitle title={intl.formatMessage(messages.other)} />
</CardHeader>
<CardBody>
<div className='mt-4 w-full flex justify-center'>
<Button theme='danger' to='/settings/account'>
{intl.formatMessage(messages.deleteAccount)}
</Button>
</div>
<List>
<ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
</List>
</CardBody>
</Card>
</Column>