From 47b0383341748e9bbcc441860c2b8c6281e5276a Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Thu, 23 Jul 2020 11:07:49 +0200
Subject: [PATCH] Improve WKD URL generator

---
 assets/scripts.js  | 20 ++++++++++++++++++--
 assets/styles.css  |  2 +-
 views/index.php    |  4 ++--
 views/util/wkd.php | 11 ++++++++---
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index b70bda5..2b40b75 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -1004,14 +1004,30 @@ if (elUtilWKD) {
 
     const elInput = document.body.querySelector("#input");
     const elOutput = document.body.querySelector("#output");
+    const elOutputDirect = document.body.querySelector("#output_url_direct");
+    const elOutputAdvanced = document.body.querySelector("#output_url_advanced");
+    let match;
 
     elInput.addEventListener("input", async function(evt) {
         if (evt.target.value) {
-            elOutput.value = await computeWKDLocalPart(evt.target.value);
+            if (/(.*)@(.{1,}\..{1,})/.test(evt.target.value)) {
+                match = evt.target.value.match(/(.*)@(.*)/);
+                elOutput.innerText = await computeWKDLocalPart(match[1]);
+                elOutputDirect.innerText = `https://${match[2]}/.well-known/openpgpkey/hu/${elOutput.innerText}?l=${match[1]}`;
+                elOutputAdvanced.innerText = `https://openpgpkey.${match[2]}/.well-known/openpgpkey/${match[2]}/hu/${elOutput.innerText}?l=${match[1]}`;
+            } else {
+                elOutput.innerText = await computeWKDLocalPart(evt.target.value);
+                elOutputDirect.innerText = "Waiting for input";
+                elOutputAdvanced.innerText = "Waiting for input";
+            }
         } else {
-            elOutput.value = "";
+            elOutput.innerText = "Waiting for input";
+            elOutputDirect.innerText = "Waiting for input";
+            elOutputAdvanced.innerText = "Waiting for input";
         }
     });
+
+    elInput.dispatchEvent(new Event("input"));
 }
 
 if (elUtilQRFP) {
diff --git a/assets/styles.css b/assets/styles.css
index 082a825..f640e05 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -84,7 +84,7 @@ footer a {
     background: linear-gradient(0deg, #4da4d2 0%, #82c5ea 100%);
 }
 .full-width {
-    width: 100%;
+    width: 100% !important;
 }
 
 h1 {
diff --git a/views/index.php b/views/index.php
index 3ab2390..16e5b53 100644
--- a/views/index.php
+++ b/views/index.php
@@ -18,8 +18,8 @@
             <h2>Utilities</h2>
             <p>
                 <a href="/util/profile-url">Profile URL generator</a><br>
-                <a href="/util/wkd">Web Key Directory</a><br>
-                <a href="/util/qr">Fingerprint QR</a>
+                <a href="/util/wkd">Web Key Directory URL generator</a><br>
+                <a href="/util/qr">Fingerprint QR generator</a>
             </p>
         </div>
     </div>
diff --git a/views/util/wkd.php b/views/util/wkd.php
index 08e085a..fa97458 100644
--- a/views/util/wkd.php
+++ b/views/util/wkd.php
@@ -1,12 +1,17 @@
 <?php $this->layout('template.base', ['title' => $title]) ?>
 
 <div class="content">
-    <h1>WKD Local Part</h1>
+    <h1>Web Key Directory generator</h1>
     <form id="form-util-wkd" method="post">
         <p>This tool computes the part of the URL that corresponds to the username when <a href="https://keyoxide.org/guides/web-key-directory">uploading keys using web key directory</a>.</p>
         <h3>Input</h3>
-        <input type="text" name="input" id="input" placeholder="Username">
+        <input type="text" name="input" id="input" placeholder="WKD username or identifier">
         <h3>Output</h3>
-        <input type="text" name="output" id="output" placeholder="Waiting for input..." readonly>
+        <h4>Local part</h4>
+        <code class="full-width"id="output">Waiting for input...</code>
+        <h4>Direct URL</h4>
+        <code class="full-width"id="output_url_direct">Waiting for input...</code>
+        <h4>Advanced URL</h4>
+        <code class="full-width"id="output_url_advanced">Waiting for input...</code>
     </form>
 </div>