151 lines
4.8 KiB
HTML
151 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>远程桌面</title>
|
|
<link rel="stylesheet" href="./bootstrap.min.css">
|
|
<link rel="stylesheet" href="./clipboard.css">
|
|
<link rel="stylesheet" href="./login.css">
|
|
<link rel="prefetch" href="./webrdp_bg.wasm">
|
|
<style type="text/css">
|
|
.horizontal-centre {
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
.vertical-centre {
|
|
position: relative;
|
|
vertical-align: middle;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script src="./jquery-3.6.1.min.js" type="text/javascript"></script>
|
|
<script type="module" defer>
|
|
import initWASM from "/webrdp.js";
|
|
async function wasm() {
|
|
await initWASM();
|
|
}
|
|
window.wasm = wasm;
|
|
</script>
|
|
<script type="text/javascript">
|
|
function jsExportedCredentials(key) {
|
|
console.log("requested key", key)
|
|
if (jsExportedCredentials[key]) {
|
|
const ret = jsExportedCredentials[key];
|
|
delete jsExportedCredentials[key];
|
|
return ret;
|
|
}
|
|
return "";
|
|
}
|
|
|
|
function connect(user, password, event) {
|
|
jsExportedCredentials.user = user;
|
|
jsExportedCredentials.password = password;
|
|
window.wasm().then(() => {
|
|
$('#login_container').hide();
|
|
$('#rdp_container').show();
|
|
}).catch((err) => {
|
|
alert(err);
|
|
});
|
|
if (event) {
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="$('#rdp_container').hide();">
|
|
<div id="login_container">
|
|
<form class="form-signin"
|
|
onsubmit="connect(this.elements['inputUser'].value, this.elements['inputPassword'].value, event);">
|
|
<img class="logo" src="./logo.svg">
|
|
<input type="text" id="inputUser" class="form-control" placeholder="用户名">
|
|
<input type="password" id="inputPassword" class="form-control" placeholder="密码">
|
|
<button class="btn btn-lg btn-primary btn-block" type="submit"
|
|
style="background-color: #34A6FF; border-color: #34A6FF">连接</button>
|
|
<p></p>
|
|
<!-- Begin Customize -->
|
|
|
|
<!-- End Customization -->
|
|
<p></p>
|
|
</form>
|
|
</div>
|
|
<div id="rdp_container" style="height: 100%; margin: 0;">
|
|
<div id="canvas" class="horizontal-centre vertical-centre">
|
|
<canvas id="rdp-canvas" tabIndex=1></canvas>
|
|
</div>
|
|
<div class="clipboardback">
|
|
<div class="clipboard">
|
|
<button id="clipboardbtn">«</button>
|
|
<div id="clipboardbox" class="horizontal-centre vertical-centre">
|
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
|
<div><textarea id="clipboardtxt" placeholder="页面剪贴板内容" rows="15"></textarea></div>
|
|
<div><button id="clipboardsend">发送页面剪贴板内容</button></div>
|
|
<div><button type="button" id="ctrlaltdel">发送 Ctrl+Alt+Del</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
function wrongCredential() {
|
|
disconnectedAndRefresh("用户名或密码错误！")
|
|
}
|
|
|
|
function disconnectedAndRefresh(msg) {
|
|
alert(msg ?? "抱歉，与服务器连接断开。");
|
|
window.location.reload();
|
|
}
|
|
</script>
|
|
|
|
<script type="text/javascript" defer>
|
|
|
|
$("#clipboardbtn").attr("open1", 0);
|
|
$("#clipboardbtn").click(
|
|
function (e) {
|
|
e.stopPropagation();
|
|
if (($("#clipboardbtn")).attr("open1") == 0) {
|
|
open();
|
|
} else {
|
|
close();
|
|
}
|
|
}
|
|
);
|
|
$(".clipboardback").click(function () {
|
|
close();
|
|
})
|
|
$(".clipboard").click(function () {
|
|
event.stopPropagation();
|
|
})
|
|
function open() {
|
|
$("#clipboardbtn").attr("open1", 1);
|
|
$("#clipboardbtn").html(">")
|
|
$(".clipboard").toggleClass("clipboard-open");
|
|
$(".clipboardback").toggleClass("clipboardback-open");
|
|
$(".clipboardback").css("pointer-events", "auto");
|
|
}
|
|
|
|
function close() {
|
|
$("#clipboardbtn").attr("open1", 0);
|
|
$("#clipboardbtn").html("clipboard")
|
|
$(".clipboard").toggleClass("clipboard-open");
|
|
$(".clipboardback").toggleClass("clipboardback-open");
|
|
$(".clipboardback").css("pointer-events", "none");
|
|
}
|
|
|
|
function setClipBoard(s) {
|
|
$("#clipboardtxt").val(s);
|
|
}
|
|
|
|
function getClipBoard() {
|
|
return $("#clipboardtxt").val();
|
|
}
|
|
</script>
|