49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useStoreState } from 'easy-peasy';
|
|
import { ApplicationStore } from '@/state';
|
|
import tw from 'twin.macro';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button } from '@/components/elements/button/index';
|
|
import SetupTOTPDialog from '@/components/dashboard/forms/SetupTOTPDialog';
|
|
import RecoveryTokensDialog from '@/components/dashboard/forms/RecoveryTokensDialog';
|
|
import DisableTOTPDialog from '@/components/dashboard/forms/DisableTOTPDialog';
|
|
import { useFlashKey } from '@/plugins/useFlash';
|
|
|
|
export default () => {
|
|
const { t } = useTranslation('dashboard/account');
|
|
|
|
const [tokens, setTokens] = useState<string[]>([]);
|
|
const [visible, setVisible] = useState<'enable' | 'disable' | null>(null);
|
|
const isEnabled = useStoreState((state: ApplicationStore) => state.user.data!.useTotp);
|
|
const { clearAndAddHttpError } = useFlashKey('account:two-step');
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
clearAndAddHttpError();
|
|
};
|
|
}, [visible]);
|
|
|
|
const onTokens = (tokens: string[]) => {
|
|
setTokens(tokens);
|
|
setVisible(null);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<SetupTOTPDialog open={visible === 'enable'} onClose={() => setVisible(null)} onTokens={onTokens} />
|
|
<RecoveryTokensDialog tokens={tokens} open={tokens.length > 0} onClose={() => setTokens([])} />
|
|
<DisableTOTPDialog open={visible === 'disable'} onClose={() => setVisible(null)} />
|
|
<p css={tw`text-sm`}>{isEnabled ? t('two_factor.disable.help') : t('two_factor.enable.help')}</p>
|
|
<div css={tw`mt-6`}>
|
|
{isEnabled ? (
|
|
<Button.Danger onClick={() => setVisible('disable')}>
|
|
{t('two_factor.disable.button')}
|
|
</Button.Danger>
|
|
) : (
|
|
<Button onClick={() => setVisible('enable')}>{t('two_factor.enable.button')}</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|