Added in a cookie popup and proper newsletter functionality

Signed-off-by: rodude123 <rodude123@gmail.com>

src/blog/css/blogPosts.css

@@ -151,7 +151,7 @@ div.otherPosts a, div.feeds a {
     padding: 0.5em 1em;
 }
 
-div.newsletter form input[type="submit"] {
+div.newsletter div.form input[type="submit"] {
     margin-top: 1em;
     padding: 0.5em 1em;
 }

src/blog/css/category.css

@@ -12,11 +12,12 @@ section.catPosts .largePost {
 section.categories {
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
     width: 100%;
     margin-bottom: 5em;
+    row-gap: 1em;
 }
 
 section.categories .btnContainer {

src/blog/css/home.css

@@ -108,7 +108,7 @@ section.largePost .outerContent .postContent a {
     align-self: flex-end;
 }
 
-#main .error {
+#main .errorFof {
     display: table;
     width: 100%;
     height: 100vh;

src/blog/css/main.css

@@ -23,6 +23,44 @@
     font-weight: bold;
 }
 
+.modal-container {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4); /* Background color for the entire screen */
+    box-sizing: border-box; /* Include padding and border in the element's total width and height */
+}
+
+.modal-container.hidden {
+    display: none;
+}
+
+.modal {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    width: 40%;
+    max-width: 550px;
+    height: auto;
+    max-height: 70vh;
+    overflow: auto;
+    margin: 1.25em;
+    padding: 1.25em;
+    box-sizing: border-box; /* Include padding and border in the element's total width and height */
+}
+
+.modal-content {
+    background-color: #DDDDDD;
+    margin: auto;
+    padding: 20px;
+    border: 5px solid var(--primaryHover);
+    width: 100%;
+    box-shadow: 0 6px 4px 0 var(--mutedBlack);
+}
+
 /**** Media Queries *****/
 
 @media screen and (max-width: 90em) {

src/blog/index.html

@@ -72,6 +72,22 @@
 
 </main>
 
+<div class="modal-container" id="cookiePopup">
+    <div class="modal">
+        <div class="modal-content">
+            <h2><i class="fas fa-cookie-bite"></i> Hey I use cookies btw</h2>
+            <!-- cookie info text and 2 links disagree and agree, clicking disagree should redirect to google.co.uk  -->
+            <p>Just to let you know, I use cookies to give you the best experience on my blog. By clicking agree
+                I'll assume that you are happy with it. <a href="/blog/policy/cookie" class="link">Read more</a>
+            </p>
+            <div class="flexRow">
+                <button class="btn btnPrimary" id="cookieAccept">agree</button>
+                <a href="https://google.co.uk" class="btn btnPrimary">disagree</a>
+            </div>
+        </div>
+    </div>
+</div>
+
 <footer class="flexRow">
     <div class="nav">
         <ul>

src/blog/js/index.js

@@ -33,6 +33,11 @@ function goToURL(url)
 	// Get the current URL and split it into an array
 	let urlArray = url.split('/');
 	
+	if (localStorage.getItem('cookiePopup') === 'accepted')
+	{
+		document.querySelector('#cookiePopup').classList.add('hidden');
+	}
+	
 	if (url === '/blog/' || url === '/blog')
 	{
 		loadHomeContent();
@@ -84,7 +89,6 @@ function goToURL(url)
 	}
 	
 	show404();
-	
 }
 
 document.querySelector('#searchBtn').addEventListener('click', _ =>
@@ -107,6 +111,48 @@ document.querySelector('#searchField').addEventListener('keyup', e =>
 	}
 });
 
+document.querySelector('#cookieAccept').addEventListener('click', _ =>
+{
+	document.querySelector('#cookiePopup').classList.add('hidden');
+	localStorage.setItem('cookiePopup', 'accepted');
+});
+
+/**
+ * Submits the newsletter form
+ */
+function submitNewsletter()
+{
+	fetch(`/api/blog/newsletter/${document.querySelector('#email').value}`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+	}).then(res => res.json().then(json =>
+	{
+		
+		document.querySelector('#newsletterMessage').classList.remove('hidden');
+		
+		if (json.message.includes('exists'))
+		{
+			document.querySelector('#newsletterMessage').classList.add('error');
+			document.querySelector('#newsletterMessage').classList.remove('success');
+			document.querySelector('#newsletterMessage div').innerHTML = 'You\'ve already signed up you silly goose!';
+			return;
+		}
+		
+		if (!res.ok)
+		{
+			document.querySelector('#newsletterMessage').classList.add('error');
+			document.querySelector('#newsletterMessage').classList.remove('success');
+			document.querySelector('#newsletterMessage div').innerHTML = json.error;
+			return;
+		}
+		
+		document.querySelector('#newsletterMessage div').innerHTML = json.message;
+		document.querySelector('#newsletterMessage').classList.add('success');
+	}));
+}
+
 /**
  * Creates a formatted date
  * @param {string} dateString - the date string
@@ -358,21 +404,26 @@ async function createSideContent()
                                 <a href="/blog/post/${featuredPost.title}" class="btn btnPrimary boxShadowIn boxShadowOut">See Post</a>
                             </div>
                             <div class="newsletter">
-                            	<h3>Sign up to the newsletter</h3>
-                            	<form action="newsletter.html">
+                            	<h3>Sign up to the newsletter to never miss a new post!</h3>
+                            	<div id="newsletterForm" class="form">
                             		<div class="formControl">
                             			<label for="email">Email</label>
                             			<input type="email" id="email" name="email" placeholder="Email" required>
                             		</div>
-                            		<input type="submit" value="Sign Up">
-                            	</form>
+                            		<div class="success hidden" id="newsletterMessage">
+										<button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden')">&times;</button>
+										<div></div>
+									</div>
+
+                            		<input type="submit" value="Sign Up" onclick="submitNewsletter()">
+                            	</div>
                             </div>
                             <div class="feeds">
 								<h2>feeds</h2>
 								<div class="icons">
 									<a href="https://rohitpai.co.uk/api/blog/feed/rss" class="btn btnPrimary" title="RSS"><i class="fa-solid fa-rss"></i></a>
-									<a href="https://rohitpai.co.uk/blog/feed/atom" class="btn btnPrimary" title="Atom"><img class="atom" src="/blog/imgs/atomFeed.svg" alt="Atom"></a>
-									<a href="https://rohitpai.co.uk/blog/feed/json" class="btn btnPrimary" title="JSON"><img class="json" src="/blog/imgs/jsonFeed.svg" alt="JSON"></a>
+									<a href="https://rohitpai.co.uk/api/blog/feed/atom" class="btn btnPrimary" title="Atom"><img class="atom" src="/blog/imgs/atomFeed.svg" alt="Atom"></a>
+									<a href="https://rohitpai.co.uk/api/blog/feed/json" class="btn btnPrimary" title="JSON"><img class="json" src="/blog/imgs/jsonFeed.svg" alt="JSON"></a>
 								</div>
 							</div>
                             <div class="categories">
@@ -384,6 +435,12 @@ async function createSideContent()
 	return sideContent;
 }
 
+/**
+ * Create the meta tags
+ * @param nameOrProperty - the name or property
+ * @param attribute - the attribute
+ * @param value	- the value
+ */
 function createMetaTag(nameOrProperty, attribute, value)
 {
 	let existingTag = document.querySelector(`meta[name="${nameOrProperty}"], meta[property="${nameOrProperty}"]`);
@@ -760,7 +817,7 @@ function loadCookiePolicy()
 	document.querySelector('#main').innerHTML = `
 		<div class="policy">
 			<h3>Cookies Policy</h3>
-			<p>I only use functional cookies for the blog which includes PHP Session ID, disqus and maybe share this. I think that these are functional cookies, if you don't, you're welcome to exit the site or tell me by emailing me through the email address below, or the contact form on the contact page.</p>
+			<p>I only use functional cookies for the blog which includes PHP Session ID, disqus. a cookie to disable the cookie popup, and maybe share this. I think that these are functional cookies, if you don't, you're welcome to exit the site or tell me by emailing me through the email address below, or the contact form on the contact section of my main website.</p>
 			<br>
 			<a href="mailto:rohit@rohitpai.co.uk" class="link">rohit@rohitpai.co.uk</a>
 			<br>
@@ -775,7 +832,7 @@ function loadCookiePolicy()
 function show404()
 {
 	document.querySelector('#main').innerHTML = `
-        <div class="error">
+        <div class="errorFof">
             <div class="fof">
                 <h1>Blog post, Category or page not found</h1>
                 <a href="/blog/" class="btn btnPrimary">See all blog posts</a>