Merge pull request #15 from OpenSignLabs/staging

update
This commit is contained in:
Raktima
2023-11-10 10:28:02 +05:30
committed by GitHub
12 changed files with 882 additions and 802 deletions
+2 -1
View File
@@ -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
View File
@@ -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`
+6
View File
@@ -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
+1 -1
View File
@@ -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