WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style: formatted entire repo

Browse Source
This commit is contained in:
Florent Chehab
2020-05-09 15:40:26 +02:00
parent dafb9f4646
commit d4a30ea3ed
21 changed files with 1494 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
scripts/s_whiteboard.js
View File

@@ -7,10 +7,12 @@ module.exports = {
var tool = content["t"]; //Tool witch is used
var wid = content["wid"]; //whiteboard ID
var username = content["username"];
if (tool === "clear") { //Clear the whiteboard
if (tool === "clear") {
//Clear the whiteboard
delete savedBoards[wid];
delete savedUndos[wid];
} else if (tool === "undo") { //Undo an action
} else if (tool === "undo") {
//Undo an action
if (!savedUndos[wid]) {
savedUndos[wid] = [];
}
@@ -19,7 +21,10 @@ module.exports = {
if (savedBoards[wid][i]["username"] == username) {
var drawId = savedBoards[wid][i]["drawId"];
for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
if (savedBoards[wid][i]["drawId"] == drawId && savedBoards[wid][i]["username"] == username) {
if (
savedBoards[wid][i]["drawId"] == drawId &&
savedBoards[wid][i]["username"] == username
) {
savedUndos[wid].push(savedBoards[wid][i]);
savedBoards[wid].splice(i, 1);
}
@@ -27,7 +32,7 @@ module.exports = {
break;
}
}
if(savedUndos[wid].length > 1000) {
if (savedUndos[wid].length > 1000) {
savedUndos[wid].splice(0, savedUndos[wid].length - 1000);
}
}
@@ -42,7 +47,10 @@ module.exports = {
if (savedUndos[wid][i]["username"] == username) {
var drawId = savedUndos[wid][i]["drawId"];
for (var i = savedUndos[wid].length - 1; i >= 0; i--) {
if (savedUndos[wid][i]["drawId"] == drawId && savedUndos[wid][i]["username"] == username) {
if (
savedUndos[wid][i]["drawId"] == drawId &&
savedUndos[wid][i]["username"] == username
) {
savedBoards[wid].push(savedUndos[wid][i]);
savedUndos[wid].splice(i, 1);
}
@@ -50,14 +58,36 @@ module.exports = {
break;
}
}
} else if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { //Save all this actions
} else if (
[
"line",
"pen",
"rect",
"circle",
"eraser",
"addImgBG",
"recSelect",
"eraseRec",
"addTextBox",
"setTextboxText",
"removeTextbox",
"setTextboxPosition",
"setTextboxFontSize",
"setTextboxFontColor",
].includes(tool)
) {
//Save all this actions
if (!savedBoards[wid]) {
savedBoards[wid] = [];
}
delete content["wid"]; //Delete id from content so we don't store it twice
if (tool === "setTextboxText") {
for (var i = savedBoards[wid].length - 1; i >= 0; i--) { //Remove old textbox tex -> dont store it twice
if (savedBoards[wid][i]["t"] === "setTextboxText" && savedBoards[wid][i]["d"][0] === content["d"][0]) {
for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
//Remove old textbox tex -> dont store it twice
if (
savedBoards[wid][i]["t"] === "setTextboxText" &&
savedBoards[wid][i]["d"][0] === content["d"][0]
) {
savedBoards[wid].splice(i, 1);
}
}
@@ -65,7 +95,8 @@ module.exports = {
savedBoards[wid].push(content);
}
},
loadStoredData: function (wid) { //Load saved whiteboard
loadStoredData: function (wid) {
//Load saved whiteboard
return savedBoards[wid] ? savedBoards[wid] : [];
}
}
},
};

233
scripts/server-backend.js
View File

@@ -5,26 +5,26 @@ function startBackendServer(port) {
var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true)
var webdav = false; //Can be set to true if you want to allow webdav save (node server.js --webdav=true)
var fs = require("fs-extra");
var express = require('express');
var formidable = require('formidable'); //form upload processing
const createDOMPurify = require('dompurify'); //Prevent xss
const { JSDOM } = require('jsdom');
const window = (new JSDOM('')).window;
var express = require("express");
var formidable = require("formidable"); //form upload processing
const createDOMPurify = require("dompurify"); //Prevent xss
const { JSDOM } = require("jsdom");
const window = new JSDOM("").window;
const DOMPurify = createDOMPurify(window);
const { createClient } = require("webdav");
var s_whiteboard = require("./s_whiteboard.js");
var app = express();
app.use(express.static(path.join(__dirname, '..', 'dist')));
app.use("/uploads", express.static(path.join(__dirname, '..', 'public', 'uploads')));
var server = require('http').Server(app);
app.use(express.static(path.join(__dirname, "..", "dist")));
app.use("/uploads", express.static(path.join(__dirname, "..", "public", "uploads")));
var server = require("http").Server(app);
server.listen(port);
var io = require('socket.io')(server, {path: "/ws-api", });
var io = require("socket.io")(server, { path: "/ws-api" });
console.log("Webserver & socketserver running on port:" + port);
if (process.env.accesstoken) {
accessToken = process.env.accesstoken;
@@ -35,7 +35,7 @@ function startBackendServer(port) {
if (process.env.webdav) {
webdav = true;
}
var startArgs = getArgs();
if (startArgs["accesstoken"]) {
accessToken = startArgs["accesstoken"];
@@ -46,7 +46,7 @@ function startBackendServer(port) {
if (startArgs["webdav"]) {
webdav = true;
}
if (accessToken !== "") {
console.log("AccessToken set to: " + accessToken);
}
@@ -56,8 +56,8 @@ function startBackendServer(port) {
if (webdav) {
console.log("Webdav save is enabled!");
}
app.get('/api/loadwhiteboard', function (req, res) {
app.get("/api/loadwhiteboard", function (req, res) {
var wid = req["query"]["wid"];
var at = req["query"]["at"]; //accesstoken
if (accessToken === "" || accessToken == at) {
@@ -65,31 +65,32 @@ function startBackendServer(port) {
res.send(ret);
res.end();
} else {
res.status(401); //Unauthorized
res.status(401); //Unauthorized
res.end();
}
});
app.post('/api/upload', function (req, res) { //File upload
app.post("/api/upload", function (req, res) {
//File upload
var form = new formidable.IncomingForm(); //Receive form
var formData = {
files: {},
fields: {}
}
form.on('file', function (name, file) {
fields: {},
};
form.on("file", function (name, file) {
formData["files"][file.name] = file;
});
form.on('field', function (name, value) {
form.on("field", function (name, value) {
formData["fields"][name] = value;
});
form.on('error', function (err) {
console.log('File uplaod Error!');
form.on("error", function (err) {
console.log("File uplaod Error!");
});
form.on('end', function () {
form.on("end", function () {
if (accessToken === "" || accessToken == formData["fields"]["at"]) {
progressUploadFormData(formData, function (err) {
if (err) {
@@ -104,22 +105,22 @@ function startBackendServer(port) {
}
});
} else {
res.status(401); //Unauthorized
res.status(401); //Unauthorized
res.end();
}
//End file upload
});
form.parse(req);
});
function progressUploadFormData(formData, callback) {
console.log("Progress new Form Data");
var fields = escapeAllContentStrings(formData.fields);
var files = formData.files;
var whiteboardId = fields["whiteboardId"];
var name = fields["name"] || "";
var date = fields["date"] || (+new Date());
var date = fields["date"] || +new Date();
var filename = whiteboardId + "_" + date + ".png";
var webdavaccess = fields["webdavaccess"] || false;
try {
@@ -133,24 +134,33 @@ function startBackendServer(port) {
return;
}
var imagedata = fields["imagedata"];
if (imagedata && imagedata != "") { //Save from base64 data
imagedata = imagedata.replace(/^data:image\/png;base64,/, "").replace(/^data:image\/jpeg;base64,/, "");
if (imagedata && imagedata != "") {
//Save from base64 data
imagedata = imagedata
.replace(/^data:image\/png;base64,/, "")
.replace(/^data:image\/jpeg;base64,/, "");
console.log(filename, "uploaded");
fs.writeFile('./public/uploads/' + filename, imagedata, 'base64', function (err) {
fs.writeFile("./public/uploads/" + filename, imagedata, "base64", function (err) {
if (err) {
console.log("error", err);
callback(err);
} else {
if (webdavaccess) { //Save image to webdav
if (webdavaccess) {
//Save image to webdav
if (webdav) {
saveImageToWebdav('./public/uploads/' + filename, filename, webdavaccess, function (err) {
if (err) {
console.log("error", err);
callback(err);
} else {
callback();
saveImageToWebdav(
"./public/uploads/" + filename,
filename,
webdavaccess,
function (err) {
if (err) {
console.log("error", err);
callback(err);
} else {
callback();
}
}
})
);
} else {
callback("Webdav is not enabled on the server!");
}
@@ -165,78 +175,92 @@ function startBackendServer(port) {
}
});
}
function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
if (webdavaccess) {
var webdavserver = webdavaccess["webdavserver"] || "";
var webdavpath = webdavaccess["webdavpath"] || "/";
var webdavusername = webdavaccess["webdavusername"] || "";
var webdavpassword = webdavaccess["webdavpassword"] || "";
const client = createClient(
webdavserver,
{
username: webdavusername,
password: webdavpassword
}
)
client.getDirectoryContents(webdavpath).then((items) => {
var cloudpath = webdavpath+ '' + filename;
console.log("webdav saving to:", cloudpath);
fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
callback();
}).catch((error) => {
callback("403");
console.log("Could not connect to webdav!")
const client = createClient(webdavserver, {
username: webdavusername,
password: webdavpassword,
});
client
.getDirectoryContents(webdavpath)
.then((items) => {
var cloudpath = webdavpath + "" + filename;
console.log("webdav saving to:", cloudpath);
fs.createReadStream(imagepath).pipe(client.createWriteStream(cloudpath));
callback();
})
.catch((error) => {
callback("403");
console.log("Could not connect to webdav!");
});
} else {
callback("Error: no access data!")
callback("Error: no access data!");
}
}
var smallestScreenResolutions = {};
io.on('connection', function (socket) {
io.on("connection", function (socket) {
var whiteboardId = null;
socket.on('disconnect', function () {
if (smallestScreenResolutions && smallestScreenResolutions[whiteboardId] && socket && socket.id) {
socket.on("disconnect", function () {
if (
smallestScreenResolutions &&
smallestScreenResolutions[whiteboardId] &&
socket &&
socket.id
) {
delete smallestScreenResolutions[whiteboardId][socket.id];
}
socket.compress(false).broadcast.emit('refreshUserBadges', null); //Removes old user Badges
socket.compress(false).broadcast.emit("refreshUserBadges", null); //Removes old user Badges
sendSmallestScreenResolution();
});
socket.on('drawToWhiteboard', function (content) {
socket.on("drawToWhiteboard", function (content) {
content = escapeAllContentStrings(content);
if (accessToken === "" || accessToken == content["at"]) {
socket.compress(false).broadcast.to(whiteboardId).emit('drawToWhiteboard', content); //Send to all users in the room (not own socket)
socket.compress(false).broadcast.to(whiteboardId).emit("drawToWhiteboard", content); //Send to all users in the room (not own socket)
s_whiteboard.handleEventsAndData(content); //save whiteboardchanges on the server
} else {
socket.emit('wrongAccessToken', true);
socket.emit("wrongAccessToken", true);
}
});
socket.on('joinWhiteboard', function (content) {
socket.on("joinWhiteboard", function (content) {
content = escapeAllContentStrings(content);
if (accessToken === "" || accessToken == content["at"]) {
whiteboardId = content["wid"];
socket.join(whiteboardId); //Joins room name=wid
smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId] ? smallestScreenResolutions[whiteboardId] : {};
smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId]
? smallestScreenResolutions[whiteboardId]
: {};
smallestScreenResolutions[whiteboardId][socket.id] = content[
"windowWidthHeight"
] || { w: 10000, h: 10000 };
sendSmallestScreenResolution();
} else {
socket.emit('wrongAccessToken', true);
socket.emit("wrongAccessToken", true);
}
});
socket.on('updateScreenResolution', function (content) {
socket.on("updateScreenResolution", function (content) {
content = escapeAllContentStrings(content);
if (smallestScreenResolutions[whiteboardId] && (accessToken === "" || accessToken == content["at"])) {
smallestScreenResolutions[whiteboardId][socket.id] = content["windowWidthHeight"] || { w: 10000, h: 10000 };
if (
smallestScreenResolutions[whiteboardId] &&
(accessToken === "" || accessToken == content["at"])
) {
smallestScreenResolutions[whiteboardId][socket.id] = content[
"windowWidthHeight"
] || { w: 10000, h: 10000 };
sendSmallestScreenResolution();
}
});
function sendSmallestScreenResolution() {
if (disableSmallestScreen) {
return;
@@ -244,35 +268,44 @@ function startBackendServer(port) {
var smallestWidth = 10000;
var smallestHeight = 10000;
for (var i in smallestScreenResolutions[whiteboardId]) {
smallestWidth = smallestWidth > smallestScreenResolutions[whiteboardId][i]["w"] ? smallestScreenResolutions[whiteboardId][i]["w"] : smallestWidth;
smallestHeight = smallestHeight > smallestScreenResolutions[whiteboardId][i]["h"] ? smallestScreenResolutions[whiteboardId][i]["h"] : smallestHeight;
smallestWidth =
smallestWidth > smallestScreenResolutions[whiteboardId][i]["w"]
? smallestScreenResolutions[whiteboardId][i]["w"]
: smallestWidth;
smallestHeight =
smallestHeight > smallestScreenResolutions[whiteboardId][i]["h"]
? smallestScreenResolutions[whiteboardId][i]["h"]
: smallestHeight;
}
io.to(whiteboardId).emit('updateSmallestScreenResolution', { w: smallestWidth, h: smallestHeight });
io.to(whiteboardId).emit("updateSmallestScreenResolution", {
w: smallestWidth,
h: smallestHeight,
});
}
});
//Prevent cross site scripting (xss)
function escapeAllContentStrings(content, cnt) {
if (!cnt)
cnt = 0;
if (typeof (content) === "string") {
if (!cnt) cnt = 0;
if (typeof content === "string") {
return DOMPurify.sanitize(content);
}
for (var i in content) {
if (typeof (content[i]) === "string") {
if (typeof content[i] === "string") {
content[i] = DOMPurify.sanitize(content[i]);
} if (typeof (content[i]) === "object" && cnt < 10) {
}
if (typeof content[i] === "object" && cnt < 10) {
content[i] = escapeAllContentStrings(content[i], ++cnt);
}
}
return content;
}
process.on('unhandledRejection', error => {
process.on("unhandledRejection", (error) => {
// Will print "unhandledRejection err is not defined"
console.log('unhandledRejection', error.message);
})
console.log("unhandledRejection", error.message);
});
}
module.exports = startBackendServer;
module.exports = startBackendServer;

51
scripts/server-frontend-dev.js
View File

@@ -1,34 +1,33 @@
const devServerConfig = {
hot: true,
inline: true,
stats: {
children: false,
maxModules: 0
},
proxy: {
// proxies for the backend
'/api': 'http://localhost:3000',
'/uploads': 'http://localhost:3000',
'/ws-api': {
target: 'ws://localhost:3000',
ws: true,
}
}
}
hot: true,
inline: true,
stats: {
children: false,
maxModules: 0,
},
proxy: {
// proxies for the backend
"/api": "http://localhost:3000",
"/uploads": "http://localhost:3000",
"/ws-api": {
target: "ws://localhost:3000",
ws: true,
},
},
};
function startFrontendDevServer(port) {
// require here to prevent prod dependency to webpack
const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");
const config = require("../config/webpack.dev");
// require here to prevent prod dependency to webpack
const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");
const config = require("../config/webpack.dev");
new WebpackDevServer(webpack(config), devServerConfig)
.listen(port, (err) => {
if (err) {
console.log(err);
}
new WebpackDevServer(webpack(config), devServerConfig).listen(port, (err) => {
if (err) {
console.log(err);
}
console.log("Listening on port " + port);
console.log("Listening on port " + port);
});
}

10
scripts/server.js
View File

@@ -4,23 +4,23 @@ const startBackendServer = require("./server-backend");
const SERVER_MODES = {
PRODUCTION: 1,
DEVELOPMENT: 2
}
DEVELOPMENT: 2,
};
const args = getArgs();
if ( typeof args.mode === "undefined") {
if (typeof args.mode === "undefined") {
// default to production mode
args.mode = "production";
}
if (args.mode !== "production" && args.mode !== "development") {
throw new Error("--mode can only be 'development' or 'production'")
throw new Error("--mode can only be 'development' or 'production'");
}
const server_mode = args.mode === "production" ? SERVER_MODES.PRODUCTION : SERVER_MODES.DEVELOPMENT;
if (server_mode === SERVER_MODES.DEVELOPMENT){
if (server_mode === SERVER_MODES.DEVELOPMENT) {
console.info("Starting server in development mode.");
startFrontendDevServer(8080);
// this time, it's the frontend server that is on port 8080

36
scripts/utils.js
View File

@@ -1,22 +1,20 @@
function getArgs() {
const args = {}
process.argv
.slice(2, process.argv.length)
.forEach(arg => {
// long arg
if (arg.slice(0, 2) === '--') {
const longArg = arg.split('=')
args[longArg[0].slice(2, longArg[0].length)] = longArg[1]
}
// flags
else if (arg[0] === '-') {
const flags = arg.slice(1, arg.length).split('')
flags.forEach(flag => {
args[flag] = true
})
}
})
return args
const args = {};
process.argv.slice(2, process.argv.length).forEach((arg) => {
// long arg
if (arg.slice(0, 2) === "--") {
const longArg = arg.split("=");
args[longArg[0].slice(2, longArg[0].length)] = longArg[1];
}
// flags
else if (arg[0] === "-") {
const flags = arg.slice(1, arg.length).split("");
flags.forEach((flag) => {
args[flag] = true;
});
}
});
return args;
}
module.exports.getArgs = getArgs;
module.exports.getArgs = getArgs;