Upgrading all dependencies in front

Upgrading to Webpack 5, Typescript 4, ...

front/package.json

@@ -9,20 +9,20 @@
     "@types/quill": "^1.3.7",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
-    "css-loader": "^5.1.3",
+    "css-loader": "^5.2.4",
     "eslint": "^6.8.0",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^5.3.1",
     "jasmine": "^3.5.0",
-    "mini-css-extract-plugin": "^1.3.9",
+    "mini-css-extract-plugin": "^1.6.0",
-    "sass": "^1.32.8",
+    "sass": "^1.32.12",
-    "sass-loader": "10.1.1",
+    "sass-loader": "^11.1.0",
-    "ts-loader": "^6.2.2",
+    "ts-loader": "^9.1.2",
-    "ts-node": "^8.10.2",
+    "ts-node": "^9.1.1",
-    "typescript": "^3.8.3",
+    "typescript": "^4.2.4",
-    "webpack": "^4.42.1",
+    "webpack": "^5.37.0",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.10.3",
+    "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^5.7.3"
   },
   "dependencies": {
     "@types/simple-peer": "^9.6.0",
@@ -36,11 +36,10 @@
     "quill": "1.3.6",
     "rxjs": "^6.6.3",
     "simple-peer": "^9.6.2",
-    "socket.io-client": "^2.3.0",
+    "socket.io-client": "^2.3.0"
-    "webpack-require-http": "^0.4.3"
   },
   "scripts": {
-    "start": "webpack-dev-server --open",
+    "start": "webpack serve --open",
     "build": "webpack --config webpack.prod.js",
     "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",

front/src/Api/IframeListener.ts

@@ -1,6 +1,5 @@
 import { Subject } from "rxjs";
 import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
-import * as crypto from "crypto";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
 import { EnterLeaveEvent } from "./Events/EnterLeaveEvent";
 import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent";
@@ -176,7 +175,7 @@ class IframeListener {
     }
 
     private getIFrameId(scriptUrl: string): string {
-        return 'script' + crypto.createHash('md5').update(scriptUrl).digest("hex");
+        return 'script' + btoa(scriptUrl);
     }
 
     unregisterScript(scriptUrl: string): void {

front/src/Phaser/Game/GameScene.ts

@@ -151,7 +151,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private GlobalMessageManager!: GlobalMessageManager;
     public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
     private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
-    private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
+    private connectionAnswerPromiseResolve!: (value: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
     // A promise that will resolve when the "create" method is called (signaling loading is ended)
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;

front/src/WebRtc/CoWebsiteManager.ts

@@ -32,7 +32,7 @@ class CoWebsiteManager {
     private resizing: boolean = false;
     private cowebsiteMainDom: HTMLDivElement;
     private cowebsiteAsideDom: HTMLDivElement;
-    
+
     get width(): number {
         return this.cowebsiteDiv.clientWidth;
     }
@@ -137,14 +137,14 @@ class CoWebsiteManager {
         if (allowPolicy) {
             iframe.allow = allowPolicy;
         }
-        const onloadPromise = new Promise((resolve) => {
+        const onloadPromise = new Promise<void>((resolve) => {
             iframe.onload = () => resolve();
         });
         if (allowApi) {
             iframeListener.registerIframe(iframe);
         }
         this.cowebsiteMainDom.appendChild(iframe);
-        const onTimeoutPromise = new Promise((resolve) => {
+        const onTimeoutPromise = new Promise<void>((resolve) => {
             setTimeout(() => resolve(), 2000);
         });
         this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => {

front/webpack.config.js

@@ -46,9 +46,9 @@ module.exports = {
         path: path.resolve(__dirname, 'dist'),
         publicPath: '/'
     },
-    externals:[
+    /*externals:[
         require('webpack-require-http')
-    ],
+    ],*/
     plugins: [
         new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
         new HtmlWebpackPlugin(
@@ -81,7 +81,9 @@ module.exports = {
             'TURN_PASSWORD': null,
             'JITSI_URL': null,
             'JITSI_PRIVATE_MODE': null,
-            'START_ROOM_URL': null
+            'START_ROOM_URL': null,
+            'MAX_USERNAME_LENGTH': 8,
+            'MAX_PER_GROUP': 4
         })
     ],