diff --git a/packages/ui/primitives/document-password-dialog.tsx b/packages/ui/primitives/document-password-dialog.tsx index 61436aa71..08a5de8f3 100644 --- a/packages/ui/primitives/document-password-dialog.tsx +++ b/packages/ui/primitives/document-password-dialog.tsx @@ -1,50 +1,55 @@ import React from 'react'; +import { Button } from './button'; import { Dialog, DialogContent, - DialogHeader, - DialogTitle, DialogDescription, DialogFooter, -} from './dialog'; - -import { Input } from './input'; -import { Button } from './button'; + DialogHeader, + DialogTitle, +} from './dialog'; +import { Input } from './input'; type PasswordDialogProps = { open: boolean; onOpenChange: (_open: boolean) => void; setPassword: (_password: string) => void; - handleSubmit: () => void; + onPasswordSubmit: () => void; isError?: boolean; -} +}; -export const PasswordDialog = ({ open, onOpenChange, handleSubmit, isError, setPassword }: PasswordDialogProps) => { +export const PasswordDialog = ({ + open, + onOpenChange, + onPasswordSubmit, + isError, + setPassword, +}: PasswordDialogProps) => { return ( Password Required - - {isError ? ( - Incorrect password. Please try again. - ) : ( - - This document is password protected. Please enter the password to view the document. - - )} + + This document is password protected. Please enter the password to view the document. setPassword(e.target.value)} + autoComplete="off" /> - + + {isError && ( + + The password you entered is incorrect. Please try again. + + )} ); diff --git a/packages/ui/primitives/pdf-viewer.tsx b/packages/ui/primitives/pdf-viewer.tsx index c4184b17f..be2d0cc4a 100644 --- a/packages/ui/primitives/pdf-viewer.tsx +++ b/packages/ui/primitives/pdf-viewer.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import { Loader } from 'lucide-react'; -import { PasswordResponses, type PDFDocumentProxy } from 'pdfjs-dist'; +import { type PDFDocumentProxy, PasswordResponses } from 'pdfjs-dist'; import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/TextLayer.css'; @@ -13,8 +13,8 @@ import { getFile } from '@documenso/lib/universal/upload/get-file'; import type { DocumentData } from '@documenso/prisma/client'; import { cn } from '../lib/utils'; -import { useToast } from './use-toast'; import { PasswordDialog } from './document-password-dialog'; +import { useToast } from './use-toast'; export type LoadedPDFDocument = PDFDocumentProxy; @@ -82,14 +82,14 @@ export const PDFViewer = ({ setNumPages(doc.numPages); onDocumentLoad?.(doc); }; - - const handlePasswordSubmit = () => { + + const onPasswordSubmit = () => { setIsPasswordModalOpen(false); if (passwordCallbackRef.current) { passwordCallbackRef.current(password); passwordCallbackRef.current = null; } - } + }; const onDocumentPageClick = ( event: React.MouseEvent, @@ -183,80 +183,80 @@ export const PDFViewer = ({ ) : ( <> - { - setIsPasswordModalOpen(true); - passwordCallbackRef.current = callback; - switch (reason) { - case PasswordResponses.NEED_PASSWORD: - setIsPasswordError(false); - break; - case PasswordResponses.INCORRECT_PASSWORD: - setIsPasswordError(true); - break; - default: - break; + { + setIsPasswordModalOpen(true); + passwordCallbackRef.current = callback; + switch (reason) { + case PasswordResponses.NEED_PASSWORD: + setIsPasswordError(false); + break; + case PasswordResponses.INCORRECT_PASSWORD: + setIsPasswordError(true); + break; + default: + break; + } + }} + onLoadSuccess={(d) => onDocumentLoaded(d)} + // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop. + // Therefore we add some additional custom error handling. + onSourceError={() => { + setPdfError(true); + }} + externalLinkTarget="_blank" + loading={ +
+ {pdfError ? ( +
+

Something went wrong while loading the document.

+

Please try again or contact our support.

+
+ ) : ( + + )} +
} - }} - onLoadSuccess={(d) => onDocumentLoaded(d)} - // Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop. - // Therefore we add some additional custom error handling. - onSourceError={() => { - setPdfError(true); - }} - externalLinkTarget="_blank" - loading={ -
- {pdfError ? ( + error={ +

Something went wrong while loading the document.

Please try again or contact our support.

- ) : ( - - )} -
- } - error={ -
-
-

Something went wrong while loading the document.

-

Please try again or contact our support.

-
- } - > - {Array(numPages) - .fill(null) - .map((_, i) => ( -
- ''} - onClick={(e) => onDocumentPageClick(e, i + 1)} - /> -
- ))} - - + } + > + {Array(numPages) + .fill(null) + .map((_, i) => ( +
+ ''} + onClick={(e) => onDocumentPageClick(e, i + 1)} + /> +
+ ))} + + - )} + )}
); };