magnification, resize logic

- minification is now default, utilize ‘webpack*.js’ scripts to change
behavior and run ‘npm run rebuild’
- sizing and resize takes into account optional headers (#header) and
footer (#footer)
This commit is contained in:
billchurch 2018-02-10 10:11:28 -05:00
parent 29040d328a
commit ff875f92db
16 changed files with 63 additions and 8958 deletions

View file

@ -18,6 +18,7 @@ Mostly client (browser) related changes in this release
- Moved javascript events out of html into javascript
- Changed asset packaging from grunt to Webpack to be inline with xterm.js direction
- Moved logging and credentials buttons to menu system
- Removed non-minified options (if you need to disable minification, modify webpack scripts and 'npm run build')
### Fixed
- Resolved loss of terminal foucs when interacting with option buttons (Logging, etc...)

View file

@ -86,8 +86,6 @@ docker run --name webssh2 -d -p 2222:2222 webssh2
* **terminal.tabStopWidth** - _integer_ - Tab stops at _n_ characters **Default:** 8.
* **useminified** - _boolean_ - Choose between ./public/client-full.htm (false/non-minified) or ./public/client-min.htm (true/minified js), defaults to false (non-minified version)
* **header.text** - _string_ - Specify header text, defaults to `My Header` but may also be set to `null`. When set to `null` no header bar will be displayed on the client.
* **header.background** - _string_ - Header background, defaults to `green`.
@ -201,6 +199,4 @@ Clicking `Start logging` on the status bar will log all data to the client. A `D
http://localhost:2222/ssh/host/192.168.1.1?port=2244&header=My%20Header&color=red
# Tips
* If you want to add custom JavaScript to the browser client you can either modify `./src/client-(full|min).html` and add a **<script>** element, modify `./src/index.js` directly, or check out `webpack.*.js` and add your custom javascript file to a task there.
* BIG-IP Acess Policy Manager (APM) doesn't always care for minified javascript when run in portal mode. Be sure to Set `useminified` option in `config.json` to `false` for these environments
* Set `useminified` option in `config.json` to `true` to utilize minified javascript
* If you want to add custom JavaScript to the browser client you can either modify `./src/client.html` and add a **<script>** element, modify `./src/index.js` directly, or check out `webpack.*.js` and add your custom javascript file to a task there (best option).

5
app.js
View file

@ -31,8 +31,7 @@ app.disable('x-powered-by')
app.use(express.static(path.join(__dirname, 'public'), expressOptions))
app.get('/ssh/host/:host?', function (req, res, next) {
res.sendFile(path.join(path.join(__dirname, 'public', (config.useminified)
? 'client-min.htm' : 'client-full.htm')))
res.sendFile(path.join(path.join(__dirname, 'public', 'client.htm')))
// capture, assign, and validated variables
req.session.ssh = {
host: (validator.isIP(req.params.host + '') && req.params.host) ||
@ -56,7 +55,7 @@ app.get('/ssh/host/:host?', function (req, res, next) {
tabStopWidth: config.terminal.tabStopWidth
},
allowreplay: (validator.isBoolean(req.headers.allowreplay + '') ? myutil.parseBool(req.headers.allowreplay) : false),
MRH_Session: (validator.isAlphanumeric(req.headers.lastMRH_Session + '') ? req.headers.lastMRH_Session : 'none'),
mrhsession: ((validator.isAlphanumeric(req.headers.mrhsession + '') && req.headers.mrhsession) ? req.headers.mrhsession : 'none'),
serverlog: {
client: config.serverlog.client || false,
server: config.serverlog.server || false

View file

@ -20,7 +20,6 @@
"scrollback": 10000,
"tabStopWidth": 8
},
"useminified": false,
"header": {
"text": null,
"background": "green"

View file

@ -57,6 +57,7 @@
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"nodemon": "^1.11.0",
"postcss-discard-comments": "^2.0.4",
"snazzy": "^7.0.0",
"snyk": "^1.39.1",
"standard": "^10.0.3",

View file

@ -1,8 +1,10 @@
<html>
<head>
<title>Web SSH full</title>
<title>WebSSH2</title>
<style>
body {background-color: #000;height: 100%;margin: 0;}.dropup-content {display: none;}
</style>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script>
</head>
<body>
<div class="box">
@ -21,6 +23,7 @@
<div id="status"></div>
</div>
</div>
<script src="/webssh2.bundle.js" defer></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View file

@ -1,240 +1 @@
/**
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
* https://github.com/chjj/term.js
* @license MIT
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
* Originally forked from (with the author's permission):
* Fabrice Bellard's javascript vt100 for jslinux:
* http://bellard.org/jslinux/
* Copyright (c) 2011 Fabrice Bellard
* The original design remains. The terminal itself
* has been extended to include xterm CSI codes, among
* other features.
*/
/**
* Default styles for xterm.js
*/
.xterm {
font-family: courier-new, courier, monospace;
font-feature-settings: "liga" 0;
position: relative;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.xterm.focus,
.xterm:focus {
outline: none;
}
.xterm .xterm-helpers {
position: absolute;
top: 0;
/**
* The z-index of the helpers must be higher than the canvases in order for
* IMEs to appear on top.
*/
z-index: 10;
}
.xterm .xterm-helper-textarea {
/*
* HACK: to fix IE's blinking cursor
* Move textarea out of the screen to the far left, so that the cursor is not visible.
*/
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
z-index: -10;
/** Prevent wrapping so the IME appears against the textarea at the correct position */
white-space: nowrap;
overflow: hidden;
resize: none;
}
.xterm .composition-view {
/* TODO: Composition position got messed up somewhere */
background: #000;
color: #FFF;
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
}
.xterm .composition-view.active {
display: block;
}
.xterm .xterm-viewport {
/* On OS X this is required in order for the scroll bar to appear fully opaque */
background-color: #000;
overflow-y: scroll;
}
.xterm canvas {
position: absolute;
left: 0;
top: 0;
}
.xterm .xterm-scroll-area {
visibility: hidden;
}
.xterm .xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
left: -9999em;
}
.xterm.enable-mouse-events {
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
cursor: default;
}
.xterm:not(.enable-mouse-events) {
cursor: text;
}
body {
font-family: helvetica, sans-serif, arial;
font-size: 1em;
color: #111;
background-color: rgb(0, 0, 0);
color: rgb(240, 240, 240);
height: 100%;
margin: 0;
}
#header {
color: rgb(240, 240, 240);
background-color: rgb(0, 128, 0);
width: 100%;
border-color: white;
border-style: none none solid none;
border-width: 1px;
text-align: center;
flex: 0 1 auto;
z-index: 99;
}
.box {
display: block;
height: 100%;
}
#terminal-container {
display: block;
width: 100%;
margin: 0 auto;
padding: 2px;
height: calc(100% - 19px);
}
#terminal-container .terminal {
background-color: #000000;
color: #fafafa;
padding: 2px;
height: calc(100% - 19px);
}
#terminal-container .terminal:focus .terminal-cursor {
background-color: #fafafa;
}
#bottomdiv {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(50, 50, 50);
border-color: white;
border-style: solid none none none;
border-width: 1px;
z-index: 99;
height: 19px;
}
#footer {
display: inline-block;
color: rgb(240, 240, 240);
background-color: rgb(50, 50, 50);
padding-left: 5px;
padding-right: 5px;
border-color: white;
border-style: none none none solid;
border-width: 1px;
text-align: left;
}
#status {
display: inline-block;
color: rgb(240, 240, 240);
background-color: rgb(50, 50, 50);
padding-left: 10px;
padding-right: 10px;
border-color: white;
border-style: none solid none solid;
border-width: 1px;
text-align: left;
z-index: 100;
}
#menu {
display: inline-block;
font-size: 16px;
color: rgb(255, 255, 255);
padding-left: 10px;
z-index: 100;
}
#menu:hover .dropup-content {
display: block;
}
.dropup {
position: relative;
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
font-size: 16px;
min-width: 160px;
bottom: 18px;
z-index: 101;
}
.dropup-content a {
color: #777;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {
background-color: #ccc
}
.dropup:hover .dropup-content {
display: block;
}
.dropup:click .dropup-content {
display: block;
}
.dropup:hover .dropbtn {
background-color: #3e8e41;
}
.xterm{font-family:courier-new,courier,monospace;font-feature-settings:"liga" 0;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:10}.xterm .xterm-helper-textarea{position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-10;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll}.xterm canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm .xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;left:-9999em}.xterm.enable-mouse-events{cursor:default}.xterm:not(.enable-mouse-events){cursor:text}body{font-family:helvetica,sans-serif;font-size:1em;color:#111;background-color:#000;color:#f0f0f0;height:100%;margin:0}#header{color:#f0f0f0;background-color:green;width:100%;border-color:#fff;border-style:none none solid;border-width:1px;text-align:center;flex:0 1 auto;z-index:99;height:19px;display:none}.box{display:block;height:100%}#terminal-container{display:block;width:calc(1 - 1 px);margin:0 auto;padding:2px;height:calc(100% - 19px)}#terminal-container .terminal{background-color:#000;color:#fafafa;padding:2px;height:calc(100% - 19px)}#terminal-container .terminal:focus .terminal-cursor{background-color:#fafafa}#bottomdiv{position:fixed;left:0;bottom:0;width:100%;background-color:#323232;border-color:#fff;border-style:solid none none;border-width:1px;z-index:99;height:19px}#footer{padding-left:5px;padding-right:5px;border-style:none none none solid}#footer,#status{display:inline-block;color:#f0f0f0;background-color:#323232;border-color:#fff;border-width:1px;text-align:left}#status{padding-right:10px;border-style:none solid}#menu,#status{padding-left:10px;z-index:100}#menu{display:inline-block;font-size:16px;color:#fff}#menu:hover .dropup-content{display:block}.dropup{position:relative;display:inline-block}.dropup-content{display:none;position:absolute;background-color:#f1f1f1;font-size:16px;min-width:160px;bottom:18px;z-index:101}.dropup-content a{color:#777;padding:12px 16px;text-decoration:none;display:block}.dropup-content a:hover{background-color:#ccc}.dropup:click .dropup-content,.dropup:hover .dropup-content{display:block}.dropup:hover .dropbtn{background-color:#3e8e41}

View file

@ -29,10 +29,9 @@ 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 + ' MRH_Session=' + socket.request.session.ssh.MRH_Session + ' allowreplay=' + socket.request.session.ssh.allowreplay + ' term=' + socket.request.session.ssh.term)
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('title', 'ssh://' + socket.request.session.ssh.host)
console.log('terminal: ' + JSON.stringify(socket.request.session.ssh.terminal))
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)
socket.emit('footer', 'ssh://' + socket.request.session.username + '@' + socket.request.session.ssh.host + ':' + socket.request.session.ssh.port)

View file

@ -1,27 +0,0 @@
<html>
<head>
<title>Web SSH full</title>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script>
</head>
<body>
<div class="box">
<div id="header"></div>
<div id="terminal-container" class="terminal"></div>
<div id="bottomdiv">
<div class="dropup" id="menu">
<i class="fas fa-bars fa-fw"></i> Menu
<div class="dropup-content">
<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>
</div>
</div>
</body>
</html>

View file

@ -1,27 +0,0 @@
<html>
<head>
<title>Web SSH min</title>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script>
</head>
<body>
<div class="box">
<div id="header"></div>
<div id="terminal-container" class="terminal"></div>
<div id="bottomdiv">
<div class="dropup" id="menu">
<i class="fas fa-bars fa-fw"></i> Menu
<div class="dropup-content">
<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>
</div>
</div>
</body>
</html>

View file

@ -1,8 +1,10 @@
<html>
<head>
<title>Web SSH min</title>
<title>WebSSH2</title>
<style>
body {background-color: #000;height: 100%;margin: 0;}.dropup-content {display: none;}
</style>
<link rel="stylesheet" href="/webssh2.css" />
<script src="/webssh2.bundle.js" defer></script>
</head>
<body>
<div class="box">
@ -21,6 +23,7 @@
<div id="status"></div>
</div>
</div>
<script src="/webssh2.bundle.js" defer></script>
</body>
</html>

View file

@ -1,11 +1,11 @@
body {
font-family: helvetica, sans-serif, arial;
font-size: 1em;
color: #111;
background-color: rgb(0, 0, 0);
color: rgb(240, 240, 240);
height: 100%;
margin: 0;
font-family: helvetica, sans-serif, arial;
font-size: 1em;
color: #111;
background-color: rgb(0, 0, 0);
color: rgb(240, 240, 240);
height: 100%;
margin: 0;
}
#header {
color: rgb(240, 240, 240);
@ -17,6 +17,8 @@ body {
text-align: center;
flex: 0 1 auto;
z-index: 99;
height:19px;
display: none;
}
.box {
display: block;
@ -24,7 +26,7 @@ body {
}
#terminal-container {
display: block;
width: 100%;
width: calc(100% - 1 px);
margin: 0 auto;
padding: 2px;
height: calc(100% - 19px);
@ -88,13 +90,13 @@ body {
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
font-size: 16px;
min-width: 160px;
bottom: 18px;
z-index: 101;
display: none;
position: absolute;
background-color: #f1f1f1;
font-size: 16px;
min-width: 160px;
bottom: 18px;
z-index: 101;
}
.dropup-content a {
color: #777;

View file

@ -63,10 +63,8 @@ if (document.location.pathname) {
socket.on('connect', function () {
socket.emit('geometry', term.cols, term.rows)
console.log('geometry cols: ' + term.cols + ' rows: ' + term.rows)
})
socket.on('setTerminalOpts', function (data) {
console.log('terminalOpts: ' + JSON.stringify(data))
term.setOption('cursorBlink', data.cursorBlink)
term.setOption('scrollback', data.scrollback)
term.setOption('tabStopWidth', data.tabStopWidth)
@ -85,7 +83,13 @@ socket.on('title', function (data) {
}).on('headerBackground', function (data) {
document.getElementById('header').style.backgroundColor = data
}).on('header', function (data) {
document.getElementById('header').innerHTML = data
if (data) {
document.getElementById('header').innerHTML = data
document.getElementById('header').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)'
resizeScreen()
}
}).on('footer', function (data) {
sessionFooter = data
document.getElementById('footer').innerHTML = data

View file

@ -10,8 +10,7 @@ module.exports = {
plugins: [
new CleanWebpackPlugin(['./public']),
new CopyWebpackPlugin([
'./src/client-full.htm',
'./src/client-min.htm',
'./src/client.htm',
'./src/favicon.ico'
]),
new ExtractTextPlugin('[name].css')
@ -26,7 +25,14 @@ module.exports = {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
use: [
{
loader: 'css-loader',
options: {
minimize: {discardComments: {removeAll: true}}
}
}
]
})
}
]

View file

@ -1,7 +1,17 @@
const merge = require('webpack-merge')
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const common = require('./webpack.common.js')
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false
}
}
})
]
})