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

feat: ability to download 2FA recovery codes

Browse Source
This commit is contained in:
Anik Dhabal Babu
2024-02-19 11:25:15 +00:00
parent 0186f2dfed
commit 39c6cbf66a
2 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
View File

@ -1,4 +1,4 @@
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
@ -56,6 +56,7 @@ export const EnableAuthenticatorAppDialog = ({
}: EnableAuthenticatorAppDialogProps) => {
const router = useRouter();
const { toast } = useToast();
const [recoveryCodesUrl, setRecoveryCodesUrl] = useState('');
const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
trpc.twoFactorAuthentication.setup.useMutation();
@ -115,6 +116,16 @@ export const EnableAuthenticatorAppDialog = ({
}
};
const downloadRecoveryCodes = () => {
if (enableTwoFactorAuthenticationData && enableTwoFactorAuthenticationData.recoveryCodes) {
const textBlob = new Blob([enableTwoFactorAuthenticationData.recoveryCodes.join('\n')], {
type: 'text/plain',
});
if (recoveryCodesUrl) URL.revokeObjectURL(recoveryCodesUrl);
setRecoveryCodesUrl(URL.createObjectURL(textBlob));
}
};
const onEnableTwoFactorAuthenticationFormSubmit = async ({
token,
}: TEnableTwoFactorAuthenticationForm) => {
@ -270,10 +281,13 @@ export const EnableAuthenticatorAppDialog = ({
<RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
)}
<div className="mt-4 flex w-full flex-row-reverse items-center justify-between">
<Button type="button" onClick={() => onCompleteClick()}>
Complete
</Button>
<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 variant="secondary" onClick={downloadRecoveryCodes}>
Download
</Button>
</a>
</div>
</div>
))

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

@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react';
import { useMemo, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
@ -63,7 +63,7 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
return 'view';
}, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
useEffect(() => {
const downloadRecoveryCodes = () => {
if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
const textBlob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
type: 'text/plain',
@ -71,7 +71,7 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
if (recoveryCodesUrl) URL.revokeObjectURL(recoveryCodesUrl);
setRecoveryCodesUrl(URL.createObjectURL(textBlob));
}
}, [viewRecoveryCodesData]);
};
const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
try {
@ -153,7 +153,9 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
<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 variant="secondary">Download</Button>
<Button variant="secondary" onClick={downloadRecoveryCodes}>
Download
</Button>
</a>
</div>
</div>