Added popup for adding newsletter subscribers

OACPL/urls.py

@@ -23,5 +23,6 @@ urlpatterns = [
     url(r'^attorney/(?P<id>\d+)', charter_members.views.index, name='attorney'),
     url(r'^media/secure/(?P<path>.*)$', protected_serve, {'document_root': os.path.join(settings.MEDIA_ROOT, 'secure')}, name='secure media'),
     url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),
+    url(r'^newsletter/subscribe', newsletters.views.subscribe, name='subscribe'),
     url(r'^newsletter/', newsletters.views.newsletters, name='newsletters')
 ]

newsletters/models.py

@@ -16,7 +16,7 @@ class Newsletter(models.Model):
 
 
 class Subscriber(models.Model):
-    email = models.EmailField()
+    email = models.EmailField(unique=True)
 
     def __str__(self):
         return self.email

newsletters/templates/newsletters.html

@@ -14,6 +14,9 @@
 
     <div class="container-fluid bg-dark-primary">
         <div class="container py-3">
+            {% if request.user.is_anonymous %}
+                <button class="btn btn-secondary mx-auto d-block mb-3" data-toggle="modal" data-target="#newsletter-modal">Subscribe To The Newsletter</button>
+            {% endif %}
             {% for newsletter in newsletters %}
                 <div class="col-12 p-0 mb-3 bg-white newsletter">
                     <div class="p-3 newsletter-header" data-toggle="collapse" data-target="#newsletter-body-{{ newsletter.id }}" aria-expanded="false" aria-controls="newsletter-body-{{ newsletter.id }}">
@@ -30,4 +33,56 @@
             {% endfor %}
         </div>
     </div>
+
+    <div id="newsletter-modal" class="modal fade">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <div class="col-12">
+                        <h3 class="modal-title text-dark-primary"><i class="fa fa-envelope-o"></i> Newsletter Sign Up</h3>
+                        <div class="my-3">
+                            <p>
+                                Want to keep up to date with all our latest news?
+                                <br>
+                                Enter your email below to be added to our mailing list.
+                            </p>
+                            <div id="emailInputGroup" class="input-group">
+                                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
+                                <input id="email" class="form-control" type="email">
+                            </div>
+                        </div>
+                        <div class="float-right">
+                            <button id="subscribe" type="button" class="btn btn-primary"><i class="fa fa-check-circle"></i> Subscribe</button>
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <script>
+        $('#subscribe').click(function() {
+            var email = $('#email').val();
+            if(email && email.match(/.+@.+\..+/g)) {
+                var csrfToken = $("[name='csrfmiddlewaretoken']").val();
+                $.post('/newsletter/subscribe', {csrfmiddlewaretoken: csrfToken, email: email}, function(resp) {
+                    if(resp.success) {
+                        $('#email').val('');
+                        $('#newsletter-modal').modal('hide');
+                    } else {
+                        $('#emailInputGroup').effect('shake')
+                    }
+                }, 'json');
+            } else {
+                $('#emailInputGroup').effect('shake')
+            }
+        });
+
+        if(!sessionStorage.getItem('newsletter') && {% if request.user.is_anonymous %} true {% else %} false {% endif %}) {
+            $('#newsletter-modal').modal('show');
+            sessionStorage.setItem('newsletter', true);
+        }
+    </script>
 {% endblock %}

newsletters/views.py

@@ -1,8 +1,18 @@
-from django.shortcuts import render
+import json
 
-from .models import Newsletter
+from django.shortcuts import render, HttpResponse
+
+from .models import Newsletter, Subscriber
 
 
 def newsletters(request):
     newsletters = Newsletter.objects.filter(sent=True).order_by('-publish')
     return render(request, 'newsletters.html', {'newsletters': newsletters})
+
+
+def subscribe(request):
+    try:
+        Subscriber.objects.create(email=request.POST.get('email'))
+        return HttpResponse(json.dumps({'success': True}), content_type='json')
+    except Exception:
+        return HttpResponse(json.dumps({'success': False}), content_type='json')

static/main/css/index.css

@@ -69,3 +69,7 @@ ul {
 .shadow {
     box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6)
 }
+
+.btn {
+    cursor: pointer;
+}

templates/base.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway"/>
     <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
 
@@ -22,6 +23,7 @@
 </head>
 
 <body>
+{% csrf_token %}
 <!-- Navbar -->
 <nav class="navbar navbar-expand-lg navbar-light bg-white py-4">
     <div class="container">