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: update UI of signyourself, edit document, request signature

Browse Source
This commit is contained in:
prafull-opensignlabs
2024-06-13 19:29:23 +05:30
parent 149a16f150
commit e4d946e519
19 changed files with 426 additions and 836 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/opensigndrive/DriveBody.js
+1 -3
View File
@@ -9,7 +9,6 @@ import { useNavigate } from "react-router-dom";
import Table from "react-bootstrap/Table";
import * as HoverCard from "@radix-ui/react-hover-card";
import ModalUi from "../../primitives/ModalUi";
import { themeColor } from "../../constant/const";
import FolderModal from "../shared/fields/FolderModal";
function DriveBody(props) {
@@ -567,11 +566,10 @@ function DriveBody(props) {
)}
<ModalUi
isOpen={isDeleteDoc}
headerColor={themeColor}
title={"Delete Document"}
handleClose={() => setIsDeleteDoc(false)}
>
<div className="h-full p-[20px]">
<div className="h-full p-[20px] text-base-content">
<p>Are you sure you want to delete this document?</p>
<div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
<button
apps/OpenSign/src/components/pdf/DefaultSignature.js
+1 -7
View File
@@ -1,5 +1,4 @@
import React from "react";
import { themeColor } from "../../constant/const";
function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
const confirmToaddDefaultSign = () => {
if (xyPostion.length > 0) {
@@ -18,12 +17,7 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
return (
<div data-tut="reactourThird">
<div
className="text-white p-[5px] mt-[5px]"
style={{
background: themeColor
}}
>
<div className="text-base-content font-semibold px-3 py-2 text-[15px] border-b-[1px] border-base-content">
Signature
</div>
<div className="flex flex-col items-center mt-[10px] font-semibold">
apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+2 -2
View File
@@ -236,7 +236,7 @@ function DropdownWidgetOption(props) {
className={`${
props.isSubscribe || !isEnableSubscription
? ""
: "disabled "
: "pointer-events-none bg-opacity-50"
} op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
/>
<label
@@ -257,7 +257,7 @@ function DropdownWidgetOption(props) {
className={`${
props.isSubscribe || !isEnableSubscription
? ""
: "disabled "
: "pointer-events-none bg-opacity-50"
} op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
/>
</>
apps/OpenSign/src/components/pdf/PlaceholderType.js
+11 -7
View File
@@ -425,7 +425,7 @@ function PlaceholderType(props) {
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
style={{ whiteSpace: "pre-wrap", color: "initial" }}
cols="50"
/>
) : (
@@ -443,7 +443,7 @@ function PlaceholderType(props) {
<select
className="inputPlaceholder"
id="myDropdown"
style={{ fontSize: "12px" }}
style={{ fontSize: "12px", color: "initial" }}
value={selectOption}
onChange={(e) => {
setSelectOption(e.target.value);
@@ -528,7 +528,7 @@ function PlaceholderType(props) {
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
style={{ whiteSpace: "pre-wrap", color: "initial" }}
cols="50"
/>
) : (
@@ -567,7 +567,7 @@ function PlaceholderType(props) {
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
style={{ whiteSpace: "pre-wrap", color: "initial" }}
cols="50"
/>
) : (
@@ -606,7 +606,7 @@ function PlaceholderType(props) {
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
style={{ whiteSpace: "pre-wrap", color: "initial" }}
cols="50"
/>
) : (
@@ -728,7 +728,7 @@ function PlaceholderType(props) {
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap" }}
style={{ whiteSpace: "pre-wrap", color: "initial" }}
cols="50"
/>
) : (
@@ -800,7 +800,11 @@ function PlaceholderType(props) {
? "labelTextArea labelWidthMobile"
: "labelTextArea labelWidthDesktop"
}
style={{ whiteSpace: "pre-wrap", overflow: "hidden" }}
style={{
whiteSpace: "pre-wrap",
overflow: "hidden",
color: "initial"
}}
cols="50"
/>
);
apps/OpenSign/src/components/pdf/RecipientList.js
+86 -110
View File
@@ -7,38 +7,15 @@ import {
isMobile,
nameColor
} from "../../constant/Utils";
const cursor =
"cursor-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC'),_pointer]";
const RecipientList = (props) => {
const [animationParent] = useAutoAnimate();
const [isHover, setIsHover] = useState();
const [isEdit, setIsEdit] = useState(false);
//function for onhover signer name change background color
const inputRef = useRef(null);
const onHoverStyle = (ind, blockColor) => {
const style = {
background: blockColor ? blockColor : color[ind % color.length],
padding: "10px",
marginTop: "2px",
display: "flex",
flexDirection: "row",
borderRadius: 12,
borderBottom: "1px solid #e3e1e1",
alignItems: "center"
};
return style;
};
//function for onhover signer name remove background color
const nonHoverStyle = () => {
const style = {
padding: "10px",
marginTop: "2px",
display: "flex",
flexDirection: "row",
borderBottom: "1px solid #e3e1e1",
alignItems: "center"
};
return style;
};
const isWidgetExist = (Id) => {
return props.signerPos.some((x) => x.Id === Id);
};
@@ -117,18 +94,21 @@ const RecipientList = (props) => {
data-tut="reactourFirst"
onMouseEnter={() => setIsHover(ind)}
onMouseLeave={() => setIsHover(null)}
className={
className={`${
props.sendInOrder
? props.isMailSend
? "disabled"
: "dragCursor"
: props.isMailSend && "disabled"
}
style={
(!isMobile && isHover === ind) || props.isSelectListId === ind
? onHoverStyle(ind, obj?.blockColor)
: nonHoverStyle(ind)
}
? "pointer-events-none bg-opacity-80"
: `text-[12px] font-bold ${cursor}`
: props.isMailSend && "pointer-events-none bg-opacity-80"
} flex flex-row rounded-xl px-2 py-[10px] mt-[2px] mx-1 items-center`}
style={{
background:
(!isMobile && isHover === ind) || props.isSelectListId === ind
? obj?.blockColor
? obj?.blockColor
: color[ind % color.length]
: "transparent"
}}
onClick={(e) => {
e.preventDefault();
props.setSignerObjId(obj?.objectId || "");
@@ -144,29 +124,14 @@ const RecipientList = (props) => {
>
<div className="flex flex-row items-center w-full">
<div
className="flex w-[30px] h-[30px] rounded-full items-center justify-center mr-2"
style={{
background: obj?.blockColor
? darkenColor(obj?.blockColor, 0.4)
: nameColor[ind % nameColor.length],
width: 30,
height: 30,
display: "flex",
borderRadius: 30 / 2,
justifyContent: "center",
alignItems: "center",
marginRight: "12px"
: nameColor[ind % nameColor.length]
}}
>
<span
className={props.sendInOrder && "dragCursor"}
style={{
fontSize: "12px",
textAlign: "center",
fontWeight: "bold",
color: "white",
textTransform: "uppercase"
}}
>
<span className="text-white uppercase font-bold text-center text-[12px]">
{isWidgetExist(obj.Id) ? (
<i className="fa-solid fa-check"></i>
) : (
@@ -179,67 +144,72 @@ const RecipientList = (props) => {
</span>
</div>
<div
style={{
display: "flex",
flexDirection: obj.Name ? "column" : "row",
alignItems: "center"
}}
className={`${
obj?.Name ? "flex-col" : "flex-row"
} flex items-center`}
>
{obj.Name ? (
<span className={"userName"}>{obj.Name}</span>
<span
className={`${
(!isMobile && isHover === ind) ||
props.isSelectListId === ind
? "text-[#424242]"
: "text-base-content"
} text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
>
{obj.Name}
</span>
) : (
<>
<span
className="userName"
style={{ cursor: "pointer" }}
onClick={() => {
setIsEdit({ [obj.Id]: true });
props.setRoleName(obj.Role);
}}
>
{isEdit?.[obj.Id] && props.handleRoleChange ? (
<input
ref={inputRef}
style={{
backgroundColor: "transparent",
width: "inherit",
padding: "3px"
}}
value={obj.Role}
onChange={(e) => props.handleRoleChange(e, obj.Id)}
onBlur={() => {
setIsEdit({});
props.handleOnBlur(obj.Role, obj.Id);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
inputRef.current.blur();
}
}}
/>
) : (
<span style={{ padding: "3px" }}>{obj.Role}</span>
)}
</span>
</>
<span
className={`${
(!isMobile && isHover === ind) ||
props.isSelectListId === ind
? "text-[#424242]"
: "text-base-content"
} text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer`}
onClick={() => {
setIsEdit({ [obj.Id]: true });
props.setRoleName(obj.Role);
}}
>
{isEdit?.[obj.Id] && props.handleRoleChange ? (
<input
ref={inputRef}
className="bg-transparent p-[3px"
value={obj.Role}
onChange={(e) => props.handleRoleChange(e, obj.Id)}
onBlur={() => {
setIsEdit({});
props.handleOnBlur(obj.Role, obj.Id);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
inputRef.current.blur();
}
}}
/>
) : (
<span className="p-[3px]">{obj.Role}</span>
)}
</span>
)}
{obj.Name && (
<span className={"useEmail"}>
<span
className={` ${
(!isMobile && isHover === ind) ||
props.isSelectListId === ind
? "text-[#424242]"
: "text-base-content"
} text-[10px] font-medium w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
>
{obj?.Role || obj?.Email}
</span>
)}
</div>
</div>
{isMobile && props.sendInOrder && (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: 5
}}
>
<div className="flex flex-row items-center gap-[5px]">
<div
onClick={(e) => {
if (ind !== 0) {
@@ -247,7 +217,7 @@ const RecipientList = (props) => {
handleChangeSequence(e, ind, "up");
}
}}
style={{ color: ind === 0 ? "gray" : "black" }}
className={ind === 0 ? "text-[gray]" : "text-black"}
>
▲
</div>
@@ -258,10 +228,11 @@ const RecipientList = (props) => {
handleChangeSequence(e, ind, null, "down");
}
}}
style={{
color:
ind === props.signersdata.length - 1 ? "gray" : "black"
}}
className={
ind === props.signersdata.length - 1
? "text-[gray]"
: "text-black"
}
>
▼
</div>
@@ -273,7 +244,12 @@ const RecipientList = (props) => {
e.stopPropagation();
props.handleDeleteUser(obj.Id);
}}
style={{ cursor: "pointer", marginLeft: "5px" }}
className={`${
(!isMobile && isHover === ind) ||
props.isSelectListId === ind
? "text-[#424242]"
: "text-base-content"
} cursor-pointer ml-[5px]`}
>
<i className="fa-regular fa-trash-can"></i>
</div>
apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+2 -19
View File
@@ -1,7 +1,6 @@
import React, { useState } from "react";
import RSC from "react-scrollbars-custom";
import { Document, Page } from "react-pdf";
// import { themeColor } from "../../constant/const";
function RenderAllPdfPage({
signPdfUrl,
@@ -51,25 +50,9 @@ function RenderAllPdfPage({
};
return (
<div>
<div
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 className=" hidden md:flex flex-row bg-base-100 h-full">
<div className="w-[140px]">
<div
className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold "
// style={{
// background: themeColor
// // color:"white"
// }}
// className="signedStyle"
>
<div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold ">
Pages
</div>
apps/OpenSign/src/components/pdf/SignPad.js
+58 -128
View File
@@ -78,21 +78,16 @@ function SignPad({
//save button component
const SaveBtn = () => {
return (
<div style={{ marginTop: "2px" }}>
<div>
{(isTab === "draw" || isTab === "uploadImage") && (
<button
style={{
color: "black",
border: "1px solid #ccc"
}}
type="button"
className="finishBtn saveBtn"
className="op-btn op-btn-ghost mr-1 mt-[2px]"
onClick={() => handleClear()}
>
Clear
</button>
)}
<button
onClick={() => {
setCurrWidgetsDetails({});
@@ -127,19 +122,12 @@ function SignPad({
setSignValue("");
setIsStamp(false);
}}
style={{
background: themeColor,
color: "white"
}}
disabled={
isSignImg || image || isDefaultSign || textWidth ? false : true
}
type="button"
className={
className={`${
isSignImg || image || isDefaultSign || textWidth
? "finishBtn saveBtn"
: "disabledFinish saveBtn"
}
? ""
: "pointer-events-none"
} op-btn op-btn-primary shadow-lg`}
>
Save
</button>
@@ -214,8 +202,8 @@ function SignPad({
const fontfamily = fontStyle
? fontStyle
: fontSelect
? fontSelect
: "Fasthand";
? fontSelect
: "Fasthand";
//creating span for getting text content width
const span = document.createElement("span");
@@ -256,7 +244,7 @@ function SignPad({
const PenColorComponent = (props) => {
return (
<div style={{ display: "flex", flexDirection: "row" }}>
<div className="flex flex-row items-start">
{allColor.map((data, key) => {
return (
<i
@@ -267,10 +255,10 @@ function SignPad({
key === 0 && penColor === "blue"
? "2px solid blue"
: key === 1 && penColor === "red"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
}}
onClick={() => {
props?.convertToImg &&
@@ -296,31 +284,12 @@ function SignPad({
return (
<div>
{isSignPad && (
<div className="modaloverlay">
<div className="modalcontainer">
<div
className="modalheader"
style={{ padding: "0 13px", marginTop: "5px" }}
>
<div className="modaltitle">
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
background: "white",
marginTop: "3px"
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "end",
gap: 10
}}
>
<div className="op-modal op-modal-open">
<div className="op-modal-box px-[13px] pt-2 pb-0">
<div className="flex justify-between text-base-content items-center">
<div className="text-[1.2rem]">
<div className="flex flex-row justify-between mt-[3px]">
<div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
{isStamp ? (
<span style={{ color: themeColor }} className="signTab">
{widgetType === "image"
@@ -347,12 +316,11 @@ function SignPad({
</span>
<div
style={{
border:
isTab === "draw"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
className={
isTab === "draw"
? "border-[1.5px] border-[#108783]"
: "border-[1.5px] border-[#ffffff]"
}
></div>
</div>
<div>
@@ -372,12 +340,11 @@ function SignPad({
Upload Image
</span>
<div
style={{
border:
isTab === "uploadImage"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
className={
isTab === "uploadImage"
? "border-[1.5px] border-[#108783]"
: "border-[1.5px] border-[#ffffff]"
}
></div>
</div>
<div>
@@ -399,12 +366,11 @@ function SignPad({
</span>
<div
style={{
border:
isTab === "type"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
className={
isTab === "type"
? "border-[1.5px] border-[#108783]"
: "border-[1.5px] border-[#ffffff]"
}
></div>
</div>
{!isInitial && defaultSign ? (
@@ -428,12 +394,11 @@ function SignPad({
My Signature
</span>
<div
style={{
border:
isTab === "mysignature"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
className={
isTab === "mysignature"
? "border-[1.5px] border-[#108783]"
: "border-[1.5px] border-[#ffffff]"
}
></div>
</div>
) : (
@@ -459,12 +424,11 @@ function SignPad({
My Initials
</span>
<div
style={{
border:
isTab === "mysignature"
? "1.5px solid #108783"
: "1.5px solid #ffffff"
}}
className={
isTab === "mysignature"
? "border-[1.5px] border-[#108783]"
: "border-[1.5px] border-[#ffffff]"
}
></div>
</div>
)
@@ -475,8 +439,7 @@ function SignPad({
</div>
</div>
<div
className="closebtn"
style={{ color: "black" }}
className="text-[1.5rem] cursor-pointer"
onClick={() => {
setPenColor("blue");
setIsSignPad(false);
@@ -493,10 +456,10 @@ function SignPad({
&times;
</div>
</div>
<div style={{ height: "100%", padding: 20 }}>
<div className="p-[20px] h-full">
{isDefaultSign ? (
<>
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="flex justify-center">
<div
style={{
border: "1.3px solid #007bff",
@@ -514,24 +477,19 @@ function SignPad({
>
<img
alt="stamp img"
style={{
width: "100%",
height: "100%",
background: "rgb(255, 255, 255)",
objectFit: "contain"
}}
className="w-full h-full object-contain bg-white"
draggable="false"
src={isInitial ? myInitial : defaultSign}
/>
</div>
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<div className="flex justify-end">
<SaveBtn />
</div>
</>
) : isImageSelect || isStamp ? (
!image ? (
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="flex justify-center">
<div
style={{
border: "1.3px solid #007bff",
@@ -562,7 +520,7 @@ function SignPad({
</div>
) : (
<>
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="flex justify-center">
<div
style={{
border: "1.3px solid #007bff",
@@ -581,39 +539,26 @@ function SignPad({
ref={imageRef}
src={image.src}
draggable="false"
style={{
objectFit: "contain",
height: "100%",
width: "100%"
}}
className=" object-contain h-full w-full"
/>
</div>
</div>
<div
style={{ display: "flex", justifyContent: "flex-end" }}
>
<div className="flex justify-end">
<SaveBtn />
</div>
</>
)
) : isTab === "type" ? (
<div>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center"
}}
>
<div className="flex justify-between items-center">
<span className="signatureText">
{isInitial ? "Initials" : "Signature"}:
</span>
<input
maxLength={isInitial ? 3 : 30}
style={{ fontFamily: fontSelect, color: penColor }}
type="text"
className="signatureInput"
className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
placeholder="Your signature"
value={signValue}
onChange={(e) => {
@@ -622,7 +567,6 @@ function SignPad({
}}
/>
</div>
<div className="fontOptionContainer">
{fontOptions.map((font, ind) => {
return (
@@ -653,21 +597,14 @@ function SignPad({
})}
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: "10px"
}}
>
<div className="flex flex-row justify-between mt-[10px]">
<PenColorComponent convertToImg={convertToImg} />
<SaveBtn />
</div>
</div>
) : (
<>
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="flex justify-center">
<SignatureCanvas
ref={canvasRef}
penColor={penColor}
@@ -687,14 +624,7 @@ function SignPad({
dotSize={1}
/>
</div>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: "10px"
}}
>
<div className="flex flex-row justify-between mt-[10px]">
<PenColorComponent />
<SaveBtn />
</div>
apps/OpenSign/src/components/pdf/Signedby.js
+7 -40
View File
@@ -1,5 +1,4 @@
import React from "react";
import { themeColor } from "../../constant/const";
import "../../styles/signature.css";
function Signedby({ pdfDetails }) {
const getFirstLetter = (name) => {
@@ -8,50 +7,18 @@ function Signedby({ pdfDetails }) {
};
return (
<div className="signerComponent">
<div
style={{
background: themeColor,
color: "white"
}}
className="signedStyle"
>
<div className="hidden md:block w-[180px] h-full bg-base-100">
<div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold">
Signed By
</div>
<div style={{ marginTop: "2px", background: "white" }}>
<div
style={{
display: "flex",
flexDirection: "row",
padding: "10px",
background: "#93a3db"
}}
>
<div
className="signerStyle"
style={{
background: "#abd1d0",
width: 20,
height: 20,
display: "flex",
borderRadius: 30 / 2,
justifyContent: "center",
alignItems: "center",
marginRight: "20px",
marginTop: "5px"
}}
>
<span
style={{
fontSize: "8px",
textAlign: "center",
fontWeight: "bold"
}}
>
<div className="mt-[2px] bg-base-100">
<div className="bg-[#93a3db] rounded-xl mx-1 flex flex-row items-center py-[10px]">
<div className="bg-[#576081] flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1">
<span className="text-[12px] text-center font-bold text-white uppercase">
{getFirstLetter(pdfDetails.ExtUserPtr.Name)}
</span>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="flex flex-col">
<span className="userName">{pdfDetails.ExtUserPtr.Name}</span>
<span className="useEmail">{pdfDetails.ExtUserPtr.Email}</span>
</div>
apps/OpenSign/src/components/pdf/SignerListPlace.js
+23 -22
View File
@@ -1,5 +1,4 @@
import React from "react";
// import { themeColor } from "../../constant/const";
import RecipientList from "./RecipientList";
import { Tooltip } from "react-tooltip";
@@ -57,27 +56,29 @@ function SignerListPlace(props) {
<div className="overflow-auto hide-scrollbar max-h-[180px]">
<RecipientList {...props} />
</div>
{props.handleAddSigner ? (
<div
role="button"
data-tut="reactourAddbtn"
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
disabled={props?.isMailSend ? true : false}
onClick={() => props.handleAddSigner()}
>
<i className="fa-solid fa-plus"></i> Add role
</div>
) : (
<div
role="button"
data-tut="reactourAddbtn"
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
disabled={props?.isMailSend ? true : false}
onClick={() => props.setIsAddSigner(true)}
>
<i className="fa-solid fa-plus"></i> Add recipients
</div>
)}
<div className="mx-1">
{props.handleAddSigner ? (
<div
role="button"
data-tut="reactourAddbtn"
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
disabled={props?.isMailSend ? true : false}
onClick={() => props.handleAddSigner()}
>
<i className="fa-solid fa-plus"></i> Add role
</div>
) : (
<div
role="button"
data-tut="reactourAddbtn"
className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
disabled={props?.isMailSend ? true : false}
onClick={() => props.setIsAddSigner(true)}
>
<i className="fa-solid fa-plus"></i> Add recipients
</div>
)}
</div>
</div>
);
}
apps/OpenSign/src/components/pdf/WidgetComponent.js
+14 -59
View File
@@ -9,7 +9,6 @@ import {
textWidget,
widgets
} from "../../constant/Utils";
import { themeColor } from "../../constant/const";
function WidgetComponent({
dragSignature,
signRef,
@@ -259,36 +258,18 @@ function WidgetComponent({
{isSigners && (
<div
data-tut={dataTut}
className="py-[10px] flex justify-center items-center op-card"
style={{
background: blockColor
? blockColor
: isSelectListId
? color[isSelectListId % color.length]
: color[0],
padding: "10px 20px",
display: "flex",
alignItems: "center",
justifyContent: "center"
: color[0]
}}
onClick={() => handleModal()}
>
<span
style={{
fontSize: "13px",
fontWeight: "700",
textAlign: "center"
}}
>
<span className="text-[13px] font-bold flex items-center">
{title ? title : "Recipient"}
</span>
<span
style={{
fontSize: "13px",
fontWeight: "700",
display: "flex",
alignItems: "center"
}}
>
{signersdata[isSelectListId]?.Role && (
<div>
{signersdata[isSelectListId]?.Name ? (
@@ -314,7 +295,7 @@ function WidgetComponent({
)}
</div>
)}
<div style={{ marginLeft: 6, fontSize: 16 }}>
<div className="ml-[6px] text-[16px]">
<i className="fa-solid fa-angle-down"></i>
</div>
</span>
@@ -333,25 +314,19 @@ function WidgetComponent({
setIsAddSigner && (
<div
data-tut="reactourAddbtn"
style={{
margin: "5px 0 5px 0",
backgroundColor: themeColor,
color: "white"
}}
className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
className="op-btn op-btn-primary w-full my-[2px]"
onClick={() => setIsAddSigner(true)}
>
<i className="fa-solid fa-plus"></i>
<span style={{ marginLeft: 2 }}>Add recipients</span>
<span>Add recipients</span>
</div>
)
)}
<div
ref={scrollContainerRef}
className="bg-white border-[2px] border-t-primary"
>
<div className="flex whitespace-nowrap overflow-x-scroll py-[10px] pr-[5px]">
<div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
<WidgetList
updateWidgets={updateWidgets}
handleDivClick={handleDivClick}
@@ -368,26 +343,13 @@ function WidgetComponent({
) : (
<div
data-tut={dataTut}
className={
isMailSend ? "disabled signerComponent " : "signerComponent"
}
// className="bg-base-100"
className={`${
isMailSend ? "bg-opacity-50 pointer-events-none" : ""
} hidden md:block w-[180px] h-full bg-base-100`}
>
<div
// 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>
<div className="text-base-content px-3 py-2 text-[15px] border-b-[1px] border-base-content">
<span>Fields</span>
</div>
{/* <div className="flex flex-col w-full h-auto my-3 items-center"> */}
<div className="flex flex-col items-center my-3">
<WidgetList
updateWidgets={updateWidgets}
@@ -405,7 +367,7 @@ function WidgetComponent({
handleClose={handleModal}
>
{signersdata.length > 0 ? (
<div style={{ maxHeight: "600px", overflow: "auto" }}>
<div className="max-h-[600px] overflow-auto pb-1">
<RecipientList
signerPos={signerPos}
signersdata={signersdata}
@@ -425,14 +387,7 @@ function WidgetComponent({
/>
</div>
) : (
<div
style={{
padding: 20,
fontSize: 15,
fontWeight: "500",
textAlign: "center"
}}
>
<div className=" p-[20px] text-[15px] font-medium text-center">
Please add a {title ? title : "recipients"}
</div>
)}
apps/OpenSign/src/pages/Login.js
+11 -8
View File
@@ -1158,17 +1158,20 @@ function Login() {
>
{state.loading ? "Loading..." : "Login"}
</button>
<NavLink
className="op-btn op-btn-secondary hover:no-underline hover:text-base-content"
to={
location.search
? "/signup" + location.search
: "/signup"
<button
type="button"
className="op-btn op-btn-secondary"
disabled={state.loading}
onClick={() =>
navigate(
location.search
? "/signup" + location.search
: "/signup"
)
}
style={width < 768 ? { textAlign: "center" } : {}}
>
Create Account
</NavLink>
</button>
</div>
</form>
{(appInfo.googleClietId || isEnableSubscription) && (
apps/OpenSign/src/pages/Opensigndrive.js
+23 -87
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from "react";
import "../styles/opensigndrive.css";
import loader from "../assets/images/loader2.gif";
import { themeColor, iconColor } from "../constant/const";
import { iconColor } from "../constant/const";
import { getDrive } from "../constant/Utils";
import { useNavigate } from "react-router-dom";
import Title from "../components/Title";
@@ -16,21 +16,8 @@ const DriveBody = React.lazy(
);
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="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0] ">
<div className="loader-37"></div>
</div>
);
};
@@ -451,21 +438,10 @@ function Opensigndrive() {
<React.Fragment key={id}>
<span
onClick={() => handleRoute(id, folderData)}
style={{
color: "#a64b4e",
fontWeight: "400",
cursor: "pointer"
}}
className="text-[#a64b4e] font-normal cursor-pointer"
>
{data.name}
<span
style={{
color: "#a64b4e",
fontWeight: "200",
cursor: "pointer",
margin: "0 4px"
}}
>
<span className="text-[#a64b4e] font-extralight cursor-pointer mx-[4px]">
&gt;
</span>
</span>
@@ -549,7 +525,6 @@ function Opensigndrive() {
<div className="bg-base-100 text-base-content rounded-xl w-full">
<Title title={"OpenSign™ Drive"} drive={true} />
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlert.isShow}
title={"Alert"}
handleClose={() => {
@@ -604,26 +579,14 @@ function Opensigndrive() {
onChange={(e) => handleFolderName(e)}
/>
<span className="text-[red] text-[12px] mt-[6px]">{error}</span>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<div style={{ display: "flex", flexDirection: "row" }}>
<button
style={{ background: themeColor }}
type="submit"
className="finishBtn"
>
<div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
<div className="flex flex-row">
<button type="submit" className="op-btn op-btn-primary">
Add
</button>
<button
type="button"
className="finishBtn cancelBtn"
className="op-btn op-btn-ghost ml-1"
onClick={oncloseFolder}
>
Close
@@ -688,32 +651,22 @@ function Opensigndrive() {
className="dropdown-item itemColor"
onClick={() => setIsFolder(true)}
>
<i
style={{ marginRight: "5px" }}
className="fa fa-plus"
aria-hidden="true"
></i>
<i className="fa fa-plus mr-[5px]" aria-hidden="true"></i>
Create folder
</span>
<span
className="dropdown-item itemColor"
onClick={() => navigate("/form/sHAnZphf69")}
>
<i
style={{ marginRight: "5px" }}
className="fas fa-pen-nib"
></i>
<i className="fas fa-pen-nib mr-[5px"></i>
Sign Yourself
</span>
<span
className="dropdown-item itemColor"
onClick={() => navigate("/form/8mZzFxbG1z")}
>
<i
style={{ marginRight: "5px" }}
className="fa fa-file-signature"
></i>
Request Signatures{" "}
<i className="fa fa-file-signature mr-[5px"></i>
Request Signatures
</span>
</div>
</div>
@@ -725,24 +678,15 @@ function Opensigndrive() {
>
<div
data-tut="reactourThird"
className=" sort "
className="sort "
data-toggle="dropdown"
>
<i
className="fa fa-sort-amount-asc"
className="fa fa-sort-amount-asc mr-[5px] text-[14px]"
aria-hidden="true"
style={{
marginRight: "5px",
fontSize: "14px",
color: `${iconColor}`
}}
style={{ color: `${iconColor}` }}
></i>
<span
style={{
fontSize: "15px",
color: `${iconColor}`
}}
>
<span style={{ fontSize: "15px", color: `${iconColor}` }}>
{selectedSort}
</span>
</div>
@@ -768,9 +712,8 @@ function Opensigndrive() {
>
{selectedSort === value && (
<i
className="fa fa-check"
className="fa fa-check mr-[5px"
aria-hidden="true"
style={{ marginRight: "5px" }}
></i>
)}
{value}
@@ -794,9 +737,8 @@ function Opensigndrive() {
>
{sortingOrder === order && (
<i
className="fa fa-check"
className="fa fa-check mr-[5px"
aria-hidden="true"
style={{ marginRight: "5px" }}
></i>
)}
{order}
@@ -834,16 +776,10 @@ function Opensigndrive() {
</div>
{pdfData && pdfData.length === 0 ? (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "50vh",
width: "100%"
}}
>
<span style={{ fontWeight: "bold" }}>No Data Found!</span>
<div className="flex justify-center items-center w-full h-[50vh]">
<span className="text-base-content font-bold">
No Data Found!
</span>
</div>
) : (
<div data-tut="reactourFifth">
apps/OpenSign/src/pages/PdfRequestFiles.js
+65 -183
View File
@@ -1161,9 +1161,9 @@ function PdfRequestFiles() {
await axios
.put(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
"_appName"
)}_Document/${documentId}`,
`${localStorage.getItem(
"baseUrl"
)}classes/contracts_Document/${documentId}`,
data,
{
headers: {
@@ -1394,32 +1394,19 @@ function PdfRequestFiles() {
) : (
<div>
{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>
)}
{isCelebration && (
<div style={{ position: "relative", zIndex: "1000" }}>
<div className="relative z-[1000]">
<Confetti
width={window.innerWidth}
height={window.innerHeight}
@@ -1428,7 +1415,7 @@ function PdfRequestFiles() {
)}
<div
className="relative flex flex-col md:flex-row justify-between bg-[#ebebeb]"
className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
style={{
pointerEvents:
isExpired ||
@@ -1440,7 +1427,6 @@ function PdfRequestFiles() {
>
{!requestSignTour && requestSignTourFunction()}
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlert.isShow}
title={"Alert message"}
handleClose={() => {
@@ -1450,28 +1436,15 @@ function PdfRequestFiles() {
});
}}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-full p-[20px]">
<p>{isAlert.alertMessage}</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={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
onClick={() =>
setIsAlert({ isShow: false, alertMessage: "" })
}
type="button"
className="finishBtn cancelBtn"
className="op-btn op-btn-primary"
>
Ok
</button>
@@ -1525,63 +1498,44 @@ function PdfRequestFiles() {
)}
<ModalUi
headerColor={defaultSignImg ? themeColor : "#dc3545"}
isOpen={defaultSignAlert.isShow}
title={"Auto sign"}
handleClose={() => {
setDefaultSignAlert({
isShow: false,
alertMessage: ""
});
}}
handleClose={() =>
setDefaultSignAlert({ isShow: false, alertMessage: "" })
}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-full p-[20px]">
<p>{defaultSignAlert.alertMessage}</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>
{defaultSignImg ? (
<>
<button
onClick={() => addDefaultSignature()}
style={{
background: themeColor
}}
type="button"
className="finishBtn"
className="op-btn op-btn-primary"
>
Yes
</button>
<button
onClick={() => {
onClick={() =>
setDefaultSignAlert({
isShow: false,
alertMessage: ""
});
}}
})
}
type="button"
className="finishBtn cancelBtn"
className="op-btn op-btn-secondary"
>
Close
</button>
</>
) : (
<button
onClick={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
onClick={() =>
setIsAlert({ isShow: false, alertMessage: "" })
}
type="button"
className="finishBtn cancelBtn"
className="op-btn op-btn-primary"
>
Ok
</button>
@@ -1621,7 +1575,7 @@ function PdfRequestFiles() {
"md:min-w-[440px] md:max-w-[400px]"
}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-full p-[20px] text-base-content">
{isCompleted?.message ? (
<p>{isCompleted?.message}</p>
) : (
@@ -1642,32 +1596,27 @@ function PdfRequestFiles() {
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="font-[500] text-[13px] mr-[5px] op-btn op-btn-secondary"
>
<i
className="fa-solid fa-award py-[3px]"
className="fa-solid fa-award"
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="font-[500] text-[13px] mr-[5px] op-btn op-btn-neutral"
>
<i
className="fa fa-print py-[3px]"
aria-hidden="true"
></i>
<span className="hidden lg:block ml-1">Print</span>
<i className="fa fa-print" aria-hidden="true"></i>
<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="font-[500] text-[13px] mr-[5px] op-btn op-btn-primary"
onClick={() =>
handleDownloadPdf(
pdfDetails,
@@ -1677,23 +1626,18 @@ function PdfRequestFiles() {
}
>
<i
className="fa fa-download py-[3px]"
className="fa fa-download"
aria-hidden="true"
></i>
<span className="hidden lg:block ml-1">
Download
</span>
<span className="hidden lg:block">Download</span>
</button>
</div>
)}
</div>
</ModalUi>
{isDownloading === "pdf" && (
<div className="fixed z-[1000] 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 z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
</div>
)}
<ModalUi
@@ -1789,63 +1733,37 @@ function PdfRequestFiles() {
)}
</div>
<div>
<div className="signerComponent">
<div className="hidden md:block w-[180px] h-full bg-base-100">
<div
style={{ maxHeight: window.innerHeight - 70 + "px" }}
className="autoSignScroll"
className="overflow-y-auto hide-scrollbar"
>
{signedSigners.length > 0 && (
<div data-tut="reactourSecond">
<div
style={{ background: themeColor }}
className="signedStyle"
>
<div className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold">
Signed by
</div>
<div style={{ marginTop: "2px" }}>
<div className="mt-[2px]">
{signedSigners.map((obj, ind) => {
return (
<div
className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
padding: "10px 0",
background: checkSignerBackColor(obj)
}}
key={ind}
>
<div
className="signerStyle"
className="flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1"
style={{
background: checkUserNameColor(obj),
width: 30,
height: 30,
display: "flex",
borderRadius: 30 / 2,
justifyContent: "center",
alignItems: "center",
margin: "0 10px 0 5px"
background: checkUserNameColor(obj)
}}
>
<span
style={{
fontSize: "12px",
textAlign: "center",
fontWeight: "bold",
color: "black",
textTransform: "uppercase"
}}
>
<span className="text-[12px] text-center font-bold text-white uppercase">
{getFirstLetter(obj?.Name || obj?.Role)}
</span>
</div>
<div
style={{
display: "flex",
flexDirection: "column"
}}
>
<div className="flex flex-col">
<span className="userName">
{obj?.Name || obj?.Role}
</span>
@@ -1863,60 +1781,35 @@ function PdfRequestFiles() {
{unsignedSigners.length > 0 && (
<div data-tut="reactourFirst">
<div
style={{
background: themeColor,
color: "white",
padding: "5px",
fontFamily: "sans-serif",
marginTop: signedSigners.length > 0 && "20px"
}}
className={`${
signedSigners?.length > 0
? "border-b-[1px] border-base-content"
: ""
} px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold`}
>
Yet to sign
</div>
<div style={{ marginTop: "5px" }}>
<div className="mt-[5px]">
{unsignedSigners.map((obj, ind) => {
return (
<div
className="rounded-xl mx-1 flex flex-row items-center py-[10px]"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
padding: "10px 0",
background: checkSignerBackColor(obj)
}}
key={ind}
>
<div
className="signerStyle"
className="flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1"
style={{
background: checkUserNameColor(obj),
width: 30,
height: 30,
display: "flex",
borderRadius: 30 / 2,
justifyContent: "center",
alignItems: "center",
margin: "0 10px 0 5px"
background: checkUserNameColor(obj)
}}
>
<span
style={{
fontSize: "12px",
textAlign: "center",
fontWeight: "bold",
color: "black",
textTransform: "uppercase"
}}
>
<span className="text-[12px] text-center font-bold text-black uppercase">
{getFirstLetter(obj?.Name || obj?.email)}
</span>
</div>
<div
style={{
display: "flex",
flexDirection: "column"
}}
>
<div className="flex flex-col">
<span className="userName">
{obj?.Name || obj?.Role}
</span>
@@ -1949,32 +1842,21 @@ function PdfRequestFiles() {
)}
<ModalUi
headerColor={"#dc3545"}
isOpen={validateAlert}
title={"Validation alert"}
handleClose={() => {
setValidateAlert(false);
}}
handleClose={() => setValidateAlert(false)}
>
<div style={{ height: "100%", padding: 20 }}>
<div className="h-[100%] p-[20px]">
<p>
The input does not meet the criteria set by the regular
expression.
</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
<button
onClick={() => setValidateAlert(false)}
type="button"
className="finishBtn cancelBtn"
className="op-btn op-btn-ghost"
>
Close
</button>
apps/OpenSign/src/pages/PlaceHolderSign.js
+69 -76
View File
@@ -1637,7 +1637,10 @@ function PlaceHolderSign() {
) : 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}
>
{isUiLoading && (
<div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
<img
@@ -1691,11 +1694,6 @@ function PlaceHolderSign() {
{/* this modal is used show alert set placeholder for all signers before send mail */}
<ModalUi
headerColor={
isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
? "#dc3545"
: isSendAlert.mssg === "confirm" && themeColor
}
isOpen={isSendAlert.alert}
title={
isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
@@ -1705,7 +1703,7 @@ function PlaceHolderSign() {
handleClose={() => setIsSendAlert({})}
showHeaderMessage={isSendAlert.mssg === "confirm"}
>
<div className="max-h-96 overflow-y-scroll scroll-hide p-[20px]">
<div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
{isSendAlert.mssg === "sure" ? (
<span>
Please ensure there&apos;s at least one signature widget
@@ -1716,75 +1714,69 @@ function PlaceHolderSign() {
) : (
isSendAlert.mssg === "confirm" && (
<>
<>
{!isCustomize && (
<span>
Are you sure you want to send out this document
for signatures?
</span>
)}
{isCustomize &&
(!isEnableSubscription || isSubscribe) && (
<>
<EmailBody
editorRef={editorRef}
requestBody={requestBody}
requestSubject={requestSubject}
handleOnchangeRequest={handleOnchangeRequest}
setRequestSubject={setRequestSubject}
/>
<div
className={
"flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
}
onClick={() => {
setRequestBody(defaultBody);
setRequestSubject(defaultSubject);
}}
>
<span>Reset to default</span>
</div>
</>
)}
<div
className={
"flex flex-row md:items-center gap-2 md:gap-6 mt-2"
}
>
<div className="flex flex-row gap-2">
<button
onClick={() => sendEmailToSigners()}
className="op-btn op-btn-primary font-[500] text-sm shadow"
{!isCustomize && (
<span>
Are you sure you want to send out this document for
signatures?
</span>
)}
{isCustomize &&
(!isEnableSubscription || isSubscribe) && (
<>
<EmailBody
editorRef={editorRef}
requestBody={requestBody}
requestSubject={requestSubject}
handleOnchangeRequest={handleOnchangeRequest}
setRequestSubject={setRequestSubject}
/>
<div
className={
"flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
}
onClick={() => {
setRequestBody(defaultBody);
setRequestSubject(defaultSubject);
}}
>
Send
</button>
{isCustomize && (
<button
onClick={() => setIsCustomize(false)}
className="op-btn op-btn-ghost font-[500] text-sm"
>
Close
</button>
)}
</div>
{!isCustomize &&
(isSubscribe || !isEnableSubscription) && (
<span
className="link link-primary text-sm"
onClick={() => setIsCustomize(!isCustomize)}
>
Cutomize Email
</span>
)}
{!isSubscribe && isEnableSubscription && (
<div className="mt-2">
<Upgrade message="Upgrade to customize Email" />
<span>Reset to default</span>
</div>
</>
)}
<div className="flex flex-row md:items-center gap-2 md:gap-6 mt-2">
<div className="flex flex-row gap-2">
<button
onClick={() => sendEmailToSigners()}
className="op-btn op-btn-primary font-[500] text-sm shadow"
>
Send
</button>
{isCustomize && (
<button
onClick={() => setIsCustomize(false)}
className="op-btn op-btn-ghost font-[500] text-sm"
>
Close
</button>
)}
</div>
</>
{!isCustomize &&
(isSubscribe || !isEnableSubscription) && (
<span
className="link link-primary text-sm"
onClick={() => setIsCustomize(!isCustomize)}
>
Cutomize Email
</span>
)}
{!isSubscribe && isEnableSubscription && (
<div className="mt-2">
<Upgrade message="Upgrade to customize Email" />
</div>
)}
</div>
</>
)
)}
@@ -1843,7 +1835,6 @@ function PlaceHolderSign() {
</div>
</ModalUi>
<ModalUi
headerColor={"#dc3545"}
isOpen={isShowEmail}
title={"signers alert"}
handleClose={() => {
@@ -2012,12 +2003,15 @@ function PlaceHolderSign() {
</div>
) : (
<div>
<div className="signerComponent" aria-disabled>
<div
className="hidden md:block w-[180px] h-full bg-base-100"
aria-disabled
>
<div
style={{
maxHeight: window.innerHeight - 70 + "px"
}}
className="autoSignScroll"
className="overflow-y-auto hide-scrollbar"
>
<SignerListPlace
signerPos={signerPos}
@@ -2063,7 +2057,6 @@ function PlaceHolderSign() {
</DndProvider>
<div>
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlreadyPlace.status}
title={"Document Alert"}
showClose={false}
apps/OpenSign/src/pages/PlanSubscriptions.js
+29 -51
View File
@@ -4,6 +4,7 @@ import checkmark from "../assets/images/checkmark.png";
import plansArr from "../json/plansArr";
import Title from "../components/Title";
import Parse from "parse";
import { openInNewTab } from "../constant/Utils";
const listItemStyle = {
paddingLeft: "20px", // Add padding to create space for the image
backgroundImage: `url(${checkmark})`, // Set your image as the list style image
@@ -84,55 +85,33 @@ const PlanSubscriptions = () => {
<>
<Title title={"Subscriptions"} />
{isLoader ? (
<div
style={{
height: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
>
<div
style={{
fontSize: "45px",
color: "#3dd3e0"
}}
className="loader-37"
></div>
<div className="flex items-center justify-center h-[full] text-[45px] text-[#3dd3e0]">
<div className="loader-37"></div>
</div>
) : (
<div
style={{
backgroundColor: "white",
overflowY: "auto",
maxHeight: "100%"
}}
>
<div className="overflow-y-auto max-h-full">
<div className="block my-2">
<div className="flex flex-col justify-center items-center w-full">
<div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
<span
<div
role="tablist"
className="op-tabs op-tabs-boxed bg-base-100 my-2 shadow-lg transition-all"
>
<a
onClick={() => setYearlyVisible(false)}
className={`${
!yearlyVisible
? "bg-[#002862] text-white"
: "bg-white text-black"
} px-4 py-1 rounded cursor-pointer`}
role="tab"
className={`${!yearlyVisible ? "op-tab-active" : ""} op-tab`}
>
Monthly
</span>
<span
</a>
<a
onClick={() => setYearlyVisible(true)}
className={`${
yearlyVisible
? "bg-[#002862] text-white"
: "bg-white text-black"
} px-4 py-1 rounded cursor-pointer`}
role="tab"
className={`${yearlyVisible ? "op-tab-active" : ""} op-tab`}
>
Yearly (10% off)
</span>
</a>
</div>
<ul className="flex flex-col md:flex-row h-full bg-white justify-center">
<ul className="op-card flex flex-col md:flex-row h-full bg-base-100 justify-center shadow-lg">
{plansArr.map((item) => (
<li
className="flex flex-col text-center border-collapse border-[1px] border-gray-300 max-w-[250px]"
@@ -207,9 +186,7 @@ const PlanSubscriptions = () => {
<ul className="mx-1 p-3 text-left break-words text-sm list-none">
{item.benefits.map((subitem, index) => (
<li style={listItemStyle} key={index} className="m-1">
<span style={{ position: "relative" }}>
{subitem}
</span>
<span className="relative">{subitem}</span>
</li>
))}
</ul>
@@ -217,22 +194,23 @@ const PlanSubscriptions = () => {
))}
</ul>
</div>
<div className="text-sm flex justify-center items-center">
<hr className="border-[1px] border-gray-300 w-[20%]" />
<span className="px-2 text-gray-500 cursor-default">or</span>
<hr className="border-[1px] border-gray-300 w-[20%]" />
<div className="text-sm flex justify-center items-center mt-3 mb-2">
<hr className="border-[2px] border-gray-350 w-[20%]" />
<span className="px-2 text-base-content cursor-default">or</span>
<hr className="border-[2px] border-gray-350 w-[20%]" />
</div>
<div className="flex flex-col justify-center w-full items-center">
<div className="flex flex-col justify-center items-center">
<h3 className="text-[#002862] mt-1 mb-2">
Host it yourself for free
</h3>
<NavLink
to={"https://github.com/OpenSignLabs/OpenSign"}
className="bg-[#002862] w-[200px] text-center text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
target={"_blank"}
<div
className="op-btn op-btn-primary w-[200px]"
onClick={() =>
openInNewTab("https://github.com/OpenSignLabs/OpenSign")
}
>
Visit Github
</NavLink>
</div>
</div>
</div>
</div>
apps/OpenSign/src/pages/Signup.js
+13 -14
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import Parse from "parse";
import axios from "axios";
import Title from "../components/Title";
import { useNavigate, NavLink, useLocation } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom";
import login_img from "../assets/images/login_img.svg";
import { useWindowSize } from "../hook/useWindowSize";
import Alert from "../primitives/Alert";
@@ -639,6 +639,7 @@ const Signup = () => {
<div className="mt-2.5 ml-1 flex flex-row items-center">
<input
type="checkbox"
className="op-checkbox op-checkbox-sm"
id="termsandcondition"
checked={isAuthorize}
onChange={(e) => setIsAuthorize(e.target.checked)}
@@ -672,19 +673,23 @@ const Signup = () => {
>
{state.loading ? "Loading..." : "Register"}
</button>
<NavLink
className={`op-btn op-btn-secondary hover:no-underline hover:text-base-content`}
to={location.search ? "/" + location.search : "/"}
<button
type="button"
className="op-btn op-btn-secondary"
disabled={state.loading}
onClick={() =>
navigate(location.search ? "/" + location.search : "/")
}
>
Login
</NavLink>
</button>
</div>
</form>
</div>
{width >= 768 && (
<div className="self-center">
<div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
<img src={login_img} alt="bisec" width="100%" />
<img src={login_img} alt="loader" width="100%" />
</div>
</div>
)}
@@ -694,14 +699,8 @@ const Signup = () => {
</div>
) : (
<div
style={{
position: "fixed",
fontSize: "50px",
color: "#3ac9d6",
top: "50%",
left: "45%"
}}
className="loader-37"
className="loader-37 fixed text-[50px] top-[50%] left-[45%]"
style={{ color: "#3ac9d6" }}
></div>
)}
</div>
apps/OpenSign/src/pages/SignyourselfPdf.js
+6 -6
View File
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
import { PDFDocument } from "pdf-lib";
import "../styles/signature.css";
import Parse from "parse";
import { isEnableSubscription, themeColor } from "../constant/const";
import { isEnableSubscription } from "../constant/const";
import Confetti from "react-confetti";
import axios from "axios";
import Loader from "../primitives/LoaderWithMsg";
@@ -1112,7 +1112,10 @@ function SignYourSelf() {
</div>
)}
<div className="signatureContainer" ref={divRef}>
<div
className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
ref={divRef}
>
{!isEmailVerified && (
<VerifyEmail
isVerifyModal={isVerifyModal}
@@ -1157,7 +1160,6 @@ function SignYourSelf() {
}}
>
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlert.isShow}
title={isAlert?.header || "Alert"}
handleClose={() => {
@@ -1310,7 +1312,7 @@ function SignYourSelf() {
maxHeight: window.innerHeight - 70 + "px",
backgroundColor: "white"
}}
className="autoSignScroll"
className="overflow-y-auto hide-scrollbar"
>
{!isCompleted ? (
<div>
@@ -1322,7 +1324,6 @@ function SignYourSelf() {
handleDivClick={handleDivClick}
handleMouseLeave={handleMouseLeave}
isDragSign={isDragSign}
themeColor={themeColor}
dragStamp={dragStamp}
dragRef={dragRef}
isDragStamp={isDragStamp}
@@ -1343,7 +1344,6 @@ function SignYourSelf() {
</div>
)}
<ModalUi
headerColor={"#dc3545"}
isOpen={validateAlert}
title={"Validation alert"}
handleClose={() => {
apps/OpenSign/src/pages/TemplatePlaceholder.js
+3 -8
View File
@@ -1257,7 +1257,6 @@ const TemplatePlaceholder = () => {
>
{/* this modal is used show alert set placeholder for all signers before send mail */}
<ModalUi
headerColor={"#dc3545"}
isOpen={isSendAlert}
title={"Fields required"}
handleClose={() => setIsSendAlert(false)}
@@ -1267,7 +1266,6 @@ const TemplatePlaceholder = () => {
</div>
</ModalUi>
<ModalUi
headerColor={"#dc3545"}
isOpen={!IsReceipent}
title={"Roles"}
handleClose={() => setIsReceipent(true)}
@@ -1312,7 +1310,6 @@ const TemplatePlaceholder = () => {
</ModalUi>
{isCreateDoc && <Loader isLoading={isLoading} />}
<ModalUi
headerColor={"#dc3545"}
isOpen={isShowEmail}
title={"signers alert"}
handleClose={() => {
@@ -1323,11 +1320,9 @@ const TemplatePlaceholder = () => {
<p>Please select signer for add placeholder!</p>
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
<button
onClick={() => {
setIsShowEmail(false);
}}
onClick={() => setIsShowEmail(false)}
type="button"
className="finishBtn cancelBtn"
className="op-btn op-btn-primary"
>
Ok
</button>
@@ -1480,7 +1475,7 @@ const TemplatePlaceholder = () => {
</div>
) : (
<div>
<div className="w-[180px] h-full bg-base-100">
<div className="hidden md:block w-[180px] h-full bg-base-100">
<div
style={{ maxHeight: window.innerHeight - 70 + "px" }}
className="overflow-y-auto hide-scrollbar"
apps/OpenSign/src/primitives/ModalUi.js
+2 -6
View File
@@ -6,14 +6,12 @@ const ModalUi = ({
children,
title,
isOpen,
headColor,
handleClose,
showHeader = true,
showClose = true,
reduceWidth,
showHeaderMessage
}) => {
const headerColor = headColor ? `text-${headColor}` : "text-base-content";
return (
<>
{isOpen && (
@@ -25,14 +23,12 @@ const ModalUi = ({
>
{showHeader && (
<>
<h3
className={`${headerColor} font-bold text-lg pt-[15px] px-[20px]`}
>
<h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
{title}
</h3>
{showClose && (
<button
className="op-btn op-btn-sm op-btn-circle op-btn-ghost absolute right-2 top-2"
className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
onClick={() => handleClose && handleClose()}
>
✕