diff --git a/README.md b/README.md index a6c0ab8ad..c70655905 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ The current project goal is to [release a production ready version](https://g - To contribute please see our [contribution guide](https://github.com/documenso/documenso/blob/main/CONTRIBUTING.md). -## Tools + # Tech @@ -86,7 +86,7 @@ Documenso is built using awesome open source tech including: - [Node SignPDF (Digital Signature)](https://github.com/vbuch/node-signpdf) - [React-PDF for viewing PDFs](https://github.com/wojtekmaj/react-pdf) - [PDF-Lib for PDF manipulation](https://github.com/Hopding/pdf-lib) -- Check out /packages.json and /apps/web/package.json for more +- Check out `/package.json` and `/apps/web/package.json` for more - Support for [opensignpdf (requires Java on server)](https://github.com/open-pdf-sign) is currently planned. # Getting Started @@ -111,7 +111,7 @@ Want to get up and running quickly? Follow these steps: git clone https://github.com/documenso/documenso ``` -- Set up your .env file using the recommendations in the .env.example file. +- Set up your `.env` file using the recommendations in the `.env.example` file. - Run `npm run dx` in the root directory - This will spin up a postgres database and inbucket mail server in docker containers. - Run `npm run dev` in the root directory @@ -124,7 +124,7 @@ That's it! You should now be able to access the app at http://localhost:3000 Incoming mail will be available at http://localhost:9000 -Your database will also be available on port `5432`. You can connect to it using your favorite database client. +Your database will also be available on port `54320`. You can connect to it using your favorite database client. ## Developer Setup @@ -150,24 +150,24 @@ Follow these steps to setup documenso on you local machine: --- - Optional: Seed the database using npm run db-seed to create a test user and document -- Optional: Upload and sign apps\web\ressources\example.pdf manually to test your setup +- Optional: Upload and sign apps/web/ressources/example.pdf manually to test your setup - Optional: Create your own signing certificate - - A demo certificate is provided in /app/web/ressources/certificate.p12 - - To generate your own using these steps and a linux Terminal or Windows Linux Subsystem see **Create your own signing certificate**. + - A demo certificate is provided in `/app/web/ressources/certificate.p12` + - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL) see **[Create your own signing certificate](#creating-your-own-signing-certificate)**. ## Updating - If you pull the newest version from main, using git pull, it may be necessary to regenerate your database client -- You can do this by running the generate command in /packages/prisma: +- You can do this by running the generate command in `/packages/prisma`: ```sh npx prisma generate ``` -- This is not necessary on first clone +- This is not necessary on first clone. # Creating your own signing certificate -For the digital signature of your documents you need a signing certificate in .p12 formate (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one: +For the digital signature of your documents you need a signing certificate in .p12 format (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one: 1. Generate a private key using the OpenSSL command. You can run the following command to generate a 2048-bit RSA key:\ openssl genrsa -out private.key 2048 diff --git a/apps/web/components/login.tsx b/apps/web/components/login.tsx index bd968ddc6..2d9262c2a 100644 --- a/apps/web/components/login.tsx +++ b/apps/web/components/login.tsx @@ -151,7 +151,7 @@ export default function Login(props: any) { - Hosted Documenso will be availible soon™ + Hosted Documenso will be available soon™

)} diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx index 0bc0c9343..0572f2cf5 100644 --- a/apps/web/pages/documents/[id]/recipients.tsx +++ b/apps/web/pages/documents/[id]/recipients.tsx @@ -4,7 +4,7 @@ import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib"; import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api"; import { getDocument } from "@documenso/lib/query"; import { getUserFromToken } from "@documenso/lib/server"; -import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui"; +import { Breadcrumb, Button, Dialog, IconButton, Tooltip } from "@documenso/ui"; import Layout from "../../../components/layout"; import { NextPageWithLayout } from "../../_app"; import { @@ -267,38 +267,46 @@ const RecipientsPage: NextPageWithLayout = (props: any) => { {props.document.status !== DocumentStatus.COMPLETED && (
- { - if (confirm("Resend this signing request?")) { - setLoading(true); - sendSigningRequests(props.document, [item.id]).finally(() => { - setLoading(false); - }); + + - Resend - - { - const removedItem = { ...fields }[index]; - remove(index); - deleteRecipient(item)?.catch((err) => { - append(removedItem); - }); - }} - className="group-hover:text-neon-dark group-hover:disabled:text-gray-400" - /> + onClick={(event: any) => { + event.preventDefault(); + event.stopPropagation(); + if (confirm("Resend this signing request?")) { + setLoading(true); + sendSigningRequests(props.document, [item.id]).finally(() => { + setLoading(false); + }); + } + }} + className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400" + /> + + + { + event.preventDefault(); + event.stopPropagation(); + if (confirm("Delete this signing request?")) { + const removedItem = { ...fields }[index]; + remove(index); + deleteRecipient(item)?.catch((err) => { + append(removedItem); + }); + } + }} + className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400" + /> +
)} diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx new file mode 100644 index 000000000..56bb59095 --- /dev/null +++ b/packages/ui/components/tooltip/Tooltip.tsx @@ -0,0 +1,34 @@ +import React, { useState } from "react"; +import { classNames } from "@documenso/lib"; + +export function Tooltip(props: any) { + let timeout: NodeJS.Timeout; + const [active, setActive] = useState(false); + + const showTip = () => { + timeout = setTimeout(() => { + setActive(true); + }, props.delay || 40); + }; + + const hideTip = () => { + clearInterval(timeout); + setActive(false); + }; + + return ( +
+ {props.children} +
+ + {props.label} + +
+
+ ); +}; diff --git a/packages/ui/components/tooltip/index.ts b/packages/ui/components/tooltip/index.ts new file mode 100644 index 000000000..3d7eea698 --- /dev/null +++ b/packages/ui/components/tooltip/index.ts @@ -0,0 +1 @@ +export { Tooltip } from "./Tooltip"; \ No newline at end of file diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 1cb0c6752..a320043be 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -2,3 +2,4 @@ export { Button, IconButton } from "./components/button/index"; export { SelectBox } from "./components/selectBox/index"; export { Breadcrumb } from "./components/breadcrumb/index"; export { Dialog } from "./components/dialog/index"; +export { Tooltip } from "./components/tooltip/index";