coolaj86/telebit-relay.js
1
1
Fork 0
Code Issues 4 Pull Requests Releases Activity

All but the final page

Browse Source
This commit is contained in:
John Shaver 2018-09-13 16:44:38 -07:00
parent 27ae2aeb48
commit 137bf18c4e
4 changed files with 213 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lib/extensions/admin/login/css/animations.css Normal file
View File

@ -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);}
}

110
lib/extensions/admin/login/css/main.css
View File

@ -12,9 +12,12 @@ body {
font-family: Source Sans Pro, sans-serif; font-family: Source Sans Pro, sans-serif;
font-size: 18px; font-size: 18px;
color: #1a1a1a; 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 { .container {
text-align: center; text-align: center;
@ -53,8 +56,6 @@ svg.icon-computer {width: 4em;fill: #1a1a1a;}
background: #DDDDDD; background: #DDDDDD;
} }
.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box { .checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box {
width: 1.333333333em;
fill: #1a1a1a;
margin-right: 0.666666667em; margin-right: 0.666666667em;
} }
@ -91,8 +92,111 @@ button:disabled {
h1.logo { h1.logo {
font-size: 1.555555556em; font-size: 1.555555556em;
margin-bottom: 1.777777778em;
} }
h2 { h2 {
font-size: 1.777777778em; 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;
} }

101
lib/extensions/admin/login/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title>Telebit - Pair Device</title> <title>Telebit - Pair Device</title>
<link href="./css/main.css" rel="stylesheet"> <link href="./css/main.css" rel="stylesheet">
<link href="./css/animations.css" rel="stylesheet">
<style> <style>
@font-face { @font-face {
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
@ -32,8 +33,8 @@
</head> </head>
<body> <body>
<script>document.body.hidden = true;</script> <script>document.body.hidden = true;</script>
<!-- let's define our SVG that we will reuse --> <!-- let's define our SVG that we will use later -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24"> <svg width="0" height="0" viewBox="0 0 24 24">
<defs> <defs>
<g id="svg-check"> <g id="svg-check">
<path fill="none" d="M0 0h24v24H0z"/> <path fill="none" d="M0 0h24v24H0z"/>
@ -55,6 +56,14 @@
<path d="M0 0h24v24H0z" fill="none"/> <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"/> <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>
<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> </defs>
</svg> </svg>
@ -66,30 +75,30 @@
</div> </div>
<div class="container js-magic" hidden><form class="js-submit"> <div class="container js-magic" hidden><form class="js-submit">
<h1 class="logo">Telebit</h1> <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> <use xlink:href="#svg-computer"></use>
</svg> </svg>
<h2>Pair <span class="js-hostname">Device</span></h1> <h2>Pair <span class="js-hostname">Device</span></h1>
<label>Enter your device pairing code: <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> </label>
<div class="checkbox-array"> <div class="checkbox-array">
<label> <label>
<input name="telebit-agree" type="checkbox" required> <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> <use xlink:href="#svg-checked"></use>
</svg> </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> <use xlink:href="#svg-unchecked"></use>
</svg> </svg>
Agree to &nbsp<a target="_blank" href="/legal/">Telebit&trade; Terms of Service</a>? Agree to &nbsp<a target="_blank" href="/legal/">Telebit&trade; Terms of Service</a>?
</label> </label>
<label> <label>
<input name="letsencrypt-agree" type="checkbox" required> <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> <use xlink:href="#svg-checked"></use>
</svg> </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> <use xlink:href="#svg-unchecked"></use>
</svg> </svg>
Agree to Let's Encrypt&trade; Terms of Service Agree to Let's Encrypt&trade; Terms of Service
@ -99,33 +108,61 @@
<button type="submit" disabled>Claim Device</button> <button type="submit" disabled>Claim Device</button>
</div> </div>
</form></div> </form></div>
<div class="js-authz" hidden> <div class="container js-authz" hidden>
<h1 class="logo">Telebit</h1> <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> <use xlink:href="#svg-computer"></use>
</svg> </svg>
<h2>Pair <span class="js-hostname">Device</span></h1>
<ul> <div>
<li><label><input type="checkbox" checked disabled> Authorized</label></li> <div class="progress">
<li><label><input type="checkbox" checked disabled> <div class="row">
Generated <span class="js-domainname">xxx-xxx-xxx.example.com</span> just for you</label></li> <svg class="authorized-check" viewBox="0 0 24 24">
<li><label><input type="checkbox" disabled> Waiting for your device to pair</label></li> <use xlink:href="#svg-circle-check"></use>
<li><label><input type="checkbox" disabled> </svg>
Securing your new domain</label></li> Authorized
</ul> </div>
<div class="row">
<p><strong>Check the command line on your device to finish pairing.</strong></p> <span class="spinner">
<div class="spinner-ball ball-1"></div>
<h2>Debug Info</h2> <div class="spinner-ball ball-1"></div>
<p><a class="js-new-href">{{js-new-href}}</a></p> <div class="spinner-ball ball-1"></div>
<p class="js-serviceport">xxxxx</p> </span>
Waiting for device to pair
<p><small>Authorization Token: </div>
<pre><code class="js-token">{{js-token}}</code></pre></small></p> </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> </div>
<script src="js/app.js"></script>
</body> </body>
</html> </html>

20
lib/extensions/admin/login/js/app.js
View File

@ -18,6 +18,7 @@ function checkStatus() {
return; return;
} }
if ('complete' === data.status) { if ('complete' === data.status) {
successScreen();
setTimeout(function () { setTimeout(function () {
//window.document.body.innerHTML += ('<img src="https://' + domainname + '/_apis/telebit.cloud/clear.gif">'); //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, // 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) { function submitCode(pair) {
// TODO use Location or Link // TODO use Location or Link
document.querySelector('.js-magic').hidden = true; document.querySelector('.js-magic').hidden = true;
@ -63,6 +73,7 @@ function submitCode(pair) {
setTimeout(checkStatus, 0); setTimeout(checkStatus, 0);
document.querySelector('.js-authz').hidden = false; document.querySelector('.js-authz').hidden = false;
document.querySelector('.js-debug-container').hidden = false;
/* /*
document.querySelectorAll('.js-token-data').forEach(function ($el) { document.querySelectorAll('.js-token-data').forEach(function ($el) {
@ -113,7 +124,9 @@ function init() {
return; return;
} }
document.querySelector('.js-magic').hidden = false; 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); //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', { window.fetch('https://' + location.hostname + '/_apis/telebit.cloud/index.json', {