Add newsletter page which connects to rapidmail

_sass/_newsletter.scss

@@ -0,0 +1,11 @@
+.newsletter {
+  .consent {
+    font-size: 0.75em !important;
+  }
+
+  .segment {
+    margin-bottom: 4em !important;
+  }
+
+  text-align: left !important;
+}

assets/css/main.scss

@@ -16,3 +16,4 @@
 @import "our-values.scss";
 @import "portmaster_tour.scss";
 @import "download.scss";
+@import "newsletter.scss";

assets/js/main.js

@@ -13,6 +13,8 @@ $(document).ready(function() {
     event.preventDefault()
     $(".ui.sidebar").sidebar("toggle");
   })
+
+  $('.popup-trigger').popup();
 })
 
 function getSearchParameters() {

community-hub/index.html

@@ -4,6 +4,37 @@ title: community-hub
 heading: The Community Hub
 exclude_community_snippet: true
 ---
+
+<script type="text/javascript">
+  var params = getSearchParameters();
+
+  if (params.newsletter == 'confirm') {
+    $('body').toast({
+      title: 'Success - But Confirmation Required',
+      message: 'Please confirm your email to finish the process. Thank you for your effort!',
+      displayTime: 10000,
+      showProgress: 'bottom',
+      class: 'orange',
+      showIcon: 'hand point right outline',
+      position: 'top center',
+      closeIcon: true
+    });
+  }
+
+  if (params.newsletter == 'success') {
+    $('body').toast({
+      title: 'Success',
+      message: 'Thanks for subscribing to our newsletter, we\'re happy we\'ll stay in touch!',
+      displayTime: 8000,
+      showProgress: 'bottom',
+      class: 'green',
+      showIcon: 'checkmark',
+      position: 'top center',
+      closeIcon: true
+    });
+  }
+</script>
+
 <div class="community-hub">
   {% for pitch in site.data.community_hub.communities %}
 

newsletter/index.html

@@ -0,0 +1,62 @@
+---
+layout: page_column
+title: newsletter
+heading: Subscribe to our Newsletter
+---
+<script type="text/javascript">
+  var params = getSearchParameters();
+
+  if (typeof params.error_email != "undefined" && params.error_email.length > 0) {
+    $('body').toast({
+      title: 'Please provide a valid email address',
+      displayTime: 6000,
+      showProgress: 'bottom',
+      class: 'red',
+      showIcon: 'x',
+      position: 'top center',
+      closeIcon: true
+    });
+  }
+
+  if (typeof params.field_consent_text != "undefined" && params.field_consent_text == "no") {
+    $('body').toast({
+      title: 'Please accept our terms',
+      displayTime: 6000,
+      showProgress: 'bottom',
+      class: 'red',
+      showIcon: 'x',
+      position: 'top center',
+      closeIcon: true
+    });
+  }
+</script>
+
+<div class="ui middle aligned center aligned grid">
+  <div class="column newsletter" style="max-width: 450px;">
+    <form class="ui form" action="https://t80607841.emailsys1a.net/184/1387/c70759e794/subscribe/form.html" method="post">
+      <div class="ui segment">
+        <div class="required field">
+          <label for="email">Email</label>
+          <input type="text" name="email" id="email"/>
+        </div>
+        <div class="required inline field">
+          <div class="ui checkbox">
+            <input type="checkbox" id="consent_text" name="consent_text" value="yes"/>
+            <label class="consent" for="consent_text">
+              I agree that Safing &
+              <a href="https://rapidmail.de" target="_blank" data-tooltip="located in Germany, GDPR compliant" data-variation="mini">
+                rapidmail.de
+              </a>
+              may proccess and use the email for newsletter purposes.
+
+              <span class="popup-trigger" data-variation="mini inverted very wide" data-position="top center" data-content="Safing will use the email you provide from this form to provide you with semi regular updates. The Newsletter is managed by rapidmail, a GDPR compliant company located in Germany. You can change your mind at any time by clicking the unsubscribe link placed in every email you receive from us or by contacting mail@safing.io. By checking this box, you agree to the use of your email in accordance with these terms.">
+                <i class="info circle icon"></i>
+              </span>
+            </label>
+          </div>
+        </div>
+        <input type="submit" class="ui submit button" value="Subscribe" />
+      </div>
+    </form>
+  </div>
+</div>