coolaj86/greenlock.html
2
2
Fork 0
Code Issues 5 Pull Requests Releases Wiki Activity

First 2 steps down.

Browse Source
This commit is contained in:
John Shaver 2018-08-17 22:20:57 -07:00
parent a32287c3f8
commit c6c06b06f0
3 changed files with 115 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/index.html
View File

@ -41,10 +41,14 @@
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/> <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
<path d="M0 0h24v24H0z" fill="none"/> <path d="M0 0h24v24H0z" fill="none"/>
</g> </g>
<g id="svg-download">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</g>
</defs> </defs>
</svg> </svg>
<div class="column-container wide"> <div class="column-container wide">
<div class="column-row"> <div class="header-row column-row">
<div id="js-progress-bar" class="progress-bar"> <div id="js-progress-bar" class="progress-bar">
<div class="progress-bar-step"> <div class="progress-bar-step">
<div class="circle"> <div class="circle">
@ -160,26 +164,33 @@
</div> </div>
<div class="js-acme-challenges"> <div class="js-acme-challenges">
<h2>Verify Domains &amp; Sub-Domains</h2> <h3>Upload this file</h3>
<table class="js-acme-table-http-01"> <div class="js-acme-verification-http-01">
<thead> <div class="http-verification-info">
<tr> <div class="file-ver-corner-fold"></div>
<th>Hostname</th> <div>
<th>File Location</th> <div class="file-ver-info-header">FILENAME</div>
<th>File Contents</th> <div id="js-acme-ver-file-location">...loading</div>
</tr> </div>
</thead> <hr>
<tbody> <div>
<tr> <div class="file-ver-info-header">CONTENTS</div>
<td>example.com</td> <div id="js-acme-ver-content">...loading</div>
<td>.well-known/acme-challenge/xxx</td> </div>
<td>sec.ret</td> </div>
</tr> <div class="download-ver-file">
</tbody> <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
</table> <use xlink:href="#svg-download"></use>
</svg>
<table class="js-acme-table-dns-01"> <a id="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
Download
</a>
</div>
<h3>To this location</h3>
<div id="js-acme-ver-uri" class="acme-ver-uri">..loading</div>
</div>
<table class="js-acme-verification-dns-01">
<thead> <thead>
<tr> <tr>
<th>Hostname</th> <th>Hostname</th>
@ -200,7 +211,7 @@
<div class="js-acme-wildcard"> <div class="js-acme-wildcard">
<h2>Verify Wildcard Domains</h2> <h2>Verify Wildcard Domains</h2>
<table class="js-acme-table-wildcard"> <table class="js-acme-verification-wildcard">
<thead> <thead>
<tr> <tr>
<th>Hostname</th> <th>Hostname</th>
@ -218,7 +229,7 @@
</table> </table>
</div> </div>
<button type="submit">Next</button> <button class="button-next" type="submit">Next</button>
</form> </form>
<!-- Step 4 Process Challanges --> <!-- Step 4 Process Challanges -->

35
app/js/app.js
View File

@ -62,14 +62,14 @@
$qsa('.js-acme-challenge-type'), function ($el) { return $el.checked; } $qsa('.js-acme-challenge-type'), function ($el) { return $el.checked; }
)[0]; )[0];
console.log('ch type radio:', input.value); console.log('ch type radio:', input.value);
$qs('.js-acme-table-wildcard').hidden = true; $qs('.js-acme-verification-wildcard').hidden = true;
$qs('.js-acme-table-http-01').hidden = true; $qs('.js-acme-verification-http-01').hidden = true;
$qs('.js-acme-table-dns-01').hidden = true; $qs('.js-acme-verification-dns-01').hidden = true;
if (info.challenges.wildcard) { if (info.challenges.wildcard) {
$qs('.js-acme-table-wildcard').hidden = false; $qs('.js-acme-verification-wildcard').hidden = false;
} }
if (info.challenges[input.value]) { if (info.challenges[input.value]) {
$qs('.js-acme-table-' + input.value).hidden = false; $qs('.js-acme-verification-' + input.value).hidden = false;
} }
} }
$qsa('.js-acme-challenge-type').forEach(function ($el) { $qsa('.js-acme-challenge-type').forEach(function ($el) {
@ -107,7 +107,7 @@
steps[1].submit = function () { steps[1].submit = function () {
info.identifiers = $qs('.js-acme-domains').value.split(/\s*,\s*/g).map(function (hostname) { info.identifiers = $qs('.js-acme-domains').value.split(/\s*,\s*/g).map(function (hostname) {
return { type: 'dns', value: hostname.toLowerCase().trim() }; return { type: 'dns', value: hostname.toLowerCase().trim() };
}); }).slice(0,1); //Disable multiple values for now. We'll just take the first and work with it.
info.identifiers.sort(function (a, b) { info.identifiers.sort(function (a, b) {
if (a === b) { return 0; } if (a === b) { return 0; }
if (a < b) { return 1; } if (a < b) { return 1; }
@ -216,19 +216,22 @@
console.log('claims:'); console.log('claims:');
console.log(claims); console.log(claims);
var obj = { 'dns-01': [], 'http-01': [], 'wildcard': [] }; var obj = { 'dns-01': [], 'http-01': [], 'wildcard': [] };
var map = {
'http-01': '.js-acme-table-http-01'
, 'dns-01': '.js-acme-table-dns-01'
, 'wildcard': '.js-acme-table-wildcard'
}
var tpls = {};
info.challenges = obj; info.challenges = obj;
var map = {
'http-01': '.js-acme-verification-http-01'
, 'dns-01': '.js-acme-verification-dns-01'
, 'wildcard': '.js-acme-verification-wildcard'
}
/*
var tpls = {};
Object.keys(map).forEach(function (k) { Object.keys(map).forEach(function (k) {
var sel = map[k] + ' tbody'; var sel = map[k] + ' tbody';
console.log(sel); console.log(sel);
tpls[k] = $qs(sel).innerHTML; tpls[k] = $qs(sel).innerHTML;
$qs(map[k] + ' tbody').innerHTML = ''; $qs(map[k] + ' tbody').innerHTML = '';
}); });
*/
// TODO make Promise-friendly // TODO make Promise-friendly
return Promise.all(claims.map(function (claim) { return Promise.all(claims.map(function (claim) {
@ -265,6 +268,7 @@
if (claim.wildcard) { if (claim.wildcard) {
obj.wildcard.push(data); obj.wildcard.push(data);
$qs(map.wildcard).innerHTML += '<tr><td>' + data.hostname + '</td><td>' + data.dnsHost + '</td><td>' + data.dnsAnswer + '</td></tr>'; $qs(map.wildcard).innerHTML += '<tr><td>' + data.hostname + '</td><td>' + data.dnsHost + '</td><td>' + data.dnsAnswer + '</td></tr>';
} else if(obj[data.type]) { } else if(obj[data.type]) {
@ -272,7 +276,12 @@
if ('dns-01' === data.type) { if ('dns-01' === data.type) {
$qs(map[data.type]).innerHTML += '<tr><td>' + data.hostname + '</td><td>' + data.dnsHost + '</td><td>' + data.dnsAnswer + '</td></tr>'; $qs(map[data.type]).innerHTML += '<tr><td>' + data.hostname + '</td><td>' + data.dnsHost + '</td><td>' + data.dnsAnswer + '</td></tr>';
} else if ('http-01' === data.type) { } else if ('http-01' === data.type) {
$qs(map[data.type]).innerHTML += '<tr><td>' + data.hostname + '</td><td>' + data.httpPath + '</td><td>' + data.httpAuth + '</td></tr>'; $qs("#js-acme-ver-file-location").innerHTML = data.httpPath.split("/").slice(-1);
$qs("#js-acme-ver-content").innerHTML = data.httpAuth;
$qs("#js-acme-ver-uri").innerHTML = data.httpPath;
$qs("#js-download-verify-link").href =
"data:text/octet-stream;base64," + window.btoa(data.httpAuth);
$qs("#js-download-verify-link").download = data.httpPath.split("/").slice(-1);
} }
} }

64
app/styles/main.css
View File

@ -11,6 +11,7 @@
.progress-bar { .progress-bar {
height: 0; height: 0;
border: solid 1px #5bc17f; border: solid 1px #5bc17f;
background-color: #5bc17f;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -31,7 +32,7 @@
margin-top: 4.277777778em; margin-top: 4.277777778em;
} }
.column-row { .header-row {
text-align: center; text-align: center;
} }
@ -97,12 +98,13 @@ input[type=email], input[type=text] {
font-size: 1em; font-size: 1em;
padding: 0.444444444em 0.888889em; padding: 0.444444444em 0.888889em;
width: 100%; width: 100%;
border: solid 1px #d9d9d9;
border-radius: 2px;
} }
.checkbox-array { .checkbox-array {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start;
padding: 1em 0; padding: 1em 0;
} }
@ -135,7 +137,6 @@ input[type=email], input[type=text] {
.checkbox-array label { .checkbox-array label {
display: flex; display: flex;
align-items: center;
height: 1.333333333em; height: 1.333333333em;
font-size: 0.833333333em; font-size: 0.833333333em;
margin: 0.4em 0; margin: 0.4em 0;
@ -147,7 +148,6 @@ a {
.email-usage { .email-usage {
color: #666666; color: #666666;
text-align: start;
font-size: 0.833333333em; font-size: 0.833333333em;
margin: 2em 0; margin: 2em 0;
} }
@ -170,6 +170,7 @@ a {
.tabbed-selector { .tabbed-selector {
display: flex; display: flex;
font-weight: bold; font-weight: bold;
text-align: center;
} }
.tabbed-selector input[type=radio] { .tabbed-selector input[type=radio] {
@ -178,4 +179,59 @@ a {
table.js-acme-table-http-01, table.js-acme-table-dns-01 { table.js-acme-table-http-01, table.js-acme-table-dns-01 {
margin-left: -14em; margin-left: -14em;
}
.download-ver-file svg {
fill: #5bc17f;
width: 1.333333333em;
}
.download-ver-file a {
color: #5bc17f;
}
.download-ver-file {
}
.mdicon {
position: relative;
top: 0.4em;
}
.http-verification-info {
background: #f7f7f7;
position: relative;
font-size: 0.833333333em;
padding: 1.6em 6.933333333em 1.6em 1.6em;
word-break: break-all;
text-align: start;
}
.file-ver-corner-fold {
position: absolute;
width: 2em;
height: 2em;
border-left: solid #d9d9d9 1px;
border-bottom: solid #d9d9d9 1px;
right: 0;
top: 0;
background: linear-gradient(45deg, #f7f7f7 0%,#f7f7f7 50%,#ffffff 50%,#ffffff 100%);
}
.file-ver-info-header {
color: #808080;
}
.http-verification-info hr {
border: none;
border-bottom: solid 1px #d9d9d9;
}
.acme-ver-uri {
word-break: break-all;
margin: auto;
}
h1 {
text-align: center;
} }