Remove jQuery and jsRender

example.html

@@ -134,18 +134,14 @@
 </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) {
+    document.getElementById('staticrypt-form').addEventListener('submit', function (e) {
         e.preventDefault();
 
-            var passphrase = $('#staticrypt-password').val();
+        var passphrase = document.getElementById('staticrypt-password').value
         var encryptedMsg = 'bf73a9eb1c0ef239c83d262470f6a1a55b024a867a41199f73a33b82d73f6855U2FsdGVkX1/GeUxTnFMh1/3gx6bj1Cb4/bQxA/2toJZe8tX6H4azBaCfva11oo9Klj4NIYglL2ln6tQdBGEFHLCRy1ib6Fd89heNRoE30ua/AN0jvfxGP81ZOOzjAeSGb3gDUqOpgobXNz0rTw1z3cl++Sj9yrrOePbhmu7tPEJhz9NT50iAakdHNqm4fOjU4UiJFYBRcKERg0rXG9mHFg==';
 
         var encryptedHMAC = encryptedMsg.substring(0, 64);
@@ -162,7 +158,6 @@
 
         document.write(plainHTML);
     });
-    });
 </script>
 </body>
 </html>

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 request = new XMLHttpRequest();
+        request.open('GET', 'password_template.html', true);
+        request.onload = function() {
+            var renderedTmpl = renderTemplate(request.responseText, data);
 
-            $.when($.get('password_template.html'))
+            var downloadLink = document.querySelector('a.download');
-                .done(function (tmplData) {
+            downloadLink.href = 'data:attachment/text,' + encodeURIComponent(renderedTmpl);
-                    $.templates({tmpl: tmplData});
+            downloadLink.removeAttribute('disabled');
-
+        };
-                    var renderedTmpl = $.render.tmpl(data);
+        request.send();
-
-                    var downloadLink = $('a.download');
-                    downloadLink.attr('href', 'data:attachment/text,' + encodeURIComponent(renderedTmpl));
-                    downloadLink.removeAttr('disabled');
-                });
     };
 
-        $('#encrypt_form').submit(function (e) {
+    document.getElementById('encrypt_form').addEventListener('submit', function (e) {
         e.preventDefault();
 
-            var unencrypted = $('#unencrypted_html').val();
+        var unencrypted = document.getElementById('unencrypted_html').value;
-            var passphrase = $('#passphrase').val();
+        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 = $.trim($('#title').val());
+        var pageTitle = document.getElementById('title').value.trim();
-            var instructions = $('#instructions').val();
+        var instructions = document.getElementById('instructions').value;
         var data = {
             title: pageTitle ? pageTitle : 'Protected Page',
             instructions: instructions ? instructions : '',
             encrypted: encryptedMsg
         };
 
-            $('#encrypted_html_display').text(encryptedMsg);
+        document.getElementById('encrypted_html_display').textContent = encryptedMsg;
 
         renderTemplate(data);
     });
 
-        $('#toggle-extra-option').click(function () {
+    document.getElementById('toggle-extra-option')
-            $('#extra-options').toggleClass('hidden');
+    .addEventListener('click', function (e) {
+        e.preventDefault();
+        document.getElementById('extra-options').classList.toggle('hidden');
     });
 
-        $('#toggle-concept').click(function () {
+    document.getElementById('toggle-concept')
-            $('#concept').toggleClass('hidden');
+    .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 class="staticrypt-title">{title}</p>
-            <p>{{:instructions}}</p>
+            <p>{instructions}</p>
         </div>
 
         <hr class="staticrypt-hr">
@@ -134,19 +134,14 @@
 </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 () {
+    document.getElementById('staticrypt-form').addEventListener('submit', function (e) {
-        $('#staticrypt-form').submit(function (e) {
         e.preventDefault();
 
-            var passphrase = $('#staticrypt-password').val();
+        var passphrase = document.getElementById('staticrypt-password').value
-            var encryptedMsg = '{{:encrypted}}';
+        var encryptedMsg = '{encrypted}';
 
         var encryptedHMAC = encryptedMsg.substring(0, 64);
         var encryptedHTML = encryptedMsg.substring(64);
@@ -162,7 +157,6 @@
 
         document.write(plainHTML);
     });
-    });
 </script>
 </body>
 </html>