diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index 926bc2c56..68011e88d 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/apps/OpenSign/src/components/pdf/Placeholder.js @@ -725,7 +725,9 @@ function Placeholder(props) { : props?.pos?.zIndex ? props.pos.zIndex : "5", - background: props.data ? props.data.blockColor : "rgb(203 233 237)" + background: props.data + ? props.data?.blockColor + "b0" + : "rgba(203, 233, 237, 0.69)" }} onDrag={() => { setDraggingEnabled(true); diff --git a/apps/OpenSign/src/components/pdf/SignPad.js b/apps/OpenSign/src/components/pdf/SignPad.js index 37772445c..d38048efa 100644 --- a/apps/OpenSign/src/components/pdf/SignPad.js +++ b/apps/OpenSign/src/components/pdf/SignPad.js @@ -596,7 +596,7 @@ function SignPad({ borderRadius: "2px" } }} - backgroundColor="rgb(255, 255, 255)" + // backgroundColor="rgb(255, 255, 255)" onEnd={() => handleSignatureChange(canvasRef.current?.toDataURL()) } diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index c900b3c70..57ef0c0cf 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -1350,11 +1350,6 @@ export const multiSignEmbed = async ( widgetsPositionArr.map(async (url) => { let signUrl = url.SignUrl && url.SignUrl; if (signUrl) { - if (url.ImageType === "image/png") { - //function for convert signature png base64 url to jpeg base64 - const newUrl = await convertPNGtoJPEG(signUrl); - signUrl = newUrl; - } const res = await fetch(signUrl); return res.arrayBuffer(); } @@ -1364,19 +1359,14 @@ export const multiSignEmbed = async ( widgetsPositionArr.forEach(async (position, id) => { let img; if (["signature", "stamp", "initials", "image"].includes(position.type)) { - if ( - (position.ImageType && position.ImageType === "image/png") || - position.ImageType === "image/jpeg" - ) { + if (position.ImageType && position.ImageType === "image/jpeg") { img = await pdfDoc.embedJpg(images[id]); } else { img = await pdfDoc.embedPng(images[id]); } } else if (!position.type) { - if ( - (position.ImageType && position.ImageType === "image/png") || - position.ImageType === "image/jpeg" - ) { + // to handle old widget when only stamp and signature are exists + if (position.ImageType && position.ImageType === "image/jpeg") { img = await pdfDoc.embedJpg(images[id]); } else { img = await pdfDoc.embedPng(images[id]); diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js index 9d8b8fead..fc905a002 100644 --- a/apps/OpenSign/src/pages/Managesign.js +++ b/apps/OpenSign/src/pages/Managesign.js @@ -2,12 +2,13 @@ import React, { useState, useRef, useEffect } from "react"; import SignatureCanvas from "react-signature-canvas"; import "../styles/managesign.css"; import "../styles/signature.css"; -import { toDataUrl } from "../constant/Utils"; +import { generateTitleFromFilename, toDataUrl } from "../constant/Utils"; import Parse from "parse"; import { SaveFileSize } from "../constant/saveFileSize"; import Alert from "../primitives/Alert"; import Loader from "../primitives/Loader"; import { useTranslation } from "react-i18next"; +import sanitizeFileName from "../primitives/sanitizeFileName"; const ManageSign = () => { const { t } = useTranslation(); const [penColor, setPenColor] = useState("blue"); @@ -46,14 +47,22 @@ const ManageSign = () => { if (signRes) { const res = signRes.toJSON(); setId(res.objectId); - setSignName(res?.SignatureName); - setImage(res.ImageURL); + if (res?.SignatureName) { + const sanitizename = generateTitleFromFilename(res?.SignatureName); + const replaceSpace = sanitizeFileName(sanitizename); + setSignName(replaceSpace); + } + setImage(res?.ImageURL); if (res && res.Initials) { setInitials(res.Initials); setIsInitials(true); } } else { - setSignName(User?.get("name") || ""); + if (User?.get("name")) { + const sanitizename = generateTitleFromFilename(User?.get("name")); + const replaceSpace = sanitizeFileName(sanitizename); + setSignName(replaceSpace); + } } setIsLoader(false); } catch (err) { @@ -87,7 +96,9 @@ const ManageSign = () => { initailsRef.current.clear(); } setInitials(""); - setIsValue(true); + if (image) { + setIsValue(true); + } setIsInitials(false); }; @@ -101,34 +112,39 @@ const ManageSign = () => { const base64Img = await toDataUrl(file); setImage(base64Img); setIsValue(true); + } else { + setImage(""); + setIsValue(false); } }; const handleSubmit = async (e) => { e.preventDefault(); - const isUrl = image.includes("https"); + const isUrl = image.includes("https") || image.includes("http"); if (!isvalue) { setWarning(true); setTimeout(() => setWarning(false), 1000); } else { setIsLoader(true); - const replaceSpace = signName.replace(/ /g, "_"); + const sanitizename = generateTitleFromFilename(signName); + const replaceSpace = sanitizeFileName(sanitizename); let file; if (signature) { file = base64StringtoFile(signature, `${replaceSpace}_sign.png`); } else { - if (!isUrl) { + if (image && !isUrl) { file = base64StringtoFile(image, `${replaceSpace}__sign.png`); } } let imgUrl; - if (!isUrl) { + if (file && !isUrl) { imgUrl = await uploadFile(file); } else { imgUrl = image; } let initialsUrl = ""; - const isInitialsUrl = Initials.includes("https"); + const isInitialsUrl = + Initials.includes("https") || Initials.includes("http"); if (!isInitialsUrl && Initials) { const initialsImg = base64StringtoFile( Initials, @@ -146,7 +162,7 @@ const ManageSign = () => { } }; function base64StringtoFile(base64String, filename) { - var arr = base64String.split(","), + let arr = base64String.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, @@ -182,7 +198,7 @@ const ManageSign = () => { const updateSign = new Parse.Object(signCls); updateSign.id = id; updateSign.set("Initials", obj.initialsUrl ? obj.initialsUrl : ""); - updateSign.set("ImageURL", obj.url); + updateSign.set("ImageURL", obj.url ? obj.url : ""); updateSign.set("SignatureName", obj.name); updateSign.set("UserId", userId); const res = await updateSign.save(); @@ -281,7 +297,7 @@ const ManageSign = () => { height: "180px", className: "signatureCanvas rounded-box" }} - backgroundColor="rgb(255, 255, 255)" + // backgroundColor="rgb(255, 255, 255)" onEnd={() => handleSignatureChange(canvasRef.current.toDataURL()) } @@ -376,7 +392,7 @@ const ManageSign = () => { canvasProps={{ className: "intialSignature rounded-box" }} - backgroundColor="rgb(255, 255, 255)" + // backgroundColor="rgb(255, 255, 255)" onEnd={() => handleInitialsChange(initailsRef.current.toDataURL()) } diff --git a/apps/OpenSign/src/styles/managesign.css b/apps/OpenSign/src/styles/managesign.css index a32f9bb71..a15c18073 100644 --- a/apps/OpenSign/src/styles/managesign.css +++ b/apps/OpenSign/src/styles/managesign.css @@ -4,7 +4,6 @@ border: 1px solid black; background: white; border-radius: 5px; - animation: inAnimation 2s ease-in-out; z-index: 1; }