WIP Give support to the new newsletter form

locales/en.json

@@ -9,6 +9,9 @@
   "You've successfully subscribed to": "You've successfully subscribed to",
   "Your email address": "Your email address",
   "with the email address": "with the email address",
+  "Now check your inbox and click the link to confirm your subscription.": "Now check your inbox and click the link to confirm your subscription.",
+  "Please enter a valid email address": "Please enter a valid email address",
+  "Oops! There was an error sending the email, please try later": "Oops! There was an error sending the email, please try later",
   "Email cannot be blank.": "Email cannot be blank.",
   "Get the latest posts delivered right to your inbox.": "Get the latest posts delivered right to your inbox.",
   "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.",

locales/es.json

@@ -9,6 +9,9 @@
   "You've successfully subscribed to": "Te has suscrito con éxito a",
   "Your email address": "Tu dirección de correo electrónico",
   "with the email address": "con la dirección de correo electrónico",
+  "Now check your inbox and click the link to confirm your subscription.": "Ahora revisa tu bandeja de entrada y haz click en el enlace para confirmar tu suscripción.",
+  "Please enter a valid email address": "Por favor introduce una dirección de correo electrónico válida",
+  "Oops! There was an error sending the email, please try later": "Oops! Ha ocurrido un error, por favor inténtalo más tarde",
   "Email cannot be blank.": "El correo electrónico no puede estar vacío.",
   "Get the latest posts delivered right to your inbox.": "Recibe los últimos artículos directamente en tu bandeja de entrada.",
   "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox.": "Mantente al día! Recibe todos los mejores y más recientes artículos directamente en tu bandeja de entrada.",

page-newsletter.hbs

@@ -0,0 +1,41 @@
+{{!--
+This template is used for the subscription page.
+--}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
+{{!< default}}
+
+<div class="l-wrapper" data-aos="fade-down">
+  <a href="{{@site.url}}" class="m-back">
+    <span class="m-back__icon icon-arrow-left"></span>
+    <span>{{t "Back to home"}}</span>
+  </a>
+</div>
+
+<main class="l-fullscreen">
+  <section class="l-fullscreen__content in-subscribe-page" data-aos="fade-up" data-aos-delay="300">
+    {{^if success}}
+    <div>
+      <header class="m-heading in-subscribe-page">
+        <h1 class="m-heading__title">{{t "Subscribe to"}} {{@site.title}}</h1>
+        <p class="m-heading__description in-subscribe-page">
+          {{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}}
+        </p>
+      </header>
+      {{> "newsletter-form"}}
+    </div>
+    {{else}}
+    <div>
+      <header class="m-heading in-subscribe-page">
+        <h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
+        <p class="m-heading__description in-subscribe-page">
+          {{t "You've successfully subscribed to"}} <strong>{{@site.title}}</strong> {{t "with the email address"}}
+          <strong>{{email}}</strong>
+        </p>
+      </header>
+      <a href="{{@site.url}}" class="m-button outlined">{{t "Back to home"}}</a>
+    </div>
+    {{/if}}
+  </section>
+</main>

partials/newsletter-form.hbs

@@ -0,0 +1,31 @@
+{{!--
+This subscribe template is used to display the form where users can subscribe.
+You need to enable the members feature first.
+--}}
+
+<div class="m-subscribe-section__form">
+  <form data-members-form="subscribe" id="newsletter-form" class="m-subscribe-section__container">
+    <div class="m-subscribe__form">
+      <fieldset>
+        <label for="newsletter_input" class="sr-only">{{t "Your email address"}}</label>
+        <input data-members-email id="newsletter-input" class="m-input in-subscribe-section" type="email"
+          placeholder="{{t "Your email address"}}" required />
+      </fieldset>
+      <button id="newsletter_button" class="m-button primary block" type="submit">{{t "Subscribe"}}</button>
+    </div>
+    <div class="m-subscribe__success">
+      <header class="m-heading no-margin">
+        <h1 class="m-heading__title">{{t "Subscribed!"}}</h1>
+        <p class="m-heading__description in-subscribe-page">
+          {{t "Now check your inbox and click the link to confirm your subscription."}}
+        </p>
+      </header>
+    </div>
+    <p class="m-subscribe__invalid m-small-text">
+      {{t "Please enter a valid email address"}}
+    </p>
+    <p class="m-subscribe__error m-small-text">
+      {{t "Oops! There was an error sending the email, please try later"}}
+    </p>
+  </form>
+</div>

post.hbs

@@ -22,11 +22,7 @@ into the {body} of the default.hbs template --}}
         {{!-- Everything inside the #post tags pulls data from the post --}}
         {{#post}}
           <div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
-            {{#if @labs.subscribers}}
+            <div class="l-post-content {{#if @labs.subscribers}}has-subscribe-form{{/if}} {{#if @labs.members}}has-subscribe-form{{/if}} js-progress-content">
-              <div class="l-post-content has-subscribe-form js-progress-content">
-            {{else}}
-              <div class="l-post-content js-progress-content">
-            {{/if}}
               <header class="m-heading">
                 <h1 class="m-heading__title in-post">{{title}}</h1>
                 <div class="m-heading__meta">
@@ -84,11 +80,24 @@ into the {body} of the default.hbs template --}}
               </div>
             </section>
           {{/if}}
-          {{#if @labs.subscribers}}
+          {{#if @labs.members}}
-            <section class="m-author">
+            <section class="m-subscribe-section">
-          {{else}}
+              <div class="l-wrapper in-post">
-            <section class="m-author no-subscribers">
+                <div class="m-subscribe-section__content">
+                  <div class="m-subscribe-section__text">
+                    <h4 class="m-subscribe-section__title">{{t "Subscribe to our newsletter"}}</h4>
+                    <p class="m-subscribe-section__description">
+                      {{t "Get the latest posts delivered right to your inbox."}}
+                    </p>
+                  </div>
+                  <div class="m-subscribe-section__form">
+                    {{> "newsletter-form"}}
+                  </div>
+                </div>
+              </div>
+            </section>
           {{/if}}
+          <section class="m-author">
             <div class="m-author__content">
               <div class="m-author__picture">
                 <a href="{{primary_author.url}}" class="m-author-picture" aria-label="Author picture">

routes.yaml

@@ -0,0 +1,22 @@
+routes:
+  /signup/:
+    template: members/signup
+    data: page.signup
+  /signin/:
+    template: members/signin
+    data: page.signin
+  /membership/:
+    template: members/membership
+    data: page.membership
+  /account/:
+    template: members/account
+    data: page.account
+
+collections:
+  /:
+    permalink: /{slug}/
+    template: index
+
+taxonomies:
+  tag: /tag/{slug}/
+  author: /author/{slug}/

src/sass/components/author/_author.scss

@@ -17,10 +17,6 @@
   @include respond-to('extra-large') {
     padding: 60px 0;
   }
-
-  &.no-subscribers {
-    background-color: var(--secondary-subtle-color);
-  }
 }
 
 .m-author__content {

src/sass/components/subscribe/_subscribe-section.scss

@@ -67,3 +67,42 @@
     margin: 0 auto;
   }
 }
+
+.m-subscribe-section__container {
+  &.loading {
+    .m-button {
+      pointer-events: none;
+      @extend .loading;
+    }
+  }
+
+  &.success {
+    .m-subscribe__success {
+      display: block;
+    }
+
+    .m-subscribe__invalid,
+    .m-subscribe__error,
+    .m-subscribe__form {
+      display: none;
+    }
+  }
+
+  &.invalid {
+    .m-subscribe__invalid {
+      display: block;
+    }
+  }
+
+  &.error {
+    .m-subscribe__error {
+      display: block;
+    }
+  }
+
+  .m-subscribe__success,
+  .m-subscribe__invalid,
+  .m-subscribe__error {
+    display: none;
+  }
+}

src/sass/components/ui/_button.scss

@@ -11,6 +11,7 @@
   cursor: pointer;
   outline: 0;
   border: 0;
+  position: relative;
   background-color: transparent;
   @extend .no-appearance;
   @include transition(all .25s cubic-bezier(.02,.01,.47,1));
@@ -44,4 +45,31 @@
     color: $white;
     background-color: var(--primary-subtle-color);
   }
+
+  &.loading {
+    cursor: default;
+    overflow: hidden;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 25%;
+      height: 2px;
+      background-color: $white;
+      @include animation('loading 1s infinite');
+      @include keyframes(loading) {
+        0% {
+          @include transform(translatex(0));
+        }
+        50% {
+          @include transform(translatex(300%));
+        }
+        100% {
+          @include transform(translatex(0));
+        }
+      }
+    }
+  }
 }