Remove jQuery and jsRender

example.html

@@ -134,34 +134,29 @@
 </footer>
 
 
-<script
-        src="https://code.jquery.com/jquery-3.2.1.min.js"
-        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-        crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
 
 <script>
-    $(function () {
-        $('#staticrypt-form').submit(function (e) {
-            e.preventDefault();
 
-            var passphrase = $('#staticrypt-password').val();
-            var encryptedMsg = 'bf73a9eb1c0ef239c83d262470f6a1a55b024a867a41199f73a33b82d73f6855U2FsdGVkX1/GeUxTnFMh1/3gx6bj1Cb4/bQxA/2toJZe8tX6H4azBaCfva11oo9Klj4NIYglL2ln6tQdBGEFHLCRy1ib6Fd89heNRoE30ua/AN0jvfxGP81ZOOzjAeSGb3gDUqOpgobXNz0rTw1z3cl++Sj9yrrOePbhmu7tPEJhz9NT50iAakdHNqm4fOjU4UiJFYBRcKERg0rXG9mHFg==';
+    document.getElementById('staticrypt-form').addEventListener('submit', function (e) {
+        e.preventDefault();
 
-            var encryptedHMAC = encryptedMsg.substring(0, 64);
-            var encryptedHTML = encryptedMsg.substring(64);
+        var passphrase = document.getElementById('staticrypt-password').value
+        var encryptedMsg = 'bf73a9eb1c0ef239c83d262470f6a1a55b024a867a41199f73a33b82d73f6855U2FsdGVkX1/GeUxTnFMh1/3gx6bj1Cb4/bQxA/2toJZe8tX6H4azBaCfva11oo9Klj4NIYglL2ln6tQdBGEFHLCRy1ib6Fd89heNRoE30ua/AN0jvfxGP81ZOOzjAeSGb3gDUqOpgobXNz0rTw1z3cl++Sj9yrrOePbhmu7tPEJhz9NT50iAakdHNqm4fOjU4UiJFYBRcKERg0rXG9mHFg==';
 
-            var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase)).toString();
+        var encryptedHMAC = encryptedMsg.substring(0, 64);
+        var encryptedHTML = encryptedMsg.substring(64);
 
-            if (decryptedHMAC !== encryptedHMAC) {
-                alert('Bad passphrase !');
-                return;
-            }
+        var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase)).toString();
 
-            var plainHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
+        if (decryptedHMAC !== encryptedHMAC) {
+            alert('Bad passphrase !');
+            return;
+        }
 
-            document.write(plainHTML);
-        });
+        var plainHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
+
+        document.write(plainHTML);
     });
 </script>
 </body>

index.html

@@ -123,61 +123,61 @@ Your encrypted string</pre>
     </div>
 </div>
 
-<script
-src="https://code.jquery.com/jquery-3.2.1.min.js"
-integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-crossorigin="anonymous"></script>
-<script src="jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.84/jsrender.js"></script>
 
 <script>
-    $(function () {
+    var renderTemplate = function (tpl, data) {
+        return tpl.replace(/{(.*?)}/g, function (_, key) {
+            return data && data[key] || '';
+        });
+    }
 
-        var renderTemplate = function (data) {
+    var renderTemplate = function (data) {
+        var request = new XMLHttpRequest();
+        request.open('GET', 'password_template.html', true);
+        request.onload = function() {
+            var renderedTmpl = renderTemplate(request.responseText, data);
 
-            $.when($.get('password_template.html'))
-                .done(function (tmplData) {
-                    $.templates({tmpl: tmplData});
+            var downloadLink = document.querySelector('a.download');
+            downloadLink.href = 'data:attachment/text,' + encodeURIComponent(renderedTmpl);
+            downloadLink.removeAttribute('disabled');
+        };
+        request.send();
+    };
 
-                    var renderedTmpl = $.render.tmpl(data);
+    document.getElementById('encrypt_form').addEventListener('submit', function (e) {
+        e.preventDefault();
 
-                    var downloadLink = $('a.download');
-                    downloadLink.attr('href', 'data:attachment/text,' + encodeURIComponent(renderedTmpl));
-                    downloadLink.removeAttr('disabled');
-                });
+        var unencrypted = document.getElementById('unencrypted_html').value;
+        var passphrase = document.getElementById('passphrase').value;
+
+        var encrypted = CryptoJS.AES.encrypt(unencrypted, passphrase);
+        var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();
+        var encryptedMsg = hmac + encrypted;
+
+        var pageTitle = document.getElementById('title').value.trim();
+        var instructions = document.getElementById('instructions').value;
+        var data = {
+            title: pageTitle ? pageTitle : 'Protected Page',
+            instructions: instructions ? instructions : '',
+            encrypted: encryptedMsg
         };
 
-        $('#encrypt_form').submit(function (e) {
-            e.preventDefault();
+        document.getElementById('encrypted_html_display').textContent = encryptedMsg;
 
-            var unencrypted = $('#unencrypted_html').val();
-            var passphrase = $('#passphrase').val();
+        renderTemplate(data);
+    });
 
-            var encrypted = CryptoJS.AES.encrypt(unencrypted, passphrase);
-            var hmac = CryptoJS.HmacSHA256(encrypted.toString(), CryptoJS.SHA256(passphrase)).toString();
-            var encryptedMsg = hmac + encrypted;
+    document.getElementById('toggle-extra-option')
+    .addEventListener('click', function (e) {
+        e.preventDefault();
+        document.getElementById('extra-options').classList.toggle('hidden');
+    });
 
-            var pageTitle = $.trim($('#title').val());
-            var instructions = $('#instructions').val();
-            var data = {
-                title: pageTitle ? pageTitle : 'Protected Page',
-                instructions: instructions ? instructions : '',
-                encrypted: encryptedMsg
-            };
-
-            $('#encrypted_html_display').text(encryptedMsg);
-
-            renderTemplate(data);
-        });
-
-        $('#toggle-extra-option').click(function () {
-            $('#extra-options').toggleClass('hidden');
-        });
-
-        $('#toggle-concept').click(function () {
-            $('#concept').toggleClass('hidden');
-        });
+    document.getElementById('toggle-concept')
+    .addEventListener('click', function (e) {
+        e.preventDefault();
+        document.getElementById('concept').classList.toggle('hidden');
     });
 </script>
 

password_template.html

@@ -2,7 +2,7 @@
 <html class="staticrypt-html">
 <head>
     <meta charset="utf-8">
-    <title>{{:title}}</title>
+    <title>{title}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- do not cache this page -->
@@ -112,8 +112,8 @@
 <div class="staticrypt-page">
     <div class="staticrypt-form">
         <div class="staticrypt-instructions">
-            <p class="staticrypt-title">{{:title}}</p>
-            <p>{{:instructions}}</p>
+            <p class="staticrypt-title">{title}</p>
+            <p>{instructions}</p>
         </div>
 
         <hr class="staticrypt-hr">
@@ -134,34 +134,28 @@
 </footer>
 
 
-<script
-        src="https://code.jquery.com/jquery-3.2.1.min.js"
-        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-        crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
 
 <script>
-    $(function () {
-        $('#staticrypt-form').submit(function (e) {
-            e.preventDefault();
+    document.getElementById('staticrypt-form').addEventListener('submit', function (e) {
+        e.preventDefault();
 
-            var passphrase = $('#staticrypt-password').val();
-            var encryptedMsg = '{{:encrypted}}';
+        var passphrase = document.getElementById('staticrypt-password').value
+        var encryptedMsg = '{encrypted}';
 
-            var encryptedHMAC = encryptedMsg.substring(0, 64);
-            var encryptedHTML = encryptedMsg.substring(64);
+        var encryptedHMAC = encryptedMsg.substring(0, 64);
+        var encryptedHTML = encryptedMsg.substring(64);
 
-            var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase)).toString();
+        var decryptedHMAC = CryptoJS.HmacSHA256(encryptedHTML, CryptoJS.SHA256(passphrase)).toString();
 
-            if (decryptedHMAC !== encryptedHMAC) {
-                alert('Bad passphrase !');
-                return;
-            }
+        if (decryptedHMAC !== encryptedHMAC) {
+            alert('Bad passphrase !');
+            return;
+        }
 
-            var plainHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
+        var plainHTML = CryptoJS.AES.decrypt(encryptedHTML, passphrase).toString(CryptoJS.enc.Utf8);
 
-            document.write(plainHTML);
-        });
+        document.write(plainHTML);
     });
 </script>
 </body>