2020-06-09 21:17:15 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "icon" href = "/favicon.ico" >
< title > RDP< / title >
2020-06-10 18:25:46 -04:00
< script type = "text/javascript" src = "mstsc.js" > < / script >
< script type = "text/javascript" src = "keyboard.js" > < / script >
< script type = "text/javascript" src = "rle.js" > < / script >
< script type = "text/javascript" src = "client.js" > < / script >
< script type = "text/javascript" src = "canvas.js" > < / script >
< style >
body {
font-family:sans-serif;
margin: 0;
xoverflow: hidden;
background-color: black;
}
.container {
background-color:cadetblue;
background: linear-gradient(to bottom right, #003366, #0055AA);
}
.middleContainer {
color: lightgray;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.signinform {
width: 330px;
margin: 0 auto;
}
.formLabel { }
.formControl {
width: 210px;
font-size: 17px;
border-radius: 5px;
}
.connectButton {
margin-top: 6px;
width: 100%;
padding: 6px;
font-size: 16px;
border-radius: 5px;
cursor:pointer;
}
.mainCanvas {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
< / style >
2020-06-09 21:17:15 -04:00
< script language = "javascript" >
var client = null;
2020-06-10 18:25:46 -04:00
var canvas = null;
2020-06-09 21:17:15 -04:00
var urlargs = parseUriArgs();
if (urlargs.name) { document.title = urlargs.name + ' - ' + document.title; }
2020-06-10 18:25:46 -04:00
function load() {
if (urlargs.name) { QH('computerName', urlargs.name); }
client = MstscClient.create(Q('myCanvas'));
Q('inputDomain').focus();
canvas = Q('myCanvas');
2020-06-09 21:17:15 -04:00
}
function connect(domain, username, password) {
2020-06-10 18:25:46 -04:00
var domain = Q('inputDomain').value;
var username = Q('inputUsername').value;
var password = Q('inputPassword').value;
QV('myCanvas', true);
QV('main', false);
2020-06-09 21:17:15 -04:00
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
2020-06-10 18:25:46 -04:00
console.log('CanvasSize', canvas.width, canvas.height);
client.connect(urlargs.ws, domain, username, password, function (err) { QV('myCanvas', false); QV('main', true); });
return false;
2020-06-09 21:17:15 -04:00
}
2020-06-10 18:25:46 -04:00
function Q(x) { return document.getElementById(x); } // "Q"
function QS(x) { try { return Q(x).style; } catch (x) { } } // "Q" style
function QE(x, y) { try { Q(x).disabled = !y; } catch (x) { } } // "Q" enable
function QV(x, y) { try { QS(x).display = (y ? '' : 'none'); } catch (x) { } } // "Q" visible
function QA(x, y) { Q(x).innerHTML += y; } // "Q" append
function QH(x, y) { Q(x).innerHTML = y; } // "Q" html
function QC(x) { try { return Q(x).classList; } catch (x) { } } // "Q" class
2020-06-09 21:17:15 -04:00
function parseUriArgs() { var href = window.document.location.href; if (href.endsWith('#')) { href = href.substring(0, href.length - 1); } var name, r = {}, parsedUri = href.split(/[\?&|\=]/); parsedUri.splice(0, 1); for (x in parsedUri) { switch (x % 2) { case 0: { name = decodeURIComponent(parsedUri[x]); break; } case 1: { r[name] = decodeURIComponent(parsedUri[x]); var x = parseInt(r[name]); if (x == r[name]) { r[name] = x; } break; } default: { break; } } } return r; }
2020-06-10 18:25:46 -04:00
function EscapeHtml(x) { if (typeof x == 'string') return x.replace(/& /g, '& ').replace(/>/g, '> ').replace(/< /g, '< ').replace(/"/g, '" ').replace(/'/g, '' '); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
function EscapeHtmlBreaks(x) { if (typeof x == 'string') return x.replace(/& /g, '& ').replace(/>/g, '> ').replace(/< /g, '< ').replace(/"/g, '" ').replace(/'/g, '' ').replace(/\r/g, '< br / > ').replace(/\n/g, '').replace(/\t/g, ' '); if (typeof x == 'boolean') return x; if (typeof x == 'number') return x; }
2020-06-09 21:17:15 -04:00
< / script >
< / head >
2020-06-10 18:25:46 -04:00
< body onload = 'load()' style = "position:absolute;top:0px;right:0;left:0;bottom:0px" >
< div id = "main" class = "container" style = "position:absolute;top:0px;right:0;left:0;bottom:0px" >
< div class = "middleContainer" >
< div id = "computerName" style = "width:100%;text-align:center;font-size:24px" > < / div >
< table class = "signinform" >
< tr >
< td colspan = "2" > < hr style = "color:gray;border:1px solid;" / > < / td >
< / tr >
< tr >
< td > < label for = "inputDomain" class = "formLabel" > Domain< / label > < / td >
< td style = "text-align:right" > < input type = "text" id = "inputDomain" class = "formControl" placeholder = "Domain" > < / td >
< / tr >
< tr >
< td > < label for = "inputUsername" class = "formLabel" > Username< / label > < / td >
< td style = "text-align:right" > < input type = "text" id = "inputUsername" class = "formControl" placeholder = "Username" > < / td >
< / tr >
< tr >
< td > < label for = "inputPassword" class = "formLabel" > Password< / label > < / td >
< td style = "text-align:right" > < input type = "password" id = "inputPassword" class = "formControl" placeholder = "Password" > < / td >
< / tr >
< tr >
< td colspan = "2" > < button class = "connectButton" onclick = "return connect()" > Connect< / button > < / td >
< / tr >
< / table >
< / div >
< / div >
< canvas id = "myCanvas" class = "mainCanvas" style = "display:none" / >
2020-06-09 21:17:15 -04:00
< / body >
< / html >
