move menu content serverside

to control display based on options enabled, better UI experience.
still in progress

public/client.htm

@@ -13,11 +13,7 @@
     <div id="bottomdiv">
       <div class="dropup" id="menu">
         <i class="fas fa-bars fa-fw"></i> Menu
-        <div class="dropup-content">
+        <div id="dropupContent" class="dropup-content"></div>
-          <a id="logBtn" href="javascript:void(0);"><i class="fas fa-clipboard fa-fw"></i> Start Log</a>
-          <a id="downloadLogBtn" href="javascript:void(0);"><i class="fas fa-download fa-fw"></i> Download Log</a>
-          <a id="credentialsBtn" href="javascript:void(0);"><i class="fas fa-key fa-fw"></i> Credentials</a>
-        </div>
       </div>
       <div id="footer"></div>
       <div id="status"></div>

socket.js

@@ -7,6 +7,7 @@ var SSH = require('ssh2').Client
 // var fs = require('fs')
 // var hostkeys = JSON.parse(fs.readFileSync('./hostkeyhashes.json', 'utf8'))
 var termCols, termRows
+var menuData = '<a id="logBtn" href="javascript:void(0);"><i class="fas fa-clipboard fa-fw"></i> Start Log</a><a id="downloadLogBtn" href="javascript:void(0);"><i class="fas fa-download fa-fw"></i> Download Log</a>'
 
 // public
 module.exports = function socket (socket) {
@@ -31,6 +32,7 @@ module.exports = function socket (socket) {
   conn.on('ready', function connOnReady () {
     console.log('WebSSH2 Login: user=' + socket.request.session.username + ' from=' + socket.handshake.address + ' host=' + socket.request.session.ssh.host + ' port=' + socket.request.session.ssh.port + ' sessionID=' + socket.request.sessionID + '/' + socket.id + ' mrhsession=' + socket.request.session.ssh.mrhsession + ' allowreplay=' + socket.request.session.ssh.allowreplay + ' term=' + socket.request.session.ssh.term)
     socket.emit('setTerminalOpts', socket.request.session.ssh.terminal)
+    socket.emit('menu', menuData)
     socket.emit('title', 'ssh://' + socket.request.session.ssh.host)
     if (socket.request.session.ssh.header.background) socket.emit('headerBackground', socket.request.session.ssh.header.background)
     if (socket.request.session.ssh.header.name) socket.emit('header', socket.request.session.ssh.header.name)

src/client.htm

@@ -13,11 +13,7 @@
     <div id="bottomdiv">
       <div class="dropup" id="menu">
         <i class="fas fa-bars fa-fw"></i> Menu
-        <div class="dropup-content">
+        <div id="dropupContent" class="dropup-content"></div>
-          <a id="logBtn" href="javascript:void(0);"><i class="fas fa-clipboard fa-fw"></i> Start Log</a>
-          <a id="downloadLogBtn" href="javascript:void(0);"><i class="fas fa-download fa-fw"></i> Download Log</a>
-          <a id="credentialsBtn" href="javascript:void(0);"><i class="fas fa-key fa-fw"></i> Credentials</a>
-        </div>
       </div>
       <div id="footer"></div>
       <div id="status"></div>

src/js/index.js

@@ -28,13 +28,9 @@ var sessionLogEnable = false
 var loggedData = false
 var sessionLog, sessionFooter, logDate, currentDate, myFile, errorExists
 
-var downloadLogBtn = document.getElementById('downloadLogBtn')
+var statusID = document.getElementById('status')
-var credentialsBtn = document.getElementById('credentialsBtn')
+var headerID = document.getElementById('header')
-var logBtn = document.getElementById('logBtn')
+var menuID = document.getElementById('dropupContent')
-
-logBtn.addEventListener('click', toggleLog)
-
-logBtn.style.color = '#000'
 
 var terminalContainer = document.getElementById('terminal-container')
 var socket, termid // eslint-disable-line
@@ -74,30 +70,38 @@ term.on('data', function (data) {
 })
 socket.on('title', function (data) {
   document.title = data
+}).on('menu', function (data) {
+  menuID.innerHTML = data
+  var downloadLogBtn = document.getElementById('downloadLogBtn')
+  var credentialsBtn = document.getElementById('credentialsBtn')
+  var logBtn = document.getElementById('logBtn')
+  logBtn.addEventListener('click', toggleLog)
+  logBtn.style.color = '#000'
 }).on('status', function (data) {
-  document.getElementById('status').innerHTML = data
+  statusID.innerHTML = data
 }).on('ssherror', function (data) {
-  document.getElementById('status').innerHTML = data
+  statusID.innerHTML = data
-  document.getElementById('status').style.backgroundColor = 'red'
+  statusID.style.backgroundColor = 'red'
   errorExists = true
 }).on('headerBackground', function (data) {
-  document.getElementById('header').style.backgroundColor = data
+  headerID.style.backgroundColor = data
 }).on('header', function (data) {
   if (data) {
-    document.getElementById('header').innerHTML = data
+    headerID.innerHTML = data
-    document.getElementById('header').style.display = 'block'
+    headerID.style.display = 'block'
     // header is 19px and footer is 19px, recaculate new terminal-container and resize
-    document.getElementById('terminal-container').style.height = 'calc(100% - 38px)'
+    terminalContainer.style.height = 'calc(100% - 38px)'
     resizeScreen()
   }
 }).on('footer', function (data) {
   sessionFooter = data
   document.getElementById('footer').innerHTML = data
 }).on('statusBackground', function (data) {
-  document.getElementById('status').style.backgroundColor = data
+  statusID.style.backgroundColor = data
 }).on('allowreplay', function (data) {
   if (data === true) {
     console.log('allowreplay: ' + data)
+    menuID.innerHTML = menuID.innerHTML + '<a id="credentialsBtn" href="javascript:void(0);"><i class="fas fa-key fa-fw"></i> Credentials</a>'
     credentialsBtn.style.color = '#000'
     credentialsBtn.addEventListener('click', replayCredentials)
   } else {
@@ -111,15 +115,15 @@ socket.on('title', function (data) {
   }
 }).on('disconnect', function (err) {
   if (!errorExists) {
-    document.getElementById('status').style.backgroundColor = 'red'
+    statusID.style.backgroundColor = 'red'
-    document.getElementById('status').innerHTML =
+    statusID.innerHTML =
       'WEBSOCKET SERVER DISCONNECTED: ' + err
   }
   socket.io.reconnection(false)
 }).on('error', function (err) {
   if (!errorExists) {
-    document.getElementById('status').style.backgroundColor = 'red'
+    statusID.style.backgroundColor = 'red'
-    document.getElementById('status').innerHTML = 'ERROR: ' + err
+    statusID.innerHTML = 'ERROR: ' + err
   }
 })