Fully transition to PHP templating, improve key selection

assets/scripts.js

@@ -98,13 +98,13 @@ async function verifySignature(opts) {
 
 async function encryptMessage(opts) {
     // Init
-    const elEnc = document.body.querySelector("#messageEncrypted");
+    const elEnc = document.body.querySelector("#message");
     const elRes = document.body.querySelector("#result");
+    const elBtn = document.body.querySelector("[name='submit']");
     let keyData, feedback, message, encrypted;
 
     // Reset feedback
     elRes.innerHTML = "";
-    elEnc.value = "";
 
     try {
         // Get key data
@@ -130,6 +130,8 @@ async function encryptMessage(opts) {
 
     // Display encrypted data
     elEnc.value = encrypted.data;
+    elEnc.toggleAttribute("readonly");
+    elBtn.setAttribute("disabled", "true");
 };
 
 async function verifyProofs(opts) {
@@ -151,6 +153,9 @@ async function verifyProofs(opts) {
         return;
     }
 
+    // Display feedback
+    elRes.innerHTML = "Verifying proofs…";
+
     let notation, isVerified, verifications = [];
     for (var i = 0; i < keyData.notations.length; i++) {
         notation = keyData.notations[i];
@@ -487,6 +492,15 @@ async function fetchKeys(opts) {
         sigContent: null
     };
 
+    // Autodetect mode
+    if (opts.mode == "auto") {
+        if (/.*@.*\..*/.test(opts.input)) {
+            opts.mode = "wkd";
+        } else {
+            opts.mode = "hkp";
+        }
+    }
+
     // Fetch keys depending on the input mode
     switch (opts.mode) {
         case "plaintext":
@@ -598,8 +612,20 @@ let elFormVerify = document.body.querySelector("#form-verify"),
     elFormProofs = document.body.querySelector("#form-proofs"),
     elProfileUid = document.body.querySelector("#profileUid"),
     elProfileMode = document.body.querySelector("#profileMode"),
+    elModeSelect = document.body.querySelector("#modeSelect"),
     elUtilWKD = document.body.querySelector("#form-util-wkd");
 
+if (elModeSelect) {
+    elModeSelect.onchange = function (evt) {
+        let elAllModes = document.body.querySelectorAll('.modes');
+        elAllModes.forEach(function(el) {
+            el.classList.remove('modes--visible');
+        });
+        document.body.querySelector(`.modes--${elModeSelect.value}`).classList.add('modes--visible');
+    }
+    elModeSelect.dispatchEvent(new Event("change"));
+}
+
 if (elFormVerify) {
     elFormVerify.onsubmit = function (evt) {
         evt.preventDefault();
@@ -612,20 +638,33 @@ if (elFormVerify) {
         };
 
         opts.signature = document.body.querySelector("#signature").value;
+        opts.mode = document.body.querySelector("#modeSelect").value;
 
-        if (document.body.querySelector("#publicKey").value != "") {
+        switch (opts.mode) {
-            opts.input = document.body.querySelector("#publicKey").value;
+            default:
-            opts.mode = "plaintext";
+            case "auto":
-        } else if (document.body.querySelector("#wkd").value != "") {
+                opts.input = document.body.querySelector("#auto_input").value;
-            opts.input = document.body.querySelector("#wkd").value;
+                break;
-            opts.mode = "wkd";
+
-        } else if (document.body.querySelector("#hkp_input").value != "") {
+            case "wkd":
-            opts.input = document.body.querySelector("#hkp_input").value;
+                opts.input = document.body.querySelector("#wkd_input").value;
-            opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
-            opts.mode = "hkp";
+
-        } else {
+            case "hkp":
+                opts.input = document.body.querySelector("#hkp_input").value;
+                opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
+
+            case "plaintext":
+                opts.input = document.body.querySelector("#plaintext_input").value;
+                break;
+        }
+
+        // If no input was detect
+        if (!opts.input) {
             opts.mode = "signature";
         }
+
         verifySignature(opts);
     };
 }
@@ -642,20 +681,28 @@ if (elFormEncrypt) {
         };
 
         opts.message = document.body.querySelector("#message").value;
+        opts.mode = document.body.querySelector("#modeSelect").value;
 
-        if (document.body.querySelector("#publicKey").value != "") {
+        switch (opts.mode) {
-            opts.input = document.body.querySelector("#publicKey").value;
+            default:
-            opts.mode = "plaintext";
+            case "auto":
-        } else if (document.body.querySelector("#wkd").value != "") {
+                opts.input = document.body.querySelector("#auto_input").value;
-            opts.input = document.body.querySelector("#wkd").value;
+                break;
-            opts.mode = "wkd";
+
-        } else if (document.body.querySelector("#hkp_input").value != "") {
+            case "wkd":
-            opts.input = document.body.querySelector("#hkp_input").value;
+                opts.input = document.body.querySelector("#wkd_input").value;
-            opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
-            opts.mode = "hkp";
+
-        } else {
+            case "hkp":
-            opts.mode = "signature";
+                opts.input = document.body.querySelector("#hkp_input").value;
+                opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
+
+            case "plaintext":
+                opts.input = document.body.querySelector("#plaintext_input").value;
+                break;
         }
+
         encryptMessage(opts);
     };
 }
@@ -670,19 +717,28 @@ if (elFormProofs) {
             server: null,
         };
 
-        if (document.body.querySelector("#publicKey").value != "") {
+        opts.mode = document.body.querySelector("#modeSelect").value;
-            opts.input = document.body.querySelector("#publicKey").value;
+
-            opts.mode = "plaintext";
+        switch (opts.mode) {
-        } else if (document.body.querySelector("#wkd").value != "") {
+            default:
-            opts.input = document.body.querySelector("#wkd").value;
+            case "auto":
-            opts.mode = "wkd";
+                opts.input = document.body.querySelector("#auto_input").value;
-        } else if (document.body.querySelector("#hkp_input").value != "") {
+                break;
-            opts.input = document.body.querySelector("#hkp_input").value;
+
-            opts.server =  document.body.querySelector("#hkp_server").value;
+            case "wkd":
-            opts.mode = "hkp";
+                opts.input = document.body.querySelector("#wkd_input").value;
-        } else {
+                break;
-            opts.mode = null;
+
+            case "hkp":
+                opts.input = document.body.querySelector("#hkp_input").value;
+                opts.server =  document.body.querySelector("#hkp_server").value;
+                break;
+
+            case "plaintext":
+                opts.input = document.body.querySelector("#plaintext_input").value;
+                break;
         }
+
         verifyProofs(opts);
     };
 }

assets/styles.css

@@ -96,6 +96,11 @@ input[type="radio"] {
 input[type="submit"] {
     width: 100%;
 }
+input[type="submit"][disabled="true"] {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.3;
+}
 .green {
     color: green;
 }
@@ -106,6 +111,15 @@ input[type="submit"] {
     display: inline-block;
     margin: 0 0 8px;
 }
+.modesContainer {
+    margin-top: 16px;
+}
+.modes {
+    display: none;
+}
+.modes.modes--visible {
+    display: block;
+}
 
 .container--profile {
     margin-top: 64px;

index.php

@@ -7,10 +7,14 @@ include_once 'server/functions.php';
 // Init router
 $router = new AltoRouter();
 
+// Init templating
+$templates = new League\Plates\Engine('views');
+
 // Router mapping
 $router->map('GET', '/', function() {}, 'index');
 $router->map('GET', '/guides', function() {}, 'guides');
 $router->map('GET', '/guides/[:id]', function() {}, 'guideId');
+$router->map('GET', '/util/[:id]', function() {}, 'util');
 $router->map('GET', '/faq', function() {}, 'faq');
 $router->map('GET', '/verify', function() {}, 'verify');
 $router->map('GET', '/encrypt', function() {}, 'encrypt');
@@ -21,12 +25,11 @@ $router->map('GET', '/proofs/hkp/[**:uid]', function() {}, 'proofsHKP');
 $router->map('GET', '/verify/wkd/[**:uid]', function() {}, 'verifyWKD');
 $router->map('GET', '/encrypt/wkd/[**:uid]', function() {}, 'encryptWKD');
 $router->map('GET', '/proofs/wkd/[**:uid]', function() {}, 'proofsWKD');
-$router->map('GET', '/verify/[:uid]', function() {}, 'verifyUid');
+$router->map('GET', '/verify/[**:uid]', function() {}, 'verifyAUTO');
-$router->map('GET', '/encrypt/[:uid]', function() {}, 'encryptUid');
+$router->map('GET', '/encrypt/[**:uid]', function() {}, 'encryptAUTO');
-$router->map('GET', '/proofs/[:uid]', function() {}, 'proofsUid');
+$router->map('GET', '/proofs/[**:uid]', function() {}, 'proofsAUTO');
 $router->map('GET', '/hkp/[**:uid]', function() {}, 'profileHKP');
 $router->map('GET', '/wkd/[**:uid]', function() {}, 'profileWKD');
-$router->map('GET', '/util/[:id]', function() {}, 'util');
 $router->map('GET', '/[**:uid]', function() {}, 'profile');
 
 // Router matching
@@ -36,129 +39,94 @@ $match = $router->match();
 if(is_array($match) && is_callable($match['target'])) {
     switch ($match['name']) {
         case 'index':
-            readfile('pages/index.html');
+            echo $templates->render('index');
             break;
 
         case 'verify':
-        case 'verifyUid':
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'auto']);
+            break;
+
+        case 'verifyAUTO':
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'auto', 'auto_input' => $match['params']['uid']]);
+            break;
+
         case 'verifyHKP':
-            $content = file_get_contents('pages/verify.html');
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'hkp', 'hkp_input' => $match['params']['uid']]);
-            $content = str_replace('%HKP_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            $content = str_replace('%WKD_UID%', '', $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'verifyWKD':
-            $content = file_get_contents('pages/verify.html');
+            echo $templates->render('verify', ['title' => 'Verify — ', 'mode' => 'wkd', 'wkd_input' => $match['params']['uid']]);
-            $content = str_replace('%HKP_UID%', '', $content);
-            $content = str_replace('%WKD_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'encrypt':
-        case 'encryptUid':
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'auto']);
+            break;
+
+        case 'encryptAUTO':
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'auto', 'auto_input' => $match['params']['uid']]);
+            break;
+
         case 'encryptHKP':
-            $content = file_get_contents('pages/encrypt.html');
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'hkp', 'hkp_input' => $match['params']['uid']]);
-            $content = str_replace('%HKP_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            $content = str_replace('%WKD_UID%', '', $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'encryptWKD':
-            $content = file_get_contents('pages/encrypt.html');
+            echo $templates->render('encrypt', ['title' => 'Encrypt — ', 'mode' => 'wkd', 'wkd_input' => $match['params']['uid']]);
-            $content = str_replace('%HKP_UID%', '', $content);
-            $content = str_replace('%WKD_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'proofs':
-        case 'proofsUid':
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'auto']);
+            break;
+
+        case 'proofsAUTO':
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'auto', 'auto_input' => $match['params']['uid']]);
+            break;
+
         case 'proofsHKP':
-            $content = file_get_contents('pages/proofs.html');
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'hkp', 'hkp_input' => $match['params']['uid']]);
-            $content = str_replace('%HKP_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            $content = str_replace('%WKD_UID%', '', $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'proofsWKD':
-            $content = file_get_contents('pages/proofs.html');
+            echo $templates->render('proofs', ['title' => 'Proofs — ', 'mode' => 'wkd', 'wkd_input' => $match['params']['uid']]);
-            $content = str_replace('%HKP_UID%', '', $content);
-            $content = str_replace('%WKD_UID%', (array_key_exists('uid', $match['params']) ? htmlspecialchars($match['params']['uid']) : ''), $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'profile':
-            $content = file_get_contents('pages/profile.html');
+            echo $templates->render('profile', ['mode' => 'auto', 'uid' => htmlspecialchars($match['params']['uid'])]);
-            $content = str_replace('%UID%', htmlspecialchars($match['params']['uid']), $content);
-            $content = str_replace('%MODE%', "auto", $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'profileHKP':
-            $content = file_get_contents('pages/profile.html');
+            echo $templates->render('profile', ['mode' => 'hkp', 'uid' => htmlspecialchars($match['params']['uid'])]);
-            $content = str_replace('%UID%', htmlspecialchars($match['params']['uid']), $content);
-            $content = str_replace('%MODE%', "hkp", $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'profileWKD':
-            $content = file_get_contents('pages/profile.html');
+            echo $templates->render('profile', ['mode' => 'wkd', 'uid' => htmlspecialchars($match['params']['uid'])]);
-            $content = str_replace('%UID%', htmlspecialchars($match['params']['uid']), $content);
-            $content = str_replace('%MODE%', "wkd", $content);
-            header('Content-Type: text/html; charset=utf-8');
-            echo($content);
             break;
 
         case 'guides':
-            readfile('pages/guides.html');
+            echo $templates->render('guides');
             break;
 
         case 'guideId':
             $id = htmlspecialchars($match['params']['id']);
-            if (file_exists("pages/guides/$id.title.html")) {
+            if (file_exists("views/guides/$id.title.php")) {
-                $content = file_get_contents("pages/template.html");
+                $guideTitle = file_get_contents("views/guides/$id.title.php");
-                $guideTitle = file_get_contents("pages/guides/$id.title.html");
+                $guideContent = file_get_contents("views/guides/$id.content.php");
-                $guideContent = file_get_contents("pages/guides/$id.content.html");
+                echo $templates->render('guide', ['guide_title' => $guideTitle, 'guide_content' => $guideContent]);
-                $guideContent = "<p><a href='/guides'>Back to guides</a></p>".$guideContent;
-                $content = str_replace('%TITLE%', $guideTitle, $content);
-                $content = str_replace('%CONTENT%', $guideContent, $content);
-                header('Content-Type: text/html; charset=utf-8');
-                echo($content);
             } else {
-                $content = file_get_contents("pages/template.html");
+                echo $templates->render("404");
-                $pageTitle = "Guide not found";
-                $pageContent = "<p>404 - This guide could not be found :(</p>";
-                $content = str_replace('%TITLE%', $pageTitle, $content);
-                $content = str_replace('%CONTENT%', $pageContent, $content);
-                header('Content-Type: text/html; charset=utf-8');
-                echo($content);
             }
             break;
 
         case 'util':
             $id = htmlspecialchars($match['params']['id']);
-            readfile("pages/util/$id.html");
+            echo $templates->render("util/$id");
             break;
 
         case 'faq':
-            readfile("pages/faq.html");
+            echo $templates->render("faq");
             break;
     }
 } else {
     // No route was matched
-    $content = file_get_contents("pages/template.html");
+    echo $templates->render("404");
-    $pageTitle = "404";
-    $pageContent = "<p>404 - This page could not be found :(</p>";
-    $content = str_replace('%TITLE%', $pageTitle, $content);
-    $content = str_replace('%CONTENT%', $pageContent, $content);
-    header('Content-Type: text/html; charset=utf-8');
-    echo($content);
 }

views/404.php

@@ -1,43 +1,6 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>%TITLE% - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>404</h1>
-            <h1>%TITLE%</h1>
+<div class="content">
-            <div class="content">
+    <p>The requested page could not be found :(</p>
-                %CONTENT%
+</div>
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>

views/encrypt.php

@@ -1,74 +1,34 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Encrypt - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>Encrypt</h1>
-            <h1>Encrypt</h1>
+<div class="content">
-            <div class="content">
+    <form id="form-encrypt" method="post">
-                <form id="form-encrypt" method="post">
+        <h3>Recipient</h3>
-                    <h3>Recipient</h3>
+        <label for="modeSelect">Mode: </label>
-                    <label for="mode">Mode: </label>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
-                    <select class="mode" name="mode" id="mode">
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
-                        <option value="auto" %MODE_AUTO%>Autodetect</option>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
-                        <option value="wkd" %MODE_WKD%>Web Key Directory</option>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
-                        <option value="hkp" %MODE_HKP%>Keyservers</option>
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
-                        <option value="plaintext" %MODE_PT%>Plaintext</option>
+        </select>
-                    </select>
+        <div class="modesContainer">
-                    <div class="modes modes--auto modes--hkp" style="display: none">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
-                        <input type="text" name="wkd" id="wkd" placeholder="Email / key id / fingerprint" value="%WKDUID%">
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
-                    </div>
+            </div>
-                    <div class="modes modes--auto modes--hkp" style="display: none">
+            <div class='modes modes--wkd <?php if ($mode=="wkd"): ?>modes--visible<?php endif ?>'>
-                        <input type="text" name="wkd" id="wkd" placeholder="Email / key id / fingerprint" value="%WKDUID%">
+                <input type="text" name="wkd_input" id="wkd_input" placeholder="name@domain.org" value="<?=$this->escape($wkd_input)?>">
-                    </div>
+            </div>
-                    <h3>Message</h3>
+            <div class='modes modes--hkp <?php if ($mode=="hkp"): ?>modes--visible<?php endif ?>'>
-                    <textarea name="message" id="message"></textarea>
+                <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($hkp_input)?>">
-                    <!-- <h3>Public Key (1: plaintext)</h3>
+                <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/ (default)">
-                    <textarea name="publicKey" id="publicKey"></textarea>
+            </div>
-                    <h3>Public Key (2: web key directory)</h3>
+            <div class='modes modes--plaintext <?php if ($mode=="plaintext"): ?>modes--visible<?php endif ?>'>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
+                <textarea name="plaintext_input" id="plaintext_input"></textarea>
-                    <h3>Public Key (3: HKP server)</h3>
-                    <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/">
-                    <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="%HKP_UID%"> -->
-                    <!-- <h3>Result</h3>
-                    <textarea name="messageEncrypted" id="messageEncrypted" readonly></textarea> -->
-                    <p id="result"></p>
-                    <input type="submit" class="bigBtn" name="submit" value="ENCRYPT MESSAGE">
-                </form>
             </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
         </div>
-
+        <h3>Message</h3>
-
+        <textarea name="message" id="message"></textarea>
-    </body>
+        <p id="result"></p>
-    <script src="/assets/openpgp.min.js"></script>
+        <input type="submit" class="bigBtn" name="submit" value="ENCRYPT MESSAGE">
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
+    </form>
-</html>
+</div>

views/faq.php

@@ -1,100 +1,63 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>FAQ - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>FAQ</h1>
-            <h1>FAQ</h1>
+<div class="content">
-            <div class="content">
+    <h3 id="what-is-keyoxide"><a href="#what-is-keyoxide">#</a> What is Keyoxide?</h3>
-                <h3 id="what-is-keyoxide"><a href="#what-is-keyoxide">#</a> What is Keyoxide?</h3>
+    <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans. It is built to be privacy friendly and secure, it can even be selfhosted.</p>
-                <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans. It is built to be privacy friendly and secure, it can even be selfhosted.</p>
 
-                <h3 id="why-does-keyoxide-exist"><a href="#why-does-keyoxide-exist">#</a> Why does Keyoxide exist?</h3>
+    <h3 id="why-does-keyoxide-exist"><a href="#why-does-keyoxide-exist">#</a> Why does Keyoxide exist?</h3>
-                <p><a href="/">Keyoxide</a> provides a solution to a modern problem: we humans have developed advanced methods of encrypting data and signing it. Unfortunately, it requires complicated tools that demand a minimal level of understanding cryptography and how keypairs work to leverage these technologies.</p>
+    <p><a href="/">Keyoxide</a> provides a solution to a modern problem: we humans have developed advanced methods of encrypting data and signing it. Unfortunately, it requires complicated tools that demand a minimal level of understanding cryptography and how keypairs work to leverage these technologies.</p>
-                <p>Sadly, this means that true privacy and secrecy in this modern age of surveillance capitalism is reserved to a subset of the world population.</p>
+    <p>Sadly, this means that true privacy and secrecy in this modern age of surveillance capitalism is reserved to a subset of the world population.</p>
-                <p>Luckily, there is one thing we can do. Some cryptographic operations are more accessible than others and less prone to leaking private data. By building a service around only those operations, we hope a wider general audience can benefit from modern cryptography.</p>
+    <p>Luckily, there is one thing we can do. Some cryptographic operations are more accessible than others and less prone to leaking private data. By building a service around only those operations, we hope a wider general audience can benefit from modern cryptography.</p>
 
-                <h3 id="what-cryptographic-operations-can-keyoxide-handle"><a href="#what-cryptographic-operations-can-keyoxide-handle">#</a> What cryptographic operations can Keyoxide handle?</h3>
+    <h3 id="what-cryptographic-operations-can-keyoxide-handle"><a href="#what-cryptographic-operations-can-keyoxide-handle">#</a> What cryptographic operations can Keyoxide handle?</h3>
-                <p><a href="/">Keyoxide</a> can: <a href="/verify">verify signatures</a> and <a href="/encrypt">encrypt messages</a>.<br><a href="/">Keyoxide</a> can't: sign messages or decrypt messages.</p>
+    <p><a href="/">Keyoxide</a> can: <a href="/verify">verify signatures</a> and <a href="/encrypt">encrypt messages</a>.<br><a href="/">Keyoxide</a> can't: sign messages or decrypt messages.</p>
 
-                <h3 id="why-so-few-cryptographic-operations"><a href="#why-so-few-cryptographic-operations">#</a> Why so few cryptographic operations?</h3>
+    <h3 id="why-so-few-cryptographic-operations"><a href="#why-so-few-cryptographic-operations">#</a> Why so few cryptographic operations?</h3>
-                <p>Good question. First, what cryptographic operations are generally available? There's <strong>encryption</strong> and its counterpart, <strong>decryption</strong>, but also <strong>signing</strong> and its counterpart, <strong>signature verification</strong>.</p>
+    <p>Good question. First, what cryptographic operations are generally available? There's <strong>encryption</strong> and its counterpart, <strong>decryption</strong>, but also <strong>signing</strong> and its counterpart, <strong>signature verification</strong>.</p>
-                <p><strong>Decryption</strong> and <strong>signing</strong> require private keys. <strong>Encryption</strong> and <strong>signature verification</strong> only require public keys.</p>
+    <p><strong>Decryption</strong> and <strong>signing</strong> require private keys. <strong>Encryption</strong> and <strong>signature verification</strong> only require public keys.</p>
-                <p>If you happen to be in possession of a private key, there is one thing you should know: that key is private! It shouldn't leave your computer and most certainly should never be uploaded to any website!</p>
+    <p>If you happen to be in possession of a private key, there is one thing you should know: that key is private! It shouldn't leave your computer and most certainly should never be uploaded to any website!</p>
-                <p>So yes, alternative services may offer more cryptographic operations but at the highest cost of surrendering your private keys to servers you generally shouldn't trust and companies that may be under geopolitical influence.</p>
+    <p>So yes, alternative services may offer more cryptographic operations but at the highest cost of surrendering your private keys to servers you generally shouldn't trust and companies that may be under geopolitical influence.</p>
-                <p><a href="/">Keyoxide</a> offers a simple solution to the trust issue: we don't want your keys, therefore you don't even need to trust us. Everything that this service offers is possible thanks to publicly available keys.</p>
+    <p><a href="/">Keyoxide</a> offers a simple solution to the trust issue: we don't want your keys, therefore you don't even need to trust us. Everything that this service offers is possible thanks to publicly available keys.</p>
 
-                <h3 id="how-does-keyoxide-work-without-keys"><a href="#how-does-keyoxide-work-without-keys">#</a> How does Keyoxide work without keys?</h3>
+    <h3 id="how-does-keyoxide-work-without-keys"><a href="#how-does-keyoxide-work-without-keys">#</a> How does Keyoxide work without keys?</h3>
-                <p>We still need keys, of course, but only the harmless public keys. And yes, we could have built a website where one can make an account and upload public keys, in a similar fashion as alternative services.</p>
+    <p>We still need keys, of course, but only the harmless public keys. And yes, we could have built a website where one can make an account and upload public keys, in a similar fashion as alternative services.</p>
-                <p>But why would we? There's already an entire infrastructure out there in the form of websites that host their own keys (plaintext or web key directory) or dedicated "HTTP Key Protocol" or HKP servers, designed specifically for public key hosting. Why reinvent the wheel?</p>
+    <p>But why would we? There's already an entire infrastructure out there in the form of websites that host their own keys (plaintext or web key directory) or dedicated "HTTP Key Protocol" or HKP servers, designed specifically for public key hosting. Why reinvent the wheel?</p>
 
-                <h3 id="how-is-this-privacy-friendly-and-secure"><a href="#how-is-this-privacy-friendly-and-secure">#</a> How is this privacy friendly and secure?</h3>
+    <h3 id="how-is-this-privacy-friendly-and-secure"><a href="#how-is-this-privacy-friendly-and-secure">#</a> How is this privacy friendly and secure?</h3>
-                <p>You can't make an account on <a href="/">Keyoxide</a> because for basic cryptographic operations, we don't need your data or your keys. By not knowing anything about you or using any trackers, this is as privacy-friendly as it gets.</p>
+    <p>You can't make an account on <a href="/">Keyoxide</a> because for basic cryptographic operations, we don't need your data or your keys. By not knowing anything about you or using any trackers, this is as privacy-friendly as it gets.</p>
-                <p>As for secure, <a href="/">Keyoxide</a> does all the cryptographic processing on your device and never sends data to the server. Besides, it never uses private keys and should you ever enter those.</p>
+    <p>As for secure, <a href="/">Keyoxide</a> does all the cryptographic processing on your device and never sends data to the server. Besides, it never uses private keys and should you ever enter those.</p>
 
-                <h3 id="how-can-i-make-an-account"><a href="#how-can-i-make-an-account">#</a> How can I make an account?</h3>
+    <h3 id="how-can-i-make-an-account"><a href="#how-can-i-make-an-account">#</a> How can I make an account?</h3>
-                <p>Well, you can't and that is the whole point of <a href="/">Keyoxide</a>. We don't wan't your data or your keys. Uploading your keys and/or data to our servers is required for any of the operations provided by <a href="/">Keyoxide</a>.</p>
+    <p>Well, you can't and that is the whole point of <a href="/">Keyoxide</a>. We don't wan't your data or your keys. Uploading your keys and/or data to our servers is required for any of the operations provided by <a href="/">Keyoxide</a>.</p>
 
-                <h3 id="can-i-get-a-sweet-profile-page"><a href="#can-i-get-a-sweet-profile-page">#</a> Can I get a sweet profile page?</h3>
+    <h3 id="can-i-get-a-sweet-profile-page"><a href="#can-i-get-a-sweet-profile-page">#</a> Can I get a sweet profile page?</h3>
-                <p>That, we can help you with! Just append your fingerprint to the domain (like so: <a href="https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D">https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D</a>) to generate a profile page.</p>
+    <p>That, we can help you with! Just append your fingerprint to the domain (like so: <a href="https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D">https://keyoxide.org/9F0048AC0B23301E1F77E994909F6BD6F80F485D</a>) to generate a profile page.</p>
 
-                <h3 id="where-is-the-app"><a href="#where-is-the-app">#</a> Where is the app?</h3>
+    <h3 id="where-is-the-app"><a href="#where-is-the-app">#</a> Where is the app?</h3>
-                <p>There's no app. Why would you want yet another app for what is essentially just a form with a big blue button?</p>
+    <p>There's no app. Why would you want yet another app for what is essentially just a form with a big blue button?</p>
 
-                <h3 id="where-do-i-put-my-private-key"><a href="#where-do-i-put-my-private-key">#</a> Where do I put my private key?</h3>
+    <h3 id="where-do-i-put-my-private-key"><a href="#where-do-i-put-my-private-key">#</a> Where do I put my private key?</h3>
-                <p><strong>DON'T</strong>! We don't want it!</p>
+    <p><strong>DON'T</strong>! We don't want it!</p>
-                <p>Alternative services may ask you for your private keys so that they can offer additional functionality. Please understand that your private key is yours and ONLY yours. You should never upload it to any online service, in fact it should never leave your computer.</p>
+    <p>Alternative services may ask you for your private keys so that they can offer additional functionality. Please understand that your private key is yours and ONLY yours. You should never upload it to any online service, in fact it should never leave your computer.</p>
 
-                <h3 id="what-is-the-use-if-i-can't-decrypt-or-sign-messages"><a href="#what-is-the-use-if-i-can't-decrypt-or-sign-messages">#</a> What is the use if I can't decrypt or sign messages?</h3>
+    <h3 id="what-is-the-use-if-i-can't-decrypt-or-sign-messages"><a href="#what-is-the-use-if-i-can't-decrypt-or-sign-messages">#</a> What is the use if I can't decrypt or sign messages?</h3>
-                <p>If you want to be on the receiving end of securely encrypted messages, you should either learn the basics of modern cryptography and know your way around your computer's command line or switch to end-to-end encrypted instant messaging providers.</p>
+    <p>If you want to be on the receiving end of securely encrypted messages, you should either learn the basics of modern cryptography and know your way around your computer's command line or switch to end-to-end encrypted instant messaging providers.</p>
-                <p>Simply put, if you have private keys, you probably won't be using <a href="/">Keyoxide</a>. You will benefit from using command line tools or GUIs like <a href="https://www.openpgp.org/software/kleopatra/">Kleopatra</a>.</p>
+    <p>Simply put, if you have private keys, you probably won't be using <a href="/">Keyoxide</a>. You will benefit from using command line tools or GUIs like <a href="https://www.openpgp.org/software/kleopatra/">Kleopatra</a>.</p>
-                <p><a href="/">Keyoxide</a> is designed for those without extensive knowledge about cryptography and who wish to encrypt messages to, or verify the authenticity of messages coming from the people with that extensive knowledge.</p>
+    <p><a href="/">Keyoxide</a> is designed for those without extensive knowledge about cryptography and who wish to encrypt messages to, or verify the authenticity of messages coming from the people with that extensive knowledge.</p>
 
-                <h3 id="but-other-services-provide-a-social-network-function"><a href="#but-other-services-provide-a-social-network-function">#</a> But other services provide a social network function!</h3>
+    <h3 id="but-other-services-provide-a-social-network-function"><a href="#but-other-services-provide-a-social-network-function">#</a> But other services provide a social network function!</h3>
-                <p>It doesn't need to be centralized to have a "social network" function. <a href="/">Keyoxide</a> simply uses the already existing "social network" of websites hosting their own keys and servers dedicated to hosting large amounts of keys.</p>
+    <p>It doesn't need to be centralized to have a "social network" function. <a href="/">Keyoxide</a> simply uses the already existing "social network" of websites hosting their own keys and servers dedicated to hosting large amounts of keys.</p>
 
-                <h3 id="pgp-must-die"><a href="#pgp-must-die">#</a> PGP must die!</h3>
+    <h3 id="pgp-must-die"><a href="#pgp-must-die">#</a> PGP must die!</h3>
-                <p>Not a question but we get your point. While there are <a href="https://restoreprivacy.com/let-pgp-die/">legitimate reasons PGP should cease to exist</a>, it is still widely used and without any clear sign of imminent extinction, it needs proper tooling.</p>
+    <p>Not a question but we get your point. While there are <a href="https://restoreprivacy.com/let-pgp-die/">legitimate reasons PGP should cease to exist</a>, it is still widely used and without any clear sign of imminent extinction, it needs proper tooling.</p>
-                <p>It should be noted that while PGP can indeed be harmful when applied to email encryption, there are other legitimate ways of leveraging PGP to encrypt and/or sign messages.</p>
+    <p>It should be noted that while PGP can indeed be harmful when applied to email encryption, there are other legitimate ways of leveraging PGP to encrypt and/or sign messages.</p>
-                <p>That being said, <a href="/">Keyoxide</a> aims to integrate different cryptographic technologies and therefore ease the transition away from PGP.</p>
+    <p>That being said, <a href="/">Keyoxide</a> aims to integrate different cryptographic technologies and therefore ease the transition away from PGP.</p>
 
-                <h3 id="what-is-on-the-roadmap"><a href="#what-is-on-the-roadmap">#</a> What is on the roadmap?</h3>
+    <h3 id="what-is-on-the-roadmap"><a href="#what-is-on-the-roadmap">#</a> What is on the roadmap?</h3>
-                <ul>
+    <ul>
-                    <li>Support more decentralized proofs</li>
+        <li>Support more decentralized proofs</li>
-                    <li>Write more guides</li>
+        <li>Write more guides</li>
-                    <li>Integrate other encryption programs</li>
+        <li>Integrate other encryption programs</li>
-                </ul>
+    </ul>
-            </div>
+</div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>

views/guide.php

@@ -0,0 +1,7 @@
+<?php $this->layout('template.base', ['title' => $title]) ?>
+
+<h1><?=$this->escape($guide_title)?></h1>
+<div class="content">
+    <p><a href='/guides'>Back to guides</a></p>
+    <?=$guide_content?>
+</div>

views/guides.php

@@ -1,65 +1,28 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Guides - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>Guides</h1>
-            <h1>Guides</h1>
+<div class="content">
-            <div class="content">
+    <h3>Using Keyoxide.org</h3>
-                <h3>Using Keyoxide.org</h3>
+    <a href="/guides/verify">Verifying a signature</a><br>
-                <a href="/guides/verify">Verifying a signature</a><br>
+    <a href="/guides/encrypt">Encrypting a message</a><br>
-                <a href="/guides/encrypt">Encrypting a message</a><br>
+    <a href="/guides/proofs">Verifying identity proofs</a><br>
-                <a href="/guides/proofs">Verifying identity proofs</a><br>
+    <a href="/guides/contributing">Contributing to Keyoxide</a><br>
-                <a href="/guides/contributing">Contributing to Keyoxide</a><br>
+    <a href="/guides/migrating-from-keybase">Migrating from Keybase</a><br>
-                <a href="/guides/migrating-from-keybase">Migrating from Keybase</a><br>
+    <a href="/guides/feature-comparison-keybase">Feature comparison with Keybase</a><br>
-                <a href="/guides/feature-comparison-keybase">Feature comparison with Keybase</a><br>
 
-                <h3>Beyond Keyoxide.org</h3>
+    <h3>Beyond Keyoxide.org</h3>
-                <a href="/guides/openpgp-proofs">How OpenPGP identity proofs work</a><br>
+    <a href="/guides/openpgp-proofs">How OpenPGP identity proofs work</a><br>
-                <a href="/guides/web-key-directory">Uploading keys using web key directory</a><br>
+    <a href="/guides/web-key-directory">Uploading keys using web key directory</a><br>
-                <a href="/guides/selfhosting-keyoxide">Selfhosting Keyoxide</a><br>
+    <a href="/guides/selfhosting-keyoxide">Selfhosting Keyoxide</a><br>
-                <a href="/guides/service-provider">Are you a service provider?</a><br>
+    <a href="/guides/service-provider">Are you a service provider?</a><br>
 
-                <h3>Adding proofs</h3>
+    <h3>Adding proofs</h3>
-                <a href="/guides/dns">Adding a DNS proof</a><br>
+    <a href="/guides/dns">Adding a DNS proof</a><br>
-                <a href="/guides/mastodon">Adding a Mastodon proof</a><br>
+    <a href="/guides/mastodon">Adding a Mastodon proof</a><br>
-                <a href="/guides/twitter">Adding a Twitter proof</a><br>
+    <a href="/guides/twitter">Adding a Twitter proof</a><br>
-                <a href="/guides/lobsters">Adding a Lobste.rs proof</a><br>
+    <a href="/guides/lobsters">Adding a Lobste.rs proof</a><br>
-                <a href="/guides/hackernews">Adding a Hackernews proof</a><br>
+    <a href="/guides/hackernews">Adding a Hackernews proof</a><br>
-                <a href="/guides/reddit">Adding a Reddit proof</a><br>
+    <a href="/guides/reddit">Adding a Reddit proof</a><br>
-                <a href="/guides/github">Adding a Github proof</a><br>
+    <a href="/guides/github">Adding a Github proof</a><br>
-                <a href="/guides/xmpp">Adding a XMPP proof</a><br>
+    <a href="/guides/xmpp">Adding a XMPP proof</a><br>
-            </div>
+</div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>

views/index.php

@@ -1,66 +1,29 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>Keyoxide</h1>
-            <h1>Keyoxide</h1>
+<div class="content">
-            <div class="content">
+    <h2>PGP actions</h2>
-                <h2>PGP actions</h2>
+    <p>
-                <p>
+        <a class="bigBtn" href="/verify">verify signature</a>
-                    <a class="bigBtn" href="/verify">verify signature</a>
+        <a class="bigBtn" href="/encrypt">encrypt message</a>
-                    <a class="bigBtn" href="/encrypt">encrypt message</a>
+        <a class="bigBtn" href="/proofs">verify proofs</a>
-                    <a class="bigBtn" href="/proofs">verify proofs</a>
+    </p>
-                </p>
+    <h2>Utilities</h2>
-                <h2>Utilities</h2>
+    <p>
-                <p>
+        <a class="bigBtn" href="/util/wkd">wkd</a>
-                    <a class="bigBtn" href="/util/wkd">wkd</a>
+    </p>
-                </p>
+    <h2>Getting started</h2>
-                <h2>Getting started</h2>
+    <p>
-                <p>
+        <a class="bigBtn" href="/guides">guides</a>
-                    <a class="bigBtn" href="/guides">guides</a>
+        <a class="bigBtn" href="/faq">FAQ</a>
-                    <a class="bigBtn" href="/faq">FAQ</a>
+    </p>
-                </p>
+    <h2>About</h2>
-                <h2>About</h2>
+    <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans.</p>
-                <p><a href="/">Keyoxide</a> is a lightweight and FOSS solution to make basic cryptography operations accessible to regular humans.</p>
+    <p>
-                <p>
+        Made by <a href="https://yarmo.eu">Yarmo Mackenbach</a>.
-                    Made by <a href="https://yarmo.eu">Yarmo Mackenbach</a>.
+        <br>
-                    <br>
+        Code hosted on <a href="https://codeberg.org/yarmo/keyoxide">Codeberg</a> (<a href="https://drone.private.foss.best/yarmo/keyoxide/">drone CI/CD</a>).
-                    Code hosted on <a href="https://codeberg.org/yarmo/keyoxide">Codeberg</a> (<a href="https://drone.private.foss.best/yarmo/keyoxide/">drone CI/CD</a>).
+        <br>
-                    <br>
+        Uses <a href="https://github.com/openpgpjs/openpgpjs">openpgp.js</a> (version <a href="https://github.com/openpgpjs/openpgpjs/releases/tag/v4.10.4">4.10.4</a>).
-                    Uses <a href="https://github.com/openpgpjs/openpgpjs">openpgp.js</a> (version <a href="https://github.com/openpgpjs/openpgpjs/releases/tag/v4.10.4">4.10.4</a>).
+    </p>
-                </p>
+</div>
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-    </body>
-</html>

views/profile.php

@@ -9,10 +9,9 @@
     </head>
     <body>
         <div class="container container--profile">
-            <!-- <h1 id="profileName"></h1> -->
             <div class="content">
-                <span id="profileUid" style="display: none;">%UID%</span>
+                <span id="profileUid" style="display: none;"><?=$this->escape($uid)?></span>
-                <span id="profileMode" style="display: none;">%MODE%</span>
+                <span id="profileMode" style="display: none;"><?=$this->escape($mode)?></span>
                 <div id="profileHeader">
                     <img id="profileAvatar" src="/assets/img/avatar_placeholder.png" alt="avatar" style="display: none">
                     <p id="profileName"></p>
@@ -21,9 +20,7 @@
             </div>
 
             <footer>
-                <p>
+                <p>Page generated by <a href="/">Keyoxide</a>.</p>
-                    Page generated by <a href="/">Keyoxide</a>.
-                </p>
             </footer>
         </div>
     </body>

views/proofs.php

@@ -1,58 +1,34 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Profile - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>Proofs</h1>
-            <h1>Proofs</h1>
+<div class="content">
-            <div class="content">
+    <form id="form-proofs" method="post">
-                <form id="form-proofs" method="post">
+        <h3>Public key</h3>
-                    <h3>Public Key (1: plaintext)</h3>
+        <label for="modeSelect">Mode: </label>
-                    <textarea name="publicKey" id="publicKey"></textarea>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
-                    <h3>Public Key (2: web key directory)</h3>
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
-                    <h3>Public Key (3: HKP server)</h3>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
-                    <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/">
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
-                    <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="%HKP_UID%">
+        </select>
-                    <h3>Result</h3>
+        <div class="modesContainer">
-                    <p id="result">Click on the button below.</p>
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
-                    <p id="resultContent"></p>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
-                    <input type="submit" class="bigBtn" name="submit" value="VERIFY PROOFS">
+            </div>
-                </form>
+            <div class='modes modes--wkd <?php if ($mode=="wkd"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="wkd_input" id="wkd_input" placeholder="name@domain.org" value="<?=$this->escape($wkd_input)?>">
+            </div>
+            <div class='modes modes--hkp <?php if ($mode=="hkp"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($hkp_input)?>">
+                <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/ (default)">
+            </div>
+            <div class='modes modes--plaintext <?php if ($mode=="plaintext"): ?>modes--visible<?php endif ?>'>
+                <textarea name="plaintext_input" id="plaintext_input"></textarea>
             </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
         </div>
-
+        <h3>Result</h3>
-
+        <p id="result"></p>
-    </body>
+        <p id="resultContent"></p>
-    <script src="/assets/openpgp.min.js"></script>
+        <input type="submit" class="bigBtn" name="submit" value="VERIFY PROOFS">
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
+    </form>
-</html>
+</div>

views/template.base.php

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="shortcut icon" href="/favicon.png">
-        <title>%TITLE% - Keyoxide</title>
+        <title><?=$this->e($title)?>Keyoxide</title>
         <link rel="stylesheet" href="/assets/styles.css">
     </head>
     <body>
@@ -21,10 +21,7 @@
         </header>
 
         <div class="container">
-            <h1>%TITLE%</h1>
+            <?=$this->section('content')?>
-            <div class="content">
-                %CONTENT%
-            </div>
 
             <footer>
                 <p>
@@ -40,4 +37,7 @@
         </div>
 
     </body>
+    <script src="/assets/openpgp.min.js"></script>
+    <script src="/assets/spark-md5.min.js"></script>
+    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
 </html>

views/util/wkd.php

@@ -1,51 +1,12 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>WKD utilities - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>WKD Local Part</h1>
-            <h1>WKD Local Part</h1>
+<div class="content">
-            <div class="content">
+    <form id="form-util-wkd" method="post">
-                <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>
-                    <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>
-                    <h3>Input</h3>
+        <input type="text" name="input" id="input" placeholder="Username">
-                    <input type="text" name="input" id="input" placeholder="Username">
+        <h3>Output</h3>
-                    <h3>Output</h3>
+        <input type="text" name="output" id="output" placeholder="Waiting for input..." readonly>
-                    <input type="text" name="output" id="output" placeholder="Waiting for input..." readonly>
+    </form>
-                </form>
+</div>
-            </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
-        </div>
-
-
-    </body>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>

views/verify.php

@@ -1,60 +1,36 @@
-<!DOCTYPE html>
+<?php $this->layout('template.base', ['title' => $title]) ?>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="shortcut icon" href="/favicon.png">
-        <title>Verify - Keyoxide</title>
-        <link rel="stylesheet" href="/assets/styles.css">
-    </head>
-    <body>
-        <header>
-            <div class="container">
-                <a href="/">Keyoxide</a>
-                <div class="spacer"></div>
-                <nav>
-                    <a href="/verify">verify</a>
-                    <a href="/encrypt">encrypt</a>
-                    <a href="/proofs">proofs</a>
-                </nav>
-            </div>
-        </header>
 
-        <div class="container">
+<h1>Verify</h1>
-            <h1>Verify</h1>
+<div class="content">
-            <div class="content">
+    <form id="form-verify" method="post">
-                <form id="form-verify" method="post">
+        <h3>Signer</h3>
-                    <h3>Signature</h3>
+        <label for="modeSelect">Mode: </label>
-                    <textarea name="signature" id="signature"></textarea>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
-                    <h3>Public Key (1: plaintext)</h3>
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
-                    <textarea name="publicKey" id="publicKey"></textarea>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
-                    <h3>Public Key (2: web key directory)</h3>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
-                    <h3>Public Key (3: HKP server)</h3>
+        </select>
-                    <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/">
+        <div class="modesContainer">
-                    <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="%HKP_UID%">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
-                    <h3>Result</h3>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
-                    <p id="result">Click on the button below.</p>
+            </div>
-                    <p id="resultContent"></p>
+            <div class='modes modes--wkd <?php if ($mode=="wkd"): ?>modes--visible<?php endif ?>'>
-                    <input type="submit" class="bigBtn" name="submit" value="VERIFY SIGNATURE">
+                <input type="text" name="wkd_input" id="wkd_input" placeholder="name@domain.org" value="<?=$this->escape($wkd_input)?>">
-                </form>
+            </div>
+            <div class='modes modes--hkp <?php if ($mode=="hkp"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($hkp_input)?>">
+                <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/ (default)">
+            </div>
+            <div class='modes modes--plaintext <?php if ($mode=="plaintext"): ?>modes--visible<?php endif ?>'>
+                <textarea name="plaintext_input" id="plaintext_input"></textarea>
             </div>
-
-            <footer>
-                <p>
-                    Sitemap:
-                    <a href="/">index</a> -
-                    <a href="/encrypt">encrypt</a> -
-                    <a href="/verify">verify</a> -
-                    <a href="/proofs">proofs</a> -
-                    <a href="/guides">guides</a> -
-                    <a href="/faq">faq</a>
-                </p>
-            </footer>
         </div>
-
+        <h3>Signature</h3>
-
+        <textarea name="signature" id="signature"></textarea>
-    </body>
+        <h3>Result</h3>
-    <script src="/assets/openpgp.min.js"></script>
+        <p id="result"></p>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
+        <p id="resultContent"></p>
-</html>
+        <input type="submit" class="bigBtn" name="submit" value="VERIFY SIGNATURE">
+    </form>
+</div>