mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-26 17:42:33 +02:00
+2
-1
@@ -23,4 +23,5 @@ npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
apps/OpenSign/public/mfbuild/*
|
||||
microfrontends/SignDocuments/build/*
|
||||
microfrontends/SignDocuments/build/*
|
||||
apps/OpenSignServer/files/files/*
|
||||
+19
-2
@@ -127,7 +127,24 @@ openssl pkcs12 -inkey ./cert/local_dev.key -in ./cert/local_dev.crt -export -out
|
||||
openssl base64 -in ./cert/local_dev.pfx -out ./cert/base64_pfx
|
||||
```
|
||||
|
||||
#Build Local Environment
|
||||
# CORS Configuration
|
||||
|
||||
Below are the steps to follow -
|
||||
As document storage is delegated to S3-compatible services that reside in a different host than the OpenSign one, document operations (loading, storing, deleting) are subject to [Cross-Origin Resource Sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) restriction policies; as a consequence, OpenSign app may fail with (browser console) errors like the following:
|
||||
```
|
||||
Access to fetch at 'https://foo.nyc3.digitaloceanspaces.com/exported_file_4627_0000-00-00T00%3A45%3A43.344Z.pdf'
|
||||
from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
|
||||
is present on the requested resource. If an opaque response serves your needs, set the request's mode to
|
||||
'no-cors' to fetch the resource with CORS disabled.
|
||||
```
|
||||
|
||||
In order to address this, your document storage system must be instructed to accept requests from other hosts; below the relevant documentation links:
|
||||
- [How to Configure CORS on DigitalOcean Spaces](https://docs.digitalocean.com/products/spaces/how-to/configure-cors/)
|
||||
- [Configuring cross-origin resource sharing on AWS S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html)
|
||||
|
||||
# Build Local Environment
|
||||
|
||||
Command to build project -
|
||||
- Execute `make build`
|
||||
|
||||
Command to run project -
|
||||
- Execute `make run`
|
||||
@@ -1,3 +1,9 @@
|
||||
build:
|
||||
cp .env.local_dev .env
|
||||
rm -rf apps/OpenSign/public/mfbuild
|
||||
cd microfrontends/SignDocuments && npm install && npm run build
|
||||
docker compose up -d
|
||||
|
||||
run:
|
||||
cp .env.local_dev .env
|
||||
docker compose up -d
|
||||
@@ -21,5 +21,5 @@ EXPOSE 3000
|
||||
# ENV NODE_ENV production
|
||||
|
||||
# Run the application
|
||||
CMD ["npm", "start"]
|
||||
ENTRYPOINT npm run start-dev
|
||||
|
||||
|
||||
@@ -4,6 +4,12 @@ import multerS3 from 'multer-s3';
|
||||
import aws from 'aws-sdk';
|
||||
import dotenv from 'dotenv';
|
||||
dotenv.config();
|
||||
|
||||
function sanitizeFileName(fileName) {
|
||||
// Remove spaces and invalid characters
|
||||
return fileName.replace(/[^a-zA-Z0-9._-]/g, '');
|
||||
}
|
||||
|
||||
async function uploadFile(req, res) {
|
||||
try {
|
||||
//--size extended to 100 mb
|
||||
@@ -50,16 +56,28 @@ async function uploadFile(req, res) {
|
||||
region: process.env.DO_REGION,
|
||||
});
|
||||
|
||||
// const s3 = new aws.S3();
|
||||
const upload = multer({
|
||||
fileFilter: function (req, file, cb) {
|
||||
if (accepted_extensions.some(ext => file.originalname.toLowerCase().endsWith('.' + ext))) {
|
||||
return cb(null, true);
|
||||
const parseBaseUrl = process.env.SERVER_URL;
|
||||
const parseAppId = process.env.APP_ID;
|
||||
|
||||
if (process.env.USE_LOCAL == "TRUE") {
|
||||
var fileStorage = multer.diskStorage({
|
||||
destination: function(req, file, cb) {
|
||||
cb(null, "files/files");
|
||||
},
|
||||
metadata: function (req, file, cb) {
|
||||
cb(null, { fieldName: 'OPENSIGN_METADATA' });
|
||||
},
|
||||
filename: function(req, file, cb) {
|
||||
let filename = file.originalname;
|
||||
let newFileName = filename.split('.')[0];
|
||||
let extension = filename.split('.')[1];
|
||||
newFileName = sanitizeFileName(newFileName + '_' + new Date().toISOString() + '.' + extension)
|
||||
console.log(newFileName);
|
||||
cb(null, newFileName);
|
||||
}
|
||||
// otherwise, return error
|
||||
return cb('Only ' + accepted_extensions.join(', ') + ' files are allowed!');
|
||||
},
|
||||
storage: multerS3({
|
||||
});
|
||||
} else {
|
||||
var fileStorage = multerS3({
|
||||
acl: 'public-read',
|
||||
s3,
|
||||
bucket: DO_SPACE,
|
||||
@@ -69,14 +87,25 @@ async function uploadFile(req, res) {
|
||||
key: function (req, file, cb) {
|
||||
//console.log(file);
|
||||
let filename = file.originalname;
|
||||
let filenam = filename.split('.')[0];
|
||||
let newFileName = filename.split('.')[0];
|
||||
let extension = filename.split('.')[1];
|
||||
filenam = filenam + '_' + new Date().toISOString() + '.' + extension;
|
||||
console.log(filenam);
|
||||
cb(null, filenam);
|
||||
},
|
||||
}),
|
||||
newFileName = sanitizeFileName(newFileName + '_' + new Date().toISOString() + '.' + extension)
|
||||
console.log(newFileName);
|
||||
cb(null, newFileName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// const s3 = new aws.S3();
|
||||
const upload = multer({
|
||||
fileFilter: function (req, file, cb) {
|
||||
if (accepted_extensions.some(ext => file.originalname.toLowerCase().endsWith('.' + ext))) {
|
||||
return cb(null, true);
|
||||
}
|
||||
// otherwise, return error
|
||||
return cb('Only ' + accepted_extensions.join(', ') + ' files are allowed!');
|
||||
},
|
||||
storage: fileStorage,
|
||||
limits: { fileSize: size },
|
||||
}).single('file');
|
||||
|
||||
@@ -93,7 +122,14 @@ async function uploadFile(req, res) {
|
||||
const status = 'Success';
|
||||
//res.header("Access-Control-Allow-Headers", "Content-Type");
|
||||
//res.setHeader("Access-Control-Allow-Origin", "*");
|
||||
return res.json({ status, imageUrl: req.file.location });
|
||||
if (process.env.USE_LOCAL == "TRUE") {
|
||||
console.log(req.file);
|
||||
var fileUrl = `${parseBaseUrl}/files/${parseAppId}/${req.file.filename}`;
|
||||
} else {
|
||||
var fileUrl = req.file.location;
|
||||
}
|
||||
|
||||
return res.json({ status, imageUrl: fileUrl });
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Exeption in query ' + err.stack);
|
||||
|
||||
@@ -37,7 +37,7 @@ function Header({
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isGuestSigner = localStorage.getItem("isGuestSigner");
|
||||
//for go to previous page
|
||||
function previousPage() {
|
||||
changePage(-1);
|
||||
@@ -81,14 +81,16 @@ function Header({
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ paddingBottom: "5px", paddingTop: "5px" }}
|
||||
style={{ padding: !isGuestSigner && "5px 0px 5px 0px" }}
|
||||
className="mobileHead"
|
||||
>
|
||||
{isMobile && isShowHeader ? (
|
||||
<div
|
||||
id="navbar"
|
||||
className="stickyHead"
|
||||
style={{ width: window.innerWidth - 30 + "px" }}
|
||||
className={isGuestSigner ? "stickySignerHead" : "stickyHead"}
|
||||
style={{
|
||||
width: isGuestSigner ? window.innerWidth : window.innerWidth - 30 + "px"
|
||||
}}
|
||||
>
|
||||
<div className="preBtn2">
|
||||
<div
|
||||
|
||||
@@ -42,8 +42,42 @@ function RenderPdf({
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const newWidth = window.innerWidth;
|
||||
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
|
||||
//function for render placeholder block over pdf document
|
||||
|
||||
// handle signature block width and height according to screen
|
||||
const posWidth = (pos) => {
|
||||
let width;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
width = pos.Width / scale ? pos.Width / scale : 150 / scale;
|
||||
return width;
|
||||
} else {
|
||||
width = pos.Width ? pos.Width : 150;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = pos.Width ? pos.Width : 150;
|
||||
return width;
|
||||
}
|
||||
};
|
||||
const posHeight = (pos) => {
|
||||
let width;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
width = pos.Height / scale ? pos.Height / scale : 60 / scale;
|
||||
return width;
|
||||
} else {
|
||||
width = pos.Height ? pos.Height : 60;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = pos.Height ? pos.Height : 60;
|
||||
return width;
|
||||
}
|
||||
};
|
||||
//check isGuestSigner is present in local if yes than handle login flow header in mobile view
|
||||
const isGuestSigner = localStorage.getItem("isGuestSigner");
|
||||
|
||||
//function for render placeholder block over pdf document
|
||||
const checkSignedSignes = (data) => {
|
||||
const checkSign = signedSigners.filter(
|
||||
(sign) => sign.objectId === data.signerObjId
|
||||
@@ -56,7 +90,7 @@ function RenderPdf({
|
||||
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;
|
||||
return pos.xPosition / scale - 20;
|
||||
}
|
||||
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
||||
else {
|
||||
@@ -134,8 +168,8 @@ function RenderPdf({
|
||||
borderWidth: "0.2px"
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
lockAspectRatio={pos.Width && 2.5}
|
||||
default={{
|
||||
@@ -205,8 +239,8 @@ function RenderPdf({
|
||||
y: yPos(pos)
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
lockAspectRatio={pos.Width ? pos.Width / pos.Height : 2.5}
|
||||
>
|
||||
@@ -235,7 +269,8 @@ function RenderPdf({
|
||||
{isMobile && scale ? (
|
||||
<div
|
||||
style={{
|
||||
border: "0.1px solid #ebe8e8"
|
||||
border: "0.1px solid #ebe8e8",
|
||||
marginTop: isGuestSigner && "30px"
|
||||
}}
|
||||
ref={drop}
|
||||
id="container"
|
||||
@@ -294,12 +329,11 @@ function RenderPdf({
|
||||
borderWidth: "0.2px"
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
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.isMobile
|
||||
@@ -361,14 +395,13 @@ function RenderPdf({
|
||||
borderWidth: "0.2px"
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
disableDragging={true}
|
||||
default={{
|
||||
//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,
|
||||
@@ -1281,4 +1314,4 @@ function RenderPdf({
|
||||
);
|
||||
}
|
||||
|
||||
export default RenderPdf;
|
||||
export default RenderPdf;
|
||||
@@ -38,19 +38,15 @@ function Login() {
|
||||
|
||||
const handleChange = (event) => {
|
||||
const { value } = event.target;
|
||||
|
||||
setOTP(value);
|
||||
};
|
||||
|
||||
//send email OTP function
|
||||
|
||||
const SendOtp = async (e) => {
|
||||
const serverUrl =
|
||||
localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
|
||||
|
||||
const parseId =
|
||||
localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
|
||||
|
||||
if (serverUrl && localStorage) {
|
||||
setLoading(true);
|
||||
e.preventDefault();
|
||||
@@ -84,13 +80,10 @@ function Login() {
|
||||
e.preventDefault();
|
||||
const serverUrl =
|
||||
localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
|
||||
|
||||
const parseId =
|
||||
localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
|
||||
|
||||
if (OTP) {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
let url = `${serverUrl}functions/AuthLoginAsMail/`;
|
||||
const headers = {
|
||||
@@ -102,7 +95,6 @@ function Login() {
|
||||
otp: OTP
|
||||
};
|
||||
let user = await axios.post(url, body, { headers: headers });
|
||||
|
||||
if (user.data.result === "Invalid Otp") {
|
||||
alert("Invalid Otp");
|
||||
setLoading(false);
|
||||
@@ -114,10 +106,12 @@ function Login() {
|
||||
localStorage.setItem("UserInformation", JSON.stringify(_user));
|
||||
localStorage.setItem("username", _user.name);
|
||||
localStorage.setItem("accesstoken", _user.sessionToken);
|
||||
//save isGuestSigner true in local to handle login flow header in mobile view
|
||||
localStorage.setItem("isGuestSigner", true);
|
||||
setLoading(false);
|
||||
//navigate user to on signature page
|
||||
// navigate(`/recipientSignPdf/${id}/${contactBookId}`);
|
||||
navigate(`/loadmf/signmicroapp/recipientSignPdf/${id}/${contactBookId}`);
|
||||
navigate(
|
||||
`/loadmf/signmicroapp/recipientSignPdf/${id}/${contactBookId}`
|
||||
);
|
||||
}
|
||||
} catch (error) {}
|
||||
} else {
|
||||
@@ -173,9 +167,7 @@ function Login() {
|
||||
<span className="KNLO">
|
||||
Verification code is sent to your email
|
||||
</span>
|
||||
<div className="card card-box"
|
||||
style={{borderRadius:"0px"}}
|
||||
>
|
||||
<div className="card card-box" style={{ borderRadius: "0px" }}>
|
||||
<div className="card-body">
|
||||
<input
|
||||
type="email"
|
||||
@@ -190,7 +182,6 @@ function Login() {
|
||||
<div className="btnContainer">
|
||||
{loading ? (
|
||||
<button
|
||||
// className="btn btn-info loadinBtn "
|
||||
type="button"
|
||||
style={{
|
||||
background: themeColor(),
|
||||
@@ -214,15 +205,7 @@ function Login() {
|
||||
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>
|
||||
|
||||
@@ -952,7 +952,7 @@ function PlaceHolderSign() {
|
||||
background: themeColor()
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "white" }}>Send Mail </span>
|
||||
<span style={{ color: "white" }}>Mails Sent</span>
|
||||
</Modal.Header>
|
||||
|
||||
{/* signature modal */}
|
||||
|
||||
@@ -74,7 +74,8 @@ function EmbedPdfImage() {
|
||||
return object.pageNumber === pageNumber;
|
||||
});
|
||||
const divRef = useRef(null);
|
||||
|
||||
//check isGuestSigner is present in local if yes than handle login flow header in mobile view
|
||||
const isGuestSigner = localStorage.getItem("isGuestSigner");
|
||||
useEffect(() => {
|
||||
const clientWidth = window.innerWidth;
|
||||
const pdfWidth = clientWidth - 160 - 220 - 30;
|
||||
@@ -1010,8 +1011,8 @@ function EmbedPdfImage() {
|
||||
{/* pdf render view */}
|
||||
<div
|
||||
style={{
|
||||
marginLeft: pdfOriginalWidth > 500 && "20px",
|
||||
marginRight: pdfOriginalWidth > 500 && "20px"
|
||||
marginLeft: !isGuestSigner && pdfOriginalWidth > 500 && "20px",
|
||||
marginRight: !isGuestSigner && pdfOriginalWidth > 500 && "20px"
|
||||
}}
|
||||
>
|
||||
{/* this modal is used show this document is already sign */}
|
||||
@@ -1126,9 +1127,9 @@ function EmbedPdfImage() {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* ndD5gdaxqw */}
|
||||
|
||||
</DndProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default EmbedPdfImage;
|
||||
export default EmbedPdfImage;
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user