backend/app.js

@@ -23,10 +23,9 @@ app.use(express.static('avatars')); //folder for static files
 
 const io = require("socket.io")(server, {
     cors: {
-        origin: "http://localhost:3000" //client endpoint and port
+        origin: "http://192.168.0.107:3000" //client endpoint and port
     }
 });
-
 const PORT = process.env.PORT || 5000;
 const TOKEN_KEY = process.env.TOKEN_KEY || 'rGH4r@3DKOg06hgj'; 
 const HASH_KEY = 7;
@@ -46,17 +45,19 @@ const isValidUserName = (userName) => {
     const nameRegex = /[^A-Za-z0-9]/ ;
     return (!nameRegex.test(userName) && userName.trim().length > 2);
 }
-
 const getAllDbUsers = async (socket) => {
     const usersDb = await User.find({})
     socket.emit('allDbUsers', usersDb) 
 }
 
+
 const getOneUser = async (userName) => {
     const userInDb = await User.findOne({userName});
     return userInDb;
 }
 app.post('/login', async (req, res) => {
+    
+
     try {
         const {userName,password} = req.body;
         if (!isValidUserName(userName)){
@@ -203,18 +204,14 @@ app.post('/files', async (req, res) =>  {
 io.use( async (socket, next) => {
     const token = socket.handshake.auth.token; 
     const sockets = await io.fetchSockets();
-   
     if(!token) {
-        console.log('socket')
+        console.log('socket disconnect')
         socket.disconnect();
         return;
     }
-
+    
     const usersOnline = [];
-    sockets.map((sock) => {
-        usersOnline.push(sock.user);
-    }) 
-
+    sockets.map(sock => usersOnline.push(sock.user))
 
    
     try {
@@ -227,11 +224,13 @@ io.use( async (socket, next) => {
             return;
         }
         socket.user = user;
-        const exist = sockets.find((current) => current.user.userName == socket.user.userName)
+        const exist = sockets.find(current => current.user.userName == socket.user.userName)
+
+        // console.log('exist ' , exist)
 
         if(exist) {  //&& !user.isAdmin  - add for two or more admins 
-            console.log(exist.userName, 'exist twice entering...')   
-            exist.disconnect(); 
+            console.log(exist.user.userName, 'exist twice entering...')   
+            exist.disconnect();
         } 
     } catch(e) {
         console.log(e);
@@ -344,7 +343,21 @@ io.on("connection", async (socket) => {
            })
 
            socket.on('editmessage', async (data) => {
-                console.log(data)}) 
+            console.log(data.messageNewText)
+            const user = jwt.verify(data.token, TOKEN_KEY)
+                if(!user){
+                    return
+                }
+                try {
+                    await Message.findByIdAndUpdate(data.messageId, {text:data.messageNewText})
+                    const messagesToShow = await Message.find({}).sort({ 'createDate': -1 }).limit(20).populate( {path:'user'});   
+                    io.emit('allmessages', messagesToShow.reverse())
+
+                } catch (error) {
+                    console.log(error)
+                    
+                }
+               }) 
 
            socket.on('deleteMessage', async (data) => {
                 const user = jwt.verify(data.token, TOKEN_KEY)
@@ -354,10 +367,11 @@ io.on("connection", async (socket) => {
                 }
                 try {
                     await Message.findByIdAndDelete(data.messageId)
-                
+                    const messagesToShow = await Message.find({}).sort({ 'createDate': -1 }).limit(20).populate( {path:'user'});   
+                    io.emit('allmessages', messagesToShow.reverse())
+
                 } catch (error) {
                     console.log(error)
-                    
                 }
             }) 
 
@@ -368,7 +382,6 @@ io.on("connection", async (socket) => {
     }
 });
 
-
 //server and database start
 const start = async () => {
     try {

backend/avatars/index.js

@@ -0,0 +1,115 @@
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+const functions = require('firebase-functions');
+
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyCqJj50pTiXBAtRgTVlNY5AQCBySgGSHqY",
+  authDomain: "telegrambot-5f3ce.firebaseapp.com",
+  projectId: "telegrambot-5f3ce",
+  storageBucket: "telegrambot-5f3ce.appspot.com",
+  messagingSenderId: "39238727150",
+  appId: "1:39238727150:web:dbe83ac0c806527c7b0aff",
+  measurementId: "G-9H7RKXYBD1"
+};
+
+// Initialize Firebase
+const appFire = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+
+
+const  { Telegraf } = require('telegraf');
+const express = require('express')
+
+const token = '5717084656:AAET0Vzk61yjkhEO18yltR1GhvkDYtheZdg'
+
+const bot = new Telegraf(token, {polling: true})
+
+const app = express()
+const port = 3030
+
+const  RegExpLink = /(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi;
+const idForBan = [];
+
+bot.on('message', async (ctx) => {
+    console.log(ctx.message.from)
+
+
+  if(ctx.message.text) {
+    const str = ctx.message.text.toLowerCase();
+    console.log(str)
+
+    if(str.includes('iptv')){
+        ctx.reply(`Message from ${ctx.update.message.from.first_name} edited by BOT
+         ${str.replaceAll('iptv', '****')}`)
+        ctx.deleteMessage(ctx.message.message_id)
+        return
+
+    }
+
+    
+    if(str.includes('шаринг')){
+        ctx.reply(`Message from ${ctx.update.message.from.first_name} edited by BOT
+         ${str.replaceAll('шаринг', '****')}`)
+        ctx.deleteMessage(ctx.message.message_id)
+        return
+
+    }
+
+
+
+
+    if(str.includes('playlist')){
+        ctx.reply(`Message from ${ctx.update.message.from.first_name} edited by BOT
+         ${str.replaceAll('playlist', '****')}`)
+        ctx.deleteMessage(ctx.message.message_id)
+
+    }
+
+
+    if(RegExpLink.test(str) && (ctx.message.from.id !== 432003706)){
+        console.log(ctx.message.from)
+        ctx.reply(`Message from ${ctx.update.message.from.first_name} edited by BOT
+        ${ctx.message.text.replace(RegExpLink, 'http****.***')}`)
+       
+
+        if(idForBan.includes(ctx.message.from.id)){
+            bot.telegram.banChatMember(ctx.message.chat.id, ctx.message.from.id)
+
+        }
+
+        idForBan.push(ctx.message.from.id)
+        ctx.deleteMessage(ctx.message.message_id)
+        return
+
+     }
+  }
+
+
+
+   if(ctx.message.document){
+      const isPlaylist = ctx.message.document.file_name.includes('.m3u')
+      if (isPlaylist){
+        ctx.reply(`Hello ${ctx.update.message.from.first_name} playlists banned in this group `)
+        ctx.deleteMessage(ctx.message.message_id)
+      }
+   } 
+  })
+
+  console.log(idForBan)
+
+bot.launch()
+
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+})
+
+
+app.listen(port, () => {
+  console.log(`Server listening on port ${port}`)
+})
+
+exports.bot = functions.https.onRequest(app);

backend/avatars/test.js

@@ -0,0 +1,28 @@
+const { spawn } = require('child_process');
+const got = require('got');
+const test = require('tape');
+
+// Start the app
+const env = Object.assign({}, process.env, {PORT: 5000});
+const child = spawn('node', ['index.js'], {env});
+
+test('responds to requests', (t) => {
+  t.plan(4);
+
+  // Wait until the server is ready
+  child.stdout.on('data', _ => {
+    // Make a request to our app
+    (async () => {
+      const response = await got('http://127.0.0.1:5000');
+      // stop the server
+      child.kill();
+      // No error
+      t.false(response.error);
+      // Successful response
+      t.equal(response.statusCode, 200);
+      // Assert content checks
+      t.notEqual(response.body.indexOf("<title>Node.js </title>"), -1);
+      t.notEqual(response.body.indexOf("Getting Started on Heroku with Node.js"), -1);
+    })();
+  });
+});

backend/node_modules/.package-lock.json

@@ -195,6 +195,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="
+    },
     "node_modules/aproba": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -271,21 +276,89 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
-      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
       "dependencies": {
-        "bytes": "3.1.1",
+        "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.8.1",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.9.6",
-        "raw-body": "2.4.2",
-        "type-is": "~1.6.18"
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/body-parser/node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -370,10 +443,26 @@
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/bytes": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -417,6 +506,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
@@ -554,6 +655,47 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/concat-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/concat-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/configstore": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
@@ -607,6 +749,11 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "node_modules/cors": {
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@@ -861,6 +1008,59 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/express-fileupload": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/express-fileupload/-/express-fileupload-1.4.0.tgz",
+      "integrity": "sha512-RjzLCHxkv3umDeZKeFeMg8w7qe0V09w3B7oGZprr/oO2H/ISCgNzuqzn7gV3HRWb37GjRk429CCpSLS2KNTqMQ==",
+      "dependencies": {
+        "busboy": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/express/node_modules/body-parser": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
+      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
+      "dependencies": {
+        "bytes": "3.1.1",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.9.6",
+        "raw-body": "2.4.2",
+        "type-is": "~1.6.18"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/bytes": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
+      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/raw-body": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
+      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
+      "dependencies": {
+        "bytes": "3.1.1",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -921,6 +1121,11 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
     "node_modules/gauge": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
@@ -940,6 +1145,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
+      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -1021,6 +1239,17 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -1029,6 +1258,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -1290,6 +1530,11 @@
       "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
       "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/json-buffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
@@ -1652,6 +1897,34 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/multer": {
+      "version": "1.4.5-lts.1",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
+      "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.0.0",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.4",
+        "object-assign": "^4.1.1",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/multer/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -1793,6 +2066,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -1882,6 +2163,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1952,12 +2238,12 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
-      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
       "dependencies": {
-        "bytes": "3.1.1",
-        "http-errors": "1.8.1",
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       },
@@ -1965,6 +2251,37 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/raw-body/node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -2167,6 +2484,19 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/sift": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/sift/-/sift-16.0.0.tgz",
@@ -2292,6 +2622,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -2431,6 +2769,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -2528,6 +2871,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -2635,6 +2986,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

backend/node_modules/body-parser/package.json

@@ -1,7 +1,7 @@
 {
   "name": "body-parser",
   "description": "Node.js body parsing middleware",
-  "version": "1.19.1",
+  "version": "1.20.0",
   "contributors": [
     "Douglas Christopher Wilson <doug@somethingdoug.com>",
     "Jonathan Ong <me@jongleberry.com> (http://jongleberry.com)"
@@ -9,39 +9,43 @@
   "license": "MIT",
   "repository": "expressjs/body-parser",
   "dependencies": {
-    "bytes": "3.1.1",
+    "bytes": "3.1.2",
     "content-type": "~1.0.4",
     "debug": "2.6.9",
-    "depd": "~1.1.2",
-    "http-errors": "1.8.1",
+    "depd": "2.0.0",
+    "destroy": "1.2.0",
+    "http-errors": "2.0.0",
     "iconv-lite": "0.4.24",
-    "on-finished": "~2.3.0",
-    "qs": "6.9.6",
-    "raw-body": "2.4.2",
-    "type-is": "~1.6.18"
+    "on-finished": "2.4.1",
+    "qs": "6.10.3",
+    "raw-body": "2.5.1",
+    "type-is": "~1.6.18",
+    "unpipe": "1.0.0"
   },
   "devDependencies": {
     "eslint": "7.32.0",
     "eslint-config-standard": "14.1.1",
-    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-markdown": "2.2.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "5.2.0",
     "eslint-plugin-standard": "4.1.0",
     "methods": "1.1.2",
-    "mocha": "9.1.3",
+    "mocha": "9.2.2",
     "nyc": "15.1.0",
     "safe-buffer": "5.2.1",
-    "supertest": "6.1.6"
+    "supertest": "6.2.2"
   },
   "files": [
     "lib/",
     "LICENSE",
     "HISTORY.md",
+    "SECURITY.md",
     "index.js"
   ],
   "engines": {
-    "node": ">= 0.8"
+    "node": ">= 0.8",
+    "npm": "1.2.8000 || >= 1.4.16"
   },
   "scripts": {
     "lint": "eslint .",

backend/node_modules/bytes/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bytes",
   "description": "Utility to parse a string bytes to bytes and vice-versa",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "author": "TJ Holowaychuk <tj@vision-media.ca> (http://tjholowaychuk.com)",
   "contributors": [
     "Jed Watson <jed.watson@me.com>",
@@ -21,7 +21,7 @@
   "devDependencies": {
     "eslint": "7.32.0",
     "eslint-plugin-markdown": "2.2.1",
-    "mocha": "9.1.3",
+    "mocha": "9.2.0",
     "nyc": "15.1.0"
   },
   "files": [

backend/node_modules/express-fileupload/example/index.html

@@ -0,0 +1,12 @@
+<html>
+	<body>
+		<form ref='uploadForm' 
+			id='uploadForm' 
+			action='/upload' 
+			method='post' 
+			encType="multipart/form-data">
+				<input type="file" name="sampleFile" />
+				<input type='submit' value='Upload!' />
+		</form>		
+	</body>
+</html>

backend/node_modules/raw-body/package.json

@@ -1,7 +1,7 @@
 {
   "name": "raw-body",
   "description": "Get and validate the raw body of a readable stream.",
-  "version": "2.4.2",
+  "version": "2.5.1",
   "author": "Jonathan Ong <me@jongleberry.com> (http://jongleberry.com)",
   "contributors": [
     "Douglas Christopher Wilson <doug@somethingdoug.com>",
@@ -10,8 +10,8 @@
   "license": "MIT",
   "repository": "stream-utils/raw-body",
   "dependencies": {
-    "bytes": "3.1.1",
-    "http-errors": "1.8.1",
+    "bytes": "3.1.2",
+    "http-errors": "2.0.0",
     "iconv-lite": "0.4.24",
     "unpipe": "1.0.0"
   },
@@ -19,12 +19,12 @@
     "bluebird": "3.7.2",
     "eslint": "7.32.0",
     "eslint-config-standard": "14.1.1",
-    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-markdown": "2.2.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "5.1.1",
+    "eslint-plugin-promise": "5.2.0",
     "eslint-plugin-standard": "4.1.0",
-    "mocha": "9.1.3",
+    "mocha": "9.2.1",
     "nyc": "15.1.0",
     "readable-stream": "2.3.7",
     "safe-buffer": "5.2.1"
@@ -36,13 +36,14 @@
     "HISTORY.md",
     "LICENSE",
     "README.md",
+    "SECURITY.md",
     "index.d.ts",
     "index.js"
   ],
   "scripts": {
     "lint": "eslint .",
     "test": "mocha --trace-deprecation --reporter spec --bail --check-leaks test/",
-    "test-ci": "nyc --reporter=lcov --reporter=text npm test",
+    "test-ci": "nyc --reporter=lcovonly --reporter=text npm test",
     "test-cov": "nyc --reporter=html --reporter=text npm test"
   }
 }

backend/package.json

@@ -10,13 +10,17 @@
   "license": "ISC",
   "dependencies": {
     "bcrypt": "^5.0.1",
+    "body-parser": "^1.20.0",
     "dotenv": "^16.0.1",
     "express": "^4.17.2",
+    "express-fileupload": "^1.4.0",
     "jsonwebtoken": "^8.5.1",
     "mongodb": "^4.7.0",
     "mongoose": "^6.4.2",
+    "multer": "^1.4.5-lts.1",
     "nodemon": "^2.0.18",
     "randomcolor": "^0.6.2",
-    "socket.io": "^4.4.1"
+    "socket.io": "^4.4.1",
+    "uuid": "^8.3.2"
   }
 }

frontend/package-lock.json

@@ -15,16 +15,23 @@
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
+        "base64-2-img": "^1.0.0",
+        "fs": "^0.0.1-security",
         "randomcolor": "^0.6.2",
         "react": "^17.0.2",
+        "react-axios": "^2.0.6",
         "react-dom": "^17.0.2",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
+        "react-webcam": "^7.0.1",
         "redux": "^4.2.0",
         "redux-thunk": "^2.4.1",
         "sass": "^1.53.0",
         "socket.io-client": "^4.4.1",
+        "use-sound": "^4.0.1",
+        "uuid": "^8.3.2",
         "web-vitals": "^2.1.3"
       },
       "devDependencies": {
@@ -3622,6 +3629,11 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tokenizer/token": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
+      "integrity": "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -4790,6 +4802,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -5117,6 +5151,14 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-2-img": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base64-2-img/-/base64-2-img-1.0.0.tgz",
+      "integrity": "sha512-xYThqWcF3macytCHp2HlxagElruA9ZXjCgu+w+VNtjbOzVjJgHqNYYppq0h+hpjKg6O7nFe9ZFzqX9rXi765sA==",
+      "dependencies": {
+        "file-type": "^16.3.0"
+      }
+    },
     "node_modules/base64-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
@@ -7806,6 +7848,22 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/file-type": {
+      "version": "16.5.4",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-16.5.4.tgz",
+      "integrity": "sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==",
+      "dependencies": {
+        "readable-web-to-node-stream": "^3.0.0",
+        "strtok3": "^6.2.4",
+        "token-types": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/file-type?sponsor=1"
+      }
+    },
     "node_modules/filelist": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
@@ -7917,9 +7975,9 @@
       "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
       "funding": [
         {
           "type": "individual",
@@ -8132,6 +8190,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fs-extra": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
@@ -8474,6 +8537,11 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -8712,6 +8780,25 @@
         "node": ">=4"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -12081,6 +12168,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/peek-readable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-4.1.0.tgz",
+      "integrity": "sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Borewit"
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -13535,6 +13634,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-axios": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz",
+      "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==",
+      "peerDependencies": {
+        "axios": "^0.27.2",
+        "prop-types": "^15.8.1",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -13837,6 +13946,15 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-webcam": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.0.1.tgz",
+      "integrity": "sha512-8E/Eb/7ksKwn5QdLn67tOR7+TdP9BZdu6E5/DSt20v8yfW/s0VGBigE6VA7R4278mBuBUowovAB3DkCfVmSPvA==",
+      "peerDependencies": {
+        "react": ">=16.2.0",
+        "react-dom": ">=16.2.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -13850,6 +13968,21 @@
         "node": ">= 6"
       }
     },
+    "node_modules/readable-web-to-node-stream": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz",
+      "integrity": "sha512-ePeK6cc1EcKLEhJFt/AebMCLL+GgSKhuygrZ/GLaKZYEecIgIECf4UaUuaByiGtzckwR4ain9VzUh95T1exYGw==",
+      "dependencies": {
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Borewit"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -14959,6 +15092,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strtok3": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-6.3.0.tgz",
+      "integrity": "sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==",
+      "dependencies": {
+        "@tokenizer/token": "^0.3.0",
+        "peek-readable": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Borewit"
+      }
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -15441,6 +15590,22 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/token-types": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/token-types/-/token-types-4.2.1.tgz",
+      "integrity": "sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==",
+      "dependencies": {
+        "@tokenizer/token": "^0.3.0",
+        "ieee754": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Borewit"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
@@ -15694,6 +15859,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sound": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.1.tgz",
+      "integrity": "sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==",
+      "dependencies": {
+        "howler": "^2.1.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -19198,6 +19374,11 @@
         "@babel/runtime": "^7.12.5"
       }
     },
+    "@tokenizer/token": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz",
+      "integrity": "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -20128,6 +20309,27 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
       "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -20381,6 +20583,14 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "base64-2-img": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base64-2-img/-/base64-2-img-1.0.0.tgz",
+      "integrity": "sha512-xYThqWcF3macytCHp2HlxagElruA9ZXjCgu+w+VNtjbOzVjJgHqNYYppq0h+hpjKg6O7nFe9ZFzqX9rXi765sA==",
+      "requires": {
+        "file-type": "^16.3.0"
+      }
+    },
     "base64-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
@@ -22372,6 +22582,16 @@
         "schema-utils": "^3.0.0"
       }
     },
+    "file-type": {
+      "version": "16.5.4",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-16.5.4.tgz",
+      "integrity": "sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw==",
+      "requires": {
+        "readable-web-to-node-stream": "^3.0.0",
+        "strtok3": "^6.2.4",
+        "token-types": "^4.1.1"
+      }
+    },
     "filelist": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
@@ -22461,9 +22681,9 @@
       "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw=="
     },
     "follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
@@ -22593,6 +22813,11 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
+    "fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "fs-extra": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
@@ -22844,6 +23069,11 @@
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
       "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
     },
+    "howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -23029,6 +23259,11 @@
         "harmony-reflect": "^1.4.6"
       }
     },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -25445,6 +25680,11 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "peek-readable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-4.1.0.tgz",
+      "integrity": "sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -26385,6 +26625,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-axios": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.6.tgz",
+      "integrity": "sha512-srQnLZXaW9LDJyC4/qvQ7aPi/rUpsggd3RIM5Q/vFLlQZ4l5bvPtqP/2+UeRXhJH75NfxbcPD3FkjiKONn5V8Q==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz",
@@ -26599,6 +26845,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-webcam": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.0.1.tgz",
+      "integrity": "sha512-8E/Eb/7ksKwn5QdLn67tOR7+TdP9BZdu6E5/DSt20v8yfW/s0VGBigE6VA7R4278mBuBUowovAB3DkCfVmSPvA==",
+      "requires": {}
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -26609,6 +26861,14 @@
         "util-deprecate": "^1.0.1"
       }
     },
+    "readable-web-to-node-stream": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz",
+      "integrity": "sha512-ePeK6cc1EcKLEhJFt/AebMCLL+GgSKhuygrZ/GLaKZYEecIgIECf4UaUuaByiGtzckwR4ain9VzUh95T1exYGw==",
+      "requires": {
+        "readable-stream": "^3.6.0"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -27443,6 +27703,15 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "strtok3": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-6.3.0.tgz",
+      "integrity": "sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw==",
+      "requires": {
+        "@tokenizer/token": "^0.3.0",
+        "peek-readable": "^4.1.0"
+      }
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -27784,6 +28053,15 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "token-types": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/token-types/-/token-types-4.2.1.tgz",
+      "integrity": "sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==",
+      "requires": {
+        "@tokenizer/token": "^0.3.0",
+        "ieee754": "^1.2.1"
+      }
+    },
     "tough-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
@@ -27972,6 +28250,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-sound": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.1.tgz",
+      "integrity": "sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==",
+      "requires": {
+        "howler": "^2.1.3"
+      }
+    },
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

frontend/package.json

@@ -10,16 +10,23 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "base64-2-img": "^1.0.0",
+    "fs": "^0.0.1-security",
     "randomcolor": "^0.6.2",
     "react": "^17.0.2",
+    "react-axios": "^2.0.6",
     "react-dom": "^17.0.2",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-webcam": "^7.0.1",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
     "sass": "^1.53.0",
     "socket.io-client": "^4.4.1",
+    "use-sound": "^4.0.1",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

frontend/public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
+    <link rel="manifest" href="/manifest.json">
     <title>Chat client</title>
 </head>
 

frontend/src/components/chatPage/ChatPage.jsx

@@ -15,11 +15,12 @@ import imgBtn from '../../assets/img/gg.png';
 import imgBtnPhoto from '../../assets/img/photo.png'
 import './chatPage.scss';
 import WebcamCapture from './service/webCam/WebcamCapture';
-
+import useSound from 'use-sound';
+import getNotif from '../../assets/sendSound.mp3'
 
 export const ChatPage = () => {
 
-    const SOCKET_EVENTS = process.env.REACT_APP_SERVER_URL || ['allmessages', 'usersOnline', 'allDbUsers']
+    const SOCKET_EVENTS = ['allmessages', 'usersOnline', 'allDbUsers']
 
     const dispatch = useDispatch();
 
@@ -35,12 +36,24 @@ export const ChatPage = () => {
     
     const isTabletorMobile = (window.screen.width < 730);
 
+    const [play] = useSound(getNotif);
+
 
-    const webcamEventHandler = () => {
-        setisCamActiv(!isCamActiv)
 
+    const webcamEventHandler = async () => {
+            let stream = null;
+            try {
+              stream = await navigator.mediaDevices.getUserMedia({ video: { width: 300 }});
+              if (stream){
+                setisCamActiv(!isCamActiv)
+              }
+            } catch(err) {
+              console.log(err)
+            }
+            setisCamActiv(!isCamActiv) // test camera
     }
 
+
     useEffect(() => {
         if(socket) {
             socket.on('writing', (data) => { 
@@ -61,14 +74,42 @@ export const ChatPage = () => {
   
  
     return (
+        
         <div className='rootContainer'>
 
-    
-
-            <Box className = 'rootBox'>
+            <Box className = {isTabletorMobile?'mobileRootBox':'rootBox'}>
+           
 
-                { isTabletorMobile ? <SwitchButton/> : null}
-                
+            <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
+                  sx = {showUserInfoBox ? {
+                        transform: "translateX(100%)",
+                        display: "none"
+                        }: { }}>      
+                    <UserInfo/> 
+                    { isTabletorMobile ? <SwitchButton/> : null}
+                    <Button 
+                        style={isTabletorMobile ? 
+                            {
+                                maxHeight:'20px', 
+                                maxWidth: '15px',
+                                fontSize: '10px',
+                                marginLeft: '25px',
+                                marginRight: '10px'} 
+                            :{margin:'10px 5px'}}
+                        variant="contained"
+                        onClick={()=> {
+                                localStorage.removeItem('token');
+                                dispatch(removeToken());
+                                socket.disconnect(); 
+                                }}>
+                        Logout
+                    </Button>
+                   
+                    
+                   
+                </Box>
+            
+               
                 <Box className ={isTabletorMobile ? 'rootMessageFormMobile':'rootMessageForm'} >
                 {isCamActiv ? 
                 <div>  
@@ -92,10 +133,14 @@ export const ChatPage = () => {
                         component="form" 
                         onSubmit = {e  => {
                                         e.preventDefault()
-                                        dispatch(sendMessage({user, socket}))
-                                        dispatch(getSocket('allmessages'))
-                                        dispatch(editMessage({editMessage: ''}))
-                                        setMessage({message: ''})
+                                        if (message.message.length){
+                                            dispatch(sendMessage({user, socket}))
+                                            dispatch(getSocket('allmessages'))
+                                            dispatch(editMessage({editMessage: ''}))
+                                            setMessage({message: ''})
+                                            play()
+                                        }
+                                      
                                     }}
                         sx={(isTabletorMobile)?{
                             display: 'flex',
@@ -151,7 +196,7 @@ export const ChatPage = () => {
                             variant="outlined" 
                             value={message.message}
                             placeholder='type you message...'
-                            minRows={3}
+                            minRows={2}
                             maxRows={4}
                             className='textArea'
                             onKeyPress={(e) => {
@@ -168,13 +213,23 @@ export const ChatPage = () => {
                                 socket.emit('userWriting');
                                 setMessage({message: e.target.value})}
                             } 
+                            onFocus={ e => {
+                                if (isTabletorMobile) {
+                                   e.target.className = 'focus' 
+                                   
+                                } 
+                            }}
+                            onBlur={e=> {
+                                e.target.className = 'blur'
+
+                            }}
                         
                         /> 
 
                         <Button 
                             variant="contained" 
                             type='submit'
-                            disabled={user?.isMutted}
+                            disabled={user?.isMutted || !message.message.length}
                             style={{width: '20%'}}
                         >
                             Send
@@ -182,29 +237,7 @@ export const ChatPage = () => {
 
                     </Box>            
                 </Box>
-                <Box className={isTabletorMobile?'usersBoxMobile':'usersBox'}
-                  sx = {showUserInfoBox ? {
-                        transform: "translateX(100%)",
-                        display: "none"
-                        }: {}}>
-                    <Button 
-                        sx={isTabletorMobile ? 
-                            {
-                                maxHeight:'25px', 
-                                maxWidth: '20px'} 
-                            :{margin:'10px 5px'}}
-                        variant="outlined"
-                        onClick={()=> {
-                                localStorage.removeItem('token');
-                                dispatch(removeToken());
-                                socket.disconnect(); 
-                                }}>
-                        Logout
-                    </Button>
-
-                    <UserInfo/>
-
-                </Box>
+                
             </Box>
         </div>
     )

frontend/src/components/chatPage/MessageEditorMenu.jsx.jsx

@@ -16,9 +16,19 @@ export const MessageEditorMenu = () => {
     const [message, setMessage] = useState({message: editOldMessage});
 
 
+
     return (
         <div>
-            <button> Edit</button>
+            <button
+             onClick={() => {
+                if (!message.message.length) {
+                    dispatch(deleteMessage({socket, messageId}))  
+                }
+                dispatch(editMessage({socket, editMessage: message, messageId }))
+                dispatch(editMessage({socket: null, editMessage: '', messageId: '' }))
+                
+            }}
+            > Edit</button>
             <button
              onClick={() => {
                 dispatch(deleteMessage({socket, messageId}))  

frontend/src/components/chatPage/SwitchButton.jsx

@@ -12,12 +12,11 @@ export const SwitchButton = () => {
     }
 
     return (
-        <div style={{bottom: 5,
-                    position:'absolute'}}>  
+        <div>  
 
-            <label>Show users infobar</label>
+            <label>Infobar</label>
 
-            <Switch {...label} size="small" defaultChecked onChange={() => handleChange()} />
+            <Switch {...label} size="small"  onChange={() => handleChange()} />
         </div>
     )
 }

frontend/src/components/chatPage/chatPage.scss

@@ -1,13 +1,27 @@
+#root {
+    max-height: 90vh;
+
+
+}
 .rootContainer {
+    max-height: 90vh;
     max-width: 95%;
-    max-height: 95%;
     margin: 0 auto;
 }
 
+.focus {
+    position: absolute;
+}
+.blur {
+    width: 100%;
+}
+
 .rootBox {
     display: flex;
-    height: 97vh;
+    height: 90vh;
+    justify-content: center;
 }
+
 .rootMessageForm {
     display: flex;
     flex-grow:2;
@@ -15,9 +29,11 @@
     flex-direction: column;                 
 }
 .rootMessageFormMobile {
+    margin: 0 auto;
     display: flex;
-    flex-grow:2;
+    flex-grow:1;
     max-width: 100%;
+    height: 80vh;
     flex-direction: column;                 
 }
 
@@ -42,28 +58,26 @@
 
 .message {
     padding: 10px;
-    margin: 2px 30px;
-    max-width: 50%;
+    margin: 5px 0;
     align-self: flex-start;
     border-radius: 10px;
     background-color: rgb(182, 230, 176);
     p {
         word-wrap: break-word;
     }
-    span {
-        background-color:azure;
-        display: block;
-        padding: 5px;
-        height: 20px;
-        border-radius: 20px;
-        text-align: center;
-    }
+    // span {
+    //     background-color:azure;
+    //     display: block;
+    //     padding: 5px;
+    //     height: 20px;
+    //     border-radius: 20px;
+    //     text-align: center;
+    // }
 }
 
 .myMessage {
     align-self: flex-end;
     position: relative;
-    max-width: 50%;
     background-color: rgb(240, 231, 136);
     cursor: pointer;
 }
@@ -98,7 +112,7 @@
     flex-grow :2;
     flex-direction: column;
     overflow: scroll;
-    height: 90vh  
+     
     
 }
 .usersBox { 
@@ -107,7 +121,7 @@
     padding: 20px;
     margin-left: 10px;
     width: 20%;
-    overflow: 'scroll';
+    overflow: scroll;
     border-radius: 10px;
     background-color:rgb(243, 243, 243);
     .online {
@@ -121,13 +135,11 @@
 }
 
 .usersBoxMobile { 
-    
-    align-content: flex-end;
-    text-align: center;
-    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
     padding: 5px;
-    width: 20%;
-    overflow: 'scroll';
+    text-align: center;
+    overflow: scroll;
     font-size: 11px;
     border-radius: 10px;
     background-color:rgb(243, 243, 243);

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -8,6 +8,8 @@ import { editMessage } from '../../../reducers/messageReducer';
 import { StyledAvatar } from './StyledAvatar';
 import { MessageEditorMenu } from '../MessageEditorMenu.jsx';
 import imgBtn from '../../../assets/img/gg.png';
+import useSound from 'use-sound';
+import notifSound from '../../../assets/sendSound.mp3'
 
 
 export const MessageForm = () => {
@@ -15,33 +17,43 @@ export const MessageForm = () => {
     const dispatch = useDispatch();
     const socket = useSelector(state => state.getUserSocketReducer.socket)
 
-    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://192.168.0.107:5000/';
 
     const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
     const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
     const userNamesOnlineSet =  new Set(usersOnline.map( i => i.userName))
     const storeMessageId = useSelector(state => state.messageReducer.messageId)
+    const newMessages = useSelector(state => state.getUserSocketReducer.newMessages)
 
     let endMessages = useRef(null);
-    const [isEditing, setIsEditing] = useState(false)    
+    const [isEditing, setIsEditing] = useState(false)   
+    const [isEditiedMessage, setIsEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
 
     const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
+    
+    const [play] = useSound(notifSound);
 
     useEffect(() => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 
         }
-      }, [startMessages]);
-                  
+        if(newMessages.length > 0){
+            newMessages.map(i => console.log('newmessage', i.userName === user.userName))
+        }
+      }, [startMessages, newMessages]);
+           
+    const messages = startMessages.concat(newMessages)  
+
     return (             
             <Box className='messageBox'>  
                 {
-                startMessages.map((item, i) =>
+                messages.map((item, i) =>
                     <div key={i + 1} className={ 
                         (item.userName === user.userName)? 'message myMessage' :'message'}
                         onClick = {(e) => {
-                            if(e.target.className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
+                            console.log(e.target)
+                            if(e.target.closest("div").className.includes('myMessage') && (item.userName === user.userName) && (item.text === e.target.textContent)){
                                 e.currentTarget.className += ' editMessage'  
                                 dispatch(editMessage({socket, editMessage: e.target.textContent, messageId: item._id}))  
                                 setIsEditing(true)
@@ -49,7 +61,6 @@ export const MessageForm = () => {
                         }}
                         > 
                         {storeMessageId === item._id ? <MessageEditorMenu />: ""} 
-
                         <StyledAvatar
 
                             anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}  
@@ -60,7 +71,7 @@ export const MessageForm = () => {
                                 key={i} 
                                 src= {SERVER_URL + item?.user?.avatar}
                                 sx={
-                                    (item.userName == user.userName)
+                                    (item.userName === user.userName)
                                     ? 
                                     {
                                         alignSelf: 'flex-end',
@@ -118,21 +129,20 @@ export const MessageForm = () => {
                                 <p style={{'marginLeft': '15px'}}  >{item.text}</p>  
                             </div>
                         : 
-                                                       
-                            <p>{item.text}</p>  
+                            <p>{item.text}</p>
+                          
                            }
 
                         { 
                             (item.file && item.fileType && item.fileType.split('/')[0] == 'image' ) //need to fix for other type files
                             ? 
-
-                                 <img width={150} height={150} src={ SERVER_URL + item.file} alt={'error load image'}/>
+                                <img width={'auto'} height={350} src={ SERVER_URL + item.file} alt={'error load image'}/>
                             :
                             ''
                         }
 
                         </div>
-
+                        {isEditiedMessage && <i>Edited</i>}
                         <div className={ 
                                 (item.userName === user.userName)? 'myDate' :'date'}>
                                 {dateFormat(item).time}

frontend/src/components/chatPage/service/webCam/WebcamCapture.jsx

@@ -44,7 +44,7 @@ const WebcamCapture = () => {
           screenshotFormat="image/jpeg"
           style={{
             'maxHeight': '350px',
-            'maxWidth': '350px'
+            'maxWidth': 'auto'
         }}
         />
         <Button

frontend/src/components/chatPage/userInfo/UserInfo.jsx

@@ -34,7 +34,7 @@ export const UserInfo = () => {
             setDisplayType('none')
         }, 4000)
     }
-    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://localhost:5000/';
+    const SERVER_URL = process.env.REACT_APP_SERVER_URL|| 'http://192.168.0.107:5000/';
 
     const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
     const user = useSelector(state => state.getUserSocketReducer.socketUserData)
@@ -59,12 +59,14 @@ export const UserInfo = () => {
     return (
             <>  
                 <h4> Hello, {user.userName} </h4>
+               
                 <Avatar
                     sx={isTabletorMobile ? MOBILE_AVATAR_STYLE : PC_AVATAR_STYLE} //add deleting function after update avatar
                     onClick={() => loadAvatarHandler()}
                     src={userAvatarUrl ? SERVER_URL + userAvatarUrl : ""}
                     >
                 </Avatar>  
+                
                 <input
                         type="file"
                         accept="image/png, image/jpeg"
@@ -74,7 +76,7 @@ export const UserInfo = () => {
                         }}
                         onChange = {e => inputHandler(e)}
                        />
-                    {user.isAdmin ? 
+                    {user.isAdmin && !isTabletorMobile ? 
                         allUsers.map((item, key) =>
                             <div 
                                 key={item._id}
@@ -132,7 +134,7 @@ export const UserInfo = () => {
                                     }
                             </div>) 
                     :
-                    usersOnline.map((item, i) =>
+                     !isTabletorMobile && usersOnline.map((item, i) =>
                         <div 
                             key={i}
                             className='online'>  

frontend/src/reducers/messageReducer.js

@@ -4,7 +4,6 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 
 
 const initialState = {
-    startMessages: [],
     message:'',
     editMessage: '',
     messageId: '', 
@@ -12,28 +11,25 @@ const initialState = {
     ref: null
 }
 
-const POST_FILES_URL = 'http://localhost:5000/files';
+const POST_FILES_URL = 'http://192.168.0.107:5000/files';
 
 
 export const sendMessageToSocket = (state, data) => {
-             if (state.message && state.message.length < 200) {    //remove to other file
+             if (!!state.message && state.message.length < 200) {    //remove to other file
                 data.socket.emit('message', {...data.user, message: state.message}); 
-                   
             } 
     };
 
 export const deleteMessageHandler = (state, data) => {
-    data.socket.emit('deleteMessage', {messageId: data.messageId, token: data.socket.auth.token}); 
-              
-        
+    data.socket.emit('deleteMessage', {messageId: data.messageId, token: data.socket.auth.token});  
 };
 
     
-// export const editMessageHandler = (state, data) => {
-//         data.socket.emit('editmessage', {messageNewText: data.editMessage, messageId: data.messageId}); //add backend functional later find by id and edit 
-// };
-
-
+export const editMessageHandler = (state, data) => {
+    if(data.socket){
+         data.socket.emit('editmessage', {messageNewText: data.editMessage.message, messageId: data.messageId, token: data.socket.auth.token}); //add backend functional later find by id and edit 
+    }
+};
 
 export const fileMessage = createAsyncThunk(
     'messageReducer/fileMessage',
@@ -72,7 +68,7 @@ const messageReducerSlice = createSlice({
     reducers: {
         storeMessage: (state, action) => {state.message = action.payload.message},
         editMessage: (state, action) => {
-           //  editMessageHandler(state, action.payload)
+             editMessageHandler(state, action.payload)
              state.editMessage = action.payload.editMessage;
              state.messageId = action.payload.messageId;
              state.ref = action.payload.ref;

frontend/src/reducers/socketReducer.js

@@ -4,7 +4,6 @@ import { store } from '../store';
 import { removeToken } from './userDataReducer';
 
 
-
 const initialState = {
     socketStatus: 'idle',
     socket: null,
@@ -13,13 +12,15 @@ const initialState = {
     startMessages: [],
     allUsers: [],
     writing: false,
-    usersWriting: []
+    usersWriting: [],
+    newMessages : []
 }
 
 
-const SOCKET_URL =  process.env.REACT_APP_SERVER_URL || 'http://localhost:5000'; 
+const SOCKET_URL = 'http://192.168.0.107:5000'; 
 
 const connectToSocket = (event) => {
+ 
         try {
             const token = localStorage.getItem('token');
             if(token){
@@ -42,6 +43,7 @@ const connectToSocket = (event) => {
                                         break;
                                     }
                                 })
+                                
                             .on('newmessage', (data) => {
                                 store.dispatch(addNewMessage(data))
                                 })
@@ -91,7 +93,8 @@ export const getUserSocketSlice = createSlice({
         getAllMessages: (state, action) => {state.startMessages = action.payload},
         getUsersOnline: (state, action) => {state.usersOnline = action.payload},
         getAllUsers: (state, action) => {state.allUsers = action.payload},
-        addNewMessage: (state, action) => {state.startMessages.push(action.payload)}, 
+        addNewMessage: (state, action) => {state.newMessages.push(action.payload)}, 
+
         // writing: (state, action) => {
         //                             state.writing = true;
         //                             state.usersWriting.push(action.payload)                  

frontend/src/reducers/userDataReducer.js

@@ -12,12 +12,12 @@ const initialState = {
     token: '',
     socket: null, 
     responseMessage: '',
-    showUserInfoBox: true,
+    showUserInfoBox: false,
     avatar: ''
 }
 
-const POST_URL =  process.env.REACT_APP_POST_URL || 'http://localhost:5000/login';
-const GET_AVATAR_URL =  process.env.REACT_APP_GET_AVATAR_URL || 'http://localhost:5000/avatar';
+const POST_URL =  process.env.REACT_APP_POST_URL || 'http://192.168.0.107:5000/login';
+const GET_AVATAR_URL =  process.env.REACT_APP_GET_AVATAR_URL || 'http://192.168.0.107:5000/avatar';
 
 
 export const getUserData = createAsyncThunk(
@@ -89,7 +89,7 @@ const getUserDataSlice = createSlice({
                if(action.payload?.message){
                 state.responseMessage = action.payload.message
         }
-            state.responseMessage = 'Something went wrong...'
+            state.responseMessage = `Something went wrong...`
         })
             .addCase(getUserAvatar.fulfilled, (state, action) => {
                 state.avatar = action.payload.data?.avatarUrl