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

Merge pull request #6 from OpenSignLabs/staging

Browse Source 
sync fork
This commit is contained in:
prafull-opensignlabs
2023-11-05 10:35:28 +05:30
committed by GitHub
parent e8350c331d a7d0b10c95
commit f1f4b0f7a2
17 changed files with 1710 additions and 1713 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -2,7 +2,7 @@
<div align="center">
The free open source alternative to DocuSign | PandaDoc | SignNow | Adobe Sign | Smartwaiver | SignRequest | HelloSign | Zoho sign.
The free and open source alternative to DocuSign
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/opensignlabs/opensign.svg)](http://isitmaintained.com/project/opensignlabs/opensign "Average time to resolve an issue")
[![All Contributors](https://img.shields.io/github/all-contributors/opensignlabs/opensign?color=ee8449&style=flat-square)](#contributors)
@@ -23,7 +23,7 @@ The free open source alternative to DocuSign | PandaDoc | SignNow | Adobe Sign |
<a href="https://www.linkedin.com/company/opensign%E2%84%A2/about/">LinkedIn</a>
## An Open-Source Alternative to DocuSign, PandaDoc, SignNow, Adobe Sign, Smartwaiver, SignRequest, and HelloSign
## An open-source document e-signing solution
---
</div>
microfrontends/SignDocuments/src/Component/Certificate/Certificate.js
+37 -32
View File
@@ -33,23 +33,23 @@ function Certificate({ pdfData }) {
page: {
borderRadius: "5px",
padding: "10px",
backgroundColor: "white",
backgroundColor: "white"
},
section1: {
border: "1px solid rgb(177, 174, 174)",
padding: "20px",
padding: "20px"
},
textStyle: {
fontWeight: "bold",
fontSize: "11px",
marginBottom: "10px",
marginBottom: "10px"
},
textStyle2: {
fontWeight: "600",
fontSize: "11px",
marginBottom: "10px",
color: "gray",
},
color: "gray"
}
});
const generatedDate = () => {
@@ -57,7 +57,7 @@ function Certificate({ pdfData }) {
const localExpireDate = newDate.toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
year: "numeric"
});
var currentOffset = newDate.getTimezoneOffset();
@@ -79,7 +79,7 @@ function Certificate({ pdfData }) {
textAlign: "right",
color: "gray",
fontSize: "10px",
marginBottom: "30px",
marginBottom: "30px"
}}
>
Generated On {localExpireDate} {hoursIST}:{minutesIST} IST
@@ -92,7 +92,7 @@ function Certificate({ pdfData }) {
const localExpireDate = newDate.toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
year: "numeric"
});
var currentOffset = newDate.getTimezoneOffset();
@@ -136,7 +136,7 @@ function Certificate({ pdfData }) {
)
);
};
return (
isLoad && (
<Document>
@@ -151,7 +151,7 @@ function Certificate({ pdfData }) {
fontSize: "20px",
fontWeight: "bold",
color: "#31bceb",
marginBottom: "10px",
marginBottom: "10px"
}}
>
{" "}
@@ -165,7 +165,7 @@ function Certificate({ pdfData }) {
fontSize: "16px",
fontWeight: "bold",
color: "#31bceb",
margin: "10px 0px 10px 0px",
margin: "10px 0px 10px 0px"
}}
>
Summary
@@ -203,36 +203,40 @@ function Certificate({ pdfData }) {
fontSize: "16px",
fontWeight: "bold",
color: "#31bceb",
margin: "10px 0px 10px 0px",
margin: "10px 0px 10px 0px"
}}
>
Recipients
</Text>
<View>
{multiSigner && multiSigner.map((data, ind) => {
return (
<View
key={ind}
style={{ display: "flex", flexDirection: "column" }}
>
{multiSigner &&
multiSigner.map((data, ind) => {
return (
<View
key={ind}
style={{
border: "0.4px solid #bdbbbb",
marginBottom: "10px",
display: "flex",
flexDirection: "column"
}}
></View>
{signerName(data)}
>
<View
style={{
border: "0.4px solid #bdbbbb",
marginBottom: "10px"
}}
></View>
{signerName(data)}
<Text style={styles.textStyle}>
Accessed from : &nbsp;
<Text style={styles.textStyle2}>
{data.ipAddress}
<Text style={styles.textStyle}>
Accessed from : &nbsp;
<Text style={styles.textStyle2}>
{data.ipAddress}
</Text>
</Text>
</Text>
</View>
);
})}
</View>
);
})}
</View>
</View>
) : (
@@ -242,7 +246,7 @@ function Certificate({ pdfData }) {
fontSize: "16px",
fontWeight: "bold",
color: "#31bceb",
margin: "10px 0px 10px 0px",
margin: "10px 0px 10px 0px"
}}
>
Recipients
@@ -259,7 +263,8 @@ function Certificate({ pdfData }) {
<Text style={styles.textStyle}>
Accessed from : &nbsp;
<Text style={styles.textStyle2}>
{pdfData[0].AuditTrail && pdfData[0].AuditTrail[0].ipAddress}
{pdfData[0].AuditTrail &&
pdfData[0].AuditTrail[0].ipAddress}
</Text>
</Text>
microfrontends/SignDocuments/src/Component/DraftDocument.js
+2 -7
View File
@@ -42,7 +42,7 @@ function DraftDocument() {
.then((Listdata) => {
const json = Listdata.data;
const res = json.results;
// console.log("res", res);
if (res[0] && res.length > 0) {
setPdfDetails(res);
const loadObj = {
@@ -74,20 +74,16 @@ function DraftDocument() {
//checking document is completed and signer exist then navigate to pdfRequestFiles file
if (data.IsCompleted && checkSignerExist) {
// window.location.hash = `/pdfRequestFiles`;
navigate(`${hostUrl}pdfRequestFiles`);
navigate(`${hostUrl}pdfRequestFiles`);
}
//checking document is completed and signer does not exist then navigate to recipientSignPdf file
else if (data.IsCompleted && !checkSignerExist) {
// window.location.hash = `/recipientSignPdf/${data.objectId}/${data.ExtUserPtr.Phone}`;
navigate(
`${hostUrl}signaturePdf`
);
}
//checking document is declined by someone then navigate to pdfRequestFiles file
else if (isDecline) {
// window.location.hash = `/pdfRequestFiles`;
navigate(`${hostUrl}pdfRequestFiles`);
}
//checking document has expired and signers exist and placeholder does not set yet then navigate to pdfRequestFiles file
@@ -97,7 +93,6 @@ function DraftDocument() {
checkSignerExist &&
!isPlaceholder
) {
// window.location.hash = `/placeHolderSign`;
navigate(`${hostUrl}placeHolderSign`);
}
//checking document has expired and signers does not exist and document not signed yet then navigate to pdfRequestFiles file
microfrontends/SignDocuments/src/Component/ManageSign.js
+2 -7
View File
@@ -8,7 +8,7 @@ import "../css/signature.css";
import axios from "axios";
import { toDataUrl } from "../utils/toDataUrl";
// console.log("appName ", appName)
const ManageSign = () => {
let appName;
const [penColor, setPenColor] = useState("blue");
@@ -68,7 +68,6 @@ const ManageSign = () => {
if (res.data.results.length > 0) {
setId(res.data.results[0].objectId);
setSignName(res.data.results[0].SignatureName);
// console.log(res.data.results[0].ImageURL);
setImage(res.data.results[0].ImageURL);
if (res.data.results[0] && res.data.results[0].Initials) {
setInitials(res.data.results[0].Initials);
@@ -143,7 +142,7 @@ const ManageSign = () => {
if (!signName) {
setNameWarning(true);
// setTimeout(() => setNameWarning(false), 1000);
} else if (!isvalue) {
setWarning(true);
setTimeout(() => setWarning(false), 1000);
@@ -337,12 +336,8 @@ const ManageSign = () => {
<div
className="mainDiv"
style={{
// height: "100%",
width: "100%",
paddingRight: "10px",
// maxHeight:"500px",
}}
>
<div style={{ margin: 20 }}>
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+160 -56
View File
@@ -12,8 +12,6 @@ import { useParams } from "react-router-dom";
import SignPad from "./component/signPad";
import RenderAllPdfPage from "./component/renderAllPdfPage";
import {
contactBook,
contractUsers,
getBase64FromIMG,
getBase64FromUrl
} from "../utils/Utils";
@@ -65,6 +63,7 @@ function PdfRequestFiles() {
});
const [isSigned, setIsSigned] = useState(false);
const [isExpired, setIsExpired] = useState(false);
const [alreadySign, setAlreadySign] = useState(false);
const rowLevel =
localStorage.getItem("rowlevel") &&
@@ -89,6 +88,7 @@ function PdfRequestFiles() {
const clientWidth = window.innerWidth;
const value = docId ? 80 : 30;
const pdfWidth = clientWidth - 160 - 200 - value;
//160 is width of left side, 200 is width of right side component and 50 is space of middle compoent
//pdf from left and right component
setPdfNewWidth(pdfWidth);
@@ -99,27 +99,6 @@ function PdfRequestFiles() {
//function for get document details for perticular signer with signer'object id
const getDocumentDetails = async () => {
const contractUsersRes = await contractUsers(jsonSender.objectId);
if (contractUsersRes && contractUsersRes[0]) {
const objId = contractUsersRes[0].objectId;
setSignerObjectId(objId);
} else if (contractUsersRes === "Error: Something went wrong!") {
const loadObj = {
isLoad: false
};
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
} else if (contractUsersRes.length === 0) {
const contractContactBook = await contactBook(jsonSender.objectId);
if (contractContactBook && contractContactBook[0]) {
const objId = contractUsersRes[0].objectId;
setSignerObjectId(objId);
}
}
await axios
.get(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -136,13 +115,24 @@ function PdfRequestFiles() {
.then((Listdata) => {
const json = Listdata.data;
const res = json.results;
// console.log("res", res);
if (res[0] && res.length > 0) {
const isCompleted = res[0].IsCompleted && res[0].IsCompleted;
const expireDate = res[0].ExpiryDate.iso;
const declined = res[0].IsDeclined && res[0].IsDeclined;
const expireUpdateDate = new Date(expireDate).getTime();
const currDate = new Date().getTime();
const getSigners = res[0].Signers;
const getCurrentSigner =
getSigners &&
getSigners.filter(
(data) => data.UserId.objectId === jsonSender.objectId
);
const currUserId = getCurrentSigner[0]
? getCurrentSigner[0].objectId
: "";
setSignerObjectId(currUserId);
if (res[0].SignedUrl) {
setPdfUrl(res[0].SignedUrl);
} else {
@@ -154,6 +144,7 @@ function PdfRequestFiles() {
isCertificate: true,
isModal: true
};
setAlreadySign(true);
setIsCompleted(data);
} else if (declined) {
const currentDecline = {
@@ -173,17 +164,34 @@ function PdfRequestFiles() {
(data) => data.Activity === "Signed"
);
const checkAlreadySign =
json.results[0].AuditTrail &&
json.results[0].AuditTrail.length > 0 &&
json.results[0].AuditTrail.filter(
(data) =>
data.UserPtr.objectId === currUserId &&
data.Activity === "Signed"
);
if (
checkAlreadySign &&
checkAlreadySign[0] &&
checkAlreadySign.length > 0
) {
setAlreadySign(true);
}
let signers = [];
let unSignedSigner = [];
//check document is signed or not
if (checkDocIdExist && checkDocIdExist.length > 0) {
setAlreadySign(true);
setIsDocId(true);
const signerRes = res[0].Signers;
//comparison auditTrail user details with signers user details
for (let i = 0; i < signerRes.length; i++) {
const signerId = signerRes[i].objectId;
// console.log("getSigner", getSigner);
let isSigned = false;
for (let j = 0; j < checkDocIdExist.length; j++) {
const signedExist =
@@ -192,7 +200,6 @@ function PdfRequestFiles() {
// if match then add signed data in signer array and break loop
if (signerId === signedExist) {
// console.log("signedExist", signedExist);
signers.push({ ...signerRes[i], ...signerRes[i] });
isSigned = true;
break;
@@ -202,8 +209,6 @@ function PdfRequestFiles() {
if (!isSigned) {
unSignedSigner.push({ ...signerRes[i], ...signerRes[i] });
}
// console.log("check Signers status",signers,unSignedSigner)
}
setSignedSigners(signers);
setUnSignedSigners(unSignedSigner);
@@ -211,7 +216,6 @@ function PdfRequestFiles() {
setSignerPos(res[0].Placeholders);
} else {
let unsigned = [];
// console.log("else condition");
for (let i = 0; i < res.length; i++) {
unsigned.push(res[i].Signers);
}
@@ -226,7 +230,6 @@ function PdfRequestFiles() {
alert("No data found!");
}
} else {
// alert("No data found!");
setNoData(true);
const loadObj = {
isLoad: false
@@ -279,7 +282,6 @@ function PdfRequestFiles() {
});
};
// console.log("signer", signerPos, unsignedSigners, isCompleted);
//function for embed signature or image url in pdf
async function embedImages() {
const checkUser = signerPos.filter(
@@ -320,7 +322,6 @@ function PdfRequestFiles() {
//checking if signature is only one then send image url in jpeg formate to server
if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) {
// console.log("else condition");
if (isDocId) {
pdfBase64 = await getBase64FromUrl(url);
} else {
@@ -330,7 +331,7 @@ function PdfRequestFiles() {
const fontSize = 10;
const textContent =
documentId && `OpenSign™ DocumentId: ${documentId}`;
// console.log("textcontent", documentId);
const pages = pdfDoc.getPages();
const page = pages[i];
@@ -472,10 +473,54 @@ function PdfRequestFiles() {
const imgWidth = imgUrlList[id].Width
? imgUrlList[id].Width
: 150;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
const yPos = (pos) => {
//checking both condition mobile and desktop view
const y = pos.yPosition / scale;
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yPosition * (pos.scale / scale);
return page.getHeight() - y * scale - imgHeight;
} else {
return page.getHeight() - y * scale - imgHeight;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight;
} else {
return page.getHeight() - pos.yPosition - imgHeight;
}
}
};
page.drawImage(img, {
x: imgUrlList[id].xPosition,
y: page.getHeight() - imgUrlList[id].yPosition - imgHeight,
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: imgWidth,
height: imgHeight
});
@@ -506,24 +551,91 @@ function PdfRequestFiles() {
signerData
) => {
let signgleSign;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
if (
signerData &&
signerData.length === 1 &&
signerData[0].pos.length === 1
) {
const height = xyPosData.Height ? xyPosData.Height : 60;
const bottomY = xyPosData.isDrag
? xyPosData.yBottom - height
: xyPosData.yBottom - height + xyPosData.firstYPos;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
const yBottom = (pos) => {
let yPosition;
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yPosition * (pos.scale / scale);
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
} else {
const y = pos.yBottom / scale;
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yBottom * pos.scale;
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
} else {
yPosition = pos.isDrag
? pos.yBottom - height
: pos.firstYPos
? pos.yBottom - height + pos.firstYPos
: pos.yBottom - height;
return yPosition;
}
}
};
const bottomY = yBottom(xyPosData);
signgleSign = {
pdfFile: pdfBase64Url,
docId: documentId,
userId: signerObjectId,
sign: {
Base64: base64Url,
Left: xyPosData.resizeXPos
? xyPosData.resizeXPos
: xyPosData.xPosition,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height,
@@ -537,7 +649,8 @@ function PdfRequestFiles() {
) {
signgleSign = {
pdfFile: base64Url,
docId: documentId
docId: documentId,
userId: signerObjectId
};
}
@@ -565,7 +678,6 @@ function PdfRequestFiles() {
}
})
.catch((err) => {
// this.setState({ loading: false });
console.log("axois err ", err);
alert("something went wrong");
});
@@ -595,17 +707,12 @@ function PdfRequestFiles() {
//function for image upload or update
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
// setIsSignPad(false);
const imageType = event.target.files[0].type;
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onloadend = function (e) {
let width, height;
const image = new Image();
image.src = e.target.result;
image.onload = function () {
width = image.width;
@@ -783,8 +890,6 @@ function PdfRequestFiles() {
return obj;
});
// currentSigner[0].placeHolder.splice(i, 1, newUpdateUrl[0]);
// console.log("currentSigner sign", currentSigner);
const newUpdatePos = currentSigner.map((obj, ind) => {
if (obj.signerObjId === signerObjectId) {
return { ...obj, placeHolder: newUpdateUrl };
@@ -842,8 +947,6 @@ function PdfRequestFiles() {
});
};
// console.log("unsigned", unsignedSigners, signerObjectId,isExpired);
return (
<DndProvider backend={HTML5Backend}>
{isLoading.isLoad ? (
@@ -859,7 +962,7 @@ function PdfRequestFiles() {
style={{
position: "absolute",
height: "100vh",
width: window.innerWidth,
width: "100%",
display: "flex",
justifyContent: "center",
flexDirection: "column",
@@ -1015,6 +1118,8 @@ function PdfRequestFiles() {
setIsDecline={setIsDecline}
decline={true}
currentSigner={currentSigner}
pdfUrl={pdfUrl}
alreadySign={alreadySign}
/>
<RenderPdf
@@ -1045,7 +1150,6 @@ function PdfRequestFiles() {
<div
style={{
background: themeColor()
// color:"white"
}}
className="signedStyle"
>
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+22 -76
View File
@@ -27,8 +27,6 @@ import RenderPdf from "./component/renderPdf";
import { contractUsers, contactBook } from "../utils/Utils";
//For signYourself inProgress section signer can add sign and complete doc sign.
function SignYourSelf() {
// pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const [pdfDetails, setPdfDetails] = useState([]);
const [isSignPad, setIsSignPad] = useState(false);
const [allPages, setAllPages] = useState(null);
@@ -310,52 +308,6 @@ function SignYourSelf() {
};
setIsLoading(loadObj);
}
// await axios
// .get(
// `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
// "_appName"
// )}_Contactbook?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${
// jsonSender.objectId
// }"}}`,
// {
// headers: {
// "Content-Type": "application/json",
// "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
// "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
// },
// }
// )
// .then((Listdata) => {
// const json = Listdata.data;
// const res = json.results;
// if (res[0]) {
// setSignerUserId(res[0].objectId);
// const tourstatuss = res[0].TourStatus && res[0].TourStatus;
// if (tourstatuss && tourstatuss.length > 0) {
// setTourStatus(tourstatuss);
// const checkTourRecipients = tourstatuss.filter(
// (data) => data.signyourself
// );
// if (checkTourRecipients && checkTourRecipients.length > 0) {
// setCheckTourStatus(checkTourRecipients[0].signyourself);
// }
// }
// }
// const loadObj = {
// isLoad: false,
// };
// setIsLoading(loadObj);
// })
// .catch((err) => {
// const loadObj = {
// isLoad: false,
// };
// setHandleError("Error: Something went wrong!");
// setIsLoading(loadObj);
// });
};
//function for setting position after drop signature button over pdf
@@ -618,22 +570,33 @@ function SignYourSelf() {
? imgUrlList[id].Height
: 60;
const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
const isMobile = window.innerWidth < 712;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const posY = () => {
if (id === 0) {
return (
page.getHeight() -
imgUrlList[id].yPosition * scale -
imgHeight
);
} else if (id > 0) {
return page.getHeight() - imgUrlList[id].yPosition * scale;
}
};
page.drawImage(img, {
x: isMobile
? imgUrlList[id].xPosition * scale + 50
? imgUrlList[id].xPosition * scale + imgWidth / 2
: imgUrlList[id].xPosition,
y:
page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
y: posY(),
width: imgWidth,
height: imgHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
// console.log("pdfbyte", pdfBytes);
signPdfFun(pdfBytes, documentId);
}
setIsSignPad(false);
@@ -652,10 +615,10 @@ function SignYourSelf() {
pageNo
) => {
let singleSign;
const isMobile = window.innerWidth < 712;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const imgWidth = xyPosData.Width.Width ? xyPosData.Width.Width : 150;
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
const height = xyPosData.Height ? xyPosData.Height : 60;
const bottomY = xyPosData.isDrag
@@ -670,7 +633,7 @@ function SignYourSelf() {
sign: {
Base64: base64Url,
Left: isMobile
? xyPosData.xPosition * scale + 80
? xyPosData.xPosition * scale + imgWidth / 2
: xyPosData.xPosition,
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
@@ -684,14 +647,13 @@ function SignYourSelf() {
docId: documentId
};
}
// console.log("data",singleSign)
await axios
.post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken")
// sessiontoken,
}
})
.then((Listdata) => {
@@ -718,7 +680,6 @@ function SignYourSelf() {
//function for save x and y position and show signature tab on that position
const handleTabDrag = (key, e) => {
// console.log("key", key);
setDragKey(key);
setIsDragging(true);
};
@@ -791,8 +752,6 @@ function SignYourSelf() {
//function for image upload or update
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
// setIsSignPad(false);
const imageType = event.target.files[0].type;
const reader = new FileReader();
@@ -825,16 +784,11 @@ function SignYourSelf() {
setImage({ src: image.src, imgType: imageType });
};
//const imgUrl = URL.createObjectURL(event.target.files[0]);
// const imgData = { width: newWidth, height: newHeight, src: imgUrl };
}
};
//function for save button to save signature or image url
const saveSign = (isDefaultSign) => {
// console.log("isDefault sign", isDefaultSign);
const signatureImg = isDefaultSign ? defaultSignImg : signature;
setIsSignPad(false);
@@ -878,9 +832,6 @@ function SignYourSelf() {
if (updateFilter.length > 0) {
const getXYdata = xyPostion[index].pos;
// const updateWidth = getXYdata[key].Width;
// const updateHeight = getXYdata[key].Height;
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
if (url.key === key) {
@@ -937,7 +888,7 @@ function SignYourSelf() {
let filterData = xyPostion[index].pos.filter((data) => data.key !== key);
// //delete and update block position
//delete and update block position
if (filterData.length > 0) {
updateResizeData.push(filterData);
const newUpdatePos = xyPostion.map((obj, ind) => {
@@ -949,12 +900,10 @@ function SignYourSelf() {
setXyPostion(newUpdatePos);
} else {
// setXyPostion([]);
const getRemainPage = xyPostion.filter(
(data) => data.pageNumber !== pageNumber
);
// console.log("remainPage",getRemainPage)
if (getRemainPage && getRemainPage.length > 0) {
setXyPostion(getRemainPage);
} else {
@@ -996,7 +945,6 @@ function SignYourSelf() {
};
const tourConfig = [
{
// updateDelay: 1500,
selector: '[data-tut="reactourFirst"]',
content: `Drag the signature or stamp placeholder onto the PDF to choose your desired signing location.`,
position: "top",
@@ -1046,8 +994,6 @@ function SignYourSelf() {
)
.then((Listdata) => {
// const json = Listdata.data;
// const res = json.results;
// console.log("res", json);
})
.catch((err) => {
console.log("axois err ", err);
microfrontends/SignDocuments/src/Component/component/defaultSignature.js
+9 -47
View File
@@ -5,54 +5,14 @@ function DefaultSignature({
themeColor,
defaultSignImg,
setShowAlreadySignDoc,
setDefaultSignImg,
userObjectId,
setIsLoading,
xyPostion,
xyPostion
}) {
useEffect(() => {
getDefaultSignature(userObjectId);
}, []);
//function for fetch default sigature added bu users
const getDefaultSignature = async (userObjectId) => {
await axios
.get(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
"_appName"
)}_Signature?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${userObjectId}"}}`,
{
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
"X-Parse-Session-Token": localStorage.getItem("accesstoken"),
},
}
)
.then((Listdata) => {
const json = Listdata.data;
const res = json.results;
if (res[0] && res.length > 0) {
setDefaultSignImg(res[0].ImageURL);
}
const loadObj = {
isLoad: false,
};
setIsLoading(loadObj);
})
.catch((err) => {
// this.setState({ loading: false });
console.log("axois err ", err);
});
};
const confirmToaddDefaultSign = () => {
if (xyPostion.length > 0) {
const alreadySign = {
status: true,
mssg: "Are you sure you want to sign at requested locations?",
sure: true,
sure: true
};
setShowAlreadySignDoc(alreadySign);
} else {
@@ -67,7 +27,7 @@ function DefaultSignature({
background: themeColor(),
color: "white",
padding: "5px",
fontFamily: "sans-serif",
fontFamily: "sans-serif"
}}
>
Signature
@@ -78,7 +38,7 @@ function DefaultSignature({
flexDirection: "column",
alignItems: "center",
marginTop: "10px",
fontWeight: "600",
fontWeight: "600"
}}
>
{defaultSignImg ? (
@@ -90,7 +50,7 @@ function DefaultSignature({
style={{
width: "100%",
height: "100%",
objectFit: "contain",
objectFit: "contain"
}}
src={defaultSignImg}
/>
@@ -100,7 +60,7 @@ function DefaultSignature({
background: themeColor(),
color: "white",
marginTop: "20px",
cursor: "pointer",
cursor: "pointer"
}}
type="button"
className="finishBtn finishnHover"
@@ -111,7 +71,9 @@ function DefaultSignature({
</>
) : (
<div style={{ margin: "10px" }}>
<span>Click a signature placeholder to start signing the document!</span>
<span>
Click a signature placeholder to start signing the document!
</span>
</div>
)}
</div>
microfrontends/SignDocuments/src/Component/component/emailComponent.js
+45 -65
View File
@@ -18,7 +18,7 @@ function EmailComponent({
setSuccessEmail,
signObjId,
pdfName,
sender,
sender
}) {
const [emailCount, setEmailCount] = useState([]);
const [emailValue, setEmailValue] = useState();
@@ -28,28 +28,9 @@ function EmailComponent({
setIsLoading(true);
let sendMail, recipent;
for (let i = 0; i < emailCount.length; i++) {
// await axios
// .get(
// `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem("_appName")}_Contactbook?where={"Email":"${emailCount[i]}"}`,
// {
// headers: {
// "Content-Type": "application/json",
// "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
// sessionToken: localStorage.getItem("accesstoken"),
// },
// }
// )
// .then((Listdata) => {
// const json = Listdata.data;
// if (json.results[0]) {
// recipent = json.results[0];
// }
// })
// .catch((err) => {
// console.log("axois err ", err);
// });
try {
console.log("recipients", recipent);
const imgPng =
"https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
// "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png";
@@ -58,15 +39,9 @@ function EmailComponent({
const headers = {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken"),
sessionToken: localStorage.getItem("accesstoken")
};
// const serverUrl = localStorage.getItem("baseUrl");
// const newServer = serverUrl.replaceAll("/", "%2F");
// const serverParams = `${newServer}&${localStorage.getItem(
// "parseAppId"
// )}&${localStorage.getItem("_appName")}`;
// let pdfUrlWeb = `<span><a href=https://qik-ai-org.github.io/Sign-MicroappV2/#/login/${signObjId}/${recipent.Email}/${serverParams} style='cursor: pointer;'> ${pdfName}</a><span>`;
const themeBGcolor = themeColor();
let params = {
pdfName: pdfName,
@@ -83,8 +58,7 @@ function EmailComponent({
pdfName +
" Standard is attached to this email. Kindly download the document from the attachment.</p></div> </div><div><p>This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " +
sender.email +
" directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p></div></div></body></html>",
//"html":"<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> </head> <body> <div style='background-color: #f5f5f5; padding: 20px'> <div style=' box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background-color: white;padding-bottom: 20px;'> <div><img src="+imgPng +" height='50' style='padding: 20px' /></div> <div style=' padding: 2px;font-family: system-ui;background-color: #47a3ad;'><p style='font-size: 20px;font-weight: 400;color: white;padding-left: 20px;' > Digital Signature Request</p></div><div><p style='padding: 20px;font-family: system-ui;font-size: 14px; margin-bottom: 10px;'> " + recipent.Name + " has requested you to review and sign" +pdfName+"</p><div style='padding: 5px 0px 5px 25px;display: flex;flex-direction: row;justify-content: space-around;'><span>Sender</span><span>" + recipent.Email + " </span></div><div style='display: flex; justify-content: center;margin-top: 10px;'><button style='padding: 8px 15px 8px 15px;background-color: #d46b0f;color: white; border: 0px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;'>Sign here</button></div></div></div><div><p> This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + recipent.Email + " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p> </div></div></body> </html>"
" directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.</p></div></div></body></html>"
};
sendMail = await axios.post(url, params, { headers: headers });
} catch (error) {
@@ -138,7 +112,6 @@ function EmailComponent({
const base64 = await getBase64FromUrl(pdfUrl);
printModule({ printable: base64, type: "pdf", base64: true });
// window.print('https://nxgcreator.s3.ap-south-1.amazonaws.com/exported_file_32_2023-08-22T04%3A59%3A13.432Z.pdf',);
};
//handle download signed pdf
@@ -146,6 +119,9 @@ function EmailComponent({
saveAs(pdfUrl, `${pdfName}_signed_by_OpenSign™.pdf`);
};
const isAndroid = /Android/i.test(navigator.userAgent);
return (
<div>
{/* isEmail */}
@@ -162,7 +138,7 @@ function EmailComponent({
alignItems: "center",
zIndex: "20",
backgroundColor: "#e6f2f2",
opacity: 0.8,
opacity: 0.8
}}
>
<img
@@ -181,26 +157,28 @@ function EmailComponent({
<div style={{ display: "flex", flexDirection: "row" }}>
<div></div>
<button
onClick={handleToPrint}
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
className="btn btn-primary btn-sm"
>
<i
className="fa fa-print"
{!isAndroid && (
<button
onClick={handleToPrint}
style={{
fontSize: "15px",
marginRight: "3px",
color: "white",
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
aria-hidden="true"
></i>
Print
</button>
className="btn btn-primary btn-sm"
>
<i
className="fa fa-print"
style={{
fontSize: "15px",
marginRight: "3px",
color: "white"
}}
aria-hidden="true"
></i>
Print
</button>
)}
<button
className="btn btn-danger btn-sm"
@@ -209,7 +187,7 @@ function EmailComponent({
display: "flex",
flexDirection: "row",
alignItems: "center",
marginLeft: "10px",
marginLeft: "10px"
}}
>
<i
@@ -217,7 +195,7 @@ function EmailComponent({
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
@@ -231,7 +209,7 @@ function EmailComponent({
<div
style={{
position: "absolute",
marginLeft: "50px",
marginLeft: "50px"
}}
>
<img
@@ -249,7 +227,7 @@ function EmailComponent({
verticalAlign: "baseline",
fontWeight: "500",
color: "#403f3e",
fontSize: "15px",
fontSize: "15px"
}}
>
Recipients added here will get a copy of the signed document.
@@ -261,18 +239,20 @@ function EmailComponent({
style={{
display: "flex",
flexDirection: "row",
width: "450px",
flexWrap: "wrap",
flexWrap: "wrap"
}}
>
{emailCount.map((data, ind) => {
return (
<div className="emailChip" key={ind}>
<div className="emailChip"
style={{display:"flex", flexDirection:"row", alignItems:"center"}}
key={ind}>
<span
style={{
color: "white",
fontSize: "13px",
marginRight: "20px",
marginRight: "20px"
}}
>
{data}
@@ -317,7 +297,7 @@ function EmailComponent({
)}
<span
style={{
cursor: emailValue && "pointer",
cursor: emailValue && "pointer"
}}
onClick={() => {
if (emailValue) {
@@ -330,7 +310,7 @@ function EmailComponent({
backgroundColor: themeColor(),
padding: "2px 10px",
marginTop: "10px",
color: "white",
color: "white"
}}
className="fa fa-plus"
aria-hidden="true"
@@ -342,7 +322,7 @@ function EmailComponent({
background: "#e3e2e1",
marginTop: "30px",
padding: "5px",
borderRadius: "3px",
borderRadius: "3px"
}}
>
<span style={{ fontWeight: "700" }}>Note:</span>
@@ -356,7 +336,7 @@ function EmailComponent({
<Modal.Footer>
<button
style={{
color: "black",
color: "black"
}}
type="button"
className="finishBtn"
@@ -368,7 +348,7 @@ function EmailComponent({
disabled={emailCount.length === 0 && true}
style={{
background: themeColor(),
color: "white",
color: "white"
}}
type="button"
className={emailCount.length === 0 ? "defaultBtn" : "finishBtn"}
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+8 -5
View File
@@ -36,8 +36,8 @@ function FieldsComponent({
}) {
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
const isMobile = window.innerWidth < 712;
const isMobile = window.innerWidth <767;
const SelectItem = React.forwardRef(
({ children, className, ...props }, forwardedRef) => {
return (
@@ -107,7 +107,7 @@ function FieldsComponent({
}}
>
<Select.Trigger
className="SelectTrigger"
className={selectedEmail ? "selectEmail": "SelectTrigger"}
style={{
background: isSelectListId
? color[isSelectListId % color.length]
@@ -115,7 +115,10 @@ function FieldsComponent({
}}
aria-label="Food"
>
<Select.Value placeholder="Select signer.." />
<Select.Value
placeholder="Select signer.." />
{!selectedEmail &&
<Select.Icon className="SelectIcon">
<i
style={{
@@ -127,7 +130,7 @@ function FieldsComponent({
className="fa fa-angle-down"
aria-hidden="true"
></i>
</Select.Icon>
</Select.Icon>}
</Select.Trigger>
<Select.Portal>
<Select.Content
microfrontends/SignDocuments/src/Component/component/header.js
+119 -115
View File
@@ -33,8 +33,9 @@ function Header({
decline,
currentSigner,
dataTut4,
alreadySign
}) {
const isMobile = window.innerWidth < 712;
const isMobile = window.innerWidth < 767;
const navigate = useNavigate();
//for go to previous page
@@ -49,7 +50,7 @@ function Header({
const handleDeclinePdfAlert = async () => {
const currentDecline = {
currnt: "Sure",
isDeclined: true,
isDeclined: true
};
setIsDecline(currentDecline);
};
@@ -108,7 +109,7 @@ function Header({
fontSize: "13px",
fontWeight: "600",
marginLeft: "10px",
marginRight: "10px",
marginRight: "10px"
}}
>
{pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
@@ -132,7 +133,7 @@ function Header({
color: themeColor(),
border: "none",
fontWeight: "650",
fontSize: "16px",
fontSize: "16px"
}}
>
<i className="fa fa-ellipsis-v" aria-hidden="true"></i>
@@ -151,7 +152,7 @@ function Header({
<div
style={{
display: "flex",
flexDirection: "row",
flexDirection: "row"
}}
>
<i
@@ -164,6 +165,7 @@ function Header({
</DropdownMenu.Item>
<DropdownMenu.Item className="DropdownMenuItem">
<PDFDownloadLink
style={{ textDecoration: "none" }}
document={<Certificate pdfData={pdfDetails} />}
fileName={`completion certificate-${
pdfDetails[0] && pdfDetails[0].Name
@@ -175,22 +177,26 @@ function Header({
{loading ? (
"Loading document..."
) : (
<div
<button
type="button"
className="defaultBtn certificateBtn"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
>
<i
className="fa fa-certificate"
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
Certificate
</div>
</button>
)}
</>
)}
@@ -216,7 +222,7 @@ function Header({
border: "none",
fontWeight: "650",
fontSize: "16px",
marginRight: "10px",
marginRight: "10px"
}}
>
Decline
@@ -224,18 +230,16 @@ function Header({
)}
{isPlaceholder ? (
<div
onClick={() => {
if (!isMailSend) {
alertSendEmail();
}
}}
style={{
color: isMailSend ? "gray" : themeColor(),
border: "none",
fontWeight: "650",
fontSize: "16px",
fontSize: "16px"
}}
data-tut={dataTut4}
>
@@ -243,7 +247,7 @@ function Header({
</div>
) : (
<div
data-tut="reactourThird"
data-tut="reactourThird"
onClick={() => {
if (!pdfUrl) {
embedImages();
@@ -253,7 +257,7 @@ function Header({
color: themeColor(),
border: "none",
fontWeight: "650",
fontSize: "16px",
fontSize: "16px"
}}
>
Finish
@@ -277,10 +281,8 @@ function Header({
pdfUrl || isAlreadySign.mssg ? (
<div style={{ display: "flex", flexDirection: "row" }}>
{pdfDetails[0] && pdfDetails.length > 0 && (
// <Certificate
// pdfData={completePdfData}
// />
<PDFDownloadLink
style={{ textDecoration: "none" }}
document={<Certificate pdfData={pdfDetails} />}
fileName={`completion certificate-${
pdfDetails[0] && pdfDetails[0].Name
@@ -296,7 +298,7 @@ function Header({
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
alignItems: "center"
}}
>
<i
@@ -304,7 +306,7 @@ function Header({
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
@@ -319,7 +321,7 @@ function Header({
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
alignItems: "center"
}}
className="defaultBtn printBtn"
>
@@ -328,7 +330,7 @@ function Header({
style={{
fontSize: "15px",
marginRight: "3px",
color: "white",
color: "white"
}}
aria-hidden="true"
></i>
@@ -340,7 +342,7 @@ function Header({
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
alignItems: "center"
}}
className="defaultBtn downloadBtn"
onClick={() => handleDownloadPdf()}
@@ -350,7 +352,7 @@ function Header({
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
@@ -361,7 +363,7 @@ function Header({
<div style={{ display: "flex", flexDirection: "row" }}>
<button
style={{
background: "#de4337",
background: "#de4337"
}}
className="finishBtn hoverCss"
onClick={() => {
@@ -374,7 +376,7 @@ function Header({
<button
data-tut="reactourThird"
style={{
background: !pdfUrl ? "#188ae2" : "#d3edeb",
background: !pdfUrl ? "#188ae2" : "#d3edeb"
}}
className="finishBtn sendHover"
onClick={() => {
@@ -387,85 +389,6 @@ function Header({
</button>
</div>
)
) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
<div style={{ display: "flex", flexDirection: "row" }}>
<PDFDownloadLink
document={<Certificate pdfData={pdfDetails} />}
fileName={`completion certificate-${
pdfDetails[0] && pdfDetails[0].Name
}.pdf`}
>
{({ blob, url, loading, error }) =>
loading ? (
"Loading document..."
) : (
<button
type="button"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
className="defaultBtn certificateBtn"
>
<i
className="fa fa-certificate"
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
}}
aria-hidden="true"
></i>
Certificate
</button>
)
}
</PDFDownloadLink>
<button
onClick={handleToPrint}
type="button"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
className="defaultBtn printBtn"
>
<i
className="fa fa-print"
style={{
fontSize: "15px",
marginRight: "3px",
color: "white",
}}
aria-hidden="true"
></i>
Print
</button>
<button
type="button"
className="defaultBtn downloadBtn"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
marginLeft: "10px",
}}
onClick={() => handleDownloadPdf()}
>
<i
className="fa fa-download"
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
}}
aria-hidden="true"
></i>
Download
</button>
</div>
) : isPlaceholder ? (
<>
{!isMailSend &&
@@ -502,7 +425,7 @@ function Header({
data-tut="reactourFour"
style={{
background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
color: isMailSend && "rgb(77, 75, 75)",
color: isMailSend && "rgb(77, 75, 75)"
}}
onClick={() => {
alertSendEmail();
@@ -514,10 +437,11 @@ function Header({
</div>
</>
) : isPdfRequestFiles ? (
isSigned ? (
alreadySign ? (
<div style={{ display: "flex", flexDirection: "row" }}>
{isCompleted.isCertificate && (
<PDFDownloadLink
style={{ textDecoration: "none" }}
document={<Certificate pdfData={pdfDetails} />}
fileName={`completion certificate-${
pdfDetails[0] && pdfDetails[0].Name
@@ -533,7 +457,7 @@ function Header({
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
alignItems: "center"
}}
>
<i
@@ -541,7 +465,7 @@ function Header({
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
@@ -558,7 +482,7 @@ function Header({
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
alignItems: "center"
}}
>
<i
@@ -566,7 +490,7 @@ function Header({
style={{
fontSize: "15px",
marginRight: "3px",
color: "white",
color: "white"
}}
aria-hidden="true"
></i>
@@ -579,7 +503,7 @@ function Header({
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
alignItems: "center"
}}
onClick={() => handleDownloadPdf()}
>
@@ -588,7 +512,7 @@ function Header({
style={{
color: "white",
fontSize: "15px",
marginRight: "3px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
@@ -610,7 +534,7 @@ function Header({
<>
<button
style={{
background: "#de4337",
background: "#de4337"
}}
className="finishBtn hoverCss"
onClick={() => {
@@ -621,7 +545,7 @@ function Header({
</button>
<button
style={{
background: "#188ae2",
background: "#188ae2"
}}
type="button"
className="finishBtn sendHover"
@@ -635,6 +559,86 @@ function Header({
)}
</div>
)
) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
<div style={{ display: "flex", flexDirection: "row" }}>
<PDFDownloadLink
style={{ textDecoration: "none" }}
document={<Certificate pdfData={pdfDetails} />}
fileName={`completion certificate-${
pdfDetails[0] && pdfDetails[0].Name
}.pdf`}
>
{({ blob, url, loading, error }) =>
loading ? (
"Loading document..."
) : (
<button
type="button"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
className="defaultBtn certificateBtn"
>
<i
className="fa fa-certificate"
style={{
color: "white",
fontSize: "15px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
Certificate
</button>
)
}
</PDFDownloadLink>
<button
onClick={handleToPrint}
type="button"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center"
}}
className="defaultBtn printBtn"
>
<i
className="fa fa-print"
style={{
fontSize: "15px",
marginRight: "3px",
color: "white"
}}
aria-hidden="true"
></i>
Print
</button>
<button
type="button"
className="defaultBtn downloadBtn"
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
marginLeft: "10px"
}}
onClick={() => handleDownloadPdf()}
>
<i
className="fa fa-download"
style={{
color: "white",
fontSize: "15px",
marginRight: "3px"
}}
aria-hidden="true"
></i>
Download
</button>
</div>
) : (
<div>
<button
@@ -649,7 +653,7 @@ function Header({
<button
style={{
background: "#188ae2",
background: "#188ae2"
}}
type="button"
className="finishBtn sendHover"
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+107 -112
View File
@@ -5,8 +5,6 @@ import { Rnd } from "react-rnd";
import { themeColor } from "../../utils/ThemeColor/backColor";
import { Document, Page, pdfjs } from "react-pdf";
// import Draggable from "react-draggable";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
function RenderPdf({
@@ -41,19 +39,64 @@ function RenderPdf({
placeholder,
pdfLoadFail
}) {
const isMobile = window.innerWidth < 712;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
//function for render placeholder block over pdf document
const checkSignedSignes = (data) => {
// console.log("data",data)
const checkSign = signedSigners.filter(
(sign) => sign.objectId === data.signerObjId
);
if (data.signerObjId === signerObjectId) {
setCurrentSigner(true);
}
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return pos.xPosition / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
return pos.xPosition * (pos.scale / scale);
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
return pos.scale && pos.xPosition * pos.scale + 50;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
return pos.xPosition;
}
}
};
const yPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (!pos.isMobile) {
return pos.yPosition / scale;
}
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
else {
return pos.yPosition * (pos.scale / scale);
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
return pos.scale && pos.yPosition * pos.scale + 50;
}
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
else {
return pos.yPosition;
}
}
};
return (
checkSign.length === 0 &&
data.placeHolder.map((placeData, key) => {
@@ -96,10 +139,8 @@ function RenderPdf({
}}
lockAspectRatio={pos.Width && 2.5}
default={{
x: pos.scale
? pos.xPosition * pos.scale
: pos.xPosition,
y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
x: xPos(pos),
y: yPos(pos)
}}
onClick={() => {
setIsSignPad(true);
@@ -160,8 +201,8 @@ function RenderPdf({
borderWidth: "0.2px"
}}
default={{
x: pos.scale ? pos.xPosition * pos.scale : pos.xPosition,
y: pos.scale ? pos.yPosition * pos.scale : pos.yPosition
x: xPos(pos),
y: yPos(pos)
}}
size={{
width: pos.Width ? pos.Width : 150,
@@ -174,7 +215,7 @@ function RenderPdf({
fontSize: "12px",
color: "black",
fontWeight: "600",
// justifyContent: "center",
marginTop: "0px"
}}
>
@@ -191,26 +232,10 @@ function RenderPdf({
return (
<>
{isMobile ? (
// <RSC
// style={{
// position: "relative",
// boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
// width:
// pdfOriginalWidth > pdfNewWidth ? pdfNewWidth : pdfOriginalWidth,
// height: window.innerHeight - 110 + "px",
// marginTop: "50px",
// }}
// noScrollY={false}
// noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
// >
{isMobile && scale ? (
<div
style={{
border: "0.1px solid #ebe8e8"
// marginTop: "50px",
// height:window.innerHeight-100+'px',
// width:window.innerWidth
}}
ref={drop}
id="container"
@@ -273,9 +298,17 @@ function RenderPdf({
height: pos.Height ? pos.Height : 60
}}
lockAspectRatio={pos.Width && 2.5}
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
default={{
x: pos.xPosition,
y: pos.yPosition
x: !pos.isMobile
? pos.xPosition / scale
: pos.xPosition * (pos.scale / scale) - 50,
y: !pos.isMobile
? pos.yPosition / scale
: pos.yPosition * (pos.scale / scale)
}}
onClick={() => {
setIsSignPad(true);
@@ -333,8 +366,16 @@ function RenderPdf({
}}
disableDragging={true}
default={{
x: pos.xPosition,
y: pos.yPosition
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
x: !pos.isMobile
? pos.xPosition / scale
: pos.xPosition * (pos.scale / scale) - 50,
y: !pos.isMobile
? pos.yPosition / scale
: pos.yPosition * (pos.scale / scale)
}}
onClick={() => {
setIsSignPad(true);
@@ -409,7 +450,14 @@ function RenderPdf({
right: { display: "none" },
bottomRight: { display: "block" }
}}
onDragStop={handleStop}
onDragStop={(event, dragElement) =>
handleStop(
event,
dragElement,
data.signerObjId,
pos.key
)
}
default={{
x: pos.xPosition,
y: pos.yPosition
@@ -437,13 +485,6 @@ function RenderPdf({
data.signerObjId
);
}}
// onClick={(e) => {
// e.stopPropagation();
// handleDeleteSign(
// pos.key,
// data.signerObjId
// );
// }}
style={{
position: "absolute",
right: 0,
@@ -461,7 +502,7 @@ function RenderPdf({
fontSize: "12px",
color: "black",
fontWeight: "600",
// justifyContent: "center",
marginTop: "0px"
}}
>
@@ -532,7 +573,6 @@ function RenderPdf({
>
{" "}
<div
// className="dragElm"
onTouchStart={(e) => {
if (!isDragging) {
setTimeout(() => {
@@ -545,18 +585,12 @@ function RenderPdf({
}}
>
<div
// className="dragElm"
ref={nodeRef}
onTouchStart={(e) => {
e.stopPropagation();
handleDeleteSign(pos.key);
setIsStamp(false);
}}
// onClick={(e) => {
// e.stopPropagation();
// handleDeleteSign(pos.key);
// setIsStamp(false);
// }}
style={{
position: "absolute",
right: 0,
@@ -590,10 +624,8 @@ function RenderPdf({
<>
<Rnd
allowAnyClick
// cancel=".dragElm"
ref={nodeRef}
key={pos.key}
// lockAspectRatio={2.5}
lockAspectRatio={
pos.Width ? pos.Width / pos.Height : 2.5
}
@@ -616,53 +648,22 @@ function RenderPdf({
onDrag={(e) => {
handleTabDrag(pos.key, e);
}}
// onMouseUp={(e) => handleTabDrag(pos.key, e)}
onDragStop={handleStop}
size={{
width: pos.Width ? pos.Width : 150,
height: pos.Height ? pos.Height : 60
}}
// onMouseDown={(e) => {
// if (!isDragging) {
// console.log("child m=event",isDragging);
// setTimeout(() => {
// if(isDeleted){
// setIsSignPad(true);
// // setIsSignPad(false)
// setSignKey(pos.key);
// setIsStamp(pos.isStamp);
// }else{
// setIsSignPad(true);
// // setIsSignPad(false)
// setSignKey(pos.key);
// setIsStamp(pos.isStamp);
// }
// }, 500);
// }
// }}
default={{
x: pos.xPosition,
y: pos.yPosition
}}
// onClick={(e) => {
// if (!isDragging) {
// e.stopPropagation();
// setIsSignPad(true);
// setSignKey(pos.key);
// setIsStamp(pos.isStamp);
// }
// }}
>
<div
onTouchStart={(e) => {
if (!isDragging) {
setTimeout(() => {
setIsSignPad(true);
//setIsSignPad(false)
setSignKey(pos.key);
setIsStamp(pos.isStamp);
}, 500);
@@ -686,21 +687,9 @@ function RenderPdf({
}}
>
<div
// onMouseDown={(e) => {
// console.log("child m=event")
// e.preventDefault();
// setIsDragging(true)
// handleDeleteSign(pos.key);
// setIsStamp(false);
// setTimeout(()=>{
// setIsDragging(false)
// },2000)
// }}
onTouchStart={(e) => {
e.stopPropagation();
e.preventDefault();
// setIsDragging(true);
handleDeleteSign(pos.key);
setIsStamp(false);
@@ -756,7 +745,6 @@ function RenderPdf({
onLoadSuccess={pageDetails}
ref={pdfRef}
file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
// file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" // "https://api.printnode.com/static/test/pdf/multipage.pdf" // {pdfUrl ? pdfUrl : signPdfUrl}
>
{Array.from(new Array(numPages), (el, index) => (
<Page
@@ -764,7 +752,6 @@ function RenderPdf({
pageNumber={pageNumber}
width={window.innerWidth}
height={window.innerHeight}
// scale={1}
renderAnnotationLayer={false}
renderTextLayer={false}
onGetAnnotationsError={(error) => {
@@ -776,7 +763,6 @@ function RenderPdf({
</div>
</div>
) : (
// </RSC>
<RSC
style={{
position: "relative",
@@ -854,12 +840,15 @@ function RenderPdf({
height: pos.Height ? pos.Height : 60
}}
lockAspectRatio={pos.Width && 2.5}
//if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
default={{
x: pos.scale
? pos.xPosition * pos.scale
x: pos.isMobile
? pos.scale &&
pos.xPosition * pos.scale + 20
: pos.xPosition,
y: pos.scale
? pos.yPosition * pos.scale
y: pos.isMobile
? pos.scale && pos.yPosition * pos.scale
: pos.yPosition
}}
onClick={() => {
@@ -917,12 +906,15 @@ function RenderPdf({
height: pos.Height ? pos.Height : 60
}}
disableDragging={true}
//if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
default={{
x: pos.scale
? pos.xPosition * pos.scale
x: pos.isMobile
? pos.scale &&
pos.xPosition * pos.scale + 20
: pos.xPosition,
y: pos.scale
? pos.yPosition * pos.scale
y: pos.isMobile
? pos.scale && pos.yPosition * pos.scale
: pos.yPosition
}}
onClick={() => {
@@ -998,7 +990,14 @@ function RenderPdf({
right: { display: "none" },
bottomRight: { display: "block" }
}}
onDragStop={handleStop}
onDragStop={(event, dragElement) =>
handleStop(
event,
dragElement,
data.signerObjId,
pos.key
)
}
default={{
x: pos.xPosition,
y: pos.yPosition
@@ -1043,7 +1042,7 @@ function RenderPdf({
fontSize: "12px",
color: "black",
fontWeight: "600",
// justifyContent: "center",
marginTop: "0px"
}}
>
@@ -1067,7 +1066,6 @@ function RenderPdf({
<Rnd
ref={nodeRef}
key={pos.key}
// lockAspectRatio={2.5}
lockAspectRatio={
pos.Width ? pos.Width / pos.Height : 2.5
}
@@ -1158,7 +1156,6 @@ function RenderPdf({
<Rnd
ref={nodeRef}
key={pos.key}
// lockAspectRatio={2.5}
lockAspectRatio={
pos.Width ? pos.Width / pos.Height : 2.5
}
@@ -1264,13 +1261,11 @@ function RenderPdf({
onLoadSuccess={pageDetails}
ref={pdfRef}
file={pdfUrl ? pdfUrl : pdfDetails[0] && pdfDetails[0].URL}
// file="https://qikinnovation.ams3.digitaloceanspaces.com/exported_file_2068_2023-08-30T05%3A04%3A26.334Z.pdf" // "https://api.printnode.com/static/test/pdf/multipage.pdf" // {pdfUrl ? pdfUrl : signPdfUrl}
>
{Array.from(new Array(numPages), (el, index) => (
<Page
key={index}
pageNumber={pageNumber}
// width={pdfNewWidth}
renderAnnotationLayer={false}
renderTextLayer={false}
onGetAnnotationsError={(error) => {
microfrontends/SignDocuments/src/Component/login.js
+132 -148
View File
@@ -6,41 +6,34 @@ import { useParams } from "react-router-dom";
import { themeColor } from "../utils/ThemeColor/backColor";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
// import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
function Login() {
const { id, userMail,contactBookId, serverUrl } = useParams();
let navigate = useNavigate();
// const history = useHistory();
function Login() {
const { id, userMail, contactBookId, serverUrl } = useParams();
let navigate = useNavigate();
const [email, setEmail] = useState(userMail);
const [OTP, setOTP] = useState("");
const [EnterOTP, setEnterOtp] = useState(false);
const [loading, setLoading] = useState(false);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
handleServerUrl();
}, []);
//https://qik-ai-org.github.io/Sign-MicroappV2/#/login/LqgGeZHd17/raktima.c@qik.ai/https:%2F%2Fserver3.qik.ai%2Fdefaultssty%2F&defaultssty&contracts
// login/LqgGeZHd17/raktima.c@qik.ai/https:%2F%2Fserver3.qik.ai%2Fdefaultssty&defaultssty&contracts
//function generate serverUrl and parseAppId from url and save it in local storage
const handleServerUrl = () => {
// console.log("params", serverUrl);
//split url in array from '&'
localStorage.clear();
const checkSplit = serverUrl.split("&");
const server = checkSplit[0];
const parseId = checkSplit[1];
const appName = checkSplit[2];
// console.log("appName", appName);
const newServer = server.replaceAll("%2F", "/");
localStorage.setItem("baseUrl", newServer);
localStorage.setItem("parseAppId", parseId);
localStorage.setItem("_appName", appName);
setIsLoading(false);
// console.log("checkSPlit", newServer, parseId, appName);
};
const handleChange = (event) => {
@@ -57,26 +50,20 @@ function Login() {
const parseId =
localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
// console.log("server",serverUrl)
if (serverUrl && localStorage) {
setLoading(true);
e.preventDefault();
setEmail(email);
try {
// const { baseUrl, parseAppId, mobile } = this.state;
let url = `${serverUrl}functions/SendOTPMailV1/`;
const headers = {
"Content-Type": "application/json",
"X-Parse-Application-Id": parseId,
"X-Parse-Application-Id": parseId
};
let body = {
email: email.toString(),
// appId: {
// __type: "Pointer",
// className: "w_appinfo",
// objectId: localStorage.getItem("_app_objectId"),
// },
email: email.toString()
};
let Otp = await axios.post(url, body, { headers: headers });
@@ -85,7 +72,7 @@ function Login() {
setEnterOtp(true);
}
} catch (error) {
// this.setState({ loading: false });
alert("something went wrong!");
}
} else {
alert("something went wrong!");
@@ -105,38 +92,30 @@ function Login() {
setLoading(true);
try {
// AuthLoginAs
let url = `${serverUrl}functions/AuthLoginAsMail/`;
const headers = {
"Content-Type": "application/json",
"X-Parse-Application-Id": parseId,
"X-Parse-Application-Id": parseId
};
let body = {
email: email,
// email,
otp: OTP,
otp: OTP
};
let user = await axios.post(url, body, { headers: headers });
// console.log("user", user.data.result);
if (user.data.result === "Invalid Otp") {
alert("Invalid Otp");
setLoading(false);
}else if(user.data.result === "user not found!"){
} else if (user.data.result === "user not found!") {
alert("User not found!");
setLoading(false);
}
else {
} else {
let _user = user.data.result;
localStorage.setItem("UserInformation", JSON.stringify(_user));
// localStorage.setItem("userEmail", email);
localStorage.setItem("username", _user.name);
// console.log("session token", _user.sessionToken);
localStorage.setItem("accesstoken", _user.sessionToken);
setLoading(false);
//navigate user to on signature page
// history.push(`/recipientSignPdf/${id}/${_user.phone}`);
navigate(`/recipientSignPdf/${id}/${contactBookId}`);
}
} catch (error) {}
@@ -146,7 +125,7 @@ function Login() {
};
return (
<React.Fragment>
<div style={{ padding: "2rem" }}>
{isLoading ? (
<div
style={{
@@ -154,7 +133,7 @@ function Login() {
justifyContent: "center",
alignItems: "center",
height: "100vh",
flexDirection: "column",
flexDirection: "column"
}}
>
<img
@@ -172,137 +151,142 @@ function Login() {
margin: "10px",
border: "0.5px solid #c5c7c9",
padding: "30px",
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
}}
>
<div className="main_head">
<div className="main-logo">
<img alt="sign img" src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png" width="100%" />
<img
alt="sign img"
src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"
width="100%"
/>
</div>
</div>
{!EnterOTP ? (
<form>
<div className="row">
<div className="col-sm-6 KLO">
<h2>Welcome Back !</h2>
<span className="KNLO">
Verification code is sent to your email
</span>
<div className="card card-box">
<div className="card-body">
<input
type="email"
className="form-control"
name="mobile"
value={email}
disabled
height={30}
style={{ fontSize: "20px", fontWeight: "600" }}
/>
<br />
</div>
</div>
<div
className="col-md-4 col-sm-4"
style={{
textAlign: "center",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{loading ? (
<button
className="btn btn-info loadinBtn "
type="button"
style={{ marginBottom: "4px", width: "210px" }}
disabled
>
<span
className="spinner-border spinner-border-sm "
role="status"
aria-hidden="true"
></span>
Loading...
</button>
) : (
<button
className="btn btn-sm otpButton"
onClick={(e) => SendOtp(e)}
style={{
marginBottom: "4px",
width: "210px",
background: themeColor(),
color: "white",
fontWeight: "600",
}}
>
Send OTP
</button>
)}
<div className="row">
<div className="col-sm-6 KLO">
<span className="welcomeText">Welcome Back !</span>
<br />
<span className="KNLO">
Verification code is sent to your email
</span>
<div className="card card-box"
style={{borderRadius:"0px"}}
>
<div className="card-body">
<input
type="email"
name="mobile"
value={email}
disabled
className="loginInput"
/>
<br />
</div>
</div>
<div className="btnContainer">
{loading ? (
<button
// className="btn btn-info loadinBtn "
type="button"
style={{
background: themeColor(),
color: "white"
}}
className="verifyBtn"
disabled
>
<span
className="spinner-border spinner-border-sm "
role="status"
aria-hidden="true"
></span>
Loading...
</button>
) : (
<button
className="verifyBtn"
style={{
background: themeColor(),
color: "white",
marginLeft: "0px !important"
}}
// className="btn btn-sm otpButton"
onClick={(e) => SendOtp(e)}
// style={{
// marginBottom: "4px",
// width: "210px",
// background: themeColor(),
// color: "white",
// fontWeight: "600"
// }}
>
Send OTP
</button>
)}
</div>
</div>
</form>
</div>
) : (
<form>
<div className="row">
<div className="col-sm-6 KLO">
<h2>Welcome Back !</h2>
<span className="KNLO">You will get a OTP via Email</span>
<div className="card card-box">
<div className="card-body">
<label>Enter Verification Code</label>
<input
type="number"
className="form-control"
name="OTP"
value={OTP}
min="4"
max="4"
onChange={handleChange}
/>
<div className="row">
<div className="col-sm-6 KLO">
<span className="welcomeText">Welcome Back !</span>
<br />
<span className="KNLO">You will get a OTP via Email</span>
<div className="card card-box">
<div className="card-body">
<label>Enter Verification Code</label>
<input
type="number"
className="loginInput"
name="OTP"
value={OTP}
onChange={handleChange}
/>
<br />
</div>
</div>
<div
className="col-md-4 col-sm-4"
style={{ textAlign: "center" }}
>
{loading ? (
<button
className="btn btn-info "
type="button"
style={{ marginBottom: "4px", width: "210px" }}
disabled
>
<span
className="spinner-border spinner-border-sm "
role="status"
aria-hidden="true"
></span>
Loading...
</button>
) : (
<button
type="button"
onClick={(e) => VerifyOTP(e)}
className="btn btn-info login-btn"
>
Verify
</button>
)}
<br />
</div>
</div>
<div>
{loading ? (
<button
style={{
background: themeColor(),
color: "white"
}}
className="verifyBtn"
type="button"
disabled
>
<span
className="spinner-border spinner-border-sm "
role="status"
aria-hidden="true"
></span>
Loading...
</button>
) : (
<button
type="button"
onClick={(e) => VerifyOTP(e)}
style={{
background: themeColor(),
color: "white"
}}
className="verifyBtn"
>
Verify
</button>
)}
</div>
</div>
</form>
</div>
)}
</div>
)}
</React.Fragment>
</div>
);
}
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+49 -97
View File
@@ -17,11 +17,13 @@ import HandleError from "./component/HandleError";
import Nodata from "./component/Nodata";
import SignerListPlace from "./component/signerListPlace";
import Header from "./component/header";
import { contactBook, contractUsers } from "../utils/Utils";
import { contactBook, contractUsers, getHostUrl } from "../utils/Utils";
import RenderPdf from "./component/renderPdf";
import ModalComponent from "./component/modalComponent";
import { useNavigate } from "react-router-dom";
function PlaceHolderSign() {
const navigate = useNavigate();
const [pdfDetails, setPdfDetails] = useState([]);
const [isMailSend, setIsMailSend] = useState(false);
const [allPages, setAllPages] = useState(null);
@@ -74,7 +76,9 @@ function PlaceHolderSign() {
"#66ccff",
"#ffffcc"
];
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = pdfOriginalWidth / newWidth;
const [{ isOver }, drop] = useDrop({
accept: "BOX",
drop: (item, monitor) => addPositionOfSignature(item, monitor),
@@ -119,7 +123,7 @@ function PlaceHolderSign() {
isDragSignatureSS: !!monitor.isDragging()
})
});
const isMobile = window.innerWidth < 712;
const [{ isDragStampSS }, dragStampSS] = useDrag({
type: "BOX",
@@ -162,7 +166,7 @@ function PlaceHolderSign() {
getDocumentDetails();
}
}, []);
//function for get document details
const getDocumentDetails = async () => {
await axios
@@ -257,56 +261,10 @@ function PlaceHolderSign() {
setIsLoading(loadObj);
}
}
// await axios
// .get(
// `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
// "_appName"
// )}_Contactbook?where={"UserId": {"__type": "Pointer","className": "_User", "objectId":"${
// jsonSender.objectId
// }"}}`,
// {
// headers: {
// "Content-Type": "application/json",
// "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
// "X-Parse-Session-Token": localStorage.getItem("accesstoken"),
// },
// }
// )
// .then((Listdata) => {
// const json = Listdata.data;
// const res = json.results;
// if (res[0] && res.length) {
// setSignerUserId(res[0].objectId);
// const tourstatus = res[0].TourStatus && res[0].TourStatus;
// if (tourstatus && tourstatus.length > 0) {
// setTourStatus(tourstatus);
// const checkTourRecipients = tourstatus.filter(
// (data) => data.placeholder
// );
// if (checkTourRecipients && checkTourRecipients.length > 0) {
// setCheckTourStatus(checkTourRecipients[0].placeholder);
// }
// }
// const loadObj = {
// isLoad: false,
// };
// setIsLoading(loadObj);
// }
// })
// .catch((err) => {
// const loadObj = {
// isLoad: false,
// };
// setHandleError("Error: Something went wrong!");
// setIsLoading(loadObj);
// });
};
//function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => {
const isMobile = window.innerWidth < 712;
if (isMobile) {
if (selectedEmail) {
getSignerPos(item, monitor);
@@ -317,11 +275,8 @@ function PlaceHolderSign() {
getSignerPos(item, monitor);
}
};
const getSignerPos = (item, monitor) => {
const isMobile = window.innerWidth < 712;
const newWidth = window.innerWidth;
const scale = pdfOriginalWidth / newWidth;
const key = Math.floor(1000 + Math.random() * 9000);
let filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signerObjId
@@ -336,7 +291,8 @@ function PlaceHolderSign() {
isStamp: monitor,
key: key,
isDrag: false,
scale: isMobile && scale,
scale: scale,
isMobile: isMobile,
yBottom: window.innerHeight / 2 - 60
};
dropData.push(dropObj);
@@ -365,7 +321,8 @@ function PlaceHolderSign() {
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom,
scale: isMobile && scale
scale: scale,
isMobile: isMobile
};
dropData.push(dropObj);
@@ -394,16 +351,12 @@ function PlaceHolderSign() {
//add entry of position for same signer on multiple page
if (getPageNumer.length > 0) {
const getPos = getPageNumer[0].pos;
//if (updateData.length > dropData.length) {
const newSignPos = getPos.concat(dropData);
let xyPos = {
pageNumber: pageNumber,
pos: newSignPos
};
updatePlace.push(xyPos);
let placeHolderPos = {
blockColor: color[isSelectListId],
signerObjId: signerObjId,
@@ -417,7 +370,6 @@ function PlaceHolderSign() {
signerPos.splice(colorIndex, 1, placeHolderPos);
} else {
// const newSignPos = getPlaceHolder.push(xyPosArr[0]);
const newSignPoss = getPlaceHolder.concat(xyPosArr[0]);
let placeHolderPos = {
@@ -444,7 +396,7 @@ function PlaceHolderSign() {
blockColor: color[isSelectListId],
placeHolder: xyPosArr
};
setSignerPos((prev) => [...prev, placeHolderPos]);
}
};
@@ -467,17 +419,19 @@ function PlaceHolderSign() {
};
//function for set and update x and y postion after drag and drop signature tab
const handleStop = (event, dragElement) => {
const handleStop = (event, dragElement, signerId, key) => {
const containerRect = document
.getElementById("container")
.getBoundingClientRect();
const signId = signerId ? signerId : signerObjId;
const keyValue = key ? key : dragKey;
const ybottom = containerRect.height - dragElement.y;
if (dragKey >= 0) {
if (keyValue >= 0) {
const filterSignerPos = signerPos.filter(
(data) => data.signerObjId === signerObjId
(data) => data.signerObjId === signId
);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -490,7 +444,7 @@ function PlaceHolderSign() {
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === dragKey) {
if (url.key === keyValue) {
return {
...url,
xPosition: dragElement.x,
@@ -509,16 +463,15 @@ function PlaceHolderSign() {
return obj;
});
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.signerObjId === signerObjId) {
if (obj.signerObjId === signId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
}
// }
}
};
@@ -556,6 +509,7 @@ function PlaceHolderSign() {
}
return obj;
});
setSignerPos(newUpdateSigner);
} else {
const updateFilter = signerPos.filter(
@@ -577,6 +531,7 @@ function PlaceHolderSign() {
(data) => data.signerObjId !== signerId
);
signerupdate.push(newUpdatePos[0]);
setSignerPos(signerupdate);
} else {
setSignerPos(updateFilter);
@@ -621,12 +576,14 @@ function PlaceHolderSign() {
}
return obj;
});
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.signerObjId === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
} else {
const getXYdata = getPageNumer[0].pos;
@@ -650,12 +607,14 @@ function PlaceHolderSign() {
}
return obj;
});
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.signerObjId === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
}
@@ -667,11 +626,9 @@ function PlaceHolderSign() {
setSignBtnPosition([]);
setPageNumber((prevPageNumber) => prevPageNumber + offset);
}
//function for capture position on hover signature button
const handleDivClick = (e) => {
// if (signBtnPosition.length == 0) {
const divRect = e.currentTarget.getBoundingClientRect();
const mouseX = e.clientX - divRect.left;
const mouseY = e.clientY - divRect.top;
@@ -721,17 +678,13 @@ function PlaceHolderSign() {
month: "long",
year: "numeric"
});
let sender = signersdata.ExtUserPtr.Email;
// let sender ="raktima.c@qik.ai"
const signerMail = signersdata.Signers;
const signerMail = signersdata.Signers;
for (let i = 0; i < signerMail.length; i++) {
try {
const imgPng =
"https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
// "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png";
let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3/`;
const headers = {
"Content-Type": "application/json",
@@ -800,14 +753,12 @@ function PlaceHolderSign() {
}
)
.then((result) => {
// const res = result.data;
setIsSend(true);
setIsMailSend(true);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
// console.log("save res", res);
})
.catch((err) => {
console.log("axois err ", err);
@@ -889,6 +840,12 @@ function PlaceHolderSign() {
console.log("axois err ", err);
});
};
const handleRecipientSign = () => {
const hostUrl = getHostUrl();
navigate(
`${hostUrl}recipientSignPdf/${documentId}/${currentEmail[0].objectId}`
);
};
return (
<DndProvider backend={HTML5Backend}>
{isLoading.isLoad ? (
@@ -993,7 +950,6 @@ function PlaceHolderSign() {
style={{
background: themeColor()
}}
// className="bg-danger"
>
<span style={{ color: "white" }}>Send Mail </span>
</Modal.Header>
@@ -1023,21 +979,19 @@ function PlaceHolderSign() {
No
</button>
<a
style={{ color: "white" }}
href={`https://qik-ai-org.github.io/Sign-MicroappV2/#/recipientSignPdf/${documentId}/${currentEmail[0].objectId}`}
<button
onClick={() => {
handleRecipientSign();
}}
style={{
background: themeColor(),
color: "white"
}}
type="button"
className="finishBtn"
>
<button
style={{
background: themeColor(),
color: "white"
}}
type="button"
className="finishBtn"
>
Yes
</button>
</a>
Yes
</button>
</>
) : (
<button
@@ -1160,8 +1114,6 @@ function PlaceHolderSign() {
dragRef={dragRef}
isDragStamp={isDragStamp}
isSignYourself={false}
// xyPostion={xyPostion}
// isSigners={false}
addPositionOfSignature={addPositionOfSignature}
/>
</div>
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+160 -156
View File
@@ -69,7 +69,7 @@ function EmbedPdfImage() {
});
const docId = id && id;
//"F0hg0twSJH";
const isMobile = window.innerWidth < 767;
const index = xyPostion.findIndex((object) => {
return object.pageNumber === pageNumber;
});
@@ -85,12 +85,10 @@ function EmbedPdfImage() {
//function for get document details for perticular signer with signer'object id
const getDocumentDetails = async () => {
//aspfUo7wRl
let currUserId, userObjectId;
const json = await contactBookName(contactBookId, "_Users");
const json = await contactBookName(contactBookId, "_Contactbook");
if (json !== "Error: Something went wrong!" && json && json.results[0]) {
setContractName("_Users");
setContractName("_Contactbook");
if (json.results[0]) {
userObjectId = json.results[0].UserId.objectId;
setUserObjectID(userObjectId);
@@ -123,9 +121,10 @@ function EmbedPdfImage() {
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
} else {
const json = await contactBookName(contactBookId, "_Contactbook");
if (json && json.results[0]) {
setContractName("_Contactbook");
const json = await contactBookName(contactBookId, "_Users");
if (json !== "Error: Something went wrong!" && json && json.results[0]) {
setContractName("_Users");
if (json.results[0]) {
userObjectId = json.results[0].UserId.objectId;
setUserObjectID(userObjectId);
@@ -151,57 +150,14 @@ function EmbedPdfImage() {
};
setIsLoading(loadObj);
}
} else if (json === "Error: Something went wrong!") {
const loadObj = {
isLoad: false
};
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
}
}
// await axios
// .get(//m4GJ12tm87
// `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
// "_appName"
// )}_Contactbook?where={"Phone":"${userPhone}"}`,
// {
// headers: {
// "Content-Type": "application/json",
// "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
// sessionToken: localStorage.getItem("accesstoken"),
// },
// }
// )
// .then((Listdata) => {
// const json = Listdata.data;
// if (json.results[0]) {
// userObjectId = json.results[0].UserId.objectId;
// setUserObjectID(userObjectId);
// currUserId = json.results[0].objectId;
// setSignerUserId(currUserId);
// const tourstatus =
// json.results[0].TourStatus && json.results[0].TourStatus;
// if (tourstatus && tourstatus.length > 0) {
// setTourStatus(tourstatus);
// const checkTourRecipients = tourstatus.filter(
// (data) => data.recipientssign
// );
// if (checkTourRecipients && checkTourRecipients.length > 0) {
// setCheckTourStatus(checkTourRecipients[0].recipientssign);
// }
// }
// } else {
// setNoData(true);
// const loadObj = {
// isLoad: false,
// };
// setIsLoading(loadObj);
// }
// })
// .catch((err) => {
// const loadObj = {
// isLoad: false,
// };
// setHandleError("Error: Something went wrong!");
// setIsLoading(loadObj);
// });
await axios
.get(
@@ -220,7 +176,6 @@ function EmbedPdfImage() {
.then((Listdata) => {
const json = Listdata.data;
const res = json.results;
// console.log("res",res)
if (res[0] && res.length > 0) {
const declined = res[0].IsDeclined && res[0].IsDeclined;
const isCompleted = res[0].IsCompleted && res[0].IsCompleted;
@@ -233,16 +188,12 @@ function EmbedPdfImage() {
//then show alert with completed message
const alreadySign = {
status: true,
mssg: "This document has already been signed!"
mssg: "This document has been successfully signed!"
};
setIsAlreadySign(alreadySign);
setPdfUrl(res[0].SignedUrl);
setSignedPdfData(json.results);
setCompletePdfData(res);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
} else if (declined) {
const currentDecline = {
currnt: "another",
@@ -251,11 +202,6 @@ function EmbedPdfImage() {
setIsDecline(currentDecline);
setSignedPdfData(json.results);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
} else if (currDate > expireUpdateDate) {
setIsExpired(true);
const checkDocIdExist =
@@ -282,11 +228,6 @@ function EmbedPdfImage() {
const key = currUser[0].placeHolder[0].pos[0].key;
setSignKey(key);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
}
//for show current requested signer's placeholder
else {
@@ -302,17 +243,7 @@ function EmbedPdfImage() {
const key = currUser[0].placeHolder[0].pos[0].key;
setSignKey(key);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
}
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
} else {
//checking document has signed by someone or not
@@ -326,6 +257,7 @@ function EmbedPdfImage() {
//if signed by someone than go to in if condition
// and second signer could not be add documentId
//for that setIsDocId true
if (checkDocIdExist && checkDocIdExist.length > 0) {
setIsDocId(true);
@@ -336,7 +268,7 @@ function EmbedPdfImage() {
data.Activity === "Signed"
);
// if checkAlreadyBySigner has some data that current user alredy sign this document
// if checkAlreadyBySigner has some data that current user already sign this document
// then show alert with message
if (checkAlreadyBySigner && checkAlreadyBySigner.length > 0) {
const alreadySign = {
@@ -345,10 +277,7 @@ function EmbedPdfImage() {
};
setIsAlreadySign(alreadySign);
setPdfUrl(res[0].SignedUrl);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
setSignedPdfData(json.results);
}
//else show placeholder of current requested signer
else {
@@ -364,11 +293,6 @@ function EmbedPdfImage() {
const key = currUser[0].placeHolder[0].pos[0].key;
setSignKey(key);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
}
}
//for show current requested signer's placeholder
@@ -385,19 +309,8 @@ function EmbedPdfImage() {
const key = currUser[0].placeHolder[0].pos[0].key;
setSignKey(key);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
}
}
} else {
setNoData(true);
const loadObj = {
isLoad: false
};
setIsLoading(loadObj);
}
})
.catch((err) => {
@@ -434,8 +347,12 @@ function EmbedPdfImage() {
setIsLoading(loadObj);
})
.catch((err) => {
// this.setState({ loading: false });
console.log("axois err ", err);
const loadObj = {
isLoad: false
};
setHandleError("Error: Something went wrong!");
setIsLoading(loadObj);
});
};
@@ -624,23 +541,62 @@ function EmbedPdfImage() {
? imgUrlList[id].Height
: 60;
const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150;
const isMobile = window.innerWidth < 712;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
page.drawImage(img, {
x: isMobile
? imgUrlList[id].xPosition * scale + 50
: imgUrlList[id].xPosition,
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
const yPos = (pos) => {
//checking both condition mobile and desktop view
y:
page.getHeight() - imgUrlList[id].yPosition * scale - imgHeight,
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yPosition * (pos.scale / scale);
return page.getHeight() - y * scale - imgHeight;
} else {
const y = pos.yPosition / scale;
return page.getHeight() - y * scale - imgHeight;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yPosition * pos.scale;
return page.getHeight() - y - imgHeight;
} else {
return page.getHeight() - pos.yPosition - imgHeight;
}
}
};
page.drawImage(img, {
x: xPos(imgUrlList[id]),
y: yPos(imgUrlList[id]),
width: imgWidth,
height: imgHeight
});
});
}
const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
//console.log("pdfbyte", pdfBytes);
signPdfFun(pdfBytes, docId);
}
@@ -658,29 +614,87 @@ function EmbedPdfImage() {
pdfBase64Url,
pageNo
) => {
let signgleSign;
const isMobile = window.innerWidth < 712;
let singleSign;
const isMobile = window.innerWidth < 767;
const newWidth = window.innerWidth;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const height = xyPosData ? xyPosData.Height : 60;
const xPos = (pos) => {
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const x = pos.xPosition * (pos.scale / scale);
return x * scale + 50;
} else {
const x = pos.xPosition / scale;
return x * scale;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const x = pos.xPosition * pos.scale + 50;
return x;
} else {
return pos.xPosition;
}
}
};
const yBottom = (pos) => {
let yPosition;
//checking both condition mobile and desktop view
if (isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = pos.yPosition * (pos.scale / scale);
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
} else {
const y = pos.yBottom / scale;
yPosition = pos.isDrag
? y * scale - height
: pos.firstYPos
? y * scale - height + pos.firstYPos
: y * scale - height;
return yPosition;
}
} else {
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
if (pos.isMobile) {
const y = pos.yBottom * pos.scale;
yPosition = pos.isDrag
? y - height
: pos.firstYPos
? y - height + pos.firstYPos
: y - height;
return yPosition;
} else {
yPosition = pos.isDrag
? pos.yBottom - height
: pos.firstYPos
? pos.yBottom - height + pos.firstYPos
: pos.yBottom - height;
return yPosition;
}
}
};
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
const height = xyPosData.Height ? xyPosData.Height : 60;
const bottomY = xyPosData.isDrag
? xyPosData.yBottom * scale - height
: xyPosData.firstYPos
? xyPosData.yBottom * scale - height + xyPosData.firstYPos
: xyPosData.yBottom * scale - height;
signgleSign = {
const bottomY = yBottom(xyPosData);
singleSign = {
pdfFile: pdfBase64Url,
docId: docId,
userId: signerUserId,
sign: {
Base64: base64Url,
Left: isMobile
? xyPosData.resizeXPos
? xyPosData.resizeXPos * scale + 80
: xyPosData.xPosition * scale + 80
: xyPosData.resizeXPos
? xyPosData.resizeXPos
: xyPosData.xPosition,
Left: xPos(xyPosData),
Bottom: bottomY,
Width: xyPosData.Width ? xyPosData.Width : 150,
Height: height,
@@ -688,33 +702,25 @@ function EmbedPdfImage() {
}
};
} else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) {
signgleSign = {
singleSign = {
pdfFile: base64Url,
docId: docId
docId: docId,
userId: signerUserId
};
}
await axios
.post(
`${localStorage.getItem("baseUrl")}functions/signPdf`,
signgleSign,
{
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken")
}
.post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
headers: {
"Content-Type": "application/json",
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
sessionToken: localStorage.getItem("accesstoken")
}
)
})
.then((Listdata) => {
const json = Listdata.data;
if (json.result.data) {
// setPdfUrl(json.result.data);
// const loadObj = {
// isLoad: false,
// };
// setIsLoading(loadObj);
getDocumentDetails();
}
})
@@ -731,8 +737,6 @@ function EmbedPdfImage() {
//function for image upload or update
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
// setIsSignPad(false);
const imageType = event.target.files[0].type;
const reader = new FileReader();
@@ -872,7 +876,7 @@ function EmbedPdfImage() {
} else {
updatedTourStatus = [{ recipientssign: true }];
}
// console.log("updatedTourStatus", updatedTourStatus);
await axios
.put(
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -899,7 +903,6 @@ function EmbedPdfImage() {
});
};
// console.log("is sign",isAlreadySign.status)
const tourFunction = () => {
const tourConfig = [
{
@@ -922,16 +925,17 @@ function EmbedPdfImage() {
}
];
const stepsToShow =
!defaultSignImg &&
tourConfig.filter(
(step, index) => step.selector !== '[data-tut="reactourFirst"]'
let stepsToShow = [];
if (!defaultSignImg || isMobile) {
stepsToShow = tourConfig.filter(
(step) => step.selector !== '[data-tut="reactourFirst"]'
);
}
return (
<Tour
onRequestClose={closeTour}
steps={stepsToShow}
steps={stepsToShow && stepsToShow.length > 0 ? stepsToShow : tourConfig}
isOpen={signTour}
closeWithMask={false}
rounded={5}
@@ -1112,7 +1116,7 @@ function EmbedPdfImage() {
/>
</div>
{!pdfUrl && !isAlreadySign.status ? (
{!pdfUrl ? (
<div data-tut="reactourFirst">
{/* this component is used to render default signature of user in the right side of the component */}
microfrontends/SignDocuments/src/css/LoginPage.css
+65 -6
View File
@@ -1,9 +1,46 @@
.react-tel-input .form-control {
.loginInput{
padding: 10px;
border-radius: 4px;
width: 100%;
height: 45px;
margin-top: 4px;
font-size: 0.75rem;
border: 1px solid #e2dddd;;
background-color: #e0e5f5;
color: black;
padding-left: 1rem!important;
padding-right: 1rem!important;
padding-top: 0.5rem!important;
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-weight: inherit;
overflow: visible;
}
.loginInput:focus{
outline: none;
border: none;
}
.verifyBtn{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
padding: 3px 30px;
color: white;
font-weight: 500 !important;
font-size: 14px !important;
border: none;
}
.verifyBtn:focus {
border: none;
outline: none;
}
.verifyBtn:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
color: white;
}
.fakeimg {
height: 200px;
background: #aaa;
@@ -110,16 +147,17 @@
.KNLO {
color: #878787;
font-size: 13px;
}
.form-check-label {
margin-left: 17px;
margin-bottom: 12px;
}
input:focus {
border-color: #ccc !important;
.welcomeText{
font-size: 30px;
}
@media only screen and (max-width: 600px) {
.KLO1 {
@@ -148,4 +186,25 @@ input:focus {
}
@media screen and (max-width:366px) {
.main-logo {
width: 150px;
height: 46px;
display: inline-block;
}
.welcomeText{
font-size: 20px;
}
.KNLO {
color: #878787;
font-size: 10px;
}
.btnContainer{
display: flex;
justify-content: center;
align-items: center;
}
}
microfrontends/SignDocuments/src/css/signature.css
+777 -742
View File
File diff suppressed because it is too large Load Diff
microfrontends/SignDocuments/src/utils/Utils.js
+14 -40
View File
@@ -62,6 +62,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
let newWidth, nweHeight;
const aspectRatio = imgWH.width / imgWH.height;
const getXYdata = xyPostion[index].pos;
if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
nweHeight = aspectRatio * 100;
@@ -78,13 +79,15 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
newWidth = aspectRatio * 10;
nweHeight = 10;
}
const getPosData = getXYdata;
const addSign = getPosData.map((url, ind) => {
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: newWidth,
Height: nweHeight,
Width: getPosData[0].Width ? getPosData[0].Width : 150,
Height: getPosData[0].Height ? getPosData[0].Height : 60,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -103,8 +106,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
} else {
const getXYdata = xyPostion[index].pos;
const getPosData = getXYdata;
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
const aspectRatio = imgWH.width / imgWH.height;
let newWidth, newHeight;
@@ -125,12 +127,12 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
newHeight = 10;
}
const addSign = getPosData.map((url, ind) => {
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: newWidth,
Height: newHeight,
Width: getPosData[0].Width ? getPosData[0].Width : 150,
Height: getPosData[0].Height ? getPosData[0].Height : 60,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -151,15 +153,10 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
//function for save button to save signature or image url
export function onSaveSign(xyPostion, index, signKey, signatureImg) {
// const updateFilter = xyPostion[index].pos.filter(
// (data) => data.key === signKey && data.SignUrl
// );
let getXYdata = xyPostion[index].pos;
let getPosData = getXYdata;
// if (updateFilter.length > 0) {
// updateFilter[0].SignUrl = signatureImg;
const addSign = getPosData.map((url, ind) => {
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
@@ -178,27 +175,6 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) {
return obj;
});
return newUpdateUrl;
// } else {
// const addSign = getPosData.map((url, ind) => {
// if (url.key === signKey) {
// return {
// ...url,
// SignUrl: signatureImg,
// Width: getPosData[0].Width ? getPosData[0].Width : 150,
// Height: getPosData[0].Height ? getPosData[0].Height : 60
// };
// }
// return url;
// });
// const newUpdateUrl = xyPostion.map((obj, ind) => {
// if (ind === index) {
// return { ...obj, pos: addSign };
// }
// return obj;
// });
// return newUpdateUrl;
// }
}
//function for getting contract_User details
@@ -278,5 +254,3 @@ export const contactBookName = async (objectId, className) => {
});
return result;
};