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

fix: tidy code

Browse Source
This commit is contained in:
Mythie
2024-01-17 17:17:08 +11:00
parent 68953d1253
commit a94b829ee0
13 changed files with 161 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
View File

@ -58,6 +58,8 @@ export const EditDocumentForm = ({
const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
const { mutateAsync: setPasswordForDocument } =
trpc.document.setPasswordForDocument.useMutation();
const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
title: {
@ -178,6 +180,13 @@ export const EditDocumentForm = ({
}
};
const onPasswordSubmit = async (password: string) => {
await setPasswordForDocument({
documentId: document.id,
password,
});
};
const currentDocumentFlow = documentFlow[step];
return (
@ -187,7 +196,13 @@ export const EditDocumentForm = ({
gradient
>
<CardContent className="p-2">
<LazyPDFViewer key={documentData.id} documentData={documentData} document={document} documentMeta={documentMeta} />
<LazyPDFViewer
key={documentData.id}
documentData={documentData}
document={document}
password={documentMeta?.password}
onPasswordSubmit={onPasswordSubmit}
/>
</CardContent>
</Card>

11
apps/web/src/app/(dashboard)/documents/[id]/page.tsx
View File

@ -13,7 +13,6 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
import { DocumentStatus } from '~/components/formatter/document-status';
import { getDocumentMetaByDocumentId } from '@documenso/lib/server-only/document/get-document-meta-by-document-id';
export type DocumentPageProps = {
params: {
@ -41,8 +40,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
redirect('/documents');
}
const { documentData } = document;
const documentMeta = await getDocumentMetaByDocumentId({ id: document!.id }).catch(() => null);
const { documentData, documentMeta } = document;
const [recipients, fields] = await Promise.all([
getRecipientsForDocument({
@ -94,7 +92,12 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
{document.status === InternalDocumentStatus.COMPLETED && (
<div className="mx-auto mt-12 max-w-2xl">
<LazyPDFViewer document={document} key={documentData.id} documentMeta={documentMeta} documentData={documentData} />
<LazyPDFViewer
document={document}
key={documentData.id}
documentMeta={documentMeta}
documentData={documentData}
/>
</div>
)}
</div>

7
apps/web/src/app/(signing)/sign/[token]/page.tsx
View File

@ -101,7 +101,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
gradient
>
<CardContent className="p-2">
<LazyPDFViewer key={documentData.id} documentData={documentData} document={document} documentMeta={documentMeta} />
<LazyPDFViewer
key={documentData.id}
documentData={documentData}
document={document}
password={documentMeta?.password}
/>
</CardContent>
</Card>

3
package-lock.json generated
View File

@ -19869,7 +19869,8 @@
"react-rnd": "^10.4.1",
"tailwind-merge": "^1.12.0",
"tailwindcss-animate": "^1.0.5",
"ts-pattern": "^5.0.5"
"ts-pattern": "^5.0.5",
"zod": "^3.22.4"
},
"devDependencies": {
"@documenso/tailwind-config": "*",

8
packages/lib/server-only/document-meta/upsert-document-meta.ts
View File

@ -7,7 +7,7 @@ export type CreateDocumentMetaOptions = {
subject?: string;
message?: string;
timezone?: string;
documentPassword?: string;
password?: string;
dateFormat?: string;
userId: number;
};
@ -19,7 +19,7 @@ export const upsertDocumentMeta = async ({
dateFormat,
documentId,
userId,
documentPassword,
password,
}: CreateDocumentMetaOptions) => {
await prisma.document.findFirstOrThrow({
where: {
@ -37,14 +37,14 @@ export const upsertDocumentMeta = async ({
message,
dateFormat,
timezone,
documentPassword,
password,
documentId,
},
update: {
subject,
message,
dateFormat,
documentPassword,
password,
timezone,
},
});

2
packages/lib/server-only/document/duplicate-document-by-id.ts
View File

@ -26,7 +26,7 @@ export const duplicateDocumentById = async ({ id, userId }: DuplicateDocumentByI
message: true,
subject: true,
dateFormat: true,
documentPassword: true,
password: true,
timezone: true,
},
},

2
packages/prisma/migrations/20240115031508_add_password_to_document_meta/migration.sql Normal file
View File

@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE "DocumentMeta" ADD COLUMN "password" TEXT;

2
packages/prisma/schema.prisma
View File

@ -162,7 +162,7 @@ model DocumentMeta {
subject String?
message String?
timezone String? @db.Text @default("Etc/UTC")
documentPassword String?
password String?
dateFormat String? @db.Text @default("yyyy-MM-dd hh:mm a")
documentId Int @unique
document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)

12
packages/trpc/server/document-router/router.ts
View File

@ -176,29 +176,27 @@ export const documentRouter = router({
}
}),
setDocumentPassword: authenticatedProcedure
setPasswordForDocument: authenticatedProcedure
.input(ZSetPasswordForDocumentMutationSchema)
.mutation(async ({ input, ctx }) => {
try {
const { documentId, documentPassword } = input;
const { documentId, password } = input;
await upsertDocumentMeta({
documentId,
documentPassword,
password,
userId: ctx.user.id,
});
} catch (err) {
console.error(err);
throw new TRPCError({
code: 'BAD_REQUEST',
message: 'We were unable to send this document. Please try again later.',
message: 'We were unable to set the password for this document. Please try again later.',
});
}
}),
sendDocument: authenticatedProcedure
.input(ZSendDocumentMutationSchema)
.mutation(async ({ input, ctx }) => {

6
packages/trpc/server/document-router/schema.ts
View File

@ -75,9 +75,13 @@ export const ZSendDocumentMutationSchema = z.object({
export const ZSetPasswordForDocumentMutationSchema = z.object({
documentId: z.number(),
documentPassword: z.string(),
password: z.string(),
});
export type TSetPasswordForDocumentMutationSchema = z.infer<
typeof ZSetPasswordForDocumentMutationSchema
>;
export const ZResendDocumentMutationSchema = z.object({
documentId: z.number(),
recipients: z.array(z.number()).min(1),

3
packages/ui/package.json
View File

@ -70,6 +70,7 @@
"react-rnd": "^10.4.1",
"tailwind-merge": "^1.12.0",
"tailwindcss-animate": "^1.0.5",
"ts-pattern": "^5.0.5"
"ts-pattern": "^5.0.5",
"zod": "^3.22.4"
}
}

86
packages/ui/primitives/document-password-dialog.tsx
View File

@ -1,55 +1,95 @@
import React from 'react';
import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from './button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from './dialog';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
import { Form, FormControl, FormField, FormItem, FormMessage } from './form/form';
import { Input } from './input';
const ZPasswordDialogFormSchema = z.object({
password: z.string(),
});
type TPasswordDialogFormSchema = z.infer<typeof ZPasswordDialogFormSchema>;
type PasswordDialogProps = {
open: boolean;
onOpenChange: (_open: boolean) => void;
setPassword: (_password: string) => void;
onPasswordSubmit: () => void;
defaultPassword?: string;
onPasswordSubmit?: (password: string) => void;
isError?: boolean;
};
export const PasswordDialog = ({
open,
onOpenChange,
defaultPassword,
onPasswordSubmit,
isError,
setPassword,
}: PasswordDialogProps) => {
const form = useForm<TPasswordDialogFormSchema>({
defaultValues: {
password: defaultPassword ?? '',
},
resolver: zodResolver(ZPasswordDialogFormSchema),
});
const onFormSubmit = ({ password }: TPasswordDialogFormSchema) => {
onPasswordSubmit?.(password);
};
useEffect(() => {
if (isError) {
form.setError('password', {
type: 'manual',
message: 'The password you have entered is incorrect. Please try again.',
});
}
}, [form, isError]);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-md">
<Dialog open={open}>
<DialogContent className="w-full max-w-md">
<DialogHeader>
<DialogTitle>Password Required</DialogTitle>
<DialogDescription className="text-muted-foreground">
This document is password protected. Please enter the password to view the document.
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex w-full items-center justify-center gap-4">
<Form {...form}>
<form onSubmit={form.handleSubmit(onFormSubmit)}>
<fieldset className="flex flex-wrap items-start justify-between gap-4">
<FormField
name="password"
control={form.control}
render={({ field }) => (
<FormItem className="relative flex-1">
<FormControl>
<Input
type="password"
className="bg-background mt-1.5"
className="bg-background"
placeholder="Enter password"
onChange={(e) => setPassword(e.target.value)}
autoComplete="off"
{...field}
/>
<Button onClick={onPasswordSubmit}>Submit</Button>
</DialogFooter>
{isError && (
<span className="text-xs text-red-500">
The password you entered is incorrect. Please try again.
</span>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div>
<Button>Submit</Button>
</div>
</fieldset>
</form>
</Form>
</DialogContent>
</Dialog>
);

68
packages/ui/primitives/pdf-viewer.tsx
View File

@ -7,16 +7,16 @@ 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';
import { match } from 'ts-pattern';
import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
import { getFile } from '@documenso/lib/universal/upload/get-file';
import type { DocumentData, DocumentMeta } from '@documenso/prisma/client';
import type { DocumentData } from '@documenso/prisma/client';
import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
import { cn } from '../lib/utils';
import { PasswordDialog } from './document-password-dialog';
import { useToast } from './use-toast';
import { trpc } from '@documenso/trpc/react';
import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
export type LoadedPDFDocument = PDFDocumentProxy;
@ -47,7 +47,8 @@ export type PDFViewerProps = {
className?: string;
documentData: DocumentData;
document?: DocumentWithData;
documentMeta?: DocumentMeta | null;
password?: string | null;
onPasswordSubmit?: (password: string) => void | Promise<void>;
onDocumentLoad?: (_doc: LoadedPDFDocument) => void;
onPageClick?: OnPDFViewerPageClick;
[key: string]: unknown;
@ -56,8 +57,8 @@ export type PDFViewerProps = {
export const PDFViewer = ({
className,
documentData,
document,
documentMeta,
password: defaultPassword,
onPasswordSubmit,
onDocumentLoad,
onPageClick,
...props
@ -66,10 +67,10 @@ export const PDFViewer = ({
const $el = useRef<HTMLDivElement>(null);
const passwordCallbackRef = useRef<((password: string | null) => void) | null>(null);
const [isDocumentBytesLoading, setIsDocumentBytesLoading] = useState(false);
const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
const [password, setPassword] = useState<string | null>(documentMeta?.documentPassword || null);
const passwordCallbackRef = useRef<((password: string | null) => void) | null>(null);
const [isPasswordError, setIsPasswordError] = useState(false);
const [documentBytes, setDocumentBytes] = useState<Uint8Array | null>(null);
@ -82,9 +83,6 @@ export const PDFViewer = ({
[documentData.data, documentData.type],
);
const {mutateAsync: addDocumentPassword } = trpc.document.setDocumentPassword.useMutation();
const isLoading = isDocumentBytesLoading || !documentBytes;
const onDocumentLoaded = (doc: LoadedPDFDocument) => {
@ -92,22 +90,6 @@ export const PDFViewer = ({
onDocumentLoad?.(doc);
};
const onPasswordSubmit = async() => {
setIsPasswordModalOpen(false);
try{
await addDocumentPassword({
documentId: document?.id ?? 0,
documentPassword: password!,
});
passwordCallbackRef.current?.(password);
} catch (error) {
console.error('Error adding document password:', error);
} finally {
passwordCallbackRef.current = null;
}
};
const onDocumentPageClick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
pageNumber: number,
@ -206,23 +188,19 @@ export const PDFViewer = ({
'h-[80vh] max-h-[60rem]': numPages === 0,
})}
onPassword={(callback, reason) => {
// If the documentMeta already has a password, we don't need to ask for it again.
if(password && reason !== PasswordResponses.INCORRECT_PASSWORD){
callback(password);
// If the document already has a password, we don't need to ask for it again.
if (defaultPassword && reason !== PasswordResponses.INCORRECT_PASSWORD) {
callback(defaultPassword);
return;
}
setIsPasswordModalOpen(true);
passwordCallbackRef.current = callback;
switch (reason) {
case PasswordResponses.NEED_PASSWORD:
setIsPasswordError(false);
break;
case PasswordResponses.INCORRECT_PASSWORD:
setIsPasswordError(true);
break;
default:
break;
}
match(reason)
.with(PasswordResponses.NEED_PASSWORD, () => setIsPasswordError(false))
.with(PasswordResponses.INCORRECT_PASSWORD, () => setIsPasswordError(true));
}}
onLoadSuccess={(d) => onDocumentLoaded(d)}
// Uploading a invalid document causes an error which doesn't appear to be handled by the `error` prop.
@ -270,12 +248,18 @@ export const PDFViewer = ({
</div>
))}
</PDFDocument>
<PasswordDialog
open={isPasswordModalOpen}
onOpenChange={setIsPasswordModalOpen}
onPasswordSubmit={onPasswordSubmit}
onPasswordSubmit={(password) => {
passwordCallbackRef.current?.(password);
setIsPasswordModalOpen(false);
void onPasswordSubmit?.(password);
}}
isError={isPasswordError}
setPassword={setPassword}
/>
</>
)}