moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve design on deleting your account

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