|
|
@@ -14,34 +14,57 @@
|
|
|
<script src="../script/tablesort.js"></script>
|
|
|
<link rel="stylesheet" href="../main.css">
|
|
|
<style>
|
|
|
+ #loadingUI{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: black;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display:none;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loadingUI div{
|
|
|
+ color: white;
|
|
|
+ font-family: monospace;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <br>
|
|
|
- <div class="ui container">
|
|
|
- <div class="ui form">
|
|
|
- <div class="two fields">
|
|
|
- <div class="field">
|
|
|
- <label>Server Name or IP Address</label>
|
|
|
- <input type="text" name="server" placeholder="e.g. example.com or 192.168.1.1">
|
|
|
- </div>
|
|
|
- <div class="field">
|
|
|
- <label>Port Number</label>
|
|
|
- <input type="number" name="port" placeholder="e.g. 22 or 2022">
|
|
|
- </div>
|
|
|
+ <div id="loadingUI">
|
|
|
+ <div style="margin-top: 2em; margin-left: 2em; color: white;">
|
|
|
+ <i class="ui loading spinner icon"></i> Creating virtual terminal session <br>
|
|
|
+ <div id="counter" style="color: white; margin-left: 1.9em;">Connecting in: </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="connectionSettings">
|
|
|
+ <div class="ui container">
|
|
|
+ <br>
|
|
|
+ <div class="ui form">
|
|
|
+ <div class="two fields">
|
|
|
+ <div class="field">
|
|
|
+ <label>Server Name or IP Address</label>
|
|
|
+ <input type="text" name="server" placeholder="e.g. example.com or 192.168.1.1">
|
|
|
+ </div>
|
|
|
<div class="field">
|
|
|
- <label>Username</label>
|
|
|
- <input type="text" name="username" placeholder="root">
|
|
|
+ <label>Port Number</label>
|
|
|
+ <input type="number" name="port" placeholder="e.g. 22 or 2022">
|
|
|
+ </div>
|
|
|
+ <div class="field">
|
|
|
+ <label>Username</label>
|
|
|
+ <input type="text" name="username" placeholder="root">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+ <div style="float: right;">
|
|
|
+ <button class="ui basic button" onclick="connectSSH()"><i class="ui blue exchange icon"></i> Connect</button>
|
|
|
+ <button class="ui basic button" onclick="window.open('', '_self', ''); window.close();"><i class="ui red remove icon"></i> Close</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <br><br><br>
|
|
|
</div>
|
|
|
-
|
|
|
- <div style="float: right;">
|
|
|
- <button class="ui basic button" onclick="connectSSH()"><i class="ui blue exchange icon"></i> Connect</button>
|
|
|
- <button class="ui basic button" style="margin-right: 1em;" onclick="window.open('', '_self', ''); window.close();"><i class="ui red remove icon"></i> Close</button>
|
|
|
- </div>
|
|
|
- <br><br><br>
|
|
|
<script>
|
|
|
|
|
|
//Start the SSH connection process
|
|
|
@@ -80,6 +103,21 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ function redirectWithCountdown(url) {
|
|
|
+ $("#loadingUI").show();
|
|
|
+ $("#connectionSettings").hide();
|
|
|
+ var count = 3;
|
|
|
+ var interval = setInterval(function() {
|
|
|
+ $("#counter").html("Connecting in: " + count + " seconds");
|
|
|
+ count--;
|
|
|
+ if (count === 0) {
|
|
|
+ clearInterval(interval);
|
|
|
+ window.location.href = url;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
//Try to ask the server side to create a ssh proxy object
|
|
|
function createSSHProxy(remoteAddr, remotePort, username){
|
|
|
//Request to create a ssh session instance
|
|
|
@@ -92,7 +130,7 @@
|
|
|
alert(sessionToken.error);
|
|
|
}else{
|
|
|
//Session created. Redirect to ssh terminal
|
|
|
- window.location.href = "/web.ssh/" + sessionToken + "/";
|
|
|
+ redirectWithCountdown("/web.ssh/" + sessionToken + "/");
|
|
|
}
|
|
|
},
|
|
|
error: function(){
|
Toby Chui