diff --git a/locales/en.json b/locales/en.json index 8036e20..0add769 100644 --- a/locales/en.json +++ b/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.", diff --git a/locales/es.json b/locales/es.json index 43751b5..55fe5a1 100644 --- a/locales/es.json +++ b/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.", diff --git a/page-newsletter.hbs b/page-newsletter.hbs new file mode 100644 index 0000000..4cb80e8 --- /dev/null +++ b/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}} + +
+ + + {{t "Back to home"}} + +
+ +
+
+ {{^if success}} +
+
+

{{t "Subscribe to"}} {{@site.title}}

+

+ {{t "Stay up to date! Get all the latest & greatest posts delivered straight to your inbox."}} +

+
+ {{> "newsletter-form"}} +
+ {{else}} +
+
+

{{t "Subscribed!"}}

+

+ {{t "You've successfully subscribed to"}} {{@site.title}} {{t "with the email address"}} + {{email}} +

+
+ {{t "Back to home"}} +
+ {{/if}} +
+
diff --git a/partials/newsletter-form.hbs b/partials/newsletter-form.hbs new file mode 100644 index 0000000..069e98d --- /dev/null +++ b/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. +--}} + +
+
+ + + + +
+
diff --git a/post.hbs b/post.hbs index b43586d..192df21 100644 --- a/post.hbs +++ b/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}}
- {{#if @labs.subscribers}} -
- {{else}} -
- {{/if}} +

{{title}}

@@ -84,11 +80,24 @@ into the {body} of the default.hbs template --}}
{{/if}} - {{#if @labs.subscribers}} -
- {{else}} -
+ {{#if @labs.members}} + {{/if}} +
diff --git a/routes.yaml b/routes.yaml new file mode 100644 index 0000000..ec02b49 --- /dev/null +++ b/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}/ diff --git a/src/sass/components/author/_author.scss b/src/sass/components/author/_author.scss index 203abd6..7a9edc6 100644 --- a/src/sass/components/author/_author.scss +++ b/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 { diff --git a/src/sass/components/subscribe/_subscribe-section.scss b/src/sass/components/subscribe/_subscribe-section.scss index 100c9be..b446911 100644 --- a/src/sass/components/subscribe/_subscribe-section.scss +++ b/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; + } +} diff --git a/src/sass/components/ui/_button.scss b/src/sass/components/ui/_button.scss index bfba950..5e1f356 100644 --- a/src/sass/components/ui/_button.scss +++ b/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)); + } + } + } + } }