From 86b5aec03313593cd2009701a8189438c859619d Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Tue, 1 Jan 2019 13:25:21 +0100
Subject: [PATCH] fixed some frontend issues (and reverted something I
 mistakenly added)

---
 assets/css/pretendo-auth.css   | 10 ----------
 assets/css/pretendo-common.css | 19 +++++++++++++++++++
 assets/js/{auth.js => api.js}  | 27 +++++++++++++++++++++++++++
 models/blog-post.js            |  1 +
 routes/pnid.js                 |  6 +++---
 views/contact.hbs              | 16 ++++++++++------
 views/login.hbs                |  2 +-
 views/post.hbs                 |  2 +-
 views/register.hbs             |  2 +-
 9 files changed, 63 insertions(+), 22 deletions(-)
 rename assets/js/{auth.js => api.js} (66%)

diff --git a/assets/css/pretendo-auth.css b/assets/css/pretendo-auth.css
index 0c31312..1eb5953 100644
--- a/assets/css/pretendo-auth.css
+++ b/assets/css/pretendo-auth.css
@@ -42,14 +42,4 @@ body footer .content {
 .card .content .lowText {
     text-align: right;
     color: #707070;
-}
-
-.error {
-    background-color: #eea9a9;
-    border-left: 3px solid #d83434;
-    padding: 1em;
-    color: rgba(0, 0, 0, 0.7);
-}
-.error.hide {
-    display: none;
 }
\ No newline at end of file
diff --git a/assets/css/pretendo-common.css b/assets/css/pretendo-common.css
index 1998aed..c6ea80a 100644
--- a/assets/css/pretendo-common.css
+++ b/assets/css/pretendo-common.css
@@ -389,6 +389,25 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
 	flex: 1;
 }
 
+.error {
+    background-color: #eea9a9;
+    border-left: 3px solid #d83434;
+    padding: 1em;
+    color: rgba(0, 0, 0, 0.7);
+}
+.error.hide {
+    display: none;
+}
+.success {
+    background-color: #9fc983;
+    border-left: 3px solid #337419;
+    padding: 1em;
+    color: rgba(0, 0, 0, 0.7);
+}
+.success.hide {
+    display: none;
+}
+
 @media screen and (max-width: 500px) {
 	section.bigCardWrapper {
 		padding: 0;
diff --git a/assets/js/auth.js b/assets/js/api.js
similarity index 66%
rename from assets/js/auth.js
rename to assets/js/api.js
index 4badf65..385da2c 100644
--- a/assets/js/auth.js
+++ b/assets/js/api.js
@@ -17,6 +17,11 @@ function showErrorPopup(errorText) {
 	document.getElementById('errorBox').classList.remove('hide');
 }
 
+function showSuccessPopup(successText) {
+	document.getElementById('successBox').innerHTML = successText;
+	document.getElementById('successBox').classList.remove('hide');
+}
+
 function login() {
 	var xhr = postAjax('/api/v1/login', {
 		email: document.getElementById('email_input').value,
@@ -53,4 +58,26 @@ function register() {
 			showErrorPopup(response.errors);
 		}
 	}
+}
+
+function sendMessage() {
+	var xhr = postAjax('/api/v1/sendmessage', {
+		email: document.getElementById('email_input').value,
+		subject: document.getElementById('subject_input').value,
+		message: document.getElementById('message_input').value
+	});
+	xhr.onload = function () {
+		if (xhr.responseText.charAt(0) !== "{") {
+			return showErrorPopup('Whoops, something went wrong. Try again later.');
+		}
+		response = JSON.parse(xhr.responseText);
+		if (response.success === true) {
+			document.getElementById('email_input').value = '';
+			document.getElementById('subject_input').value = '';
+			document.getElementById('message_input').value = '';
+			return showSuccessPopup('Your message has been sent.');
+		} else if (response.errors) {
+			showErrorPopup(response.errors);
+		}
+	}
 }
\ No newline at end of file
diff --git a/models/blog-post.js b/models/blog-post.js
index 2c2aaeb..b2ccce5 100644
--- a/models/blog-post.js
+++ b/models/blog-post.js
@@ -63,6 +63,7 @@ blogPostSchema.methods.postTemplate = function(callback) {
 			content: self.content,
 			title: self.name,
 			date: self.meta.date,
+			dateString: moment(self.meta.date).format('YYYY-MM-DD'),
 			category: self.meta.category,
 			author: author.authorTemplate()
 		});
diff --git a/routes/pnid.js b/routes/pnid.js
index b8beb90..c7eb280 100644
--- a/routes/pnid.js
+++ b/routes/pnid.js
@@ -101,15 +101,15 @@ router.post('/api/v1/login', passport.authenticate('PNIDStrategy'), function (re
 *		errors: Strings[messages]
 *	}
 */
-router.post('/api/v1/register'/*, recaptcha.middleware.verify*/, async (request, response) => {
+router.post('/api/v1/register', recaptcha.middleware.verify, async (request, response) => {
 	if (!request.body) {
 		return apiHelper.sendApiGenericError(response);
 	}
 
-	/*if (request.recaptcha.error) {
+	if (request.recaptcha.error) {
 		logger.log('warn', `[reCaptcha ERROR] ${request.recaptcha.error} | IP: ${request.ip} | Data: ${JSON.stringify(request.body)}`);
 		return apiHelper.sendApiError(response, 500, ['Captcha error']);
-	}*/
+	}
 
 	const { email, password, confirm_password, username } = request.body;
 
diff --git a/views/contact.hbs b/views/contact.hbs
index 9dfa526..c976f45 100644
--- a/views/contact.hbs
+++ b/views/contact.hbs
@@ -4,6 +4,8 @@
         {{> head-common }}
         <!-- page specific -->
         <link rel="stylesheet" href="/assets/css/pretendo-contact.css">
+        <!-- scripts -->
+        <script src="/assets/js/api.js" defer></script>
     </head>
     <body class="flex">
         {{> nav-default }}
@@ -13,16 +15,18 @@
                 <div class="bigCard">
                     <p class="txt-highlight">ERROR</p>
 				    <h1 class="txt-title">{{ locale.contact.title }}</h1>
+                    <div id="errorBox" class="error hide"></div>
+                    <div id="successBox" class="success hide"></div>
                     <form action="/api/v1/sendmessage" method="POST">
                         <div class="input-container">
-                            <input type="text" name="email" placeholder="{{ locale.contact.email_placeholder }}">
-                            <input type="text" name="subject" placeholder="{{ locale.contact.subject_placeholder }}">
-                        </div>
-                        <textarea name="message" placeholder="{{ locale.contact.message_placeholder }}"></textarea>
-                        <div class="txt-center">
-                            <button class="btn">{{ locale.contact.button_text }}</button>
+                            <input type="text" id="email_input" name="email" placeholder="{{ locale.contact.email_placeholder }}">
+                            <input type="text" id="subject_input" name="subject" placeholder="{{ locale.contact.subject_placeholder }}">
                         </div>
+                        <textarea name="message" id="message_input" placeholder="{{ locale.contact.message_placeholder }}"></textarea>
                     </form>
+                    <div class="txt-center">
+                        <button onclick="sendMessage()" class="btn">{{ locale.contact.button_text }}</button>
+                    </div>
                 </div>
             </section>
         </div>
diff --git a/views/login.hbs b/views/login.hbs
index 9f5223a..c771df4 100644
--- a/views/login.hbs
+++ b/views/login.hbs
@@ -7,7 +7,7 @@
         <link rel="stylesheet" href="/assets/css/pretendo-common.css">
         <!-- page specific -->
         <link rel="stylesheet" href="/assets/css/pretendo-auth.css">
-        <script src="/assets/js/auth.js" defer></script>
+        <script src="/assets/js/api.js" defer></script>
     </head>
     <body class="flex center">
         <div class="card">
diff --git a/views/post.hbs b/views/post.hbs
index b02d8d4..dcb3b0d 100644
--- a/views/post.hbs
+++ b/views/post.hbs
@@ -10,7 +10,7 @@
             <div class="bgExtrude"></div>
             <section class="bigCardWrapper">
                 <div class="bigCard">
-                    <p class="txt-highlight">{{ post.category }} &mdash; {{ post.date }}</p>
+                    <p class="txt-highlight">{{ post.category }} &mdash; {{ post.dateString }}</p>
 				    <h1 class="txt-title">{{ post.title }}</h1>
                     {{{ post.content }}}
                     <div class="profile">
diff --git a/views/register.hbs b/views/register.hbs
index 1751bb1..62bffc5 100644
--- a/views/register.hbs
+++ b/views/register.hbs
@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="/assets/css/pretendo-auth.css">
 
         <script src='https://www.google.com/recaptcha/api.js'></script>
-        <script src="/assets/js/auth.js" defer></script>
+        <script src="/assets/js/api.js" defer></script>
     </head>
     <body class="flex center">
         <div class="card">