COR-78 / add confirmation email logic

ckan_pages/urls.py

@@ -1,9 +1,7 @@
 from django.urls import path
-# from django.views.generic import TemplateView
-from .views import SoftwareEngineersListView, SubscribePageView
+from .views import SoftwareEngineersListView
 
 
 urlpatterns = [
     path('former-members/', SoftwareEngineersListView.as_view(), name='former_members'),
-    path('email-newsletter-sign-up', SubscribePageView.as_view(), name='subscribe_page'),
 ]

ckan_pages/views.py

@@ -1,4 +1,4 @@
-from django.views.generic import ListView, TemplateView
+from django.views.generic import ListView
 from .models import SoftwareEngineers
 
 
@@ -11,8 +11,3 @@ def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['engineers'] = SoftwareEngineers.objects.filter(developer__active=False)
         return context
-
-
-class SubscribePageView(TemplateView):
-
-    template_name = "ckan_pages/subscribe_page.html"

ckanorg/static/css/main.css

@@ -2098,10 +2098,10 @@ ul.blog-nav li.last {
 }
 
 .blog-subscribe {
-  background: url("/static/img/newsletter-01.max-800x600.png");
+  background: url("/static/img/newsletter-blog.svg");
   background-repeat: no-repeat;
   background-position: right top;
-  background-size: 40%;
+  background-size: 50%;
   border-radius: 22px;
   overflow: hidden;
   box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
@@ -2132,13 +2132,13 @@ ul.blog-nav li.last {
 .blog-subscribe .blog-subscribe-content .blog-subscribe-form input[type=text] {
   background-color: transparent;
   color: #333;
-  border: 1px solid #777;
-  border-radius: 6px;
+  border: none;
+  border-bottom: 1px solid #777;
 }
 .blog-subscribe .blog-subscribe-content .blog-subscribe-form input[type=submit] {
   background: #333;
   border: 2px solid #333;
-  border-radius: 6px;
+  border-radius: 100px;
   color: #fff;
 }
 .blog-subscribe .blog-subscribe-content .blog-subscribe-form input[type=submit] svg path {
@@ -2571,6 +2571,11 @@ ul.blog-nav li.last {
   border-radius: 0;
   box-shadow: none;
 }
+.two-columns-item.subscribe-page-form .blog-subscribe .blog-subscribe-form .unsubscribe {
+  display: flex;
+  justify-content: center;
+  font-size: 14px;
+}
 
 .wrapper {
   position: relative;
@@ -3664,10 +3669,11 @@ img.full-width {
   }
 }
 .footer-subscribe {
-  background-color: none;
   padding: 0px 2px;
-  border: 1px solid #777;
-  margin: -10px 0 20px;
+  margin: -20px 0 20px;
+}
+.footer-subscribe span {
+  margin-bottom: 5px;
 }
 .footer-subscribe .row {
   display: flex;
@@ -3682,6 +3688,7 @@ img.full-width {
   background-color: transparent;
   color: #333;
   border: none;
+  border-bottom: 1px solid #777;
   height: 34px;
   font-size: 16px;
 }
@@ -3693,7 +3700,7 @@ img.full-width {
 .footer-subscribe input[type=submit] {
   background: #333;
   border: 1px solid #777;
-  border-radius: 0;
+  border-radius: 100px;
   color: #fff;
 }
 @media all and (max-width: 950px) {

ckanorg/static/js/ckanorg.js

@@ -1,6 +1,6 @@
 var modal = document.getElementById("thanks-modal");
 var span = $(".close")[0];
-var thanks = "<h4>Thank you for getting in touch!</h4><p style='text-align: center;'>We’ll get back to you within one business day!</p>"
+var thanks = "<h4>Thank you for being with us!</h4><p style='text-align: center;'>We have sent you a confirmation email. By click on the link in this email, you will confirm your email address and complete you subscription.</p>"
 var blog_thanks = "<h4>Thank you for subscribing our blog!</h4>"
 
 span.onclick = function() {
@@ -19,12 +19,11 @@ function showError(error, form_id) {
 }
 
 function subscribeSubmitAction(e){
-    submitAction(e, '#subscribe_email');
+    submitAction(e, '#subscribe_email', '#subscribe_name');
 }
 
 function blogSubscribeSubmitAction(e){
     submitAction(e, '#blog_subscribe_email', '#blog_subscribe_name');
-    console.log("Submit action (e):", e)
 }
 
 function stewardSubmitAction(e){
@@ -73,7 +72,6 @@ function submitAction(e, form_id, form_input_name){
             showError('Please try again later', form_id);
         } else {
             window.localStorage.setItem(form_id, new Date());
-            // $(form_id).addClass('waiting');
             $.ajax({
                 type : "POST", 
                 url: "/ajax-posting/",
@@ -82,12 +80,12 @@ function submitAction(e, form_id, form_input_name){
                     email: $(form_id).val(),
                     form_id: form_id,
                     csrfmiddlewaretoken: token,
+                    url: window.location.href,
                     dataType: "json",
                 },
                 success: function(data){
                     $(form_id)[0].value = '';
-                    $(form_input_name).value = '';
-                    // $(form_id).removeClass('waiting');
+                    $(form_input_name).val('');
                     $(form_id).removeClass('contactFormError');
                     $(form_id).attr('placeholder', '[email protected]');
                     $(form_input_name).attr('placeholder', 'your name');
@@ -112,10 +110,11 @@ $('#blogForm').on('submit', blogSubmitAction);
 
 $.each([
     '#subscribe_email',
+    '#subscribe_name',
     '#blog_subscribe_email',
+    '#blog_subscribe_name',
     '#steward_email',
-    '#blog_email',
-    '#blog_subscribe_name'], 
+    '#blog_email'], 
     function(_, id){
     $(id).focus(function(){
         $(id).attr('placeholder', '');
@@ -135,7 +134,7 @@ $.each([
     });
 });
 
-$.each(['#blog_subscribe_name'], function(_, id){
+$.each(['#subscribe_name', '#blog_subscribe_name'], function(_, id){
     $(id).focusout(function(){
         $(id)
             .attr('placeholder', 'your name')

ckanorg/static/scss/layout/_footer.scss

@@ -6,10 +6,10 @@
       .two-columns-item {
         margin-bottom: 0;
         .two-columns-item:first-of-type {
-          width: calc( 50% - 15px);
+          width: calc(50% - 15px);
         }
         .two-columns-item:last-of-type {
-          width: calc( 50% - 15px);
+          width: calc(50% - 15px);
         }
       }
     }
@@ -109,10 +109,11 @@
 }
 
 .footer-subscribe {
-  background-color: none;
   padding: 0px 2px;
-  border: 1px solid #777;
-  margin: -10px 0 20px;
+  margin: -20px 0 20px;
+  span {
+    margin-bottom: 5px;
+  }
   .row {
     display: flex;
     margin: 0;
@@ -124,6 +125,7 @@
     background-color: transparent;
     color: #333;
     border: none;
+    border-bottom: 1px solid #777;
     height: 34px;
     font-size: 16px;
     @media all and (max-width: 950px) {
@@ -133,7 +135,7 @@
   input[type=submit] {
     background: $btn-grey-color;
     border: 1px solid #777;
-    border-radius: 0;
+    border-radius: 100px;
     color: $white;
     @media all and (max-width: 950px) {
       width: 100%;