preparing for 0.2.0...

Still a work in progress. Adding menu system and fontawsome
integration.

config.json

@@ -1,6 +1,6 @@
 {
   "listen": {
-    "ip": "127.0.0.1",
+    "ip": "192.168.0.71",
     "port": 2222
   },
   "user": {

package.json

@@ -34,7 +34,7 @@
     "express-session": "^1.15.6",
     "morgan": "^1.9.0",
     "read-config": "^1.6.0",
-    "socket.io": "^2.0.0",
+    "socket.io": "^1.7.4",
     "ssh2": "^0.5.5",
     "validator": "^9.0.0"
   },
@@ -48,17 +48,21 @@
     "cleanmac": "find . -name '.DS_Store' -type f -delete"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome": "^1.1.3",
+    "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "bithound": "^1.7.0",
     "clean-webpack-plugin": "^0.1.18",
     "copy-webpack-plugin": "^4.3.1",
     "css-loader": "^0.28.9",
     "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.6",
     "nodemon": "^1.11.0",
     "snazzy": "^7.0.0",
     "snyk": "^1.39.1",
     "standard": "^10.0.3",
     "style-loader": "^0.20.1",
     "uglifyjs-webpack-plugin": "^1.1.8",
+    "url-loader": "^0.6.2",
     "webpack": "^3.10.0",
     "webpack-merge": "^4.1.1",
     "webpack-stream": "^4.0.0",

public/client-full.htm

@@ -9,12 +9,36 @@
     <div id="header"></div>
     <div id="terminal-container" class="terminal"></div>
     <div id="bottomdiv">
+      <div class="dropup" id="menu">
+        <i class="fas fa-bars"></i> Menu
+        <div class="dropup-content">
+          <a id="aboutBtn" class="About" href="javascript:void(0);"><i class="fas fa-question"></i> About</a>
+          <a id="toggleLog" class="toggleLog" href="javascript:void(0);"><i class="fas fa-clipboard"></i> Start Log</a>
+          <a id="downloadLog" href="javascript:void(0);"><i class="fas fa-download"></i> Download Log</a>
+          <a id="credentialsBtn" href="javascript:void(0);"><i class="fas fa-key"></i> Credentials</a>
+        </div>
+      </div>
       <div id="footer"></div>
       <div id="status"></div>
-      <div id="credentials"><a class="credentials" href="javascript:void(0);">CREDENTIALS</a></div>
-      <div id="downloadLog"><a class="downloadLog" href="javascript:void(0);">Download Log</a></div>
-      <div id="toggleLog"><a class="toggleLog" href="javascript:void(0);">Start Log</a></div>
     </div>
   </div>
+<!-- The Modal -->
+<div id="aboutModal" class="modal">
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="aboutClose">&times;</span>
+      <h1>WebSSH2 0.2.0</h1>
+    </div>
+    <div class="modal-body">
+      <p>Copyright 2017 F5 Networks, Inc. See End User License Agreement (EULA) for license terms. Notwithstanding anything to the contrary in the EULA, Licensee may copy and modify this software product for its internal business purposes.</p>
+    </div>
+    <div class="modal-footer">
+      <p>This is pre-release content. This application may change in final release.</p>
+    </div>
+  </div>
+</div>
 </body>
 </html>
+
+

public/client-min.htm

@@ -9,12 +9,36 @@
     <div id="header"></div>
     <div id="terminal-container" class="terminal"></div>
     <div id="bottomdiv">
+      <div class="dropup" id="menu">
+        <i class="fas fa-bars"></i> Menu
+        <div class="dropup-content">
+          <a id="aboutBtn" class="About" href="javascript:void(0);"><i class="fas fa-question"></i> About</a>
+          <a id="toggleLog" class="toggleLog" href="javascript:void(0);"><i class="fas fa-clipboard"></i> Start Log</a>
+          <a id="downloadLog" href="javascript:void(0);"><i class="fas fa-download"></i> Download Log</a>
+          <a id="credentialsBtn" href="javascript:void(0);"><i class="fas fa-key"></i> Credentials</a>
+        </div>
+      </div>
       <div id="footer"></div>
       <div id="status"></div>
-      <div id="credentials"><a class="credentials" href="javascript:void(0);">CREDENTIALS</a></div>
-      <div id="downloadLog"><a class="downloadLog" href="javascript:void(0);">Download Log</a></div>
-      <div id="toggleLog"><a class="toggleLog" href="javascript:void(0);">Start Log</a></div>
     </div>
   </div>
+<!-- The Modal -->
+<div id="aboutModal" class="modal">
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="aboutClose">&times;</span>
+      <h1>WebSSH2 0.2.0</h1>
+    </div>
+    <div class="modal-body">
+      <p>Copyright 2017 F5 Networks, Inc. See End User License Agreement (EULA) for license terms. Notwithstanding anything to the contrary in the EULA, Licensee may copy and modify this software product for its internal business purposes.</p>
+    </div>
+    <div class="modal-footer">
+      <p>This is pre-release content. This application may change in final release.</p>
+    </div>
+  </div>
+</div>
 </body>
 </html>
+
+

public/webssh2.css

@@ -177,12 +177,27 @@ body {
     flex: 0 1 30px;
 }
 
+#menu {
+    display: inline-block;
+    font-size:16px;
+    color: rgb(255, 255, 255);
+    padding-left: 10px;
+    z-index: 100;
+}
+
+#menu:hover .dropup-content {
+    display: block;
+}
+
 #footer {
     display: inline-block;
     color: rgb(240, 240, 240);
     background-color: rgb(50, 50, 50);
-    padding-left: 10px;
+    padding-left: 5px;
-    padding-right: 10px;
+    padding-right: 5px;
+    border-color: white;
+    border-style: none none none solid;
+    border-width: 1px;
     text-align: left;
 }
 
@@ -198,51 +213,110 @@ body {
     text-align: left;
     z-index: 100;
 }
-#credentials {
+
+.dropup {
+    position: relative;
     display: inline-block;
-    color: rgb(51, 51, 51);
-    background-color: rgb(255, 127, 0);
-    padding-left: 10px;
-    padding-right: 10px;
-    border-color: white;
-    border-style: none solid none none;
-    border-width: 1px;
-    text-align: left;
-    z-index: 100;
 }
-a.credentials {
+
-    color: rgb(51, 51, 51);
+.dropup-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    bottom:16px;
+    z-index: 1;
+}
+
+.dropup-content a {
+    color: black;
+    padding: 12px 16px;
     text-decoration: none;
+    display: block;
 }
-#downloadLog {
+
-    display: inline-block;
+.dropup-content a:hover {background-color: #ccc}
-    color: rgb(240, 240, 240);
+
-    background-color: rgb(255, 127, 0);
+.dropup:hover .dropup-content {
-    padding-left: 10px;
+    display: block;
-    padding-right: 10px;
-    border-color: white;
-    border-style: none solid none none;
-    border-width: 1px;
-    text-align: left;
-    z-index: 100;
 }
-a.downloadLog {
+
-    color: rgb(240, 240, 240);
+.dropup:click .dropup-content {
+    display: block;
+}
+
+.dropup:hover .dropbtn {
+    background-color: #3e8e41;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(128,128,128); /* Fallback color */
+    background-color: rgba(128,128,128,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    color: #000;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.aboutClose {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.aboutClose:hover,
+.aboutClose:focus {
+    color: #000;
     text-decoration: none;
+    cursor: pointer;
 }
-#toggleLog {
+
-    display: inline-block;
+.modal-header {
-    color: rgb(240, 240, 240);
+    padding: 2px 16px;
-    background-color: rgb(0, 127, 0);
+    background-color: #5cb85c;
-    padding-left: 10px;
+    color: white;
-    padding-right: 10px;
-    border-color: white;
-    border-style: none solid none none;
-    border-width: 1px;
-    text-align: left;
-    z-index: 100;
 }
-a.toggleLog {
+
-    color: rgb(240, 240, 240);
+.modal-body {padding: 2px 16px;}
-    text-decoration: none;
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #5cb85c;
+    color: white;
+    font-style: italic;
 }

src/client-full.htm

@@ -9,12 +9,36 @@
     <div id="header"></div>
     <div id="terminal-container" class="terminal"></div>
     <div id="bottomdiv">
+      <div class="dropup" id="menu">
+        <i class="fas fa-bars"></i> Menu
+        <div class="dropup-content">
+          <a id="aboutBtn" class="About" href="javascript:void(0);"><i class="fas fa-question"></i> About</a>
+          <a id="toggleLog" class="toggleLog" href="javascript:void(0);"><i class="fas fa-clipboard"></i> Start Log</a>
+          <a id="downloadLog" href="javascript:void(0);"><i class="fas fa-download"></i> Download Log</a>
+          <a id="credentialsBtn" href="javascript:void(0);"><i class="fas fa-key"></i> Credentials</a>
+        </div>
+      </div>
       <div id="footer"></div>
       <div id="status"></div>
-      <div id="credentials"><a class="credentials" href="javascript:void(0);">CREDENTIALS</a></div>
-      <div id="downloadLog"><a class="downloadLog" href="javascript:void(0);">Download Log</a></div>
-      <div id="toggleLog"><a class="toggleLog" href="javascript:void(0);">Start Log</a></div>
     </div>
   </div>
+<!-- The Modal -->
+<div id="aboutModal" class="modal">
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="aboutClose">&times;</span>
+      <h1>WebSSH2 0.2.0</h1>
+    </div>
+    <div class="modal-body">
+      <p>Copyright 2017 F5 Networks, Inc. See End User License Agreement (EULA) for license terms. Notwithstanding anything to the contrary in the EULA, Licensee may copy and modify this software product for its internal business purposes.</p>
+    </div>
+    <div class="modal-footer">
+      <p>This is pre-release content. This application may change in final release.</p>
+    </div>
+  </div>
+</div>
 </body>
 </html>
+
+

src/client-min.htm

@@ -9,12 +9,36 @@
     <div id="header"></div>
     <div id="terminal-container" class="terminal"></div>
     <div id="bottomdiv">
+      <div class="dropup" id="menu">
+        <i class="fas fa-bars"></i> Menu
+        <div class="dropup-content">
+          <a id="aboutBtn" class="About" href="javascript:void(0);"><i class="fas fa-question"></i> About</a>
+          <a id="toggleLog" class="toggleLog" href="javascript:void(0);"><i class="fas fa-clipboard"></i> Start Log</a>
+          <a id="downloadLog" href="javascript:void(0);"><i class="fas fa-download"></i> Download Log</a>
+          <a id="credentialsBtn" href="javascript:void(0);"><i class="fas fa-key"></i> Credentials</a>
+        </div>
+      </div>
       <div id="footer"></div>
       <div id="status"></div>
-      <div id="credentials"><a class="credentials" href="javascript:void(0);">CREDENTIALS</a></div>
-      <div id="downloadLog"><a class="downloadLog" href="javascript:void(0);">Download Log</a></div>
-      <div id="toggleLog"><a class="toggleLog" href="javascript:void(0);">Start Log</a></div>
     </div>
   </div>
+<!-- The Modal -->
+<div id="aboutModal" class="modal">
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="aboutClose">&times;</span>
+      <h1>WebSSH2 0.2.0</h1>
+    </div>
+    <div class="modal-body">
+      <p>Copyright 2017 F5 Networks, Inc. See End User License Agreement (EULA) for license terms. Notwithstanding anything to the contrary in the EULA, Licensee may copy and modify this software product for its internal business purposes.</p>
+    </div>
+    <div class="modal-footer">
+      <p>This is pre-release content. This application may change in final release.</p>
+    </div>
+  </div>
+</div>
 </body>
 </html>
+
+

src/css/style.css

@@ -53,12 +53,27 @@ body {
     flex: 0 1 30px;
 }
 
+#menu {
+    display: inline-block;
+    font-size:16px;
+    color: rgb(255, 255, 255);
+    padding-left: 10px;
+    z-index: 100;
+}
+
+#menu:hover .dropup-content {
+    display: block;
+}
+
 #footer {
     display: inline-block;
     color: rgb(240, 240, 240);
     background-color: rgb(50, 50, 50);
-    padding-left: 10px;
+    padding-left: 5px;
-    padding-right: 10px;
+    padding-right: 5px;
+    border-color: white;
+    border-style: none none none solid;
+    border-width: 1px;
     text-align: left;
 }
 
@@ -74,51 +89,110 @@ body {
     text-align: left;
     z-index: 100;
 }
-#credentials {
+
+.dropup {
+    position: relative;
     display: inline-block;
-    color: rgb(51, 51, 51);
-    background-color: rgb(255, 127, 0);
-    padding-left: 10px;
-    padding-right: 10px;
-    border-color: white;
-    border-style: none solid none none;
-    border-width: 1px;
-    text-align: left;
-    z-index: 100;
 }
-a.credentials {
+
-    color: rgb(51, 51, 51);
+.dropup-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    bottom:16px;
+    z-index: 1;
+}
+
+.dropup-content a {
+    color: black;
+    padding: 12px 16px;
     text-decoration: none;
+    display: block;
 }
-#downloadLog {
+
-    display: inline-block;
+.dropup-content a:hover {background-color: #ccc}
-    color: rgb(240, 240, 240);
+
-    background-color: rgb(255, 127, 0);
+.dropup:hover .dropup-content {
-    padding-left: 10px;
+    display: block;
-    padding-right: 10px;
-    border-color: white;
-    border-style: none solid none none;
-    border-width: 1px;
-    text-align: left;
-    z-index: 100;
 }
-a.downloadLog {
+
-    color: rgb(240, 240, 240);
+.dropup:click .dropup-content {
+    display: block;
+}
+
+.dropup:hover .dropbtn {
+    background-color: #3e8e41;
+}
+
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(128,128,128); /* Fallback color */
+    background-color: rgba(128,128,128,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    color: #000;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.aboutClose {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.aboutClose:hover,
+.aboutClose:focus {
+    color: #000;
     text-decoration: none;
+    cursor: pointer;
 }
-#toggleLog {
+
-    display: inline-block;
+.modal-header {
-    color: rgb(240, 240, 240);
+    padding: 2px 16px;
-    background-color: rgb(0, 127, 0);
+    background-color: #5cb85c;
-    padding-left: 10px;
+    color: white;
-    padding-right: 10px;
-    border-color: white;
-    border-style: none solid none none;
-    border-width: 1px;
-    text-align: left;
-    z-index: 100;
 }
-a.toggleLog {
+
-    color: rgb(240, 240, 240);
+.modal-body {padding: 2px 16px;}
-    text-decoration: none;
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #5cb85c;
+    color: white;
+    font-style: italic;
 }

src/js/index.js

@@ -1,6 +1,24 @@
-import * as io from '../../node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js'
+'use strict'
+
+import * as io from '../../node_modules/socket.io-client/dist/socket.io.js'
 import * as Terminal from '../../node_modules/xterm/dist/xterm'
 import * as fit from '../../node_modules/xterm/dist/addons/fit/fit'
+// import 'font-awesome/css/font-awesome.css'
+//
+// import '@fortawesome/fontawesome/styles.css'
+import fontawesome from '@fortawesome/fontawesome'
+import faBars from '@fortawesome/fontawesome-free-solid/faBars'
+import faQuestion from '@fortawesome/fontawesome-free-solid/faQuestion'
+import faClipboard from '@fortawesome/fontawesome-free-solid/faClipboard'
+import faDownload from '@fortawesome/fontawesome-free-solid/faDownload'
+import faKey from '@fortawesome/fontawesome-free-solid/faKey'
+import faCog from '@fortawesome/fontawesome-free-solid/faCog'
+
+fontawesome.library.add(faBars, faQuestion, faClipboard, faDownload, faKey, faCog)
+
+fontawesome.config.searchPseudoElements = true
+
+fontawesome.dom.i2svg()
 
 require('../../node_modules/xterm/dist/xterm.css')
 require('../css/style.css')
@@ -10,16 +28,17 @@ Terminal.applyAddon(fit)
 /* global Blob */
 
 var sessionLogEnable = false
+var loggedData = false
 var sessionLog, sessionFooter, logDate, currentDate, myFile, errorExists
 
 var downloadLogButton = document.getElementById('downloadLog')
-var credentialsButton = document.getElementById('credentials')
+var credentialsBtn = document.getElementById('credentialsBtn')
 var toggleLogButton = document.getElementById('toggleLog')
 
 toggleLogButton.addEventListener('click', toggleLog)
 
-downloadLogButton.style.display = 'none'
+downloadLogButton.style.color = '#666'
-credentialsButton.style.display = 'none'
+credentialsBtn.style.color = '#666'
 
 var terminalContainer = document.getElementById('terminal-container')
 
@@ -29,7 +48,7 @@ var term = new Terminal({
 var socket, termid // eslint-disable-line
 term.open(terminalContainer)
 term.focus()
-// term.applyAddon(fit)
+term.fit()
 
 if (document.location.pathname) {
   var parts = document.location.pathname.split('/')
@@ -44,57 +63,75 @@ if (document.location.pathname) {
 
 socket.on('connect', function () {
   socket.emit('geometry', term.cols, term.rows)
-  term.on('data', function (data) {
+  console.log('geometry cols: ' + term.cols + ' rows: ' + term.rows)
-    socket.emit('data', data)
+})
-  })
+term.on('data', function (data) {
-  socket.on('title', function (data) {
+  socket.emit('data', data)
-    document.title = data
+})
-  }).on('status', function (data) {
+socket.on('title', function (data) {
-    document.getElementById('status').innerHTML = data
+  document.title = data
-  }).on('ssherror', function (data) {
+}).on('status', function (data) {
-    document.getElementById('status').innerHTML = data
+  document.getElementById('status').innerHTML = data
+}).on('ssherror', function (data) {
+  document.getElementById('status').innerHTML = data
+  document.getElementById('status').style.backgroundColor = 'red'
+  errorExists = true
+}).on('headerBackground', function (data) {
+  document.getElementById('header').style.backgroundColor = data
+}).on('header', function (data) {
+  document.getElementById('header').innerHTML = data
+}).on('footer', function (data) {
+  sessionFooter = data
+  document.getElementById('footer').innerHTML = data
+}).on('statusBackground', function (data) {
+  document.getElementById('status').style.backgroundColor = data
+}).on('allowreplay', function (data) {
+  if (data === true) {
+    console.log('allowreplay: ' + data)
+    credentialsBtn.style.color = '#000'
+    credentialsBtn.addEventListener('click', replayCredentials)
+  } else {
+    console.log('allowreplay: ' + data)
+    credentialsBtn.style.color = '#666'
+  }
+}).on('data', function (data) {
+  term.write(data)
+  if (sessionLogEnable) {
+    sessionLog = sessionLog + data
+  }
+}).on('disconnect', function (err) {
+  if (!errorExists) {
     document.getElementById('status').style.backgroundColor = 'red'
-    errorExists = true
+    document.getElementById('status').innerHTML =
-  }).on('headerBackground', function (data) {
+      'WEBSOCKET SERVER DISCONNECTED: ' + err
-    document.getElementById('header').style.backgroundColor = data
+  }
-  }).on('header', function (data) {
+  socket.io.reconnection(false)
-    document.getElementById('header').innerHTML = data
+}).on('error', function (err) {
-  }).on('footer', function (data) {
+  if (!errorExists) {
-    sessionFooter = data
+    document.getElementById('status').style.backgroundColor = 'red'
-    document.getElementById('footer').innerHTML = data
+    document.getElementById('status').innerHTML = 'ERROR: ' + err
-  }).on('statusBackground', function (data) {
+  }
-    document.getElementById('status').style.backgroundColor = data
-  }).on('allowreplay', function (data) {
-    if (data === true) {
-      console.log('allowreplay: ' + data)
-      credentialsButton.style.display = 'inline'
-      credentialsButton.addEventListener('click', replayCredentials)
-    } else {
-      credentialsButton.style.display = 'none'
-    }
-  }).on('data', function (data) {
-    term.write(data)
-    if (sessionLogEnable) {
-      sessionLog = sessionLog + data
-    }
-  }).on('disconnect', function (err) {
-    if (!errorExists) {
-      document.getElementById('status').style.backgroundColor = 'red'
-      document.getElementById('status').innerHTML =
-        'WEBSOCKET SERVER DISCONNECTED: ' + err
-    }
-    socket.io.reconnection(false)
-  }).on('error', function (err) {
-    if (!errorExists) {
-      document.getElementById('status').style.backgroundColor = 'red'
-      document.getElementById('status').innerHTML = 'ERROR: ' + err
-    }
-  })
 })
 
-// replay password to server, requires
+// About Modal Stuff
-// bill test
+var aboutModal = document.getElementById('aboutModal')
+var aboutBtn = document.getElementById('aboutBtn')
+var aboutClose = document.getElementsByClassName('aboutClose')[0]
+aboutBtn.onclick = function () {
+  aboutModal.style.display = 'block'
+}
+aboutClose.onclick = function () {
+  aboutModal.style.display = 'none'
+  term.focus()
+}
+window.onclick = function (event) {
+  if (event.target == aboutModal) {
+    aboutModal.style.display = 'none'
+    term.focus()
+  }
+}
 
+// replay password to server, requires
 function replayCredentials () { // eslint-disable-line
   socket.emit('control', 'replayCredentials')
   console.log('replaying credentials')
@@ -107,8 +144,8 @@ function replayCredentials () { // eslint-disable-line
 function toggleLog () { // eslint-disable-line
   if (sessionLogEnable === true) {
     sessionLogEnable = false
-    toggleLogButton.innerHTML =
+    loggedData = true
-      '<a class="toggleLog" href="javascript:void(0);">Start Log</a>'
+    toggleLogButton.innerHTML = '<i class="fas fa-clipboard"></i> Start Log'
     console.log('stopping log, ' + sessionLogEnable)
     currentDate = new Date()
     sessionLog = sessionLog + '\r\n\r\nLog End for ' + sessionFooter + ': ' +
@@ -120,9 +157,9 @@ function toggleLog () { // eslint-disable-line
     return false
   } else {
     sessionLogEnable = true
-    toggleLogButton.innerHTML =
+    loggedData = true
-      '<a class="toggleLog" href="javascript:void(0)">Logging - STOP LOG</a>'
+    toggleLogButton.innerHTML = '<i class="fas fa-cog fa-spin"></i> Stop Log'
-    downloadLogButton.style.display = 'inline'
+    downloadLogButton.style.color = '#000'
     downloadLogButton.addEventListener('click', downloadLog)
     console.log('starting log, ' + sessionLogEnable)
     currentDate = new Date()
@@ -139,22 +176,24 @@ function toggleLog () { // eslint-disable-line
 // cross browser method to "download" an element to the local system
 // used for our client-side logging feature
 function downloadLog () { // eslint-disable-line
-  myFile = 'WebSSH2-' + logDate.getFullYear() + (logDate.getMonth() + 1) +
+  if (loggedData === true) {
-    logDate.getDate() + '_' + logDate.getHours() + logDate.getMinutes() +
+    myFile = 'WebSSH2-' + logDate.getFullYear() + (logDate.getMonth() + 1) +
-    logDate.getSeconds() + '.log'
+      logDate.getDate() + '_' + logDate.getHours() + logDate.getMinutes() +
-    // regex should eliminate escape sequences from being logged.
+      logDate.getSeconds() + '.log'
-  var blob = new Blob([sessionLog.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '')], {
+      // regex should eliminate escape sequences from being logged.
-    type: 'text/plain'
+    var blob = new Blob([sessionLog.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '')], {
-  })
+      type: 'text/plain'
-  if (window.navigator.msSaveOrOpenBlob) {
+    })
-    window.navigator.msSaveBlob(blob, myFile)
+    if (window.navigator.msSaveOrOpenBlob) {
-  } else {
+      window.navigator.msSaveBlob(blob, myFile)
-    var elem = window.document.createElement('a')
+    } else {
-    elem.href = window.URL.createObjectURL(blob)
+      var elem = window.document.createElement('a')
-    elem.download = myFile
+      elem.href = window.URL.createObjectURL(blob)
-    document.body.appendChild(elem)
+      elem.download = myFile
-    elem.click()
+      document.body.appendChild(elem)
-    document.body.removeChild(elem)
+      elem.click()
+      document.body.removeChild(elem)
+    }
   }
   term.focus()
 }