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

Proper spacing on MFA page

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-05-21 23:50:52 +02:00
parent cdd0fd63b2
commit 15186bada3
1 changed files with 10 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/soapbox/features/security/mfa-form.tsx
View file

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import { useIntl, defineMessages } from 'react-intl'; import { useIntl, defineMessages } from 'react-intl';
import { fetchMfa } from 'soapbox/actions/mfa'; import { fetchMfa } from 'soapbox/actions/mfa';
import { Card, CardBody, CardHeader, CardTitle, Column, Stack } from 'soapbox/components/ui'; import { Column, Stack } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import DisableOtpForm from './mfa/disable-otp-form'; import DisableOtpForm from './mfa/disable-otp-form';
@ -37,23 +37,15 @@ const MfaForm: React.FC = () => {
const mfa = useAppSelector((state) => state.security.get('mfa')); const mfa = useAppSelector((state) => state.security.get('mfa'));
return ( return (
<Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}> <Column label={intl.formatMessage(messages.heading)}>
<Card variant='rounded'> {mfa.getIn(['settings', 'totp']) ? (
<CardHeader backHref='/settings'> <DisableOtpForm />
<CardTitle title={intl.formatMessage(messages.heading)} /> ) : (
</CardHeader> <Stack space={4}>
<EnableOtpForm displayOtpForm={displayOtpForm} handleSetupProceedClick={handleSetupProceedClick} />
<CardBody> {displayOtpForm && <OtpConfirmForm />}
{mfa.getIn(['settings', 'totp']) ? ( </Stack>
<DisableOtpForm /> )}
) : (
<Stack space={4}>
<EnableOtpForm displayOtpForm={displayOtpForm} handleSetupProceedClick={handleSetupProceedClick} />
{displayOtpForm && <OtpConfirmForm />}
</Stack>
)}
</CardBody>
</Card>
</Column> </Column>
); );
}; };