From a03fb9abdf80a771bd71459cd3751b5cec4b3338 Mon Sep 17 00:00:00 2001
From: Emile <hanemile@protonmail.com>
Date: Wed, 9 Oct 2019 15:45:14 +0200
Subject: loading button spinner bootstrap stuff

---
 hosted/credentials.html | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)
diff --git a/hosted/credentials.html b/hosted/credentials.html
index 1b3f46d..5e5da0f 100644
--- a/hosted/credentials.html
+++ b/hosted/credentials.html
@@ -3,7 +3,8 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <style type="text/css">
             body {
                 background-image: url("/files/background.png");
@@ -47,7 +48,14 @@
 							  </tbody>
 							</table>
 
-                            <a href="http://{{.Username}}.{{.Hostname}}" class="btn btn-primary" role="button">Login</a>
+							<button class="btn btn-primary" type="button" disabled id="before-a">
+							  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" id="before-b"></span>
+                              <span id="before-b-text">
+							  Loading...
+                              </span>
+							</button>
+
+                            <a href="http://{{.Username}}.{{.Hostname}}" class="btn btn-primary" role="button" id="after" style="display: none;">Login</a>
 
                         </div>
                     </div>
@@ -56,5 +64,26 @@
             </div>
         </div>
     </body>
+	<script type="text/javascript">
+		$(document).ready(function() {
+		  setTimeout(function() {
+		    $("#before-b-text").text("starting the container");
+		  }, 2000);
+		  setTimeout(function() {
+		    $("#before-b-text").text("adding the container to the circus network");
+		  }, 4000);
+		  setTimeout(function() {
+		    $("#before-b-text").text("fetching certificates");
+		  }, 6000);
+		  setTimeout(function() {
+		    $("#before-b-text").text("HACK THE PLANET!");
+		  }, 6000);
+		  setTimeout(function() {
+		    $("#before-a").hide();
+		    $("#before-b").hide();
+		    $("#after").show();
+		  }, 10000);
+		});
+	</script>
 </html>
 {{end}}
-- 
cgit 1.4.1

