blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

fix: update view dialog to use new download api

Browse Source
This commit is contained in:
Lucas Smith
2024-02-21 02:29:19 +00:00
parent aba6b58c14
commit 8287722f59
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,11 @@
import { useMemo, useState } from 'react'; import { useMemo } 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';
import { match } from 'ts-pattern'; import { match } from 'ts-pattern';
import { z } from 'zod'; import { z } from 'zod';
import { downloadFile } from '@documenso/lib/client-only/download-file';
import { trpc } from '@documenso/trpc/react'; import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button'; import { Button } from '@documenso/ui/primitives/button';
import { import {
@@ -41,10 +42,12 @@ export type ViewRecoveryCodesDialogProps = {
export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => { export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
const { toast } = useToast(); const { toast } = useToast();
const [recoveryCodesUrl, setRecoveryCodesUrl] = useState('');
const { mutateAsync: viewRecoveryCodes, data: viewRecoveryCodesData } = const {
trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation(); mutateAsync: viewRecoveryCodes,
data: viewRecoveryCodesData,
isLoading: isViewRecoveryCodesDataLoading,
} = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({ const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
defaultValues: { defaultValues: {
@@ -65,11 +68,14 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
const downloadRecoveryCodes = () => { const downloadRecoveryCodes = () => {
if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) { if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
const textBlob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], { const blob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
type: 'text/plain', type: 'text/plain',
}); });
if (recoveryCodesUrl) URL.revokeObjectURL(recoveryCodesUrl);
setRecoveryCodesUrl(URL.createObjectURL(textBlob)); downloadFile({
filename: 'documenso-2FA-recovery-codes.txt',
data: blob,
});
} }
}; };
@@ -152,11 +158,15 @@ 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}>
<Button variant="secondary" onClick={downloadRecoveryCodes}> <Button
Download variant="secondary"
</Button> disabled={!viewRecoveryCodesData?.recoveryCodes}
</a> loading={isViewRecoveryCodesDataLoading}
onClick={downloadRecoveryCodes}
>
Download
</Button>
</div> </div>
</div> </div>
)) ))