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'; import { useRouter } from 'next/navigation';
@ -56,6 +56,7 @@ export const EnableAuthenticatorAppDialog = ({
}: EnableAuthenticatorAppDialogProps) => { }: EnableAuthenticatorAppDialogProps) => {
const router = useRouter(); const router = useRouter();
const { toast } = useToast(); const { toast } = useToast();
const [recoveryCodesUrl, setRecoveryCodesUrl] = useState('');
const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } = const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
trpc.twoFactorAuthentication.setup.useMutation(); 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 ({ const onEnableTwoFactorAuthenticationFormSubmit = async ({
token, token,
}: TEnableTwoFactorAuthenticationForm) => { }: TEnableTwoFactorAuthenticationForm) => {
@ -270,10 +281,13 @@ export const EnableAuthenticatorAppDialog = ({
<RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} /> <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
)} )}
<div className="mt-4 flex w-full flex-row-reverse items-center justify-between"> <div className="mt-4 flex flex-row-reverse items-center gap-2">
<Button type="button" onClick={() => onCompleteClick()}> <Button onClick={() => onOpenChange(false)}>Complete</Button>
Complete <a download="documenso-2FA-recovery-codes.txt" href={recoveryCodesUrl}>
</Button> <Button variant="secondary" onClick={downloadRecoveryCodes}>
Download
</Button>
</a>
</div> </div>
</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 { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
@ -63,7 +63,7 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
return 'view'; return 'view';
}, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]); }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
useEffect(() => { const downloadRecoveryCodes = () => {
if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) { if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
const textBlob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], { const textBlob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
type: 'text/plain', type: 'text/plain',
@ -71,7 +71,7 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
if (recoveryCodesUrl) URL.revokeObjectURL(recoveryCodesUrl); if (recoveryCodesUrl) URL.revokeObjectURL(recoveryCodesUrl);
setRecoveryCodesUrl(URL.createObjectURL(textBlob)); setRecoveryCodesUrl(URL.createObjectURL(textBlob));
} }
}, [viewRecoveryCodesData]); };
const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => { const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
try { try {
@ -153,7 +153,9 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
<div className="mt-4 flex flex-row-reverse items-center gap-2"> <div className="mt-4 flex flex-row-reverse items-center gap-2">
<Button onClick={() => onOpenChange(false)}>Complete</Button> <Button onClick={() => onOpenChange(false)}>Complete</Button>
<a download="documenso-2FA-recovery-codes.txt" href={recoveryCodesUrl}> <a download="documenso-2FA-recovery-codes.txt" href={recoveryCodesUrl}>
<Button variant="secondary">Download</Button> <Button variant="secondary" onClick={downloadRecoveryCodes}>
Download
</Button>
</a> </a>
</div> </div>
</div> </div>