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

Added styling to key/cert page.

This commit is contained in:
John Shaver 2018-08-21 13:10:18 -07:00 committed by AJ ONeal
parent 1dc1cae50a
commit 1c39971be5
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');
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>
<link href="styles/main.css" rel="stylesheet">
@ -163,70 +170,60 @@
</label>
</div>
<div class="js-acme-challenges">
<h3>Upload this file</h3>
<div class="js-acme-verification-http-01">
<div class="http-verification-info">
<div class="file-ver-corner-fold"></div>
<div>
<div class="file-ver-info-header">FILENAME</div>
<div id="js-acme-ver-file-location">...loading</div>
<div class="js-acme-verification-http-01">
<h3>Upload this file</h3>
<div class="http-verification-info file-preview">
<div class="paper-fold"></div>
<div>
<div class="file-ver-info-header">FILENAME</div>
<pre id="js-acme-ver-file-location">...loading</pre>
</div>
<hr>
<div>
<div class="file-ver-info-header">CONTENTS</div>
<pre id="js-acme-ver-content">...loading</pre>
</div>
</div>
<hr>
<div>
<div class="file-ver-info-header">CONTENTS</div>
<div id="js-acme-ver-content">...loading</div>
<div class="download-ver-file">
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<use xlink:href="#svg-download"></use>
</svg>
<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>
<div class="download-ver-file">
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<use xlink:href="#svg-download"></use>
</svg>
<a id="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
Download
</a>
<div class="js-acme-verification-dns-01">
<div class="acme-ver-dns-label">Hostname</div>
<div id="js-acme-ver-hostname">loading...</div>
<div class="acme-ver-dns-label">TXT Host</div>
<div id="js-acme-ver-txt-host">loading...</div>
<div class="acme-ver-dns-label">TXT Value</div>
<div id="js-acme-ver-txt-value">loading...</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">
<h2>Verify Wildcard Domains</h2>
<div class="js-acme-wildcard">
<h2>Verify Wildcard Domains</h2>
<table class="js-acme-verification-wildcard">
<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>
<table class="js-acme-verification-wildcard">
<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>
<button class="button-next" type="submit">Next</button>
@ -264,12 +261,16 @@
<form class="js-acme-form js-acme-form-download">
<div>
<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>
<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>

13
app/js/app.js
View File

@ -51,12 +51,14 @@
steps[j].submit(ev);
}
$qsa('.js-acme-form').forEach(function ($el) {
$el.addEventListener('submit', function (ev) {
ev.preventDefault();
submitForm(ev);
});
});
function updateChallengeType() {
var input = this || Array.prototype.filter.call(
$qsa('.js-acme-challenge-type'), function ($el) { return $el.checked; }
@ -273,8 +275,11 @@
} else if(obj[data.type]) {
obj[data.type].push(data);
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) {
$qs("#js-acme-ver-file-location").innerHTML = data.httpPath.split("/").slice(-1);
$qs("#js-acme-ver-content").innerHTML = data.httpAuth;
@ -465,7 +470,7 @@
}).then(function (certs) {
console.log('WINNING!');
console.log(certs);
$qs('.js-fullchain').value = certs;
$qs('#js-fullchain').innerHTML = certs;
// https://stackoverflow.com/questions/40314257/export-webcrypto-key-to-pem-format
function spkiToPEM(keydata){
@ -524,7 +529,7 @@
return window.crypto.subtle.exportKey("pkcs8", privateKey);
}).then (function (keydata) {
var pem = spkiToPEM(keydata);
$qs('.js-privkey').value = pem;
$qs('#js-privkey').innerHTML = pem;
steps[i]();
}).catch(function(err){
console.error(err);
@ -552,6 +557,8 @@
ele.checked = true;
}
});
updateApiType();
steps[2]();
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 {
width: 22.222222em;
width: 22.222222em;
}
.column-container {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.progress-bar {
height: 0;
border: solid 1px #5bc17f;
background-color: #5bc17f;
display: flex;
justify-content: space-between;
align-items: center;
width: 22em;
margin: 1.388888889em auto;
height: 0;
border: solid 1px #5bc17f;
background-color: #5bc17f;
display: flex;
justify-content: space-between;
align-items: center;
width: 22em;
margin: 1.388888889em auto;
}
.greenlock-logo-badge > img {
width: 100%;
width: 100%;
}
.greenlock-logo-badge {
display: inline-block;
border: solid 1px #d9d9d9;
border-radius: 500px;
width: 5.333333333em;
height: 5.333333333em;
margin-top: 4.277777778em;
display: inline-block;
border: solid 1px #d9d9d9;
border-radius: 500px;
width: 5.333333333em;
height: 5.333333333em;
margin-top: 4.277777778em;
}
.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 {
content: "";
display: inline-block;
border: solid 0.111111111em #5bc17f;
width: 0.888888889em;
height: 0.888888889em;
border-radius: 100%;
background: white;
content: "";
display: inline-block;
border: solid 0.111111111em #5bc17f;
width: 0.888888889em;
height: 0.888888889em;
border-radius: 100%;
background: white;
}
.progress-step-label {
text-align: center;
position: absolute;
left: 50%;
=: block
font-size:;
top: 139%;
font-size: 0.722222222em;
white-space: nowrap;
text-align: center;
position: absolute;
left: 50%;
=: block font-size: ;
top: 139%;
font-size: 0.722222222em;
white-space: nowrap;
}
.progress-step-label > div {
position: relative;
right: 50%;
}
body {
font-size: 18px;
font-family: Source Sans Pro, sans-serif;
margin: 0;
line-height: 1.33;
color: #1a1a1a;
position: relative;
right: 50%;
}
.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 {
@ -86,22 +121,6 @@ body {
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 {
display: flex;
flex-direction: column;
@ -120,7 +139,6 @@ input[type=email], input[type=text] {
display: initial;
}
.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box {
display: initial;
}
@ -142,10 +160,6 @@ input[type=email], input[type=text] {
margin: 0.4em 0;
}
a {
color: #1a1a1a;
}
.email-usage {
color: #666666;
font-size: 0.833333333em;
@ -177,10 +191,6 @@ a {
display: none;
}
table.js-acme-table-http-01, table.js-acme-table-dns-01 {
margin-left: -14em;
}
.download-ver-file svg {
fill: #5bc17f;
width: 1.333333333em;
@ -190,24 +200,16 @@ table.js-acme-table-http-01, table.js-acme-table-dns-01 {
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;
padding-right: 6.933333333em;
}
.file-ver-corner-fold {
.paper-fold {
position: absolute;
width: 2em;
height: 2em;
@ -232,6 +234,19 @@ table.js-acme-table-http-01, table.js-acme-table-dns-01 {
margin: auto;
}
h1 {
text-align: center;
}
.acme-ver-dns-label {
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;
}