move the browser to an iframe in a modal and drop socket.io dep, just simple file management

app.js

@@ -7,7 +7,6 @@ var express = require('express');
 var app = require('express')();
 var http = require('http').Server(app);
 var cloudcmd = require('cloudcmd');
-var io = require('socket.io');
 var bodyParser = require('body-parser');
 var { pamAuthenticate, pamErrors } = require('node-linux-pam');
 var CUSTOM_PORT = process.env.CUSTOM_PORT || 3000;
@@ -76,7 +75,6 @@ app.get("/", function (req, res) {
 });
 //// Web File Browser ////
 app.use(bodyParser.urlencoded({ extended: true }));
-var socket = io(http, {path: 'files/socket.io'});
 app.get('/files', function (req, res) {
   res.send('Unauthorized');
   res.end();
@@ -97,9 +95,8 @@ app.post('/files', function(req, res, next){
   });
 });
 app.use('/files', cloudcmd({
-  socket,
   config: {
-    root: '/config',
+    root: '/',
     prefix: '/files',
     terminal: false,
     console: false,
@@ -108,6 +105,8 @@ app.use('/files', cloudcmd({
     auth: false,
     name: 'Files',
     log: false,
+    keysPanel: false,
+    oneFilePanel: true,
   }
 }))
 

package.json

@@ -19,7 +19,6 @@
     "ejs": "^2.7.1",
     "express": "^4.17.1",
     "guacamole-lite": "^0.6.3",
-    "node-linux-pam": "0.0.1",
-    "socket.io": "^4.0.1"
+    "node-linux-pam": "0.0.1"
   }
 }

public/js/rdp.js

@@ -152,10 +152,24 @@ function poposk(){
   };
   $('#osk').empty();
   $('#osk').append(osk.getElement());
+  // Launch Modal
+  $('#Keyboard').appendTo('body').modal('show');
   // Resize keyboard to the width of the screen
   osk.resize($(window).width());
 }
 
+// When file browser is launched open modal
+$('#filesform').on('submit', function() {
+  if ($('#nav-trigger').prop('checked') == true){
+    $('#nav-trigger').prop('checked', false);
+    $('#sidebaricon').empty();
+    side_close();
+    $('#sidebaricon').append('<i class="fa fa-arrow-right"></i>');
+  }
+  $('#files').appendTo('body').modal('show');
+  $("#files_frame").width(100 + '%');
+  $("#files_frame").height(90 + '%');
+});
 
 // RDP Resize window logic
 var resizeId;

rdp.ejs

@@ -32,15 +32,15 @@
     <div id="sidebar" style="cursor:initial;display:none;width:200px;height:100%;background:#353430;padding: 5px 10px;color:white;">
       <!-- On Screen Keyboard Launcher -->
       <button type="button" class="close" aria-label="Close" style="color:white;" onclick="closeside()"><span aria-hidden="true">x</span></button>
-      <center><button type="button" style="cursor:pointer;" class="btn btn-secondary" data-toggle="modal" data-target="#Keyboard" onclick="poposk()">Touch <i class="far fa-keyboard"></i></button></center>
+      <center><button type="button" style="cursor:pointer;" class="btn btn-secondary" onclick="poposk()">Touch <i class="far fa-keyboard"></i></button></center>
       <!-- Clipboard -->
       ClipBoard:<br>
       <textarea id="clipboard" class="stopcapture form-control" rows="7"></textarea>
       <!-- File Browser launcher -->
-      <form action="/files" method="post" target="_blank">
-        File Browser:<br>
-        <input type="password" value="abc" class="stopcapture form-control" name="password" placeholder="User Password" required>
-        <center><button type="submit" style="cursor:pointer;" class="btn btn-secondary">Launch</button></center>
+      <form id="filesform" action="/files" method="post" target="files_frame">
+        Password:<br>
+        <input type="password" value="abc" class="stopcapture form-control" name="password" placeholder="User Password" required><br>
+        <center><button type="submit" style="cursor:pointer;" class="btn btn-secondary">Files <i class="far fa-file"></i></button></center>
       </form>
     </div>
     <!--On Screen Keyboard Modal-->
@@ -53,6 +53,17 @@
           </div>
         </div>
       </div>
+    <!--File Browser Modal-->
+    <div id="files" class="modal fade" tabindex="-1" style="cursor:initial;">
+      <div class="modal-dialog" style="max-width:90%!important">
+        <div class="modal-content">
+          <div id="files_body" class="modal-body" style="height:90vh!important">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <iframe id="files_frame" name="files_frame" src="/files" frameborder="0"></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
     </div>
     <!-- Fake checkbox to show/hide the sidebar -->
     <input type="checkbox" id="nav-trigger" class="nav-trigger" />