From 137bf18c4eb0c41979500534373376d742165dbd Mon Sep 17 00:00:00 2001
From: John Shaver <john@jshaver.net>
Date: Thu, 13 Sep 2018 16:44:38 -0700
Subject: [PATCH] All but the final page

---
 lib/extensions/admin/login/css/animations.css |  18 +++
 lib/extensions/admin/login/css/main.css       | 110 +++++++++++++++++-
 lib/extensions/admin/login/index.html         | 101 +++++++++++-----
 lib/extensions/admin/login/js/app.js          |  20 +++-
 4 files changed, 213 insertions(+), 36 deletions(-)
 create mode 100644 lib/extensions/admin/login/css/animations.css

diff --git a/lib/extensions/admin/login/css/animations.css b/lib/extensions/admin/login/css/animations.css
new file mode 100644
index 0000000..ec3b1ac
--- /dev/null
+++ b/lib/extensions/admin/login/css/animations.css
@@ -0,0 +1,18 @@
+
+.spinner .spinner-ball {
+  animation: pulsing 2s ease infinite;
+}
+
+.spinner .spinner-ball:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.spinner .spinner-ball:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes pulsing {
+  0% {transform: scale(1);}
+  35% {transform: scale(1);}
+  60% {transform: scale(1.3);}
+  75% {transform: scale(1.3);}
+  100% {transform: scale(1);}
+}
diff --git a/lib/extensions/admin/login/css/main.css b/lib/extensions/admin/login/css/main.css
index cf705ec..09dad1b 100644
--- a/lib/extensions/admin/login/css/main.css
+++ b/lib/extensions/admin/login/css/main.css
@@ -12,9 +12,12 @@ body {
     font-family: Source Sans Pro, sans-serif;
     font-size: 18px;
     color: #1a1a1a;
+    letter-spacing: -0.022222222em;
+    line-height: 1.33;
+    margin: 0;
 }
 
-svg.icon-computer {width: 4em;fill: #1a1a1a;}
+svg.icon-computer {width: 4em;height: 4em;}
 
 .container {
     text-align: center;
@@ -53,8 +56,6 @@ svg.icon-computer {width: 4em;fill: #1a1a1a;}
     background: #DDDDDD;
 }
 .checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box {
-    width: 1.333333333em;
-    fill: #1a1a1a;
     margin-right: 0.666666667em;
 }
 
@@ -91,8 +92,111 @@ button:disabled {
 
 h1.logo {
     font-size: 1.555555556em;
+    margin-bottom: 1.777777778em;
 }
 
 h2 {
     font-size: 1.777777778em;
+    margin: 0;
+}
+
+svg {
+    width: 1.333333333em;
+    height: 1.333333333em;
+    fill: #1a1a1a;
+}
+
+svg.authorized-check {
+    fill: #63f794;
+    margin-right: 0.666666667em;
+}
+
+.progress .row {
+    display:  flex;
+    justify-content: left;
+    margin: 0.6666em 0;
+}
+
+.spinner-ball {
+    width: 4px;
+    height: 4px;
+    border-radius: 5px;
+    background: #1a1a1a;
+    margin: 2px;
+}
+
+span.spinner {
+    display: flex;
+    align-items: center;
+    margin-right: 0.666666667em;
+}
+
+.important-text {
+    font-weight: bold;
+}
+
+.progress {
+    padding: 0.666666667em 0;
+    display: inline-block;
+}
+
+.debugging-info-container {
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: white;
+    /* overflow: hidden; */
+}
+
+.debugging-info-container pre {
+    word-break: break-all;
+    white-space: pre-wrap;
+}
+
+.debugging-info {
+    max-width: 65em;
+    margin: 0 auto;
+}
+
+span.debugging.button {
+    display: inline-flex;
+}
+
+span.js-debugging-button.debugging-button {
+    display: inline-flex;
+}
+
+.debugging-button {
+    display: inline-flex;
+    padding: 0.5em;
+    position: absolute;
+    bottom: 100%;
+    transform: translateX(-50%);
+}
+
+.debugging-info-container.visible .debugging-button svg {
+    transform: rotate(180deg);
+}
+
+.debugging-button svg {transition: transform 0.3s;}
+
+.debug-drawer {
+    /* position: relative; */
+    transform: translateY(100%);
+    transition: transform 0.3s;
+    padding: 0.1em 0;
+}
+
+p {
+    margin: 0;
+}
+
+.debugging-info-container.visible .debug-drawer {
+    transform: translateY(0);
+}
+
+.debugging-info-container {
+    padding-top: 3em;
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/lib/extensions/admin/login/index.html b/lib/extensions/admin/login/index.html
index 1b1485a..22a3af7 100644
--- a/lib/extensions/admin/login/index.html
+++ b/lib/extensions/admin/login/index.html
@@ -3,6 +3,7 @@
 <head>
   <title>Telebit - Pair Device</title>
   <link href="./css/main.css" rel="stylesheet">
+  <link href="./css/animations.css" rel="stylesheet">
   <style>
     @font-face {
       font-family: 'Source Sans Pro';
@@ -32,8 +33,8 @@
 </head>
 <body>
   <script>document.body.hidden = true;</script>
-  <!-- let's define our SVG that we will reuse -->
-  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24">
+  <!-- let's define our SVG that we will use later -->
+  <svg width="0" height="0" viewBox="0 0 24 24">
     <defs>
       <g id="svg-check">
         <path fill="none" d="M0 0h24v24H0z"/>
@@ -55,6 +56,14 @@
         <path d="M0 0h24v24H0z" fill="none"/>
         <path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
       </g>
+      <g id="svg-circle-check">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+      </g>
+      <g id="svg-arrow-down">
+        <path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/>
+        <path fill="none" d="M0,0h24v24H0V0z"/>
+      </g>
     </defs>
   </svg>
 
@@ -66,30 +75,30 @@
   </div>
   <div class="container js-magic" hidden><form class="js-submit">
     <h1 class="logo">Telebit</h1>
-    <svg class="icon-computer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <svg class="icon-computer" viewBox="0 0 24 24">
       <use xlink:href="#svg-computer"></use>
     </svg>
     <h2>Pair <span class="js-hostname">Device</span></h1>
     <label>Enter your device pairing code:
-      <input type="text" name="pair-code" placeholder="ex: 0000">
+      <input type="text" name="pair-code" placeholder="ex: 0000" autofocus>
     </label>
     <div class="checkbox-array">
       <label>
         <input name="telebit-agree" type="checkbox" required>
-        <svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <svg class="icon-checked-box" viewBox="0 0 24 24">
           <use xlink:href="#svg-checked"></use>
         </svg>
-        <svg class="icon-unchecked-box"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <svg class="icon-unchecked-box"  viewBox="0 0 24 24">
           <use xlink:href="#svg-unchecked"></use>
         </svg>
         Agree to &nbsp<a target="_blank" href="/legal/">Telebit&trade; Terms of Service</a>?
       </label>
       <label>
         <input name="letsencrypt-agree" type="checkbox" required>
-        <svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <svg class="icon-checked-box" viewBox="0 0 24 24">
           <use xlink:href="#svg-checked"></use>
         </svg>
-        <svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <svg class="icon-unchecked-box" viewBox="0 0 24 24">
           <use xlink:href="#svg-unchecked"></use>
         </svg>
         Agree to Let's Encrypt&trade; Terms of Service
@@ -99,33 +108,61 @@
       <button type="submit" disabled>Claim Device</button>
     </div>
   </form></div>
-  <div class="js-authz" hidden>
-
+  <div class="container js-authz" hidden>
     <h1 class="logo">Telebit</h1>
-    <svg class="icon-computer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <svg class="icon-computer" viewBox="0 0 24 24">
       <use xlink:href="#svg-computer"></use>
     </svg>
-
-    <ul>
-      <li><label><input type="checkbox" checked disabled> Authorized</label></li>
-      <li><label><input type="checkbox" checked disabled>
-        Generated <span class="js-domainname">xxx-xxx-xxx.example.com</span> just for you</label></li>
-      <li><label><input type="checkbox" disabled> Waiting for your device to pair</label></li>
-      <li><label><input type="checkbox" disabled>
-        Securing your new domain</label></li>
-    </ul>
-
-    <p><strong>Check the command line on your device to finish pairing.</strong></p>
-
-    <h2>Debug Info</h2>
-    <p><a class="js-new-href">{{js-new-href}}</a></p>
-    <p class="js-serviceport">xxxxx</p>
-
-    <p><small>Authorization Token:
-      <pre><code class="js-token">{{js-token}}</code></pre></small></p>
-
+    <h2>Pair <span class="js-hostname">Device</span></h1>
+    <div>
+      <div class="progress">
+        <div class="row">
+          <svg class="authorized-check" viewBox="0 0 24 24">
+            <use xlink:href="#svg-circle-check"></use>
+          </svg>
+          Authorized
+        </div>
+        <div class="row">
+          <span class="spinner">
+            <div class="spinner-ball ball-1"></div>
+            <div class="spinner-ball ball-1"></div>
+            <div class="spinner-ball ball-1"></div>
+          </span>
+          Waiting for device to pair
+        </div>
+      </div>
+    </div>
+    <div class="important-text">
+      Check the command line on your device to finish pairing.
+    </div>
+  </div>
+  <div class="js-debug-container debugging-info-container" hidden>
+    <div class="debug-drawer">
+      <span class="js-debug-button debugging-button">
+        Debugging info <svg class="debugging-arrow" viewBox="0 0 24 24">
+          <use xlink:href="#svg-arrow-down"></use>
+        </svg>
+      </span>
+      <div class="js-debug-info debugging-info">
+        <p><a class="js-new-href">{{js-new-href}}</a></p>
+        <p class="js-serviceport">xxxxx</p>
+        <p><small>Authorization Token:
+          <pre><code class="js-token">{{js-token}}</code></pre></small></p>
+      </div>
+    </div>
+  </div>
+  <div class="container js-finish" hidden>
+    <h1 class="logo">Telebit</h1>
+    <svg class="icon-computer" viewBox="0 0 24 24">
+      <use xlink:href="#svg-computer"></use>
+    </svg>
+    <h2>Success!</h1>
+    <div>You've successfully paired 
+      <span class="js-hostname">your devied</span>
+      with Telebit.
+    </div>
+    <button class="js-finish-button">Finish</button>
+    <script src="js/app.js"></script>
   </div>
-
-  <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/lib/extensions/admin/login/js/app.js b/lib/extensions/admin/login/js/app.js
index 9751129..150ceeb 100644
--- a/lib/extensions/admin/login/js/app.js
+++ b/lib/extensions/admin/login/js/app.js
@@ -18,6 +18,7 @@ function checkStatus() {
         return;
       }
       if ('complete' === data.status) {
+        successScreen();
         setTimeout(function () {
           //window.document.body.innerHTML += ('<img src="https://' + domainname + '/_apis/telebit.cloud/clear.gif">');
           // TODO once this is loaded (even error) Let's Encrypt is done,
@@ -33,6 +34,15 @@ function checkStatus() {
   });
 }
 
+function successScreen() {
+  document.querySelector('.js-authz').hidden = true;
+  document.querySelector('.js-finish-button').addEventListener('click', function(e) {
+    window.location.href='https://' + domainname;
+  });
+  document.querySelector('.js-finish').hidden = false;
+
+}
+
 function submitCode(pair) {
   // TODO use Location or Link
   document.querySelector('.js-magic').hidden = true;
@@ -63,6 +73,7 @@ function submitCode(pair) {
       setTimeout(checkStatus, 0);
 
       document.querySelector('.js-authz').hidden = false;
+      document.querySelector('.js-debug-container').hidden = false;
 
       /*
       document.querySelectorAll('.js-token-data').forEach(function ($el) {
@@ -113,7 +124,9 @@ function init() {
         return;
       }
       document.querySelector('.js-magic').hidden = false;
-      document.querySelector('.js-hostname').innerText = data.hostname || 'Device';
+      document.querySelectorAll('.js-hostname').forEach(function(ele) {
+        ele.innerText = data.hostname || 'Device';
+      });
       //document.querySelector('.js-token-data').innerText = JSON.stringify(data, null, 2);
     });
   });
@@ -143,6 +156,11 @@ function init() {
       }
     });
   };
+  document.querySelector('.js-debug-button').addEventListener("click", function(e) {
+    //var info = document.querySelector('.js-debug-info');
+    //info.hidden = !info.hidden;
+    document.querySelector('.js-debug-container').classList.toggle("visible");
+  })
 }
 
 window.fetch('https://' + location.hostname + '/_apis/telebit.cloud/index.json', {