Updated contact page to use templating engine.

includes/contact.js → blog/contact.js

@@ -38,6 +38,10 @@ const CAPTCHA_SECRET = config.CAPTCHA_SECRET;
 const EMAIL_PASSWORD = config.EMAIL_PASSWORD;
 
 
+const TEMPLATE_FILE = "blog/contact.html";
+const whiskers = require('whiskers');
+
+
 /**
  * Verifies if the captcha response recieved from the post data was
  * valid, or are bots trying to get around the captcha
@@ -142,7 +146,7 @@ const sendEmail = function(name, email, message)
  * @param request -- main express request
  * @returns {Promise} renders the html of the contact widget
  */
-const processContactPage = function(request)
+const processContactPage = function(request, templateContext)
 {
     return new Promise(function(resolve, reject)
     {
@@ -161,21 +165,22 @@ const processContactPage = function(request)
                 {
                     if(valid)
                     {
-                        resolve(utils.include("includes/html/messageSent.html"));
-
+                        templateContext.messageSent = true;
+                        resolve();
                         sendEmail(data.name, data.email, data.message);
                     }
                     else
                     {
-                        resolve(utils.include("includes/html/invalidCaptcha.html"));
+                        resolve();
                     }
                 });
             }
             else
             {
-                resolve(utils.include("includes/html/contact.html"));
+                resolve();
             }
 
+
         }).catch(function(err)
         {
             reject(err);
@@ -198,12 +203,18 @@ module.exports =
         main: function(request, result)
         {
             result.writeHead(200, {'Content-Type': 'text/html'});
-            Promise.all([includes.printAdminHeader(),
+
+            console.log("eh");
+            var templateContext = Object();
+            Promise.all([includes.fetchTemplate(TEMPLATE_FILE),
                 processContactPage(request),
-                require("../sidebar/sidebar.js").main(),
-                includes.printFooter()]).then(function(content)
+                includes.printHeader(templateContext),
+                includes.printFooter(templateContext),
+                require("./sidebar.js").main(templateContext)])
+                .then(function (content)
             {
-                result.write(content.join(''));
+                const html = whiskers.render(content[0], templateContext);
+                result.write(html);
                 result.end();
 
             }).catch(function(err)

includes/html/contact.html

@@ -1,74 +0,0 @@
-<div class='col-md-8'>
-
-    <!--Form with header-->
-
-    <form action="/contact" method="post">
-        <div class="card border-primary rounded-0">
-            <div class="card-header p-0">
-                <div class="bg-info text-white text-center py-2">
-                    <h3><i class="fa fa-envelope"></i>Contact Me</h3>
-                    <p class="m-0">I would love to hear from you.</p>
-                </div>
-            </div>
-            <div class="card-body p-3">
-
-                <!--Body-->
-                <div class="form-group">
-                    <div class="input-group mb-2">
-                        <div class="input-group-prepend">
-                            <div class="input-group-text"><svg id="i-user" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-                                <path d="M22 11 C22 16 19 20 16 20 13 20 10 16 10 11 10 6 12 3 16 3 20 3 22 6 22 11 Z M4 30 L28 30 C28 21 22 20 16 20 10 20 4 21 4 30 Z" />
-                            </svg></div>
-                        </div>
-                        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <div class="input-group mb-2">
-                        <div class="input-group-prepend">
-                            <div class="input-group-text"><svg id="i-mail" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-                                <path d="M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6" />
-                            </svg></div>
-                        </div>
-                        <input type="email" class="form-control" id="email" name="email" placeholder="example@gmail.com" required>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <div class="input-group mb-2">
-                        <div class="input-group-prepend">
-                            <div class="input-group-text"><svg id="i-msg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-                                <path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
-                            </svg></div>
-                        </div>
-                        <textarea class="form-control" placeholder="Message" name="message" required></textarea>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <div class="g-recaptcha" data-sitekey="6LceWF8UAAAAAIsd7F6iY_Pywt4fJsJlFNPtEgi9"></div>
-                </div>
-
-                <div class="text-center">
-                    <input type="submit" value="Send" class="btn btn-info btn-block rounded-0 py-2">
-                </div>
-            </div>
-
-        </div>
-    </form>
-</div>
-<br>
-<br>
-
-<script src='https://www.google.com/recaptcha/api.js'></script>
-
-<script>
-    $("form").submit(function(event) {
-
-        var recaptcha = $("#g-recaptcha-response").val();
-        if (recaptcha === "") {
-            event.preventDefault();
-            alert("Please check the recaptcha");
-        }
-    });
-</script>

includes/html/invalidCaptcha.html

@@ -1,4 +0,0 @@
-<div class='col-md-8'>
-    <h1>Invalid Captcha</h1>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-</div>

sites/blog.js

@@ -41,7 +41,7 @@ module.exports=
             }
             else if (filename.includes("/contact"))
             {
-                require("../includes/contact.js").main(request, result);
+                require("../blog/contact.js").main(request, result);
             }
             else
             {
@@ -79,7 +79,7 @@ module.exports=
                         includes.printHeader(templateContext),
                         includes.printFooter(templateContext),
                         require(file).main(filename, request, templateContext),
-                        require("../sidebar/sidebar.js").main(templateContext)])
+                        require("../blog/sidebar.js").main(templateContext)])
                             .then(function (content)
                     {
                         var html = whiskers.render(content[0], templateContext);