Fabio/webssh2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Converting over to xterm.js

Browse source
This commit is contained in:
billchurch 2017-02-01 16:20:48 -05:00
parent 34af6b548d
commit 3e3a8be5c9
4 changed files with 116 additions and 2192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/client.htm
View file

@ -1,22 +1,22 @@
<html> <html>
<head> <head>
<title>Web SSH</title> <title>Web SSH</title>
<link rel="stylesheet" href="/xterm.css" /> <link rel="stylesheet" href="/src/xterm.css" />
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style/style.css" />
<script src="/term.js"></script>
<script src="/client.js"></script>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/src/xterm.js"></script>
<script src="/addons/fit/fit.js"></script>
<script src="/client.js" defer></script>
</head> </head>
<body> <body>
<div class="box">
<div id="header"></div> <div id="header"></div>
<div id="terminal" class="terminal"> <div id="terminal-container" class="terminal"></div>
<script>
client.run();
</script>
</div>
<div id="bottomdiv"> <div id="bottomdiv">
<div id="footer"></div> <div id="footer"></div>
<div id="status"></div> <div id="status"></div>
<div id="credentials"><a class="credentials" href="" onclick="return false;">CREDENTIALS</a></div>
</div>
</div> </div>
</body> </body>
</html> </html>

56
public/client.js
View file

@ -1,10 +1,39 @@
var client = {}; var terminalContainer = document.getElementById('terminal-container'),
client.run = function(options) { term = new Terminal({
options = options || {}; cursorBlink: true
window.addEventListener('load', function() { }),
var socket = io.connect(); socket,
termid;
term.open(terminalContainer);
term.fit();
var cols = term.cols,
rows = term.rows;
if (document.location.pathname) {
var parts = document.location.pathname.split('/'),
base = parts.slice(0, parts.length - 1).join('/') + '/',
resource = base.substring(1) + 'socket.io';
socket = io.connect(null, {
resource: resource
});
} else {
socket = io.connect();
}
var credentialReplay = document.getElementById('credentials')
credentialReplay.onclick = replayCredentials;
function replayCredentials() {
socket.emit('control', 'replayCredentials');
//term.writeln('sending credentials');
return true;
}
socket.emit('create', term.cols, term.rows, function(err, data) {
if (err) return self._destroy();
self.pty = data.pty;
self.id = data.id;
termid = self.id;
term.emit('open tab', self);
});
socket.on('connect', function() { socket.on('connect', function() {
var term = new Terminal();
term.on('data', function(data) { term.on('data', function(data) {
socket.emit('data', data); socket.emit('data', data);
}); });
@ -20,9 +49,16 @@ client.run = function(options) {
document.getElementById('footer').innerHTML = data; document.getElementById('footer').innerHTML = data;
}).on('statusBackground', function(data) { }).on('statusBackground', function(data) {
document.getElementById('status').style.backgroundColor = data; document.getElementById('status').style.backgroundColor = data;
}); }).on('allowreplay', function(data) {
term.open(document.getElementById("terminal")); console.log ('allowreplay: ' + data);
socket.on('data', function(data) { if (data == 'true') {
document.getElementById('credentials').style.display = 'inline';
console.log ('display: block');
} else {
document.getElementById('credentials').style.display = 'none';
console.log ('display: none');
}
}).on('data', function(data) {
term.write(data); term.write(data);
}).on('disconnect', function() { }).on('disconnect', function() {
document.getElementById('status').style.backgroundColor = 'red'; document.getElementById('status').style.backgroundColor = 'red';
@ -33,5 +69,3 @@ client.run = function(options) {
document.getElementById('status').innerHTML = 'ERROR ' + err; document.getElementById('status').innerHTML = 'ERROR ' + err;
}); });
}); });
}, false);
}

38
public/style.css
View file

@ -4,6 +4,8 @@ body {
color: #111; color: #111;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
color: rgb(240, 240, 240); color: rgb(240, 240, 240);
height: 100%;
margin: 0;
} }
#header { #header {
@ -14,23 +16,30 @@ body {
border-style: none none solid none; border-style: none none solid none;
border-width: 1px; border-width: 1px;
text-align: center; text-align: center;
flex: 0 1 auto;
z-index: 99; z-index: 99;
} }
#terminal { .box {
width: 960px; display: flex;
height: 600px; flex-flow: column;
height: 100%;
}
#terminal-container {
flex: 1 1 auto;
width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2px; padding: 2px;
} }
#terminal .terminal { #terminal-container .terminal {
background-color: #111; background-color: #000000;
color: #fafafa; color: #fafafa;
padding: 2px; padding: 2px;
} }
#terminal .terminal .terminal-cursor { #terminal-container .terminal:focus .terminal-cursor {
background-color: #fafafa; background-color: #fafafa;
} }
@ -41,6 +50,7 @@ body {
border-style: solid none none none; border-style: solid none none none;
border-width: 1px; border-width: 1px;
z-index: 99; z-index: 99;
flex: 0 1 30px;
} }
#footer { #footer {
@ -64,3 +74,19 @@ body {
text-align: left; text-align: left;
z-index: 100; z-index: 100;
} }
#credentials {
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);
text-decoration: none;
}

2136
public/xterm.css
View file

File diff suppressed because it is too large Load diff