WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: change default theme and ui changes in components

Browse Source
This commit is contained in:
prafull-opensignlabs
2024-06-12 17:28:03 +05:30
parent fcdd7e2758
commit fe34001e42
33 changed files with 515 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/public/index.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-theme="cupcake">
<html lang="en" data-theme="opensigncss">
<head>
<meta charset="utf-8" />
apps/OpenSign/src/App.js
+2 -15
View File
@@ -32,21 +32,8 @@ const Webhook = lazy(() => import("./pages/Webhook"));
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;
const Loader = () => {
return (
<div
style={{
height: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<div
style={{
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
<div className="flex justify-center items-center h-[100vh] text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
</div>
);
};
apps/OpenSign/src/components/AddSigner.js
+4 -10
View File
@@ -225,14 +225,8 @@ const AddSigner = (props) => {
return (
<div className="h-full p-[20px]">
{isLoader && (
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
<div
style={{
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
</div>
)}
<div className="w-full mx-auto p-2">
@@ -257,7 +251,7 @@ const AddSigner = (props) => {
className="block text-xs text-gray-700 font-semibold"
>
Name
<span style={{ color: "red", fontSize: 13 }}> *</span>
<span className="text-[red] text-[13px]"> *</span>
</label>
<input
type="text"
@@ -275,7 +269,7 @@ const AddSigner = (props) => {
className="block text-xs text-gray-700 font-semibold"
>
Email
<span style={{ color: "red", fontSize: 13 }}> *</span>
<span className="text-[red] text-[13px]"> *</span>
</label>
<input
type="email"
apps/OpenSign/src/components/AddUser.js
+5 -11
View File
@@ -194,14 +194,8 @@ const AddUser = (props) => {
<Title title={"Add User"} />
{isUserExist && <Alert type="danger">User already exists!</Alert>}
{isLoader && (
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50">
<div
style={{
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
<div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
</div>
)}
<div className="w-full mx-auto">
@@ -213,7 +207,7 @@ const AddUser = (props) => {
className="block text-xs text-gray-700 font-semibold"
>
Name
<span style={{ color: "red", fontSize: 13 }}> *</span>
<span className="text-[red] text-[13px]"> *</span>
</label>
<input
type="text"
@@ -230,7 +224,7 @@ const AddUser = (props) => {
className="block text-xs text-gray-700 font-semibold"
>
Email
<span style={{ color: "red", fontSize: 13 }}> *</span>
<span className="text-[red] text-[13px]"> *</span>
</label>
<input
type="email"
@@ -247,7 +241,7 @@ const AddUser = (props) => {
className="block text-xs text-gray-700 font-semibold"
>
Phone
<span style={{ color: "red", fontSize: 13 }}> *</span>
<span className="text-[red] text-[13px]"> *</span>
</label>
<input
type="text"
apps/OpenSign/src/components/Header.js
+5 -1
View File
@@ -45,7 +45,11 @@ const Header = ({ showSidebar }) => {
const closeDropdown = () => {
setIsOpen(false);
if (Parse?.User?.current()) {
Parse.User.logOut();
try {
Parse.User.logOut();
} catch (err) {
console.log("Err", err);
}
}
let appdata = localStorage.getItem("userSettings");
let applogo = localStorage.getItem("appLogo");
apps/OpenSign/src/components/LoginFacebook.js
+5 -26
View File
@@ -112,29 +112,10 @@ const LoginFacebook = ({
}
};
return (
<div style={{ position: "relative" }}>
<div className="relative">
{thirdpartyLoader && (
<div
style={{
position: "fixed",
width: "100vw",
height: "100vh",
backgroundColor: "rgba(0,0,0,0.2)",
top: 0,
left: 0,
zIndex: 2
}}
>
<div
style={{
position: "fixed",
fontSize: "50px",
color: "#3ac9d6",
top: "50%",
left: "45%"
}}
className="loader-37"
></div>
<div className="fixed w-[100vw] h-[100vh] bg-black bg-opacity-30 left-0 top-0 z-[20] text-[50px] text-[#3ac9d6]">
<div className="loader-37 fixed top-[45%] left-[45%]"></div>
</div>
)}
{/* <FacebookLogin
@@ -168,8 +149,7 @@ const LoginFacebook = ({
style={{ display: "flex" }}
className="col-form-label"
>
Phone{" "}
<span style={{ fontSize: 13, color: "red" }}>*</span>
Phone <span className="text-[red] text-[13px]">*</span>
</label>
<input
type="tel"
@@ -191,8 +171,7 @@ const LoginFacebook = ({
style={{ display: "flex" }}
className="col-form-label"
>
Company{" "}
<span style={{ fontSize: 13, color: "red" }}>*</span>
Company <span className="text-[red] text-[13px]">*</span>
</label>
<input
type="text"
apps/OpenSign/src/components/RenderDebugPdf.js
+3 -19
View File
@@ -4,27 +4,11 @@ import { Stage, Layer, Rect } from "react-konva";
const RenderDebugPdf = (props) => {
return (
<div>
<div
style={{
position: "sticky",
top: 0,
padding: 10,
zIndex: 1,
backgroundColor: "white",
border: "1px solid grey",
margin: "5px 0"
}}
>
<div className="sticky top-0 p-[10px] z-10 bg-white border-[1px] border-[gray] my-[5px]">
{`Co-ordinates: X - ${props.hoverCoordinates.x}, Y - ${props.hoverCoordinates.y}`}
</div>
<div
style={{
flex: 1,
position: "relative",
border: "1px solid grey",
overflow: "auto",
cursor: "crosshair"
}}
className="relative flex-1 cursor-crosshair border-[1px] border-[gray] overflow-auto"
onMouseMove={props.handleMouseMoveDiv}
>
<Document
@@ -57,7 +41,7 @@ const RenderDebugPdf = (props) => {
onMouseUp={props.handleMouseUp}
width={props.pdfDimension.width}
height={props.pdfDimension.height}
style={{ position: "absolute", top: 0, left: 0 }}
className="absolute top-0 right-0"
>
<Layer>
{props.annotations
apps/OpenSign/src/components/dashboard/GetDashboard.js
+6 -4
View File
@@ -37,9 +37,10 @@ const GetDashboard = (props) => {
case "Card":
return (
<div
className="op-card bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md"
className={`${
col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
} op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
data-tut={col.widget.data.tourSection}
style={{ background: col.widget.bgColor }}
>
<Suspense
fallback={
@@ -78,8 +79,9 @@ const GetDashboard = (props) => {
case "Card":
return (
<div
className="op-card bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md"
style={{ background: col.widget.bgColor }}
className={`${
col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
} op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
>
<Suspense fallback={<div>please wait</div>}>
<DashboardCard
apps/OpenSign/src/components/pdf/AddRoleModal.js
+5 -27
View File
@@ -9,10 +9,7 @@ const AddRoleModal = (props) => {
handleClose={props.handleCloseRoleModal}
>
<div className="addusercontainer">
<form
style={{ display: "flex", flexDirection: "column" }}
onSubmit={props.handleAddRole}
>
<form className="flex flex-col" onSubmit={props.handleAddRole}>
<input
value={props.roleName}
onChange={(e) => props.setRoleName(e.target.value)}
@@ -23,37 +20,18 @@ const AddRoleModal = (props) => {
}
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs mt-1"
/>
<p
style={{
color: "grey",
fontSize: 11,
margin: "10px 0 10px 5px"
}}
>
<p className="text-[gray] text-[11px] mt-[5px] mb-[10px] ml-[10px]">
e.g: Customer, Hr, Director, Manager, Student, etc...
</p>
<div>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginBottom: "15px"
}}
></div>
<button
type="submit"
style={{
background: "#00a2b7"
}}
className="finishBtn"
>
<div className="h-[1px] w-full bg-[#9f9f9f] mb-[10px]"></div>
<button type="submit" className="op-btn op-btn-primary">
Add
</button>
<button
onClick={props.handleCloseRoleModal}
type="button"
className="finishBtn cancelBtn"
className="op-btn op-btn-secondary ml-2"
>
Close
</button>
apps/OpenSign/src/components/pdf/DefaultSignature.js
+18 -42
View File
@@ -19,53 +19,29 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
return (
<div data-tut="reactourThird">
<div
className="text-white p-[5px] mt-[5px]"
style={{
background: themeColor,
color: "white",
padding: "5px",
fontFamily: "sans-serif",
marginTop: "5px"
background: themeColor
}}
>
Signature
</div>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: "10px",
fontWeight: "600"
}}
>
<>
<p>Your Signature</p>
<div className="defaultSignBox">
<img
alt="default img"
style={{
width: "100%",
height: "100%",
objectFit: "contain"
}}
src={defaultSignImg}
/>
</div>
<button
style={{
background: themeColor,
color: "white",
marginTop: "20px",
cursor: "pointer",
marginBottom: "10px"
}}
type="button"
className="finishBtn finishnHover"
onClick={() => confirmToaddDefaultSign()}
>
Auto Sign All
</button>
</>
<div className="flex flex-col items-center mt-[10px] font-semibold">
<p className="text-base-content">Your Signature</p>
<div className="op-card shadow-md h-[111px] w-[90%] p-2">
<img
alt="signature"
className="w-full h-full object-contain"
src={defaultSignImg}
/>
</div>
<button
type="button"
className="op-btn op-btn-primary op-btn-sm mt-[10px]"
onClick={() => confirmToaddDefaultSign()}
>
Auto Sign All
</button>
</div>
</div>
);
apps/OpenSign/src/components/pdf/PdfHeader.js
+218 -198
View File
@@ -42,14 +42,7 @@ function Header({
const navigate = useNavigate();
const [isDownloading, setIsDownloading] = useState("");
const isGuestSigner = localStorage.getItem("isGuestSigner");
//for go to previous page
function previousPage() {
changePage(-1);
}
//for go to next page
function nextPage() {
changePage(1);
}
//function for show decline alert
const handleDeclinePdfAlert = async () => {
const currentDecline = {
@@ -64,160 +57,165 @@ function Header({
{isMobile && isShowHeader ? (
<div
id="navbar"
className={isGuestSigner ? "stickySignerHead" : "stickyHead"}
className={isGuestSigner ? "stickySignerHead" : "stickyHead z-[1000]"}
style={{
width: isGuestSigner
? window.innerWidth
: window.innerWidth - 30 + "px"
}}
>
<div className="preBtn2">
<div onClick={() => navigate(-1)}>
<i
className="fa fa-arrow-left"
aria-hidden="true"
style={{ color: themeColor, cursor: "pointer" }}
></i>
</div>
<div>
<i
onClick={() => {
if (pageNumber > 1) {
previousPage();
}
}}
className="fa fa-backward"
style={{ color: "gray", cursor: "pointer" }}
></i>
<span
style={{
fontSize: "13px",
fontWeight: "600",
marginLeft: "10px",
marginRight: "10px"
}}
>
{pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
</span>
<i
onClick={() => {
if (pageNumber < allPages) {
nextPage();
}
}}
className="fa fa-forward"
style={{ color: "gray", cursor: "pointer" }}
></i>
</div>
<div className="flex justify-between items-center py-[5px] px-[10px] ">
<PrevNext
pageNumber={pageNumber}
allPages={allPages}
changePage={changePage}
/>
{pdfUrl && alreadySign ? (
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<div
style={{
color: themeColor,
border: "none",
fontWeight: "650",
fontSize: "16px",
padding: "0px 3px 0px 5px"
}}
<div className="op-dropdown op-dropdown-end">
<div tabIndex={0} role="button" className="op-btn op-btn-sm">
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
<ul
tabIndex={0}
className="op-dropdown-content z-[1] op-menu op-menu-sm p-1 shadow bg-base-100 rounded-box mt-1"
>
<li
onClick={() =>
handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
}
>
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
className="DropdownMenuContent"
sideOffset={5}
>
<DropdownMenu.Item
className="DropdownMenuItem"
<span className="font-semibold text-[12px]">
<i className="fa fa-arrow-down" aria-hidden="true"></i>{" "}
Download
</span>
</li>
{isCompleted && (
<li
onClick={() =>
handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
handleDownloadCertificate(pdfDetails, setIsDownloading)
}
>
<div
style={{
display: "flex",
flexDirection: "row"
}}
>
<i
className="fa fa-arrow-down"
aria-hidden="true"
style={{ marginRight: "2px" }}
></i>
Download
</div>
</DropdownMenu.Item>
{isCompleted && (
<DropdownMenu.Item
className="DropdownMenuItem"
onClick={() =>
handleDownloadCertificate(
pdfDetails,
setIsDownloading
)
}
>
<div
style={{
border: "none",
backgroundColor: "#fff"
}}
>
<i
className="fa-solid fa-award"
style={{ marginRight: "2px" }}
aria-hidden="true"
></i>
Certificate
</div>
</DropdownMenu.Item>
)}
{isSignYourself && (
<DropdownMenu.Item
className="DropdownMenuItem"
onClick={() => setIsEmail(true)}
>
<div
style={{
display: "flex",
flexDirection: "row"
}}
>
<i
className="fa fa-envelope"
style={{ marginRight: "2px" }}
aria-hidden="true"
></i>
Mail
</div>
</DropdownMenu.Item>
)}
<DropdownMenu.Item
className="DropdownMenuItem"
onClick={(e) =>
handleToPrint(e, pdfUrl, setIsDownloading)
}
>
<div
style={{
display: "flex",
flexDirection: "row"
}}
>
<i
className="fa fa-print"
aria-hidden="true"
style={{ marginRight: "2px" }}
></i>
Print
</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
<span className="font-semibold text-[12px]">
<i className="fa-solid fa-award" aria-hidden="true"></i>{" "}
Certificate
</span>
</li>
)}
{isSignYourself && (
<li onClick={() => setIsEmail(true)}>
<span className="font-semibold text-[12px]">
<i className="fa fa-envelope" aria-hidden="true"></i>{" "}
Mail
</span>
</li>
)}
<li
onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
>
<span className="font-semibold text-[12px]">
<i className="fa fa-print" aria-hidden="true"></i> Print
</span>
</li>
</ul>
</div>
) : (
// <DropdownMenu.Root>
// <DropdownMenu.Trigger asChild>
// <div
// style={{
// color: themeColor,
// border: "none",
// fontWeight: "650",
// fontSize: "16px",
// padding: "0px 3px 0px 5px"
// }}
// >
// <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
// </div>
// </DropdownMenu.Trigger>
// <DropdownMenu.Portal>
// <DropdownMenu.Content
// className="DropdownMenuContent"
// sideOffset={5}
// >
// <DropdownMenu.Item
// className="DropdownMenuItem"
// onClick={() =>
// handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
// }
// >
// <div className="flex flex-row">
// <i
// className="fa fa-arrow-down"
// aria-hidden="true"
// style={{ marginRight: "2px" }}
// ></i>
// Download
// </div>
// </DropdownMenu.Item>
// {isCompleted && (
// <DropdownMenu.Item
// className="DropdownMenuItem"
// onClick={() =>
// handleDownloadCertificate(
// pdfDetails,
// setIsDownloading
// )
// }
// >
// <div className="border-none bg-white">
// <i
// className="fa-solid fa-award"
// style={{ marginRight: "2px" }}
// aria-hidden="true"
// ></i>
// Certificate
// </div>
// </DropdownMenu.Item>
// )}
// {isSignYourself && (
// <DropdownMenu.Item
// className="DropdownMenuItem"
// onClick={() => setIsEmail(true)}
// >
// <div
// style={{
// display: "flex",
// flexDirection: "row"
// }}
// >
// <i
// className="fa fa-envelope"
// style={{ marginRight: "2px" }}
// aria-hidden="true"
// ></i>
// Mail
// </div>
// </DropdownMenu.Item>
// )}
// <DropdownMenu.Item
// className="DropdownMenuItem"
// onClick={(e) =>
// handleToPrint(e, pdfUrl, setIsDownloading)
// }
// >
// <div
// style={{
// display: "flex",
// flexDirection: "row"
// }}
// >
// <i
// className="fa fa-print"
// aria-hidden="true"
// style={{ marginRight: "2px" }}
// ></i>
// Print
// </div>
// </DropdownMenu.Item>
// </DropdownMenu.Content>
// </DropdownMenu.Portal>
// </DropdownMenu.Root>
<div className="flex justify-around items-center">
{/* current signer is checking user send request and check status of pdf sign than if current
user exist than show finish button else no
@@ -261,6 +259,37 @@ function Header({
Finish
</div>
)}
<div className="op-dropdown op-dropdown-end">
<div
tabIndex={0}
role="button"
className="op-btn op-btn-sm"
>
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
<ul
tabIndex={0}
className="op-dropdown-content z-[1] op-menu op-menu-sm p-1 shadow bg-base-100 rounded-box mt-1"
>
<li
onClick={() =>
handleDownloadPdf(
pdfDetails,
pdfUrl,
setIsDownloading
)
}
>
<span className="font-semibold text-[12px]">
<i
className="fa fa-arrow-down"
aria-hidden="true"
></i>{" "}
Download
</span>
</li>
</ul>
</div>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<div
@@ -355,9 +384,7 @@ function Header({
background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
color: isMailSend ? "rgb(77, 75, 75)" : "white"
}}
onClick={() => {
alertSendEmail();
}}
onClick={() => alertSendEmail()}
>
{completeBtnTitle
? completeBtnTitle
@@ -376,34 +403,34 @@ function Header({
onClick={() =>
handleDownloadCertificate(pdfDetails, setIsDownloading)
}
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
>
<i
className="fa-solid fa-award py-[3px]"
aria-hidden="true"
></i>
<span className="hidden lg:block ml-1">Certificate</span>
<span className="hidden lg:block">Certificate</span>
</button>
)}
<button
onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
type="button"
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
className="op-btn op-btn-neutral op-btn-sm mr-[5px] shadow"
>
<i className="fa fa-print py-[3px]" aria-hidden="true"></i>
<span className="hidden lg:block ml-1">Print</span>
<span className="hidden lg:block">Print</span>
</button>
<button
type="button"
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
onClick={() =>
handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
}
>
<i className="fa fa-download py-[3px]" aria-hidden="true"></i>
<span className="hidden lg:block ml-1">Download</span>
<span className="hidden lg:block">Download</span>
</button>
</div>
) : (
@@ -411,61 +438,56 @@ function Header({
<button
onClick={() => navigate(-1)}
type="button"
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
>
Back
</button>
{currentSigner && (
<>
<button
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#de4337]"
className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
onClick={() => handleDeclinePdfAlert()}
>
Decline
</button>
<button
type="button"
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
onClick={() => embedWidgetsData()}
>
Finish
</button>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<div
className="border-none font-[650] text-[16px] py-[3px] px-[11px] shadow rounded bg-white"
style={{ color: themeColor }}
<div className="op-dropdown op-dropdown-end">
<div
tabIndex={0}
role="button"
className="op-btn op-btn-info op-btn-sm shadow"
>
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
<ul
tabIndex={0}
className="op-dropdown-content z-[1] op-menu op-menu-sm p-1 shadow bg-base-100 rounded-box mt-1"
>
<li
onClick={() =>
handleDownloadPdf(
pdfDetails,
pdfUrl,
setIsDownloading
)
}
>
<i
className="fa fa-ellipsis-v"
aria-hidden="true"
></i>
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
className="bg-white shadow-md rounded px-2 py-1"
sideOffset={5}
>
<DropdownMenu.Item
className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
onClick={() =>
handleDownloadPdf(
pdfDetails,
pdfUrl,
setIsDownloading
)
}
>
<span className="font-semibold text-[12px]">
<i
className="fa fa-arrow-down mr-[5px]"
className="fa fa-arrow-down"
aria-hidden="true"
></i>
<span className="font-[500]">Download</span>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
></i>{" "}
Download
</span>
</li>
</ul>
</div>
</>
)}
</div>
@@ -517,9 +539,7 @@ function Header({
) : (
<div className="flex">
<button
onClick={() => {
navigate(-1);
}}
onClick={() => navigate(-1)}
type="button"
className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
>
apps/OpenSign/src/components/pdf/PrevNext.js
+23 -34
View File
@@ -1,5 +1,4 @@
import React from "react";
import { themeColor } from "../../constant/const";
function PrevNext({ pageNumber, allPages, changePage }) {
//for go to previous page
@@ -12,40 +11,30 @@ function PrevNext({ pageNumber, allPages, changePage }) {
}
return (
<div>
<div className="preBtn1">
<button
className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] mr-[5px]"
disabled={pageNumber <= 1}
onClick={previousPage}
>
<span className="block lg:hidden">
<i
className="fa fa-backward"
aria-hidden="true"
style={{ color: themeColor, cursor: "pointer" }}
></i>
</span>
<span className="lg:block hidden">Prev</span>
</button>
<span className="text-xs font-[500]">
{pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
<div className="flex items-center">
<button
className="op-btn op-btn-primary op-btn-xs md:op-btn-sm font-semibold text-xs"
disabled={pageNumber <= 1}
onClick={previousPage}
>
<span className="block lg:hidden">
<i className="fa fa-backward cursor-pointer" aria-hidden="true"></i>
</span>
<button
className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] ml-[5px]"
disabled={pageNumber >= allPages}
onClick={nextPage}
>
<span className="block lg:hidden">
<i
className="fa fa-forward"
aria-hidden="true"
style={{ color: themeColor, cursor: "pointer" }}
></i>
</span>
<span className="lg:block hidden">Next</span>
</button>
</div>
<span className="lg:block hidden">Prev</span>
</button>
<span className="text-xs text-base-content font-medium mx-2">
{pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
</span>
<button
className="op-btn op-btn-primary op-btn-xs md:op-btn-sm font-semibold text-xs"
disabled={pageNumber >= allPages}
onClick={nextPage}
>
<span className="block lg:hidden">
<i className="fa fa-forward cursor-pointer" aria-hidden="true"></i>
</span>
<span className="lg:block hidden">Next</span>
</button>
</div>
);
}
apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+24 -46
View File
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import RSC from "react-scrollbars-custom";
import { Document, Page } from "react-pdf";
import { themeColor } from "../../constant/const";
// import { themeColor } from "../../constant/const";
function RenderAllPdfPage({
signPdfUrl,
@@ -40,15 +40,7 @@ function RenderAllPdfPage({
const ispageNumber = signPageNumber.includes(index + 1);
return (
ispageNumber && (
<div
style={{
position: "absolute",
zIndex: 2,
top: -12,
right: -7,
transform: "translate(50% -50%)"
}}
>
<div className="absolute z-20 top-[1px] -right-[13px] -translate-x-1/2 -translate-y-1/2">
<i
style={{ color: bookmarkColor || "red" }}
className="fa-solid fa-bookmark"
@@ -58,23 +50,25 @@ function RenderAllPdfPage({
);
};
return (
<div className="showPages">
<div>
<div
style={{
display: "flex",
flexDirection: "row",
boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
backgroundColor: "white",
height: "100%"
}}
className=" hidden md:flex flex-row bg-base-100 h-full"
// style={{
// display: "flex",
// flexDirection: "row",
// boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
// backgroundColor: "white",
// height: "100%"
// }}
>
<div style={{ width: "140px" }}>
<div className="w-[140px]">
<div
style={{
background: themeColor
// color:"white"
}}
className="signedStyle"
className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold "
// style={{
// background: themeColor
// // color:"white"
// }}
// className="signedStyle"
>
Pages
</div>
@@ -95,21 +89,11 @@ function RenderAllPdfPage({
{Array.from(new Array(allPages), (el, index) => (
<div
key={index}
style={{
width: "100px",
border:
pageNumber - 1 === index
? "2px solid red"
: "2px solid #878787",
// padding: "5px",
margin: "10px",
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "relative"
}}
className={`${
pageNumber - 1 === index
? "border-[red]"
: "border-[#878787]"
} border-2 w-[100px] m-[10px] flex justify-center items-center relative`}
onClick={() => {
setPageNumber(index + 1);
if (setSignBtnPosition) {
@@ -119,13 +103,7 @@ function RenderAllPdfPage({
>
{signerPos && addSignatureBookmark(index)}
<div
style={{
position: "relative",
zIndex: 1,
overflow: "hidden"
}}
>
<div className="relative z-[1] overflow-hidden">
<Page
key={`page_${index + 1}`}
pageNumber={index + 1}
apps/OpenSign/src/components/pdf/SignerListPlace.js
+7 -6
View File
@@ -7,12 +7,13 @@ function SignerListPlace(props) {
return (
<div>
<div
style={{
background: themeColor,
padding: "5px"
}}
className="pt-2 pb-1 px-3 font-semibold text-base-content "
// style={{
// background: themeColor,
// padding: "5px"
// }}
>
<span className="signedStyle">
<span className=" relative">
{props.title ? props.title : "Recipients"}
<span className="absolute text-xs z-[30] mt-1 ml-0.5">
{props?.title === "Roles" && (
@@ -68,7 +69,7 @@ function SignerListPlace(props) {
</span>
</span>
</div>
<div className="signerList">
<div className="overflow-auto hide-scrollbar max-h-[180px]">
<RecipientList {...props} />
</div>
{props.handleAddSigner ? (
apps/OpenSign/src/components/pdf/WidgetComponent.js
+12 -5
View File
@@ -386,16 +386,23 @@ function WidgetComponent({
className={
isMailSend ? "disabled signerComponent " : "signerComponent"
}
// className="bg-base-100"
>
<div
style={{
background: themeColor,
padding: "5px"
}}
// style={{
// background: themeColor,
// padding: "5px"
// }}
className="text-base-content px-3 py-2 text-[15px] border-y-[1px] border-base-content"
>
<span className="signedStyle">Fields</span>
<span
// className="signedStyle"
>
Fields
</span>
</div>
{/* <div className="flex flex-col w-full h-auto my-3 items-center"> */}
<div className="signLayoutContainer1">
<WidgetList
updateWidgets={updateWidgets}
apps/OpenSign/src/components/pdf/WidgetNameModal.js
+1 -1
View File
@@ -127,7 +127,7 @@ const WidgetNameModal = (props) => {
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
Name
<span style={{ color: "red", fontSize: 13 }}> *</span>
<span className="text-[red] text-[13px]"> *</span>
</label>
<input
className="addUserInput"
apps/OpenSign/src/components/sidebar/Sidebar.js
+1 -1
View File
@@ -44,7 +44,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
};
return (
<aside
className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-40 hide-scrollbar
className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-[100] hide-scrollbar
${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
>
<div className="flex px-2 py-3 gap-2 items-center shadow-md">
apps/OpenSign/src/constant/Utils.js
+13 -16
View File
@@ -1,6 +1,6 @@
import axios from "axios";
import moment from "moment";
import { isEnableSubscription, themeColor } from "./const";
import { isEnableSubscription } from "./const";
import React from "react";
import { rgb } from "pdf-lib";
import Parse from "parse";
@@ -380,10 +380,9 @@ export const getWidgetType = (item, marginLeft) => {
return (
<>
<div
className="signatureBtn widgets"
className="border-2 border-accent rounded-md flex justify-between w-fit md:w-[150px] ml-1 select-none"
// className="signatureBtn widgets"
style={{
boxShadow:
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
marginLeft: marginLeft && `${marginLeft}px`
}}
>
@@ -391,25 +390,23 @@ export const getWidgetType = (item, marginLeft) => {
{!isMobile && (
<i
className="fa-sharp fa-solid fa-grip-vertical"
style={{ color: "#908d8d", fontSize: "13px", marginLeft: 4 }}
style={{ fontSize: "13px", marginLeft: 4 }}
></i>
)}
<span className=" font-[400] text-[15px] text-black ml-[5px]">
<span className=" font-[400] text-[15px] text-base-content ml-[5px]">
{item.type}
</span>
</div>
<div
style={{
backgroundColor: themeColor,
padding: "0 5px",
display: "flex",
alignItems: "center"
}}
className=" bg-accent flex items-center px-[5px]"
// style={{
// backgroundColor: themeColor,
// padding: "0 5px",
// display: "flex",
// alignItems: "center"
// }}
>
<i
style={{ color: "white", fontSize: item.iconSize }}
className={item.icon}
></i>
<i style={{ fontSize: item.iconSize }} className={item.icon}></i>
</div>
</div>
</>
apps/OpenSign/src/constant/const.js
-4
View File
@@ -1,10 +1,6 @@
export const contactCls = "contracts_Contactbook";
export const templateCls = "contracts_Template";
export const documentCls = "contracts_Document";
export const rejectBtn =
"bg-[#ffffff] rounded-sm shadow-md text-[12px] font-semibold uppercase text-black py-1.5 px-4 focus:outline-none text-center border-[1px] border-[#b4b4b4]";
export const submitBtn =
"bg-[#32a3ac] rounded-sm shadow-md text-[12px] font-semibold uppercase text-white py-1.5 px-4 focus:outline-none text-center";
export const themeColor = "#47a3ad";
export const iconColor = "#686968";
export const isEnableSubscription = process.env.REACT_APP_ENABLE_SUBSCRIPTION;
apps/OpenSign/src/json/dashboardJson.js
+2 -2
View File
@@ -7,7 +7,7 @@ const dashboardJson = [
widget: {
type: "Card",
icon: "fas fa-signature",
bgColor: "#f0058e",
bgColor: "bg-[#f0058e]",
label: "Need your Signature",
description: null,
data: {
@@ -30,7 +30,7 @@ const dashboardJson = [
widget: {
type: "Card",
icon: "fas fa-sign-out-alt",
bgColor: "#g0058e",
bgColor: "bg-[#2ed8b6]",
label: "Out for signatures",
description: null,
data: {
apps/OpenSign/src/layout/HomeLayout.js
+1 -1
View File
@@ -247,7 +247,7 @@ const HomeLayout = () => {
};
return (
<div>
<div className="sticky top-0 z-50">
<div className="sticky top-0 z-[101]">
{!isLoader && <Header showSidebar={showSidebar} />}
</div>
{isUserValid ? (
apps/OpenSign/src/pages/Form.js
+16 -15
View File
@@ -14,7 +14,7 @@ import { SaveFileSize } from "../constant/saveFileSize";
import { checkIsSubscribed, getFileName, toDataUrl } from "../constant/Utils";
import { PDFDocument } from "pdf-lib";
import axios from "axios";
import { isEnableSubscription, submitBtn } from "../constant/const";
import { isEnableSubscription } from "../constant/const";
import ModalUi from "../primitives/ModalUi";
import { Tooltip } from "react-tooltip";
import Upgrade from "../primitives/Upgrade";
@@ -586,29 +586,30 @@ const Forms = (props) => {
>
<form onSubmit={handlePasswordSubmit}>
<div className="px-6 pt-3 pb-2">
<label className="mb-2 text-xs">Password</label>
<label className="mb-2 text-xs text-base-content">
Password
</label>
<input
type="text"
name="password"
value={formData.password}
onChange={(e) => handleStrInput(e)}
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
placeholder="Enter pdf password"
required
/>
{!isCorrectPass ? (
<p className="ml-2 text-[11px] text-red-600">
Please provide correct password
</p>
) : (
<p className="ml-2 text-[11px] text-transparent text-red-600">
.
</p>
)}
<p
className={`${
!isCorrectPass
? "text-red-600"
: "text-transparent pointer-events-none"
} ml-2 text-[11px] `}
>
Please provide correct password
</p>
</div>
<hr />
<div className="px-6 my-3">
<button type="submit" className={submitBtn}>
<div className="px-6 mb-3">
<button type="submit" className="op-btn op-btn-primary">
Submit
</button>
</div>
apps/OpenSign/src/pages/GuestLogin.js
+27 -28
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import loader from "../assets/images/loader2.gif";
import axios from "axios";
import { isEnableSubscription, themeColor } from "../constant/const";
import { isEnableSubscription } from "../constant/const";
import { contractUsers, getAppLogo } from "../constant/Utils";
import logo from "../assets/images/logo.png";
import { appInfo } from "../constant/appinfo";
@@ -181,16 +181,14 @@ function GuestLogin() {
setContact((prev) => ({ ...prev, [e.target.name]: e.target.value }));
};
return (
<div style={{ padding: "2rem", background: "white" }}>
<div className="p-[2rem]">
{isLoading ? (
<div className="flex flex-col justify-center items-center h-[100vh]">
<img className="w-[80px] h-[80px]" alt="loader" src={loader} />
<span style={{ fontSize: "13px", color: "gray" }}>
{isLoading.message}
</span>
<span className="text-[13px] text-[gray]">{isLoading.message}</span>
</div>
) : (
<div className="m-1 md:m-2 border-[0.5px] border-[#c5c7c9] p-[30px] shadow-md">
<div className="m-1 md:m-2 p-[30px] text-base-content bg-base-100 op-card shadow-md">
<div className="md:w-[250px] md:h-[66px] inline-block overflow-hidden mt-2 mb-11">
{appLogo && (
<img src={appLogo} className="object-contain h-full" alt="logo" />
@@ -199,24 +197,23 @@ function GuestLogin() {
{contactId ? (
<>
{!EnterOTP ? (
<div className="w-full md:w-[50%]">
<div className="w-full md:w-[50%] text-base-content">
<h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
<legend className="text-[12px] text-[#878787] mt-2">
Verification code is sent to your email
</legend>
<div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
<div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
<input
type="email"
name="mobile"
value={email}
className="outline-none px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs disabled:bg-[#e0e5f5]"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
disabled
/>
</div>
<div className="mt-4">
<div className="mt-2">
<button
className="w-[100px] text-white text-sm font-medium py-1 rounded-sm shadow-md hover:shadow-lg focus:outline-none"
style={{ background: themeColor }}
className="op-btn op-btn-primary"
onClick={(e) => handleSendOTPBtn(e)}
disabled={loading}
>
@@ -225,25 +222,27 @@ function GuestLogin() {
</div>
</div>
) : (
<form className="w-full md:w-[50%]" onSubmit={VerifyOTP}>
<form
className="w-full md:w-[50%] text-base-content"
onSubmit={VerifyOTP}
>
<h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
<legend className="text-[12px] text-[#878787] mt-2">
You will get a OTP via Email
</legend>
<div className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
<p>Enter Verification Code</p>
<div className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 op-card my-2 shadow-md">
<p className="text-sm">Enter Verification Code</p>
<input
type="number"
className="mt-1 outline-none px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs bg-[#e0e5f5]"
className="mt-2 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
name="OTP"
value={OTP}
onChange={(e) => setOTP(e.target.value)}
/>
</div>
<div className="mt-4">
<div className="mt-2">
<button
style={{ background: themeColor }}
className="w-[100px] text-white text-sm font-medium py-1 rounded-sm shadow-md hover:shadow-lg focus:outline-none"
className="op-btn op-btn-primary"
type="submit"
disabled={loading}
>
@@ -254,16 +253,16 @@ function GuestLogin() {
)}
</>
) : (
<div className="w-full md:w-[50%]">
<div className="w-full md:w-[50%] text-base-content">
<h1 className="text-2xl md:text-[30px]">Welcome</h1>
<legend className="text-[12px] text-[#878787] mt-2">
Provide your details
</legend>
<form
className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 rounded shadow-md"
className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md"
onSubmit={handleUserData}
>
<div className="mb-3">
<div className="mb-2">
<label
htmlFor="name"
className="block text-xs text-gray-700 font-semibold"
@@ -276,12 +275,12 @@ function GuestLogin() {
name="name"
value={contact.name}
onChange={handleInputChange}
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded disabled:bg-[#e0e5f5] focus:outline-none text-xs"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
disabled={loading}
required
/>
</div>
<div className="mb-3">
<div className="mb-2">
<label
htmlFor="email"
className="block text-xs text-gray-700 font-semibold"
@@ -294,12 +293,12 @@ function GuestLogin() {
name="email"
value={contact.email}
onChange={handleInputChange}
className="px-3 py-2 w-full border-[1px] border-gray-300 disabled:bg-[#e0e5f5] rounded focus:outline-none text-xs"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
required
disabled
/>
</div>
<div className="mb-3">
<div className="mb-2">
<label
htmlFor="phone"
className="block text-xs text-gray-700 font-semibold"
@@ -311,11 +310,11 @@ function GuestLogin() {
name="phone"
value={contact.phone}
onChange={handleInputChange}
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
disabled={loading}
/>
</div>
<div className="mt-4 flex justify-start">
<div className="mt-2 flex justify-start">
<button
type="submit"
className="op-btn op-btn-primary"
apps/OpenSign/src/pages/Login.js
+2 -2
View File
@@ -1224,7 +1224,7 @@ function Login() {
style={{ display: "flex" }}
className="block text-xs text-gray-700 font-semibold"
>
Company <span style={{ fontSize: 13, color: "red" }}>*</span>
Company <span className="text-[red] text-[13px]">*</span>
</label>
<input
type="text"
@@ -1247,7 +1247,7 @@ function Login() {
className="block text-xs text-gray-700 font-semibold"
>
Job Title
<span style={{ fontSize: 13, color: "red" }}>*</span>
<span className="text-[red] text-[13px]">*</span>
</label>
<input
type="text"
apps/OpenSign/src/pages/PlaceHolderSign.js
+23 -93
View File
@@ -1039,7 +1039,7 @@ function PlaceHolderSign() {
}}
>
<i
className="fa-solid fa-share-from-square cursor-pointer "
className="fa-solid fa-share-from-square cursor-pointer"
style={{ color: themeColor }}
></i>
</RWebShare>
@@ -1639,26 +1639,13 @@ function PlaceHolderSign() {
) : (
<div className="signatureContainer" ref={divRef}>
{isUiLoading && (
<div
style={{
position: "absolute",
height: "100vh",
width: "100%",
display: "flex",
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
zIndex: "999",
backgroundColor: "#e6f2f2",
opacity: 0.8
}}
>
<div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
<img
alt="no img"
alt="loader"
src={loader}
style={{ width: "100px", height: "100px" }}
className="w-[100px] h-[100px]"
/>
<span style={{ fontSize: "13px", fontWeight: "bold" }}>
<span className="text-[13px] font-bold">
This might take some time
</span>
</div>
@@ -1718,10 +1705,7 @@ function PlaceHolderSign() {
handleClose={() => setIsSendAlert({})}
showHeaderMessage={isSendAlert.mssg === "confirm"}
>
<div
className="max-h-96 overflow-y-scroll scroll-hide"
style={{ padding: 20 }}
>
<div className="max-h-96 overflow-y-scroll scroll-hide p-[20px]">
{isSendAlert.mssg === "sure" ? (
<span>
Please ensure there&apos;s at least one signature widget
@@ -1751,7 +1735,7 @@ function PlaceHolderSign() {
/>
<div
className={
"flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
"flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
}
onClick={() => {
setRequestBody(defaultBody);
@@ -1764,26 +1748,20 @@ function PlaceHolderSign() {
)}
<div
className={
"flex flex-row md:items-center gap-2 md:gap-6 mt-2 "
"flex flex-row md:items-center gap-2 md:gap-6 mt-2"
}
>
<div className="flex flex-row gap-2">
<button
onClick={() => sendEmailToSigners()}
className=" shadow rounded-[2px] py-[3px] px-[25px] font-[500] text-sm "
style={{
background: themeColor,
color: "white"
}}
className="op-btn op-btn-primary font-[500] text-sm shadow"
>
Send
</button>
{isCustomize && (
<button
onClick={() => {
setIsCustomize(false);
}}
className=" shadow rounded-[2px] py-[3px] px-[25px] font-[500] text-sm border-[0.1px] border-gray-300"
onClick={() => setIsCustomize(false)}
className="op-btn op-btn-ghost font-[500] text-sm"
>
Close
</button>
@@ -1793,12 +1771,8 @@ function PlaceHolderSign() {
{!isCustomize &&
(isSubscribe || !isEnableSubscription) && (
<span
className={
"cursor-pointer underline text-blue-700 focus:outline-none"
}
onClick={() => {
setIsCustomize(!isCustomize);
}}
className="link link-primary text-sm"
onClick={() => setIsCustomize(!isCustomize)}
>
Cutomize Email
</span>
@@ -1818,21 +1792,9 @@ function PlaceHolderSign() {
{isSendAlert.mssg === "confirm" && (
<>
<div className="flex justify-center items-center mt-3">
<span
style={{
height: 1,
width: "20%",
backgroundColor: "#ccc"
}}
></span>
<span className="h-[1px] w-[20%] bg-[#ccc]"></span>
<span className="ml-[5px] mr-[5px]">or</span>
<span
style={{
height: 1,
width: "20%",
backgroundColor: "#ccc"
}}
></span>
<span className="h-[1px] w-[20%] bg-[#ccc]"></span>
</div>
<div className="mt-3 mb-3">{handleShareList()}</div>
</>
@@ -1849,7 +1811,7 @@ function PlaceHolderSign() {
setSignerPos([]);
}}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-[100%] p-[20px]">
{mailStatus === "success" ? (
<p>You have successfully sent mails to all recipients!</p>
) : (
@@ -1858,31 +1820,16 @@ function PlaceHolderSign() {
{isCurrUser && (
<p>Do you want to sign documents right now ?</p>
)}
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
{isCurrUser && (
<button
onClick={() => {
handleRecipientSign();
}}
style={{
background: themeColor,
color: "white"
}}
onClick={() => handleRecipientSign()}
type="button"
className="finishBtn"
className="op-btn op-btn-primary"
>
Yes
</button>
)}
<button
onClick={() => {
setIsSend(false);
@@ -1903,17 +1850,9 @@ function PlaceHolderSign() {
setIsShowEmail(false);
}}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-[100%] p-[20px]">
<p>Please select signer for add placeholder!</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
<button
onClick={() => {
setIsShowEmail(false);
@@ -2129,18 +2068,9 @@ function PlaceHolderSign() {
title={"Document Alert"}
showClose={false}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-[100%] p-[20px]">
<p>{isAlreadyPlace.message}</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
<button
onClick={() => handleRecipientSign()}
type="button"
apps/OpenSign/src/pages/Signup.js
+7 -10
View File
@@ -523,8 +523,7 @@ const Signup = () => {
<div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
<div className="px-6 py-4 text-xs">
<label className="block ">
Name{" "}
<span style={{ color: "red", fontSize: 13 }}>*</span>
Name <span className="text-[red] text-[13px]">*</span>
</label>
<input
type="text"
@@ -535,8 +534,7 @@ const Signup = () => {
/>
<hr className="my-2 border-none" />
<label>
Email{" "}
<span style={{ color: "red", fontSize: 13 }}>*</span>
Email <span className="text-[red] text-[13px]">*</span>
</label>
<input
id="email"
@@ -550,8 +548,7 @@ const Signup = () => {
/>
<hr className="my-2 border-none" />
<label>
Phone{" "}
<span style={{ color: "red", fontSize: 13 }}>*</span>
Phone <span className="text-[red] text-[13px]">*</span>
</label>
<input
type="tel"
@@ -563,7 +560,7 @@ const Signup = () => {
<hr className="my-2 border-none" />
<label>
Company{" "}
<span style={{ color: "red", fontSize: 13 }}>*</span>
<span className="text-[red] text-[13px]">*</span>
</label>
<input
type="text"
@@ -575,7 +572,7 @@ const Signup = () => {
<hr className="my-2 border-none" />
<label>
Job Title{" "}
<span style={{ color: "red", fontSize: 13 }}>*</span>
<span className="text-[red] text-[13px]">*</span>
</label>
<input
type="text"
@@ -587,7 +584,7 @@ const Signup = () => {
<hr className="my-2 border-none" />
<label>
Password{" "}
<span style={{ color: "red", fontSize: 13 }}>*</span>
<span className="text-[red] text-[13px]">*</span>
</label>
<div className="relative">
<input
@@ -670,7 +667,7 @@ const Signup = () => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
<button
type="submit"
className="op-btn op-btn-primary"
className="op-btn op-btn-accent"
disabled={state.loading}
>
{state.loading ? "Loading..." : "Register"}
apps/OpenSign/src/pages/TemplatePlaceholder.js
+13 -26
View File
@@ -1211,7 +1211,10 @@ const TemplatePlaceholder = () => {
) : handleError ? (
<HandleError handleError={handleError} />
) : (
<div className="signatureContainer" ref={divRef}>
<div
className="op-card overflow-hidden flex flex-row justify-between bg-base-300 relative"
ref={divRef}
>
{/* this component used for UI interaction and show their functionality */}
{!checkTourStatus && (
//this tour component used in your html component where you want to put
@@ -1259,7 +1262,7 @@ const TemplatePlaceholder = () => {
title={"Fields required"}
handleClose={() => setIsSendAlert(false)}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-full p-[20px]">
<p>Please add at least one signature field for all roles.</p>
</div>
</ModalUi>
@@ -1269,7 +1272,7 @@ const TemplatePlaceholder = () => {
title={"Roles"}
handleClose={() => setIsReceipent(true)}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-full p-[20px]">
<p>Please add a role</p>
</div>
</ModalUi>
@@ -1279,20 +1282,12 @@ const TemplatePlaceholder = () => {
title={"Create Document"}
handleClose={() => setIsCreateDocModal(false)}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-full p-[20px]">
<p>
Do you want to create a document using the template you just
created ?
</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
{currentEmail.length > 0 && (
<>
<button
@@ -1330,17 +1325,9 @@ const TemplatePlaceholder = () => {
setIsShowEmail(false);
}}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-full p-[20px]">
<p>Please select signer for add placeholder!</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
<button
onClick={() => {
setIsShowEmail(false);
@@ -1396,7 +1383,7 @@ const TemplatePlaceholder = () => {
// signerObjId={signerObjId}
Id={uniqueId}
/>
{/* pdf header which contain funish back button */}
{/* pdf header which contain finish, back button */}
<Header
completeBtnTitle={"Save"}
isPlaceholder={true}
@@ -1499,10 +1486,10 @@ const TemplatePlaceholder = () => {
</div>
) : (
<div>
<div className="signerComponent">
<div className="w-[180px] bg-base-100 h-full">
<div
style={{ maxHeight: window.innerHeight - 70 + "px" }}
className="autoSignScroll"
className="autoSignScroll hide-scrollbar"
>
<SignerListPlace
isMailSend={isMailSend}
apps/OpenSign/src/primitives/GetReportDisplay.js
+5 -3
View File
@@ -970,9 +970,11 @@ const ReportTable = (props) => {
{/* {props.ReportName === "Templates" && isEnableSubscription && (
<th className="px-4 py-2">Public</th>
)} */}
{/* {props.actions?.length > 0 && (
<th className="px-4 py-2">Action</th>
)} */}
{props.actions?.length > 0 && (
<th className="px-4 py-2 text-transparent pointer-events-none">
Action
</th>
)}
</tr>
</thead>
<tbody className="text-[12px]">
apps/OpenSign/src/primitives/HandleError.js
+2 -9
View File
@@ -2,15 +2,8 @@ import React from "react";
function HandleError({ handleError }) {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh"
}}
>
<span style={{ fontSize: "20px", color: "gray" }}>{handleError}</span>
<div className="flex justify-center items-center h-[100vh]">
<span className="text-[20px] text-[gray]">{handleError}</span>
</div>
);
}
apps/OpenSign/src/primitives/LazyPage.js
+2 -15
View File
@@ -4,21 +4,8 @@ const LazyPage = ({ Page }) => {
return (
<Suspense
fallback={
<div
style={{
height: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<div
style={{
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
<div className="flex justify-center items-center h-[100vh] text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
</div>
}
>
apps/OpenSign/src/primitives/LoaderWithMsg.js
+3 -17
View File
@@ -3,23 +3,9 @@ import loader from "../assets/images/loader2.gif";
function Loader({ isLoading }) {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh",
flexDirection: "column"
}}
>
<img
alt="no img"
src={loader}
style={{ width: "80px", height: "80px" }}
/>
<span style={{ fontSize: "13px", color: "gray" }}>
{isLoading.message}
</span>
<div className="flex flex-col justify-center items-center h-[100vh]">
<img alt="loader" src={loader} className="w-[80px] h-[80px]" />
<span className="text-[13px] text-base-cotent">{isLoading.message}</span>
</div>
);
}
apps/OpenSign/src/styles/signature.css
-1
View File
@@ -858,7 +858,6 @@ option {
#navbar {
overflow: hidden;
z-index: 49;
}
/* Navbar links */
apps/OpenSign/tailwind.config.js
+59 -1
View File
@@ -6,7 +6,65 @@ module.exports = {
},
plugins: [require("daisyui")],
daisyui: {
themes: true,
// themes: true,
themes: [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
"dim",
"nord",
"sunset",
{
opensigncss: {
primary: "#034687",
"primary-content": "#ccd9e8",
secondary: "#151B25",
"secondary-content": "#cacccf",
accent: "#E10032",
"accent-content": "#ffd8d5",
neutral: "#F0D7D9",
"neutral-content": "#141111",
"base-100": "#ffffff",
"base-200": "#dedede",
"base-300": "#bebebe",
"base-content": "#161616",
info: "#00b6ff",
"info-content": "#f5f5f4",
success: "#00a96e",
"success-content": "#f5f5f4",
warning: "#ffbe00",
"warning-content": "#ccd9e8",
error: "#ff0000",
"error-content": "#f3f4f6"
}
}
],
prefix: "op-"
}
};