Added styling to key/cert page.
This commit is contained in:
parent
6ce81beaec
commit
3e865a2fb7
Binary file not shown.
125
app/index.html
125
app/index.html
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue