From c6c06b06f09109c05a1a3f56a560211d5074bba9 Mon Sep 17 00:00:00 2001 From: John Shaver Date: Fri, 17 Aug 2018 22:20:57 -0700 Subject: [PATCH] First 2 steps down. --- app/index.html | 55 ++++++++++++++++++++++---------------- app/js/app.js | 35 ++++++++++++++++--------- app/styles/main.css | 64 ++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 115 insertions(+), 39 deletions(-) diff --git a/app/index.html b/app/index.html index 64c4ed1..8e16674 100644 --- a/app/index.html +++ b/app/index.html @@ -41,10 +41,14 @@ + + + +
-
+
@@ -160,26 +164,33 @@
-

Verify Domains & Sub-Domains

+

Upload this file

- - - - - - - - - - - - - - - -
HostnameFile LocationFile Contents
example.com.well-known/acme-challenge/xxxsec.ret
- - +
+
+
+
+
FILENAME
+
...loading
+
+
+
+
CONTENTS
+
...loading
+
+
+
+ + + + + Download + +
+

To this location

+
..loading
+
+
@@ -200,7 +211,7 @@

Verify Wildcard Domains

-
Hostname
+
@@ -218,7 +229,7 @@
Hostname
- + diff --git a/app/js/app.js b/app/js/app.js index 9b2ddb3..20eb382 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -62,14 +62,14 @@ $qsa('.js-acme-challenge-type'), function ($el) { return $el.checked; } )[0]; console.log('ch type radio:', input.value); - $qs('.js-acme-table-wildcard').hidden = true; - $qs('.js-acme-table-http-01').hidden = true; - $qs('.js-acme-table-dns-01').hidden = true; + $qs('.js-acme-verification-wildcard').hidden = true; + $qs('.js-acme-verification-http-01').hidden = true; + $qs('.js-acme-verification-dns-01').hidden = true; if (info.challenges.wildcard) { - $qs('.js-acme-table-wildcard').hidden = false; + $qs('.js-acme-verification-wildcard').hidden = false; } 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) { @@ -107,7 +107,7 @@ steps[1].submit = function () { info.identifiers = $qs('.js-acme-domains').value.split(/\s*,\s*/g).map(function (hostname) { 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) { if (a === b) { return 0; } if (a < b) { return 1; } @@ -216,19 +216,22 @@ console.log('claims:'); console.log(claims); 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; + 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) { var sel = map[k] + ' tbody'; console.log(sel); tpls[k] = $qs(sel).innerHTML; $qs(map[k] + ' tbody').innerHTML = ''; }); + */ // TODO make Promise-friendly return Promise.all(claims.map(function (claim) { @@ -265,6 +268,7 @@ if (claim.wildcard) { obj.wildcard.push(data); + $qs(map.wildcard).innerHTML += '' + data.hostname + '' + data.dnsHost + '' + data.dnsAnswer + ''; } else if(obj[data.type]) { @@ -272,7 +276,12 @@ if ('dns-01' === data.type) { $qs(map[data.type]).innerHTML += '' + data.hostname + '' + data.dnsHost + '' + data.dnsAnswer + ''; } else if ('http-01' === data.type) { - $qs(map[data.type]).innerHTML += '' + data.hostname + '' + data.httpPath + '' + data.httpAuth + ''; + $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); } } diff --git a/app/styles/main.css b/app/styles/main.css index 5edb642..4fa5476 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -11,6 +11,7 @@ .progress-bar { height: 0; border: solid 1px #5bc17f; + background-color: #5bc17f; display: flex; justify-content: space-between; align-items: center; @@ -31,7 +32,7 @@ margin-top: 4.277777778em; } -.column-row { +.header-row { text-align: center; } @@ -97,12 +98,13 @@ 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; - align-items: start; padding: 1em 0; } @@ -135,7 +137,6 @@ input[type=email], input[type=text] { .checkbox-array label { display: flex; - align-items: center; height: 1.333333333em; font-size: 0.833333333em; margin: 0.4em 0; @@ -147,7 +148,6 @@ a { .email-usage { color: #666666; - text-align: start; font-size: 0.833333333em; margin: 2em 0; } @@ -170,6 +170,7 @@ a { .tabbed-selector { display: flex; font-weight: bold; + text-align: center; } .tabbed-selector input[type=radio] { @@ -178,4 +179,59 @@ a { table.js-acme-table-http-01, table.js-acme-table-dns-01 { 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; } \ No newline at end of file