diff --git a/apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdfkitAddPlaceholder.min.js b/apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdfkitAddPlaceholder.min.js index 21a62665e..261553ff8 100644 --- a/apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdfkitAddPlaceholder.min.js +++ b/apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdfkitAddPlaceholder.min.js @@ -1,28 +1,28 @@ -import{DEFAULT_BYTE_RANGE_PLACEHOLDER,DEFAULT_SIGNATURE_LENGTH,SUBFILTER_ADOBE_PKCS7_DETACHED}from"./const.min.js";import PDFKitReferenceMock from"./PDFKitReferenceMock.min.js";import PNG from"png-js";import zlib from"zlib";import fs from"node:fs";const specialCharacters=["á","Á","é","É","í","Í","ó","Ó","ö","Ö","ő","Ő","ú","Ú","ű","Ű"],MARKERS=[65472,65473,65474,65475,65477,65478,65479,65480,65481,65482,65483,65484,65485,65486,65487],COLOR_SPACE_MAP={1:"DeviceGray",3:"DeviceRGB",4:"DeviceCMYK"};function getImage(e,t){let n;if(255===e[0]&&216===e[1])n=getJpgImage(t,e);else{if(137!==e[0]||"PNG"!==e.toString("ascii",1,4))throw new Error("Unknown image format.");n=getPngImage(t,e)}return n}function getAnnotationApparance(e,t,n){return e.ref({CropBox:[0,0,197,70],Type:"XObject",FormType:1,BBox:[0,0,197,70],Resources:`<> /Font << /f1 ${n.index} 0 R >> ->>`,MediaBox:[0,0,197,70],Subtype:"Form"},null,getStream(t.index))}const getStream=e=>getConvertedText(` - 1.0 1.0 1.0 rg - 0.0 0.0 0.0 RG - q - q - 200 0 0 50 0 10 cm - /Img${e} Do - Q - 0 0 0 rg - BT - 0 Tr - /f1 10.0 Tf - 1.4 0 0 1 20 45.97412 Tm - ET - BT - 0 Tr - /f1 10.0 Tf - 1.4 0 0 1 20 33.56006 Tm - ET - Q`),getFont=(e,t)=>e.ref({Type:"Font",BaseFont:t,Encoding:"WinAnsiEncoding",Subtype:"Type1"}),getJpgImage=(e,t)=>{if(65496!==t.readUInt16BE(0))throw"SOI not found in JPEG";let n=2,a;for(;n{var t=new PNG(t),n=t.hasAlphaChannel,a={Type:"XObject",Subtype:"Image",BitsPerComponent:n?8:t.bits,Width:t.width,Height:t.height,Filter:"FlateDecode"};if(n||(r=e.ref({Predictor:15,Colors:t.colors,BitsPerComponent:t.bits,Columns:t.width}),a.DecodeParms=r),0===t.palette.length?a.ColorSpace=t.colorSpace:(r=e.ref({stream:new Buffer(t.palette)}),a.ColorSpace=["Indexed","DeviceRGB",t.palette.length/3-1,r]),null!=t.transparency.grayscale){var r=t.transparency.grayscale;a.Mask=[r,r]}else if(t.transparency.rgb){var o,r=t.transparency["rgb"],i=[];for(o of r)i.push(o,o);a.Mask=i}else t.transparency.indexed?loadIndexedAlphaChannel(t):n&&(splitAlphaChannel(t),r=getSmask(e,t),a.Mask=r);return e.ref(a,null,t.imgData)},loadIndexedAlphaChannel=e=>{const o=e.transparency.indexed;return e.decodePixels(n=>{var a=new Buffer(e.width*e.height);let r=0;for(let e=0,t=n.length;e{d.decodePixels(t=>{let e,n;var a=d.colors,r=d.width*d.height,o=new Buffer(r*a),i=new Buffer(r);let l=n=e=0;for(var g=t.length,c=16===d.bits?1:0;l{let n;return console.log("image.hasAlphaChannel ",t.hasAlphaChannel),t.hasAlphaChannel&&(console.log("image.alphaChannel ",t.alphaChannel),n=e.ref({Type:"XObject",Subtype:"Image",Height:t.height,Width:t.width,BitsPerComponent:8,Filter:"FlateDecode",ColorSpace:"DeviceGray",Decode:[0,1],stream:t.alphaChannel})),n},getConvertedText=e=>e.split("").map(e=>specialCharacters.includes(e)?getOctalCodeFromCharacter(e):e).join(""),getOctalCodeFromCharacter=e=>"\\"+e.charCodeAt(0).toString(8),pdfkitAddPlaceholder=({pdf:e,pdfBuffer:a,reason:r,contactInfo:t="emailfromp1289@gmail.com",name:n="Name from p12",location:o="Location from p12",signatureLength:i=DEFAULT_SIGNATURE_LENGTH,byteRangePlaceholder:l=DEFAULT_BYTE_RANGE_PLACEHOLDER,subFilter:g=SUBFILTER_ADOBE_PKCS7_DETACHED,sign:c})=>{var d=getFont(e,"Helvetica"),s=getFont(e,"ZapfDingbats"),f=getFont(e,"Helvetica"),p=c.Base64,p=getAnnotationApparance(e,getImage(Buffer.from(p,"base64"),e),f),f=e.ref({Type:"Sig",Filter:"Adobe.PPKLite",SubFilter:g,ByteRange:[0,l,l,l],Contents:Buffer.from(String.fromCharCode(0).repeat(i)),Reason:new String(r),M:new Date,ContactInfo:new String(t),Name:new String(n),Location:new String(o)}),h=a.lastIndexOf("/Type /AcroForm"),g=-1!==h;let m=[],C;if(g){let e=h;var S=h-10;let t="",n=11;for(n;n<22;n+=1){var A=a.slice(h-n,S).toString();if("\n"===A[0])break;t=A,e=h-n}l=a.slice(e),i=l.slice(0,l.indexOf("endobj")).toString(),r=(C=parseInt(t),i.slice(i.indexOf("/Fields [")+9,i.indexOf("]")));m=r.split(" ").filter((e,t)=>t%3==0).map(e=>new PDFKitReferenceMock(e))}m.length;t=c.Left,n=c.Bottom,o=t+c.Width,l=n+c.Height,i=e.ref({Type:"Annot",Subtype:"Widget",FT:"Sig",Rect:[t,n,o,l],V:f,T:new String("Signature"+(m.length+1)),F:4,P:e.page.dictionary,AP:`<>`,DA:new String("/Helvetica 0 Tf 0 g")});e.page.dictionary.data.Annots=[i];let T;return T=g?e.ref({Type:"AcroForm",SigFlags:3,Fields:[...m,i],DR:`<>`,MediaBox:[0,10,200,60],Subtype:"Form"},null,getStream(t.index))}const getStream=e=>getConvertedText(` + 1.0 1.0 1.0 rg + 0.0 0.0 0.0 RG + q + q + 200 0 0 50 0 10 cm + /Img${e} Do + Q + 0 0 0 rg + BT + 0 Tr + /f1 10.0 Tf + 1.4 0 0 1 20 45.97412 Tm + ET + BT + 0 Tr + /f1 10.0 Tf + 1.4 0 0 1 20 33.56006 Tm + ET + Q`),getFont=(e,t)=>e.ref({Type:"Font",BaseFont:t,Encoding:"WinAnsiEncoding",Subtype:"Type1"}),getJpgImage=(e,t)=>{if(65496!==t.readUInt16BE(0))throw"SOI not found in JPEG";let n=2,a;for(;n{var t=new PNG(t),n=t.hasAlphaChannel,a={Type:"XObject",Subtype:"Image",BitsPerComponent:n?8:t.bits,Width:t.width,Height:t.height,Filter:"FlateDecode"};if(n||(r=e.ref({Predictor:15,Colors:t.colors,BitsPerComponent:t.bits,Columns:t.width}),a.DecodeParms=r),0===t.palette.length?a.ColorSpace=t.colorSpace:(r=e.ref({stream:new Buffer(t.palette)}),a.ColorSpace=["Indexed","DeviceRGB",t.palette.length/3-1,r]),null!=t.transparency.grayscale){var r=t.transparency.grayscale;a.Mask=[r,r]}else if(t.transparency.rgb){var o,r=t.transparency["rgb"],i=[];for(o of r)i.push(o,o);a.Mask=i}else t.transparency.indexed?loadIndexedAlphaChannel(t):n&&(splitAlphaChannel(t),r=getSmask(e,t),a.Mask=r);return e.ref(a,null,t.imgData)},loadIndexedAlphaChannel=e=>{const o=e.transparency.indexed;return e.decodePixels(n=>{var a=new Buffer(e.width*e.height);let r=0;for(let e=0,t=n.length;e{d.decodePixels(t=>{let e,n;var a=d.colors,r=d.width*d.height,o=new Buffer(r*a),i=new Buffer(r);let l=n=e=0;for(var c=t.length,g=16===d.bits?1:0;l{let n;return console.log("image.hasAlphaChannel ",t.hasAlphaChannel),t.hasAlphaChannel&&(console.log("image.alphaChannel ",t.alphaChannel),n=e.ref({Type:"XObject",Subtype:"Image",Height:t.height,Width:t.width,BitsPerComponent:8,Filter:"FlateDecode",ColorSpace:"DeviceGray",Decode:[0,1],stream:t.alphaChannel})),n},getConvertedText=e=>e.split("").map(e=>specialCharacters.includes(e)?getOctalCodeFromCharacter(e):e).join(""),getOctalCodeFromCharacter=e=>"\\"+e.charCodeAt(0).toString(8),pdfkitAddPlaceholder=({pdf:e,pdfBuffer:a,reason:r,contactInfo:t="emailfromp1289@gmail.com",name:n="Name from p12",location:o="Location from p12",signatureLength:i=DEFAULT_SIGNATURE_LENGTH,byteRangePlaceholder:l=DEFAULT_BYTE_RANGE_PLACEHOLDER,subFilter:c=SUBFILTER_ADOBE_PKCS7_DETACHED,sign:g})=>{var d=getFont(e,"Helvetica"),s=getFont(e,"ZapfDingbats"),p=getFont(e,"Helvetica"),f=g.Base64,f=getAnnotationApparance(e,getImage(Buffer.from(f,"base64"),e),p,g),p=e.ref({Type:"Sig",Filter:"Adobe.PPKLite",SubFilter:c,ByteRange:[0,l,l,l],Contents:Buffer.from(String.fromCharCode(0).repeat(i)),Reason:new String(r),M:new Date,ContactInfo:new String(t),Name:new String(n),Location:new String(o)}),h=a.lastIndexOf("/Type /AcroForm"),c=-1!==h;let m=[],C;if(c){let e=h;var S=h-10;let t="",n=11;for(n;n<22;n+=1){var A=a.slice(h-n,S).toString();if("\n"===A[0])break;t=A,e=h-n}l=a.slice(e),i=l.slice(0,l.indexOf("endobj")).toString(),r=(C=parseInt(t),i.slice(i.indexOf("/Fields [")+9,i.indexOf("]")));m=r.split(" ").filter((e,t)=>t%3==0).map(e=>new PDFKitReferenceMock(e))}t=g.Left,n=g.Bottom,o=t+g.Width,l=n+g.Height,i=e.ref({Type:"Annot",Subtype:"Widget",FT:"Sig",Rect:[t,n,o,l],V:p,T:new String("Signature"+(m.length+1)),F:4,P:e.page.dictionary,AP:`<>`,DA:new String("/Helvetica 0 Tf 0 g")});e.page.dictionary.data.Annots=[i];let T;return T=c?e.ref({Type:"AcroForm",SigFlags:3,Fields:[...m,i],DR:`<> ->>`},C):e.ref({Type:"AcroForm",SigFlags:3,Fields:[...m,i]}),{signature:f,form:e._root.data.AcroForm=T,widget:i}};export default pdfkitAddPlaceholder; \ No newline at end of file +>>`},C):e.ref({Type:"AcroForm",SigFlags:3,Fields:[...m,i]}),{signature:p,form:e._root.data.AcroForm=T,widget:i}};export default pdfkitAddPlaceholder; \ No newline at end of file diff --git a/microfrontends/SignDocuments/package-lock.json b/microfrontends/SignDocuments/package-lock.json index 30f707e44..4945bb084 100644 --- a/microfrontends/SignDocuments/package-lock.json +++ b/microfrontends/SignDocuments/package-lock.json @@ -36,6 +36,7 @@ "react-scrollbars-custom": "^4.1.1", "react-signature-canvas": "^1.0.6", "reactour": "^1.19.1", + "select-dom": "^9.0.0", "web-vitals": "^2.1.4" } }, @@ -18702,6 +18703,20 @@ "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.0.1.tgz", "integrity": "sha512-HSdN78VMvFCSGCkh0oYX/tY4R3P1DW61f8+TeZZ4j2VLgfwvw0bpRSOv4PCVKisktIwbzHCfZsx+rLbbDBqIBA==" }, + "node_modules/select-dom": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/select-dom/-/select-dom-9.0.0.tgz", + "integrity": "sha512-AD1NfASSwJQc1Sy713R1vT9CMmUSUo2tg0j1FtkRGIxllTphDrkuH2pYYvhRlGaoq3pS6tcKkKS/diEZLy+7BQ==", + "dependencies": { + "typed-query-selector": "^2.11.0" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/fregante" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -20203,6 +20218,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typed-query-selector": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.11.0.tgz", + "integrity": "sha512-qBs4sfmnLlPOyo2oSdvHbIFHe2CPgU54/1UGfSNceb7LARpIEVxUaeRX0Doje6oKpuySS2stqy90R3YrynR8Kg==" + }, "node_modules/typedarray-to-buffer": { "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", @@ -21527,4 +21547,4 @@ } } } -} +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/package.json b/microfrontends/SignDocuments/package.json index 97970e988..5bc6f7685 100644 --- a/microfrontends/SignDocuments/package.json +++ b/microfrontends/SignDocuments/package.json @@ -32,6 +32,7 @@ "react-scrollbars-custom": "^4.1.1", "react-signature-canvas": "^1.0.6", "reactour": "^1.19.1", + "select-dom": "^9.0.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index bfcfd7cb3..d26887d24 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -12,9 +12,11 @@ import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { + convertPNGtoJPEG, contractDocument, getBase64FromIMG, - getBase64FromUrl + getBase64FromUrl, + urlValidator } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -346,38 +348,13 @@ function PdfRequestFiles() { imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; - const checkUrl = ImgUrl.includes("https:"); + const checkUrl = urlValidator(ImgUrl); //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } //function for called convert png signatre to jpeg in base 64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -433,32 +410,21 @@ function PdfRequestFiles() { const images = await Promise.all( imgUrlList.map(async (url) => { let signUrl = url.SignUrl; - - const checkUrl = url.SignUrl.includes("https:"); + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } + const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; } const res = await fetch(signUrl); - return res.arrayBuffer(); }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } - + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 2b5eebdc8..76b74b642 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -15,7 +15,7 @@ import EmailComponent from "./component/emailComponent"; import FieldsComponent from "./component/fieldsComponent"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; -import { contractDocument, getBase64FromIMG } from "../utils/Utils"; +import { convertPNGtoJPEG, contractDocument, getBase64FromIMG } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; import { onSaveImage, onSaveSign } from "../utils/Utils"; @@ -24,7 +24,9 @@ import HandleError from "./component/HandleError"; import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; -import { contractUsers, contactBook } from "../utils/Utils"; +import { contractUsers, contactBook, urlValidator } from "../utils/Utils"; +import { modalAlign } from "../utils/Utils"; +import { $ } from 'select-dom'; //For signYourself inProgress section signer can add sign and complete doc sign. function SignYourSelf() { const [pdfDetails, setPdfDetails] = useState([]); @@ -444,39 +446,13 @@ function SignYourSelf() { imgUrlList.map(async (data) => { let ImgUrl = data.SignUrl; //cheking signUrl is defau;t signature url of custom url - const checkUrl = ImgUrl.includes("https:"); + const checkUrl = urlValidator(ImgUrl); //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } - //function for convert signature png base64 url to jpeg base64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -524,7 +500,12 @@ function SignYourSelf() { imgUrlList.map(async (url) => { let signUrl = url.SignUrl; - const checkUrl = url.SignUrl.includes("https:"); + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } + const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; } @@ -534,21 +515,7 @@ function SignYourSelf() { }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } - + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; @@ -1020,7 +987,11 @@ function SignYourSelf() { > {/* this modal is used show this document is already sign */} - + modalAlign()} + backdropClassName="signature-backdrop" + > Sign Documents diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 0b9a106c9..801a30a54 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -14,9 +14,12 @@ import DefaultSignature from "./component/defaultSignature"; import { getBase64FromUrl, getBase64FromIMG, + contactBookName, + convertPNGtoJPEG, contractUsers, contactBook, - contractDocument + contractDocument, + urlValidator } from "../utils/Utils"; import Tour from "reactour"; import Signedby from "./component/signedby"; @@ -27,6 +30,7 @@ import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; +import { modalAlign } from "../utils/Utils"; function EmbedPdfImage() { const { id, contactBookId } = useParams(); const [isSignPad, setIsSignPad] = useState(false); @@ -445,38 +449,13 @@ function EmbedPdfImage() { imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; - const checkUrl = ImgUrl.includes("https:"); + const checkUrl = urlValidator(ImgUrl); //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } - //function for called convert png signatre to jpeg in base 64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - + //function for convert signature png base64 url to jpeg base64 convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -523,7 +502,12 @@ function EmbedPdfImage() { const images = await Promise.all( imgUrlList.map(async (url) => { let signUrl = url.SignUrl; - const checkUrl = url.SignUrl.includes("https:"); + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } + const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; } @@ -533,20 +517,7 @@ function EmbedPdfImage() { }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height @@ -1017,7 +988,11 @@ function EmbedPdfImage() { }} > {/* this modal is used show this document is already sign */} - + modalAlign()} + backdropClassName="signature-backdrop" + > Sign Documents @@ -1132,4 +1107,5 @@ function EmbedPdfImage() { ); } + export default EmbedPdfImage; diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 273b6990e..cda96f958 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -626,10 +626,9 @@ option { padding: 16px; } - /* The sticky class is added to the navbar + /* The sticky class is added to the navbar with JS when it reaches its scroll position */ .stickyHead { - position: fixed; top: 50px; left: 0.9rem; } @@ -644,9 +643,9 @@ option { right: 0rem; } - /* Add some top padding to the page content - to prevent sudden quick movement (as the - navigation bar gets a new position at the top of the + /* Add some top padding to the page content + to prevent sudden quick movement (as the + navigation bar gets a new position at the top of the page (position:fixed and top:0) */ .stickyHead+.content { padding-top: 60px; @@ -776,4 +775,14 @@ option { .mobileHead { display: flex; } +} + +.signature-backdrop { + position: fixed; + top: 0; bottom: 0; left: 0; right: 0; + background-color: #000; +} + +.signature-backdrop.fade.in { + opacity: 0.5; } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index ecf6d0359..a78fc3e94 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1,4 +1,5 @@ import axios from "axios"; +import { $ } from 'select-dom'; export async function getBase64FromUrl(url) { const data = await fetch(url); @@ -28,13 +29,35 @@ export async function getBase64FromIMG(url) { }; }); } +//function for convert signature png base64 url to jpeg base64 +export const convertPNGtoJPEG = (base64Data) => { + return new Promise((resolve, reject) => { + const canvas = document.createElement("canvas"); + const img = new Image(); + img.src = base64Data; + + img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + + const ctx = canvas.getContext("2d"); + ctx.fillStyle = "#ffffff"; // white color + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.drawImage(img, 0, 0); + // Convert to JPEG by using the canvas.toDataURL() method + const jpegBase64Data = canvas.toDataURL("image/jpeg"); + + resolve(jpegBase64Data); + }; + + img.onerror = (error) => { + reject(error); + }; + }); +}; export function getHostUrl() { const hostUrl = window.location.href; - /// const hostUrl = "https://contracts-defaultssty.qik.ai/#/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive"; - // const hostUrl = "https://contracts-defaultssty.qik.ai/#/" - // const hostUrl = "https://lionfish-app-75ly7.ondigitalocean.app/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive" - //const hostUrl = "https://app.opensignlabs.com/rpmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/draftDocument"; if (hostUrl) { const urlSplit = hostUrl.split("/"); @@ -299,3 +322,23 @@ export const contactBook = async (objectId) => { }); return result; }; + +// function for validating URLs +export function urlValidator(url) { + try { + const newUrl = new URL(url); + return newUrl.protocol === 'http:' || newUrl.protocol === 'https:'; + } catch (err) { + return false; + } +} +export function modalAlign() { + let modalDialog = $('.modal-dialog').getBoundingClientRect(); + let mobileHead = $('.mobileHead').getBoundingClientRect() + let modal = $('.modal-dialog'); + if (modalDialog.left < mobileHead.left) { + let leftOffset = mobileHead.left - modalDialog.left; + modal.style.left = leftOffset + 'px'; + modal.style.top = (window.innerHeight/3) + 'px'; + } +};