Merge pull request 'Add profile URL generator utility' (#8) from add-profile-generator into dev

Reviewed-on: https://codeberg.org/yarmo/keyoxide/pulls/8

assets/scripts.js

@@ -658,6 +658,32 @@ async function computeWKDLocalPart(message) {
     return encodeZBase32(new Uint8Array(hash));
 }
 
+async function generateProfileURL(data) {
+    if (data.input == "") {
+        return "Waiting for input...";
+    }
+    switch (data.source) {
+        case "wkd":
+            return `https://keyoxide.org/${data.input}`;
+            break;
+        case "hkp":
+            if (/.*@.*\..*/.test(data.input)) {
+                return `https://keyoxide.org/hkp/${data.input}`;
+            } else {
+                return `https://keyoxide.org/${data.input}`;
+            }
+            break;
+        case "keybase":
+            const re = /https\:\/\/keybase.io\/(.*)\/pgp_keys\.asc\?fingerprint\=(.*)/;
+            if (!re.test(data.input)) {
+                return "Incorrect Keybase public key URL.";
+            }
+            const match = data.input.match(re);
+            return `https://keyoxide.org/keybase/${match[1]}/${match[2]}`;
+            break;
+    }
+}
+
 // General purpose
 let elFormVerify = document.body.querySelector("#form-verify"),
     elFormEncrypt = document.body.querySelector("#form-encrypt"),
@@ -666,7 +692,8 @@ let elFormVerify = document.body.querySelector("#form-verify"),
     elProfileMode = document.body.querySelector("#profileMode"),
     elModeSelect = document.body.querySelector("#modeSelect"),
     elUtilWKD = document.body.querySelector("#form-util-wkd"),
-    elUtilQR = document.body.querySelector("#form-util-qr");
+    elUtilQR = document.body.querySelector("#form-util-qr"),
+    elUtilProfileURL = document.body.querySelector("#form-util-profile-url");
 
 if (elModeSelect) {
     elModeSelect.onchange = function (evt) {
@@ -870,3 +897,36 @@ if (elUtilQR) {
 
     elInput.dispatchEvent(new Event("input"));
 }
+
+if (elUtilProfileURL) {
+    elUtilProfileURL.onsubmit = function (evt) {
+        evt.preventDefault();
+    }
+
+    const elInput = document.body.querySelector("#input"),
+        elSource = document.body.querySelector("#source"),
+        elOutput = document.body.querySelector("#output");
+
+    let data = {
+        input: elInput.value,
+        source: elSource.value
+    };
+
+    elInput.addEventListener("input", async function(evt) {
+        data = {
+            input: elInput.value,
+            source: elSource.value
+        };
+        elOutput.innerText = await generateProfileURL(data);
+    });
+
+    elSource.addEventListener("input", async function(evt) {
+        data = {
+            input: elInput.value,
+            source: elSource.value
+        };
+        elOutput.innerText = await generateProfileURL(data);
+    });
+
+    elInput.dispatchEvent(new Event("input"));
+}

assets/styles.css

@@ -103,6 +103,9 @@ input[type="submit"][disabled="true"] {
     pointer-events: none;
     opacity: 0.3;
 }
+select {
+    margin: 0 0 16px 0;
+}
 .green {
     color: green;
 }
@@ -113,9 +116,6 @@ input[type="submit"][disabled="true"] {
     display: inline-block;
     margin: 0 0 8px;
 }
-.modesContainer {
-    margin-top: 16px;
-}
 .modes {
     display: none;
 }

views/index.php

@@ -10,6 +10,7 @@
     </p>
     <h2>Utilities</h2>
     <p>
+        <a class="bigBtn" href="/util/profile-url">Profile URL</a>
         <a class="bigBtn" href="/util/wkd">wkd</a>
         <a class="bigBtn" href="/util/qr">QR</a>
     </p>

views/util/profile-url.php

@@ -0,0 +1,23 @@
+<?php $this->layout('template.base', ['title' => $title]) ?>
+
+<h1>Profile URL</h1>
+<div class="content">
+    <form id="form-util-profile-url" method="post">
+        <p>This tool generates an URL for your Keyoxide profile page.</p>
+        <h3>Public key</h3>
+        <label for="source">Source: </label>
+        <select class="source" name="source" id="source">
+            <option value="wkd">Web Key Directory</option>
+            <option value="hkp">keys.openpgp.org</option>
+            <option value="keybase">Keybase</option>
+        </select>
+        <br>
+        <input type="text" name="input" id="input" placeholder="Input" value="">
+        <h3>Profile URL</h3>
+        <code id="output">Waiting for input...</code>
+        <h3>Help</h3>
+        <p>When using the <strong>Web Key Directory</strong> source, the <strong>Input</strong> looks like <strong>username@domain.org</strong>.</p>
+        <p>When using the <strong>keys.openpgp.org</strong> source, the <strong>Input</strong> is either the <strong>fingerprint</strong> of your public key, or the main identity's <strong>email address</strong>.</p>
+        <p>When using the <strong>Keybase</strong> source, the <strong>Input</strong> is the URL obtained by going to your Keybase profile page, clicking on the <strong>key id</strong> of your keypair and copying the URL of the <strong>this key</strong> link.</p>
+    </form>
+</div>