root
/
greenlock.html
mirror of https://git.coolaj86.com/coolaj86/greenlock.html
2
0
Fork 0
Code Issues Releases Wiki Activity

Added styling to key/cert page.

This commit is contained in:
John Shaver 2018-08-21 13:10:18 -07:00
parent 6ce81beaec
commit 3e865a2fb7
4 changed files with 173 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2 Normal file
View File

Binary file not shown.

125
app/index.html
View File

@ -19,6 +19,13 @@
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2'); src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} }
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style> </style>
<link href="styles/main.css" rel="stylesheet"> <link href="styles/main.css" rel="stylesheet">
@ -163,70 +170,60 @@
</label> </label>
</div> </div>
<div class="js-acme-challenges"> <div class="js-acme-challenges">
<div class="js-acme-verification-http-01">
<h3>Upload this file</h3> <h3>Upload this file</h3>
<div class="http-verification-info file-preview">
<div class="js-acme-verification-http-01"> <div class="paper-fold"></div>
<div class="http-verification-info"> <div>
<div class="file-ver-corner-fold"></div> <div class="file-ver-info-header">FILENAME</div>
<div> <pre id="js-acme-ver-file-location">...loading</pre>
<div class="file-ver-info-header">FILENAME</div> </div>
<div id="js-acme-ver-file-location">...loading</div> <hr>
<div>
<div class="file-ver-info-header">CONTENTS</div>
<pre id="js-acme-ver-content">...loading</pre>
</div>
</div> </div>
<hr> <div class="download-ver-file">
<div> <svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<div class="file-ver-info-header">CONTENTS</div> <use xlink:href="#svg-download"></use>
<div id="js-acme-ver-content">...loading</div> </svg>
<a id="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
Download
</a>
</div> </div>
<h3>To this location</h3>
<div id="js-acme-ver-uri" class="acme-ver-uri">..loading</div>
</div> </div>
<div class="download-ver-file"> <div class="js-acme-verification-dns-01">
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <div class="acme-ver-dns-label">Hostname</div>
<use xlink:href="#svg-download"></use> <div id="js-acme-ver-hostname">loading...</div>
</svg> <div class="acme-ver-dns-label">TXT Host</div>
<a id="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank"> <div id="js-acme-ver-txt-host">loading...</div>
Download <div class="acme-ver-dns-label">TXT Value</div>
</a> <div id="js-acme-ver-txt-value">loading...</div>
</div> </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>
<tr>
<th>Hostname</th>
<th>TXT Host</th>
<th>TXT Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>example.com</td>
<td>_acme-challenge.example.com</td>
<td>4A54</td>
</tr>
</tbody>
</table>
</div>
<div class="js-acme-wildcard"> <div class="js-acme-wildcard">
<h2>Verify Wildcard Domains</h2> <h2>Verify Wildcard Domains</h2>
<table class="js-acme-verification-wildcard"> <table class="js-acme-verification-wildcard">
<thead> <thead>
<tr> <tr>
<th>Hostname</th> <th>Hostname</th>
<th>TXT Host</th> <th>TXT Host</th>
<th>TXT Value</th> <th>TXT Value</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>example.com</td> <td>example.com</td>
<td>_acme-challenge.example.com</td> <td>_acme-challenge.example.com</td>
<td>4A54</td> <td>4A54</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
<button class="button-next" type="submit">Next</button> <button class="button-next" type="submit">Next</button>
@ -264,12 +261,16 @@
<form class="js-acme-form js-acme-form-download"> <form class="js-acme-form js-acme-form-download">
<div> <div>
<h2><label>privkey.pem</label></h2> <h2><label>privkey.pem</label></h2>
<textarea cols="80" rows="10" class="js-privkey">-</textarea> <div class="acme-result-privkey file-preview">
<div class="paper-fold"></div>
<pre id="js-privkey">
</pre>
</div> </div>
<div>
<h2><label>fullchain.pem</label></h2> <h2><label>fullchain.pem</label></h2>
<textarea cols="80" rows="60" class="js-fullchain">-</textarea> <div class="acme-result-fullchain file-preview">
<div class="paper-fold"></div>
<pre id="js-fullchain">
</pre>
</div> </div>
<div> <div>

13
app/js/app.js
View File

@ -51,12 +51,14 @@
steps[j].submit(ev); steps[j].submit(ev);
} }
$qsa('.js-acme-form').forEach(function ($el) { $qsa('.js-acme-form').forEach(function ($el) {
$el.addEventListener('submit', function (ev) { $el.addEventListener('submit', function (ev) {
ev.preventDefault(); ev.preventDefault();
submitForm(ev); submitForm(ev);
}); });
}); });
function updateChallengeType() { function updateChallengeType() {
var input = this || Array.prototype.filter.call( var input = this || Array.prototype.filter.call(
$qsa('.js-acme-challenge-type'), function ($el) { return $el.checked; } $qsa('.js-acme-challenge-type'), function ($el) { return $el.checked; }
@ -273,8 +275,11 @@
} else if(obj[data.type]) { } else if(obj[data.type]) {
obj[data.type].push(data); obj[data.type].push(data);
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("#js-acme-ver-hostname").innerHTML = data.hostname;
$qs("#js-acme-ver-txt-host").innerHTML = data.dnsHost;
$qs("#js-acme-ver-txt-value").innerHTML = data.dnsAnswer;
} else if ('http-01' === data.type) { } else if ('http-01' === data.type) {
$qs("#js-acme-ver-file-location").innerHTML = data.httpPath.split("/").slice(-1); $qs("#js-acme-ver-file-location").innerHTML = data.httpPath.split("/").slice(-1);
$qs("#js-acme-ver-content").innerHTML = data.httpAuth; $qs("#js-acme-ver-content").innerHTML = data.httpAuth;
@ -465,7 +470,7 @@
}).then(function (certs) { }).then(function (certs) {
console.log('WINNING!'); console.log('WINNING!');
console.log(certs); console.log(certs);
$qs('.js-fullchain').value = certs; $qs('#js-fullchain').innerHTML = certs;
// https://stackoverflow.com/questions/40314257/export-webcrypto-key-to-pem-format // https://stackoverflow.com/questions/40314257/export-webcrypto-key-to-pem-format
function spkiToPEM(keydata){ function spkiToPEM(keydata){
@ -524,7 +529,7 @@
return window.crypto.subtle.exportKey("pkcs8", privateKey); return window.crypto.subtle.exportKey("pkcs8", privateKey);
}).then (function (keydata) { }).then (function (keydata) {
var pem = spkiToPEM(keydata); var pem = spkiToPEM(keydata);
$qs('.js-privkey').value = pem; $qs('#js-privkey').innerHTML = pem;
steps[i](); steps[i]();
}).catch(function(err){ }).catch(function(err){
console.error(err); console.error(err);
@ -552,6 +557,8 @@
ele.checked = true; ele.checked = true;
} }
}); });
updateApiType();
steps[2](); steps[2]();
submitForm(); submitForm();
} }

185
app/styles/main.css
View File

@ -1,79 +1,114 @@
body {
font-size: 18px;
font-family: Source Sans Pro, sans-serif;
margin: 0;
line-height: 1.33;
color: #1a1a1a;
}
h1 {
text-align: center;
font-size: 1.77777778em;
}
a {
color: #1a1a1a;
}
input[type=email], input[type=text] {
font-size: 1em;
padding: 0.444444444em 0.888889em;
width: 100%;
border: solid 1px #d9d9d9;
border-radius: 2px;
}
pre {
margin: 0;
font-family: Source Code Pro, monospace;
}
.column-row { .column-row {
width: 22.222222em; width: 22.222222em;
} }
.column-container { .column-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.progress-bar { .progress-bar {
height: 0; height: 0;
border: solid 1px #5bc17f; border: solid 1px #5bc17f;
background-color: #5bc17f; background-color: #5bc17f;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 22em; width: 22em;
margin: 1.388888889em auto; margin: 1.388888889em auto;
} }
.greenlock-logo-badge > img { .greenlock-logo-badge > img {
width: 100%; width: 100%;
} }
.greenlock-logo-badge { .greenlock-logo-badge {
display: inline-block; display: inline-block;
border: solid 1px #d9d9d9; border: solid 1px #d9d9d9;
border-radius: 500px; border-radius: 500px;
width: 5.333333333em; width: 5.333333333em;
height: 5.333333333em; height: 5.333333333em;
margin-top: 4.277777778em; margin-top: 4.277777778em;
} }
.header-row { .header-row {
text-align: center; text-align: center;
} }
.progress-bar-step {position: relative;margin: -0.722222222em -0.166666667em;display: inline-block;background-color: white;/* border-radius: 100%; */padding: 0 0.111111em;} .progress-bar-step {
position: relative;
margin: -0.722222222em -0.166666667em;
display: inline-block;
background-color: white;
/* border-radius: 100%; */
padding: 0 0.111111em;
}
.progress-bar-step > .circle { .progress-bar-step > .circle {
content: ""; content: "";
display: inline-block; display: inline-block;
border: solid 0.111111111em #5bc17f; border: solid 0.111111111em #5bc17f;
width: 0.888888889em; width: 0.888888889em;
height: 0.888888889em; height: 0.888888889em;
border-radius: 100%; border-radius: 100%;
background: white; background: white;
} }
.progress-step-label { .progress-step-label {
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 50%; left: 50%;
=: block =: block font-size: ;
font-size:; top: 139%;
top: 139%; font-size: 0.722222222em;
font-size: 0.722222222em; white-space: nowrap;
white-space: nowrap;
} }
.progress-step-label > div { .progress-step-label > div {
position: relative; position: relative;
right: 50%; right: 50%;
}
body {
font-size: 18px;
font-family: Source Sans Pro, sans-serif;
margin: 0;
line-height: 1.33;
color: #1a1a1a;
} }
.greenlock-name { .greenlock-name {
color: #808080; color: #808080;
}
.file-preview {
background: #f7f7f7;
position: relative;
font-size: 0.833333333em;
padding: 1.6em 2.9333em 1.6em 1.6em;
} }
.js-progress-step-complete > .circle, .js-progress-step-started > .circle { .js-progress-step-complete > .circle, .js-progress-step-started > .circle {
@ -86,22 +121,6 @@ body {
display: initial; display: initial;
} }
svg {}
.js-progress-step-complete > .circle {}
h1 {
font-size: 1.77777778em;
}
input[type=email], input[type=text] {
font-size: 1em;
padding: 0.444444444em 0.888889em;
width: 100%;
border: solid 1px #d9d9d9;
border-radius: 2px;
}
.checkbox-array { .checkbox-array {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -120,7 +139,6 @@ input[type=email], input[type=text] {
display: initial; display: initial;
} }
.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box { .checkbox-array input[type=checkbox]:checked ~ .icon-checked-box {
display: initial; display: initial;
} }
@ -142,10 +160,6 @@ input[type=email], input[type=text] {
margin: 0.4em 0; margin: 0.4em 0;
} }
a {
color: #1a1a1a;
}
.email-usage { .email-usage {
color: #666666; color: #666666;
font-size: 0.833333333em; font-size: 0.833333333em;
@ -177,10 +191,6 @@ a {
display: none; display: none;
} }
table.js-acme-table-http-01, table.js-acme-table-dns-01 {
margin-left: -14em;
}
.download-ver-file svg { .download-ver-file svg {
fill: #5bc17f; fill: #5bc17f;
width: 1.333333333em; width: 1.333333333em;
@ -190,24 +200,16 @@ table.js-acme-table-http-01, table.js-acme-table-dns-01 {
color: #5bc17f; color: #5bc17f;
} }
.download-ver-file {
}
.mdicon { .mdicon {
position: relative; position: relative;
top: 0.4em; top: 0.4em;
} }
.http-verification-info { .http-verification-info {
background: #f7f7f7; padding-right: 6.933333333em;
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 { .paper-fold {
position: absolute; position: absolute;
width: 2em; width: 2em;
height: 2em; height: 2em;
@ -232,6 +234,19 @@ table.js-acme-table-http-01, table.js-acme-table-dns-01 {
margin: auto; margin: auto;
} }
h1 { .acme-ver-dns-label {
text-align: center; margin: 1.777777778em 0 0.444444444em 0;
} border-bottom: solid 1px #d9d9d9;
font-weight: bold;
padding-bottom: 0.166666667em;
}
.tabbed-selector input[type="radio"]:checked ~ div {
border: solid 1px #5bc17f;
background-color: #5bc17f;
}
.file-preview pre {
white-space: pre-line;
word-break: break-all;
}