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("#wkd_input").value;
+                break;
+
+            case "hkp":
                 opts.input = document.body.querySelector("#hkp_input").value;
                 opts.server =  document.body.querySelector("#hkp_server").value;
-            opts.mode = "hkp";
+                break;
-        } else {
+
+            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("#wkd_input").value;
+                break;
+
+            case "hkp":
                 opts.input = document.body.querySelector("#hkp_input").value;
                 opts.server =  document.body.querySelector("#hkp_server").value;
-            opts.mode = "hkp";
+                break;
-        } else {
+
-            opts.mode = "signature";
+            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;
+
+            case "wkd":
+                opts.input = document.body.querySelector("#wkd_input").value;
+                break;
+
+            case "hkp":
                 opts.input = document.body.querySelector("#hkp_input").value;
                 opts.server =  document.body.querySelector("#hkp_server").value;
-            opts.mode = "hkp";
+                break;
-        } else {
+
-            opts.mode = null;
+            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">
         <h3>Recipient</h3>
-                    <label for="mode">Mode: </label>
+        <label for="modeSelect">Mode: </label>
-                    <select class="mode" name="mode" id="mode">
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
-                        <option value="auto" %MODE_AUTO%>Autodetect</option>
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
-                        <option value="wkd" %MODE_WKD%>Web Key Directory</option>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
-                        <option value="hkp" %MODE_HKP%>Keyservers</option>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
-                        <option value="plaintext" %MODE_PT%>Plaintext</option>
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
         </select>
-                    <div class="modes modes--auto modes--hkp" style="display: none">
+        <div class="modesContainer">
-                        <input type="text" name="wkd" id="wkd" placeholder="Email / key id / fingerprint" value="%WKDUID%">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
+            </div>
+            <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>
-                    <div class="modes modes--auto modes--hkp" style="display: none">
-                        <input type="text" name="wkd" id="wkd" placeholder="Email / key id / fingerprint" value="%WKDUID%">
         </div>
         <h3>Message</h3>
         <textarea name="message" id="message"></textarea>
-                    <!-- <h3>Public Key (1: plaintext)</h3>
-                    <textarea name="publicKey" id="publicKey"></textarea>
-                    <h3>Public Key (2: web key directory)</h3>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
-                    <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>
+</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 src="/assets/openpgp.min.js"></script>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>

views/faq.php

@@ -1,28 +1,7 @@
-<!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>
     <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>
 
@@ -81,20 +60,4 @@
         <li>Write more guides</li>
         <li>Integrate other encryption programs</li>
     </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,28 +1,7 @@
-<!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>
     <a href="/guides/verify">Verifying a signature</a><br>
     <a href="/guides/encrypt">Encrypting a message</a><br>
@@ -46,20 +25,4 @@
     <a href="/guides/reddit">Adding a Reddit proof</a><br>
     <a href="/guides/github">Adding a Github 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,28 +1,7 @@
-<!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>
     <p>
         <a class="bigBtn" href="/verify">verify signature</a>
@@ -47,20 +26,4 @@
         <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>).
     </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">
-                    <h3>Public Key (1: plaintext)</h3>
+        <h3>Public key</h3>
-                    <textarea name="publicKey" id="publicKey"></textarea>
+        <label for="modeSelect">Mode: </label>
-                    <h3>Public Key (2: web key directory)</h3>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
-                    <h3>Public Key (3: HKP server)</h3>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
-                    <input type="text" name="hkp_server" id="hkp_server" placeholder="https://keys.openpgp.org/">
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
-                    <input type="text" name="hkp_input" id="hkp_input" placeholder="Email / key id / fingerprint" value="%HKP_UID%">
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
+        </select>
+        <div class="modesContainer">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
+            </div>
+            <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>
+        </div>
         <h3>Result</h3>
-                    <p id="result">Click on the button below.</p>
+        <p id="result"></p>
         <p id="resultContent"></p>
         <input type="submit" class="bigBtn" name="submit" value="VERIFY PROOFS">
     </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 src="/assets/openpgp.min.js"></script>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>

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,28 +1,7 @@
-<!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">
         <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>
@@ -30,22 +9,4 @@
         <h3>Output</h3>
         <input type="text" name="output" id="output" placeholder="Waiting for input..." readonly>
     </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">
+        <h3>Signer</h3>
+        <label for="modeSelect">Mode: </label>
+        <select class="modeSelect" name="modeSelect" id="modeSelect">
+            <option value="auto" <?php if ($mode=="auto"): ?>selected<?php endif ?>>Autodetect</option>
+            <option value="wkd" <?php if ($mode=="wkd"): ?>selected<?php endif ?>>Web Key Directory</option>
+            <option value="hkp" <?php if ($mode=="hkp"): ?>selected<?php endif ?>>Keyserver</option>
+            <option value="plaintext" <?php if ($mode=="plaintext"): ?>selected<?php endif ?>>Plaintext</option>
+        </select>
+        <div class="modesContainer">
+            <div class='modes modes--auto <?php if ($mode=="auto"): ?>modes--visible<?php endif ?>'>
+                <input type="text" name="auto_input" id="auto_input" placeholder="Email / key id / fingerprint" value="<?=$this->escape($auto_input)?>">
+            </div>
+            <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>
+        </div>
         <h3>Signature</h3>
         <textarea name="signature" id="signature"></textarea>
-                    <h3>Public Key (1: plaintext)</h3>
-                    <textarea name="publicKey" id="publicKey"></textarea>
-                    <h3>Public Key (2: web key directory)</h3>
-                    <input type="text" name="wkd" id="wkd" placeholder="name@domain.com" value="%WKD_UID%">
-                    <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>
-                    <p id="result">Click on the button below.</p>
+        <p id="result"></p>
         <p id="resultContent"></p>
         <input type="submit" class="bigBtn" name="submit" value="VERIFY SIGNATURE">
     </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 src="/assets/openpgp.min.js"></script>
-    <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
-</html>