From 01dbd7156c1aae0650f2dd48e5ac22dde09e5c0d Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Tue, 23 Jun 2020 20:06:00 +0100
Subject: [PATCH 01/10] reformat

---
 app.py                 |  34 ++++++++++++++
 templates/results.html | 103 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 133 insertions(+), 4 deletions(-)

diff --git a/app.py b/app.py
index 9b59c8c..f902410 100644
--- a/app.py
+++ b/app.py
@@ -24,11 +24,13 @@
 from secrets import token_bytes
 from address import get_addresses
 from slugify import slugify
+from requests.exceptions import HTTPError
 
 import json
 import logging
 import os
 import sys
+import requests
 
 app = Flask(__name__)
 app.logger.addHandler(logging.StreamHandler(sys.stdout))
@@ -43,6 +45,20 @@
 app.secret_key = skey
 
 
+requests.packages.urllib3.util.ssl_.DEFAULT_CIPHERS += "HIGH:!DH:!aNULL"
+try:
+    requests.packages.urllib3.contrib.pyopenssl.DEFAULT_SSL_CIPHER_LIST += (
+        "HIGH:!DH:!aNULL"
+    )
+except AttributeError:
+    # no pyopenssl support used / needed / available
+    pass
+
+url = "https://us10.api.mailchimp.com/3.0/lists/{}/members/".format(
+    os.environ["MCLIST_ID"]
+)
+
+
 @app.before_request
 def force_https():
     criteria = [
@@ -129,3 +145,21 @@ def display_template(template_slug):
                 matching_templates, name, postcode, address
             )
             return render_template("single_email.html", email=email_template[0])
+
+
+@app.route("/newsletter", methods=["POST"])
+def subscribe_to_newsletter():
+
+    print(request.form["email"])
+    post_params = {"email_address": request.form["email"], "status": "subscribed"}
+    r = requests.post(
+        url, auth=("foo", os.environ["MAILCHIMP_SECRET_KEY"]), json=post_params
+    )
+    try:
+        r.raise_for_status()
+    except HTTPError:
+        return jsonify(status="failed")
+
+    results = r.json()
+    print(results)
+    return jsonify(status="success")
diff --git a/templates/results.html b/templates/results.html
index 6333516..da5a9fa 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -15,17 +15,112 @@ <h5 style="color: white;">{{ e.name }} to {{  e.target["name"] }} </h5>
   		{{ e.body }}
   		</textarea>
   		<!-- <button class="btn btn-dark" role="button" onclick="_{{ loop.index }}()">Send to {{ e['email'] }}</button> -->
-  		<a class="btn btn-dark mb-1" href="mailto:{{e.target['email']}}?subject={{e.mailto_subject}}&body={{e.mailto_body}}" role="button">Open in default email app</a>
+  		<a class="btn btn-dark mb-1" id="default-mail-button" href="mailto:{{e.target['email']}}?subject={{e.mailto_subject}}&body={{e.mailto_body}}" role="button">Open in default email app</a>
 
-  		<a class="btn btn-danger btn-email mb-1" onclick="copy_compose('gmail', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Gmail</a>
-  		<a class="btn btn-primary btn-email mb-1" onclick="copy_compose('outlook', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Outlook</a>
-  		<a class="btn btn-info btn-email mb-1" onclick="copy_compose('yahoo', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')"role="button">Open in Yahoo Mail</a>
+  		<a class="btn btn-danger btn-email mb-1" data-toggle="modal" data-target="#exampleModal" onclick="copy_compose('gmail', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Gmail</a>
+  		<a class="btn btn-primary btn-email mb-1" data-toggle="modal" data-target="#exampleModal" onclick="copy_compose('outlook', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Outlook</a>
+  		<a class="btn btn-info btn-email mb-1" data-toggle="modal" data-target="#exampleModal" onclick="copy_compose('yahoo', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')"role="button">Open in Yahoo Mail</a>
 
   		<br>
   	{% endfor %}
   </div>
+
+  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+	  <div class="modal-content">
+		<div class="modal-header">
+		  <h5 class="modal-title" id="exampleModalLabel">Newsletter</h5>
+		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		  </button>
+		</div>
+		<div class="modal-body">
+			<div>
+				Consider subscribing to our newsletter to receive updates about upcoming features such as Template Maker!
+			</div>
+		  <form role="form" id="newsletter-form">
+			  <div class="form-group">
+				  <label class="control-label">E-Mail Address</label>
+				  <div>
+					<input type="email" class="form-control" name="email" placeholder="example@domain.com">
+				  </div>
+			  </div>
+
+			  <div class="btn_toolbar">
+				<input class="btn btn-success mb-1" type="submit" value="Subscribe">
+				<button class="btn btn-danger mb-1" data-dismiss="modal">Dismiss</button>
+			</div>
+		  </form>
+
+
+		</div>
+	  </div>
+	</div>
+  </div>
+
+
+  <div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+	  <div class="modal-content">
+		<div class="modal-header">
+		  <h5 class="modal-title" id="exampleModalLabel">Newsletter</h5>
+		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		  </button>
+		</div>
+		<div class="modal-body">
+			<div id="result">
+			</div>
+		</div>
+		<div class="modal-footer">
+			<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+		</div>
+	  </div>
+	</div>
+  </div>
+
   <script type="text/javascript">
 
+  function subSubmit(ev)
+  {
+	  ev.preventDefault();
+	  var request = new XMLHttpRequest();
+	  request.addEventListener('load', subShow);
+	  request.open('POST', {{ url_for('subscribe_to_newsletter')|tojson }});
+	  request.send(new FormData(this));
+	  $('#exampleModal').modal('hide');
+  }
+
+  function subShow()
+  {
+	  var data = JSON.parse(this.responseText);
+	  if (data.status == 'success')
+	  {
+		  var div = document.getElementById("result");
+		  var content = document.createTextNode("You have succesfully subscribed to our newsletter, Thank you!");
+		  div.appendChild(content)
+		  $('#resultModal').modal('show');
+	  }
+	  else
+	  {
+		var div = document.getElementById("result");
+		var content = document.createTextNode("There was an issue with adding you to the newsletter, please try again later.");
+		div.appendChild(content)
+		$('#resultModal').modal('show');
+	  }
+  }
+
+
+
+  var form = document.getElementById('newsletter-form');
+  form.addEventListener('submit', subSubmit);
+
+  var button = document.getElementById('default-mail-button');
+  button.addEventListener('click', function()
+  {
+	$('#exampleModal').modal('show');
+  });
+
   function copy_compose(client, index, to, subject) {
 
   	var body = document.getElementById(`email${index}`);

From 281f4c3ed2c33a6a70e3a26834f2f509bf040d12 Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Tue, 23 Jun 2020 20:09:01 +0100
Subject: [PATCH 02/10] added modal pop up and interaction with MAILCHIMP API

---
 templates/results.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/results.html b/templates/results.html
index da5a9fa..44ae746 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -17,15 +17,15 @@ <h5 style="color: white;">{{ e.name }} to {{  e.target["name"] }} </h5>
   		<!-- <button class="btn btn-dark" role="button" onclick="_{{ loop.index }}()">Send to {{ e['email'] }}</button> -->
   		<a class="btn btn-dark mb-1" id="default-mail-button" href="mailto:{{e.target['email']}}?subject={{e.mailto_subject}}&body={{e.mailto_body}}" role="button">Open in default email app</a>
 
-  		<a class="btn btn-danger btn-email mb-1" data-toggle="modal" data-target="#exampleModal" onclick="copy_compose('gmail', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Gmail</a>
-  		<a class="btn btn-primary btn-email mb-1" data-toggle="modal" data-target="#exampleModal" onclick="copy_compose('outlook', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Outlook</a>
-  		<a class="btn btn-info btn-email mb-1" data-toggle="modal" data-target="#exampleModal" onclick="copy_compose('yahoo', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')"role="button">Open in Yahoo Mail</a>
+  		<a class="btn btn-danger btn-email mb-1" data-toggle="modal" data-target="#newsletterModal" onclick="copy_compose('gmail', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Gmail</a>
+  		<a class="btn btn-primary btn-email mb-1" data-toggle="modal" data-target="#newsletterModal" onclick="copy_compose('outlook', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')" role="button">Open in Outlook</a>
+  		<a class="btn btn-info btn-email mb-1" data-toggle="modal" data-target="#newsletterModal" onclick="copy_compose('yahoo', {{loop.index}}, '{{e.target['email']}}', '{{e.mailto_subject}}')"role="button">Open in Yahoo Mail</a>
 
   		<br>
   	{% endfor %}
   </div>
 
-  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="newsletterModalLabel" aria-hidden="true">
 	<div class="modal-dialog" role="document">
 	  <div class="modal-content">
 		<div class="modal-header">
@@ -88,7 +88,7 @@ <h5 class="modal-title" id="exampleModalLabel">Newsletter</h5>
 	  request.addEventListener('load', subShow);
 	  request.open('POST', {{ url_for('subscribe_to_newsletter')|tojson }});
 	  request.send(new FormData(this));
-	  $('#exampleModal').modal('hide');
+	  $('#newsletterModal').modal('hide');
   }
 
   function subShow()

From cab531fb6c453cca4182d068515b3cec710a8663 Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Tue, 23 Jun 2020 20:15:12 +0100
Subject: [PATCH 03/10] fixed issue where if and else statement were both
 accessed (js is weird)

---
 templates/results.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/results.html b/templates/results.html
index 44ae746..52c94ff 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -29,7 +29,7 @@ <h5 style="color: white;">{{ e.name }} to {{  e.target["name"] }} </h5>
 	<div class="modal-dialog" role="document">
 	  <div class="modal-content">
 		<div class="modal-header">
-		  <h5 class="modal-title" id="exampleModalLabel">Newsletter</h5>
+		  <h5 class="modal-title" id="newsletterModalLabel">Newsletter</h5>
 		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 			<span aria-hidden="true">&times;</span>
 		  </button>
@@ -101,7 +101,7 @@ <h5 class="modal-title" id="exampleModalLabel">Newsletter</h5>
 		  div.appendChild(content)
 		  $('#resultModal').modal('show');
 	  }
-	  else
+	  else if (data.status == 'failed')
 	  {
 		var div = document.getElementById("result");
 		var content = document.createTextNode("There was an issue with adding you to the newsletter, please try again later.");
@@ -118,7 +118,7 @@ <h5 class="modal-title" id="exampleModalLabel">Newsletter</h5>
   var button = document.getElementById('default-mail-button');
   button.addEventListener('click', function()
   {
-	$('#exampleModal').modal('show');
+	$('#newsletterModal').modal('show');
   });
 
   function copy_compose(client, index, to, subject) {

From 0c06d12393cd8580ed0b15ee8a63e2b77f203c18 Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Tue, 23 Jun 2020 20:25:54 +0100
Subject: [PATCH 04/10] removed debug printing

---
 app.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app.py b/app.py
index f902410..71edd6e 100644
--- a/app.py
+++ b/app.py
@@ -150,7 +150,6 @@ def display_template(template_slug):
 @app.route("/newsletter", methods=["POST"])
 def subscribe_to_newsletter():
 
-    print(request.form["email"])
     post_params = {"email_address": request.form["email"], "status": "subscribed"}
     r = requests.post(
         url, auth=("foo", os.environ["MAILCHIMP_SECRET_KEY"]), json=post_params
@@ -161,5 +160,4 @@ def subscribe_to_newsletter():
         return jsonify(status="failed")
 
     results = r.json()
-    print(results)
     return jsonify(status="success")

From 0a5d8089d5bb20a52f069dfff7be9deeae69c96b Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Tue, 23 Jun 2020 22:38:48 +0100
Subject: [PATCH 05/10] added comment for longer Diffie-Hellman key bypass

---
 app.py | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app.py b/app.py
index 71edd6e..fee08c0 100644
--- a/app.py
+++ b/app.py
@@ -45,6 +45,13 @@
 app.secret_key = skey
 
 
+""" For developers running on a newer version of openssl:
+    A recent update to openssl was pushed to fix something
+    called a logjam attack. The ciphers that are being used
+    in some of the libs mustn't be up to date yet which
+    may cause errors when running the server in a dev env.
+    This try/catch bypasses the requirement of a longer key.
+"""
 requests.packages.urllib3.util.ssl_.DEFAULT_CIPHERS += "HIGH:!DH:!aNULL"
 try:
     requests.packages.urllib3.contrib.pyopenssl.DEFAULT_SSL_CIPHER_LIST += (
@@ -54,6 +61,7 @@
     # no pyopenssl support used / needed / available
     pass
 
+
 url = "https://us10.api.mailchimp.com/3.0/lists/{}/members/".format(
     os.environ["MCLIST_ID"]
 )

From cad7529f75b156f7a390cc4ba7e5984ab3cd830d Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Tue, 23 Jun 2020 22:44:29 +0100
Subject: [PATCH 06/10] Email address doesn't accept an empty input anymore

---
 templates/results.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/results.html b/templates/results.html
index 52c94ff..c268918 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -42,7 +42,7 @@ <h5 class="modal-title" id="newsletterModalLabel">Newsletter</h5>
 			  <div class="form-group">
 				  <label class="control-label">E-Mail Address</label>
 				  <div>
-					<input type="email" class="form-control" name="email" placeholder="example@domain.com">
+					<input type="email" class="form-control" required name="email" placeholder="example@domain.com">
 				  </div>
 			  </div>
 

From 70576c950c856dec1a6e86fbcd1f09de7b7fdae5 Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Tue, 23 Jun 2020 23:56:42 +0100
Subject: [PATCH 07/10] modified newsletter modal body

---
 templates/results.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/results.html b/templates/results.html
index c268918..eb4f09d 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -36,7 +36,7 @@ <h5 class="modal-title" id="newsletterModalLabel">Newsletter</h5>
 		</div>
 		<div class="modal-body">
 			<div>
-				Consider subscribing to our newsletter to receive updates about upcoming features such as Template Maker!
+				Consider subscribing to our newsletter to receive updates about new templates and upcoming features
 			</div>
 		  <form role="form" id="newsletter-form">
 			  <div class="form-group">

From 2bf8ccf482a663a9f7111af6b7647ba381b3224f Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Wed, 24 Jun 2020 22:05:44 +0100
Subject: [PATCH 08/10] moved modal button to modal footer to make modal design
 more consistent

---
 templates/results.html | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/templates/results.html b/templates/results.html
index eb4f09d..b1219ab 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -46,14 +46,15 @@ <h5 class="modal-title" id="newsletterModalLabel">Newsletter</h5>
 				  </div>
 			  </div>
 
-			  <div class="btn_toolbar">
-				<input class="btn btn-success mb-1" type="submit" value="Subscribe">
-				<button class="btn btn-danger mb-1" data-dismiss="modal">Dismiss</button>
-			</div>
-		  </form>
 
+		  </form>
+		</div>
 
+		<div class="modal-footer">
+				<input class="btn btn-success mb-1" type="submit" form="newsletter-form" value="Subscribe">
+				<button class="btn btn-danger mb-1" data-dismiss="modal">Dismiss</button>
 		</div>
+
 	  </div>
 	</div>
   </div>

From cbddca44ae2bff97f6de2e62067ed4bacbc7e448 Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Wed, 24 Jun 2020 22:08:04 +0100
Subject: [PATCH 09/10] made email input a bit less tacky-looking

---
 templates/results.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/templates/results.html b/templates/results.html
index b1219ab..15926ec 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -39,14 +39,13 @@ <h5 class="modal-title" id="newsletterModalLabel">Newsletter</h5>
 				Consider subscribing to our newsletter to receive updates about new templates and upcoming features
 			</div>
 		  <form role="form" id="newsletter-form">
-			  <div class="form-group">
+			  <div>
 				  <label class="control-label">E-Mail Address</label>
 				  <div>
 					<input type="email" class="form-control" required name="email" placeholder="example@domain.com">
 				  </div>
 			  </div>
 
-
 		  </form>
 		</div>
 

From b56242a5ecd6a3c55144589d3617f992b216b020 Mon Sep 17 00:00:00 2001
From: Benjamin Lellouch <blellouch@gmail.com>
Date: Mon, 29 Jun 2020 21:19:39 +0100
Subject: [PATCH 10/10] User can now unsub or delete his profile

---
 app.py              |  50 +++++++++-
 templates/page.html | 235 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 283 insertions(+), 2 deletions(-)

diff --git a/app.py b/app.py
index fee08c0..eda8294 100644
--- a/app.py
+++ b/app.py
@@ -31,6 +31,7 @@
 import os
 import sys
 import requests
+import hashlib
 
 app = Flask(__name__)
 app.logger.addHandler(logging.StreamHandler(sys.stdout))
@@ -155,7 +156,7 @@ def display_template(template_slug):
             return render_template("single_email.html", email=email_template[0])
 
 
-@app.route("/newsletter", methods=["POST"])
+@app.route("/newsletter/subscribe", methods=["POST"])
 def subscribe_to_newsletter():
 
     post_params = {"email_address": request.form["email"], "status": "subscribed"}
@@ -167,5 +168,50 @@ def subscribe_to_newsletter():
     except HTTPError:
         return jsonify(status="failed")
 
-    results = r.json()
+    return jsonify(status="success")
+
+
+@app.route("/newsletter/check", methods=["POST"])
+def check_user_newsletter():
+
+    print(request.form)
+    email = request.form["email"].encode("utf-8")
+    user_hash = hashlib.md5(email).hexdigest()
+    req_url = "{}{}".format(url, user_hash)
+    print(req_url)
+    r = requests.get(req_url, auth=("foo", os.environ["MAILCHIMP_SECRET_KEY"]))
+    try:
+        r.raise_for_status()
+    except HTTPError:
+        return jsonify(status="failed")
+
+    return jsonify(status="success", action=request.form["action"], user=user_hash)
+
+
+@app.route("/newsletter/unsubscribe", methods=["POST"])
+def unsubscribe_user_newsletter():
+    print(request.form)
+    req_url = "{}{}".format(url, request.form["user"])
+    print(req_url)
+    r = requests.delete(req_url, auth=("foo", os.environ["MAILCHIMP_SECRET_KEY"]))
+    try:
+        r.raise_for_status()
+    except HTTPError:
+        return jsonify(status="failed")
+
+    return jsonify(status="success")
+
+
+@app.route("/newsletter/permanently_delete", methods=["POST"])
+def permanently_delete_user_newsletter():
+
+    print(request.form)
+    req_url = "{}{}/actions/delete-permanent".format(url, request.form["user"])
+    print(req_url)
+    r = requests.post(req_url, auth=("foo", os.environ["MAILCHIMP_SECRET_KEY"]))
+    try:
+        r.raise_for_status()
+    except HTTPError:
+        return jsonify(status="failed")
+
     return jsonify(status="success")
diff --git a/templates/page.html b/templates/page.html
index a757c50..942d23b 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -93,8 +93,243 @@
 	<a href="{{ url_for('aboutus')}}">About us.</a>
 	<br>
 	<a href="mailto:writeforchanges@gmail.com?subject=Website%20Issue%3A&body=Issue%20Description%3A">Found an issue with the website? Report it here.</a>
+	<br>
+	<a data-toggle="modal" href="" data-target="#unsubChoiceModal">Unsubscribe from our mailing list</a>
 </footer>
 </body>
 
 
+
+<div class="modal fade" id="unsubChoiceModal" tabindex="-1" role="dialog" aria-labelledby="unsubChoiceModalLabel" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+	  <div class="modal-content">
+		<div class="modal-header">
+		  <h5 class="modal-title" id="unsubChoiceModalLabel">Unsubscribe</h5>
+		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		  </button>
+		</div>
+		<div class="modal-body">
+			<div>
+				Consider subscribing to our newsletter to receive updates about new templates and upcoming features
+			</div>
+			  <div>
+				  <label class="control-label">E-Mail Address</label>
+				  <div>
+					<input type="email" class="form-control" required name="email" id="email-input" data-placement='bottom' title='Please enter a valid email address' placeholder="example@domain.com">
+				  </div>
+			</div>
+		</div>
+
+		<div class="modal-footer">
+			<button class="btn btn-warning mb-1" id="unsub-button" >Unsubscribe</button>
+			<button class="btn btn-danger mb-1"  id="perm-delete-button">Permanently delete</button>
+		</div>
+
+	  </div>
+	</div>
+  </div>
+
+
+  <div class="modal fade" id="unsubConfirmModal" tabindex="-1" role="dialog" aria-labelledby="unsubConfirmModalLabel" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+	  <div class="modal-content">
+		<div class="modal-header">
+		  <h5 class="modal-title" id="unsubConfirmModalLabel">Unsubscribe</h5>
+		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		  </button>
+		</div>
+		<div class="modal-body">
+			<form id="unsub-confirm-form" style="display: none">
+				<input type="text"   id="user-hash">
+			</form>
+			<div id="unsub-confirm-warning">
+
+			</div>
+		</div>
+
+		<div class="modal-footer">
+			<button class="btn btn-danger mb-1" form="unsub-confirm-form" id="unsub-confirm-button"></button>
+			<button class="btn btn-success mb-1" data-dismiss="modal">Cancel</button>
+		</div>
+
+	  </div>
+	</div>
+  </div>
+
+  <div class="modal fade" id="unknownUserModal" tabindex="-1" role="dialog" aria-labelledby="unknownUserModal" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+	  <div class="modal-content">
+		<div class="modal-header">
+		  <h5 class="modal-title" id="unknownUserModal">Unsubscribe</h5>
+		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		  </button>
+		</div>
+		<div class="modal-body">
+			<div>
+				The email you have entered is not in our database, make sure you have entered it correctly.
+			</div>
+		</div>
+
+		<div class="modal-footer">
+			<button class="btn btn-primary mb-1" data-dismiss="modal">Ok</button>
+		</div>
+
+	  </div>
+	</div>
+  </div>
+
+  <div class="modal fade" id="successfulUnsubModal" tabindex="-1" role="dialog" aria-labelledby="successfulUnsubModal" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+	  <div class="modal-content">
+		<div class="modal-header">
+		  <h5 class="modal-title" id="successfulUnsubModal">Unsubscribe</h5>
+		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		  </button>
+		</div>
+		<div class="modal-body">
+			<div id="successful-unsub-info">
+
+			</div>
+		</div>
+
+		<div class="modal-footer">
+			<button class="btn btn-primary mb-1" data-dismiss="modal">Ok</button>
+		</div>
+
+	  </div>
+	</div>
+  </div>
+
+  <!--
+	  Have a modal which asks between unsub and perm del. Have a listener on each button which runs a js func which depending on the button which called it will fill a
+	  modal with an email form which will check for the existence of the email in the db. If email is in the db then another modal pops up telling that their mail is
+	  in the db and will ask to confirm action.
+   -->
+
+   <script type="text/javascript">
+
+   function checkEmail()
+   {
+	var email = document.getElementById('email-input');
+	if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value))
+	{
+		return (true)
+	}
+	$('#email-input').tooltip('show');
+    return (false)
+   }
+
+   function mailCheckSubmit(event)
+   {
+	   if ( checkEmail() == true)
+	   {
+		var target_id = event.target.id;
+	   var request = new XMLHttpRequest();
+	   request.addEventListener('load', mailCheckShow);
+	   request.open('POST', {{ url_for('check_user_newsletter') | tojson}});
+	   var form = new FormData();
+	   form.append('email', document.getElementById('email-input').value)
+	   form.append('action', target_id);
+	   request.send(form);
+	   }
+   }
+
+   function mailCheckShow()
+   {
+	   var response = JSON.parse(this.responseText);
+	   $('#unsubChoiceModal').modal('hide');
+	   if (response.status == 'success')
+	   {
+			document.getElementById('user-hash').value = response.user;
+		   if (response.action == 'unsub-button')
+		   {
+			$('#unsub-confirm-warning').text('Are you sure you want to unsubscribe from our newsletter? This action is reversible.');
+			$('#unsub-confirm-button').text('Unsubscribe');
+
+			document.getElementById('unsub-confirm-form').addEventListener('submit', unsubscribe);
+		   }
+
+		   if (response.action == 'perm-delete-button')
+		   {
+			$('#unsub-confirm-warning').text('Are you sure you want to unsubscribe from our newsletter? This action is irreversible.');
+			$('#unsub-confirm-button').text('Permanently delete');
+
+			document.getElementById('unsub-confirm-form').addEventListener('submit', permanently_delete);
+		   }
+		   $('#unsubConfirmModal').modal('show');
+	   }
+	   else if (response.status == 'failed')
+	   {
+		   $('#unknownUserModal').modal('show');
+	   }
+   }
+
+   function unsubscribe(ev)
+   {
+	document.getElementById('unsub-confirm-form').removeEventListener('submit', unsubscribe);
+	ev.preventDefault();
+	var request = new XMLHttpRequest();
+	request.addEventListener('load', unsub_outcome);
+	request.open('POST', {{url_for('unsubscribe_user_newsletter') | tojson}});
+	var form = new FormData();
+	form.append('user', document.getElementById('user-hash').value );
+	request.send(form);
+   }
+
+   function permanently_delete(ev)
+   {
+	document.getElementById('unsub-confirm-form').removeEventListener('submit', permanently_delete);
+	ev.preventDefault();
+	var request = new XMLHttpRequest();
+	request.addEventListener('load', perm_delete_outcome);
+	request.open('POST', {{url_for('permanently_delete_user_newsletter') | tojson}});
+	var form = new FormData();
+	form.append('user', document.getElementById('user-hash').value );
+	request.send(form);
+   }
+
+   function unsub_outcome()
+   {
+	$("#unsubConfirmModal").modal('hide');
+	var response = JSON.parse(this.responseText);
+	if (response.status == 'success')
+	{
+		$("#successful-unsub-info").text('You are no longer subscribed to our newsletter');
+	}
+	else if (response.status == 'failed')
+	{
+		$("#successful-unsub-info").text('There was a problem with removing your subscription, please try again later');
+	}
+	$('#successfulUnsubModal').modal('show');
+   }
+
+   function perm_delete_outcome()
+   {
+	$("#unsubConfirmModal").modal('hide');
+	var response = JSON.parse(this.responseText);
+	if (response.status == 'success')
+	{
+		$("#successful-unsub-info").text('We have successfully deleted your profile from our database');
+	}
+	else if (response.status == 'failed')
+	{
+		$("#successful-unsub-info").text('There was a problem with removing you from our database, please try again later');
+	}
+	$('#successfulUnsubModal').modal('show');
+
+   }
+
+
+	var unsub = document.getElementById('unsub-button');
+	unsub.addEventListener('click', mailCheckSubmit);
+
+	var perm_delete = document.getElementById('perm-delete-button');
+	perm_delete.addEventListener('click', mailCheckSubmit);
+
+   </script>
+
 </html>