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

26
public/client.htm
View file

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

108
public/client.js
View file

@ -1,37 +1,71 @@
var client = {};
client.run = function(options) {
options = options || {};
window.addEventListener('load', function() {
var socket = io.connect();
socket.on('connect', function() {
var term = new Terminal();
term.on('data', function(data) {
socket.emit('data', data);
});
socket.on('title', function(data) {
document.title = data;
}).on('status', function(data) {
document.getElementById('status').innerHTML = data;
}).on('headerBackground', function(data) {
document.getElementById('header').style.backgroundColor = data;
}).on('header', function(data) {
document.getElementById('header').innerHTML = data;
}).on('footer', function(data) {
document.getElementById('footer').innerHTML = data;
}).on('statusBackground', function(data) {
document.getElementById('status').style.backgroundColor = data;
});
term.open(document.getElementById("terminal"));
socket.on('data', function(data) {
term.write(data);
}).on('disconnect', function() {
document.getElementById('status').style.backgroundColor = 'red';
document.getElementById('status').innerHTML = 'WEBSOCKET SERVER DISCONNECTED';
socket.io.reconnection(false);
}).on('error', function(err) {
document.getElementById('status').style.backgroundColor = 'red';
document.getElementById('status').innerHTML = 'ERROR ' + err;
});
});
}, false);
}
var terminalContainer = document.getElementById('terminal-container'),
term = new Terminal({
cursorBlink: true
}),
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() {
term.on('data', function(data) {
socket.emit('data', data);
});
socket.on('title', function(data) {
document.title = data;
}).on('status', function(data) {
document.getElementById('status').innerHTML = data;
}).on('headerBackground', function(data) {
document.getElementById('header').style.backgroundColor = data;
}).on('header', function(data) {
document.getElementById('header').innerHTML = data;
}).on('footer', function(data) {
document.getElementById('footer').innerHTML = data;
}).on('statusBackground', function(data) {
document.getElementById('status').style.backgroundColor = data;
}).on('allowreplay', function(data) {
console.log ('allowreplay: ' + 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);
}).on('disconnect', function() {
document.getElementById('status').style.backgroundColor = 'red';
document.getElementById('status').innerHTML = 'WEBSOCKET SERVER DISCONNECTED';
socket.io.reconnection(false);
}).on('error', function(err) {
document.getElementById('status').style.backgroundColor = 'red';
document.getElementById('status').innerHTML = 'ERROR ' + err;
});
});

38
public/style.css
View file

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