Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 00:32:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: ability to download all the 2FA recovery codes

Browse Source
This commit is contained in:
Anik Dhabal Babu
2024-02-16 20:46:27 +00:00
parent 4f990a7030
commit 5d6cdbef89
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
View File

@ -1,4 +1,4 @@
import { useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
@ -41,6 +41,7 @@ export type ViewRecoveryCodesDialogProps = {
export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
const { toast } = useToast();
const [recoveryCodesUrl, setRecoveryCodesUrl] = useState('');
const { mutateAsync: viewRecoveryCodes, data: viewRecoveryCodesData } =
trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
@ -62,6 +63,16 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
return 'view';
}, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
useEffect(() => {
if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
const textBlob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
type: 'text/plain',
});
if (recoveryCodesUrl) URL.revokeObjectURL(recoveryCodesUrl);
setRecoveryCodesUrl(URL.createObjectURL(textBlob));
}
}, [viewRecoveryCodesData]);
const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
try {
await viewRecoveryCodes({ password });
@ -139,8 +150,11 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
<RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
)}
<div className="mt-4 flex flex-row-reverse items-center justify-between">
<div className="mt-4 flex flex-row-reverse items-center gap-2">
<Button onClick={() => onOpenChange(false)}>Complete</Button>
<a download="documenso-2FA-recovery-codes.txt" href={recoveryCodesUrl}>
<Button>Download</Button>
</a>
</div>
</div>
))