diff --git a/app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2 b/app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2 new file mode 100644 index 0000000..6817019 Binary files /dev/null and b/app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2 differ diff --git a/app/index.html b/app/index.html index 8e16674..bcb2f33 100644 --- a/app/index.html +++ b/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; + } @@ -163,70 +170,60 @@
- -

Upload this file

- -
-
-
-
-
FILENAME
-
...loading
+
+

Upload this file

+
+
+
+
FILENAME
+
...loading
+
+
+
+
CONTENTS
+
...loading
+
-
-
-
CONTENTS
-
...loading
+ +

To this location

+
..loading
-
- - - - - Download - +
+
Hostname
+
loading...
+
TXT Host
+
loading...
+
TXT Value
+
loading...
-

To this location

-
..loading
-
- - - - - - - - - - - - - - - -
HostnameTXT HostTXT Value
example.com_acme-challenge.example.com4A54
-
-
-

Verify Wildcard Domains

+
+

Verify Wildcard Domains

- - - - - - - - - - - - - - - -
HostnameTXT HostTXT Value
example.com_acme-challenge.example.com4A54
+ + + + + + + + + + + + + + + +
HostnameTXT HostTXT Value
example.com_acme-challenge.example.com4A54
+
@@ -264,12 +261,16 @@

- +
+
+
+              
- -

- +
+
+
+              
diff --git a/app/js/app.js b/app/js/app.js index 20eb382..de8c908 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -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 += '' + data.hostname + '' + data.dnsHost + '' + data.dnsAnswer + ''; + $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(); } diff --git a/app/styles/main.css b/app/styles/main.css index 4fa5476..934cbd3 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -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; -} \ No newline at end of file +.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; +}