migrate to /api/connect/newsletter/subscribe

overheadhunter · overheadhunter · commit 5972148a3dff · 2025-09-26T16:59:46.000+02:00
and adding captcha validation to newsletter subscription
diff --git a/assets/js/androidkey.js b/assets/js/androidkey.js
@@ -1,7 +1,5 @@
 "use strict";
 
-// requires newsletter.js
-
 class AndroidLicense {
 
   constructor(form, checkoutData) {
@@ -20,9 +18,6 @@ class AndroidLicense {
         eventCallback: data => {
           if (data.name == "checkout.completed") {
             this.onCheckoutSucceeded();
-            if (this._checkoutData.acceptNewsletter) {
-              subscribeToNewsletter(data.customer.email, 6);
-            }
           } else if (data.name == "checkout.closed") {
             this._checkoutData.inProgress = false;
           }
diff --git a/assets/js/desktopkey.js b/assets/js/desktopkey.js
@@ -1,7 +1,5 @@
 "use strict";
 
-// requires newsletter.js
-
 class DesktopLicense {
 
   constructor(form, checkoutData) {
@@ -20,9 +18,6 @@ class DesktopLicense {
         eventCallback: data => {
           if (data.name == "checkout.completed") {
             this.onCheckoutSucceeded();
-            if (this._checkoutData.acceptNewsletter) {
-              subscribeToNewsletter(data.customer.email, 6);
-            }
           } else if (data.name == "checkout.closed") {
             this._checkoutData.inProgress = false;
           }
diff --git a/assets/js/hubcontact.js b/assets/js/hubcontact.js
@@ -29,7 +29,7 @@ class HubContact {
     }).done(_ => {
       this.onRequestSucceeded();
       if (this._submitData.acceptNewsletter) {
-        subscribeToNewsletter(this._submitData.email, 7);
+        subscribeToNewsletter(this._submitData.email, 7); // FIXME move to backend
       }
     }).fail(xhr => {
       this.onRequestFailed(xhr.responseJSON?.message || 'Request failed.');
diff --git a/assets/js/hubmanaged.js b/assets/js/hubmanaged.js
@@ -111,7 +111,7 @@ class HubManaged {
     }).done(_ => {
       this.onRequestSucceeded();
       if (this._submitData.acceptNewsletter) {
-        subscribeToNewsletter(this._submitData.email, 7);
+        subscribeToNewsletter(this._submitData.email, 7); // FIXME move to backend
       }
     }).fail(xhr => {
       this.onRequestFailed(xhr.responseJSON?.message || 'Requesting Hub Managed failed.');
diff --git a/assets/js/newsletter.js b/assets/js/newsletter.js
@@ -1,6 +1,6 @@
 "use strict";
 
-const SUBSCRIBE_NEWSLETTER_URL = LEGACY_API_URL + '/listmonk/subscribe.php';
+const SUBSCRIBE_NEWSLETTER_URL = API_BASE_URL + '/connect/newsletter/subscribe';
 
 class Newsletter {
 
@@ -20,7 +20,7 @@ class Newsletter {
     this._data.errorMessage = '';
     this._data.success = false;
     subscribeToNewsletter(
-      this._data.email, this._data.listId
+      this._data.email, this._data.listId, this._data.captcha
     ).done(() => {
       this.onSubscribeSucceeded();
     }).fail(xhr => {
@@ -41,24 +41,16 @@ class Newsletter {
   }
 }
 
-function subscribeToNewsletter(email, listId) {
+function subscribeToNewsletter(email, listId, captcha) {
   return $.ajax({
     url: SUBSCRIBE_NEWSLETTER_URL,
-    type: 'GET',
-    xhrFields: {
-      withCredentials: true
-    }
-  }).then(() => {
-    return $.ajax({
-      url: SUBSCRIBE_NEWSLETTER_URL,
-      type: 'POST',
-      data: {
-        email: email,
-        listid: listId
-      },
-      xhrFields: {
-        withCredentials: true
-      }
-    });
-  });
+    type: 'POST',
+    data: JSON.stringify({
+      email: email,
+      listIds: [listId],
+      captcha: captcha
+    }),
+    contentType: "application/json; charset=utf-8",
+    dataType: "json"
+});
 }
diff --git a/assets/js/supportercert.js b/assets/js/supportercert.js
@@ -25,7 +25,7 @@ class SupporterCertificate {
       type: 'POST',
       data: JSON.stringify(this._submitData),
       contentType: "application/json; charset=utf-8",
-    dataType: "json"
+      dataType: "json"
     }).done(_ => {
       this.onRequestSucceeded();
     }).fail(xhr => {
diff --git a/layouts/android/single.html b/layouts/android/single.html
@@ -63,10 +63,14 @@ <h3 id="keyrecovery" class="font-headline text-xl md:text-2xl leading-relaxed mb
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
     {{ $androidKeyJs := resources.Get "js/androidkey.js" }}
     <script type="text/javascript" src="{{ $androidKeyJs.RelPermalink }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
   {{ else }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
     {{ $androidKeyJs := resources.Get "js/androidkey.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $androidKeyJs.RelPermalink }}" integrity="{{ $androidKeyJs.Data.Integrity }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
   {{ end }}
 {{ end }}
diff --git a/layouts/for-individuals/single.html b/layouts/for-individuals/single.html
@@ -180,16 +180,19 @@ <h2 id="contact" class="font-h2 mb-4">{{ i18n "for_individuals_join_community_ti
     </a>
   </section>
 
-  <section x-data="{data: {email: '', listId: 6, acceptTerms: false, errorMessage: '', success: false, inProgress: false}}" class="container text-center pt-12 pb-24">
+  <section x-data="{data: {email: '', listId: 'cryptomator', captcha: null, acceptTerms: false, errorMessage: '', success: false, inProgress: false}, captchaState: null}" class="container text-center pt-12 pb-24">
     <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "home_newsletter_title" . }}</h2>
 
-    <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto mb-4">
+    <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto mb-4" @submit.prevent="new Newsletter($refs.form, data).subscribe(); $refs.captcha.reset()">
       <p class="font-p mb-4">{{ i18n "home_newsletter_instruction" . | safeHTML }}</p>
       <div class="flex justify-center items-center rounded-sm bg-gray-300 mb-4">
         <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow rounded-l border-gray-300 focus:ring-0 focus:border-secondary" placeholder="{{ i18n "home_newsletter_email_placeholder" }}" required/>
-        <button :disabled="data.inProgress || !data.acceptTerms" @click.prevent="new Newsletter($refs.form, data).subscribe()" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="for-individuals-newsletter-form">
+        <button :disabled="data.inProgress || !data.acceptTerms || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="for-individuals-newsletter-form">
           <i :class="{'fa-envelope': !data.inProgress, 'fa-spinner fa-spin': data.inProgress}" class="fa-solid" aria-hidden="true"></i> {{ i18n "home_newsletter_subscribe" }}
         </button>
+
+        {{ $captchaUrl := printf "%s/connect/newsletter/challenge" .Site.Params.apiBaseUrl }}
+        {{ partial "captcha.html" (dict "challengeUrl" $captchaUrl "captchaPayload" "data.captcha" "captchaState" "captchaState") }}
       </div>
       <p class="font-p">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "data.acceptTerms" "label" (i18n "accept_newsletter_privacy" | safeHTML)) }}</p>
       <p :class="{'hidden': !data.errorMessage}" class="text-sm text-red-600 mt-2" x-text="data.errorMessage"></p>
@@ -209,8 +212,12 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "home_newsletter_title" . }}</h
   {{ if hugo.IsDevelopment }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
   {{ else }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
   {{ end }}
 {{ end }}
diff --git a/layouts/for-teams/single.html b/layouts/for-teams/single.html
@@ -182,16 +182,19 @@ <h2 id="contact" class="font-h2 mb-4">{{ i18n "hub_contact_us_title" . }}</h2>
     </a>
   </section>
 
-  <section x-data="{data: {email: '', listId: 7, acceptTerms: false, errorMessage: '', success: false, inProgress: false}}" class="container text-center pt-12 pb-24">
+  <section x-data="{data: {email: '', listId: 'cryptomatorhub', captcha: null, acceptTerms: false, errorMessage: '', success: false, inProgress: false}, captchaState: null}" class="container text-center pt-12 pb-24">
     <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "hub_newsletter_title" . }}</h2>
 
-    <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto mb-4">
+    <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto mb-4" @submit.prevent="new Newsletter($refs.form, data).subscribe(); $refs.captcha.reset()">
       <p class="font-p mb-4">{{ i18n "hub_newsletter_instruction" . | safeHTML }}</p>
       <div class="flex justify-center items-center rounded-sm bg-gray-300 mb-4">
         <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow input-box rounded-r-none focus:border-secondary" placeholder="{{ i18n "hub_newsletter_email_placeholder" }}" required/>
-        <button :disabled="data.inProgress || !data.acceptTerms" @click.prevent="new Newsletter($refs.form, data).subscribe()" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="hub-newsletter-form">
+        <button :disabled="data.inProgress || !data.acceptTerms || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="hub-newsletter-form">
           <i :class="{'fa-envelope': !data.inProgress, 'fa-spinner fa-spin': data.inProgress}" class="fa-solid" aria-hidden="true"></i> {{ i18n "hub_newsletter_subscribe" }}
         </button>
+
+        {{ $captchaUrl := printf "%s/connect/newsletter/challenge" .Site.Params.apiBaseUrl }}
+        {{ partial "captcha.html" (dict "challengeUrl" $captchaUrl "captchaPayload" "data.captcha" "captchaState" "captchaState") }}
       </div>
       <p class="font-p">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "data.acceptTerms" "label" (i18n "accept_hub_newsletter_privacy" | safeHTML)) }}</p>
       <p :class="{'hidden': !data.errorMessage}" class="text-sm text-red-600 mt-2" x-text="data.errorMessage"></p>
@@ -211,8 +214,12 @@ <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "hub_newsletter_title" . }}</h2
   {{ if hugo.IsDevelopment }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
   {{ else }}
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
   {{ end }}
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -147,16 +147,19 @@ <h4 class="font-medium lg:text-lg leading-relaxed">
     </div>
   </section>
 
-  <section x-data="{data: {email: '', listId: 6, acceptTerms: false, errorMessage: '', success: false, inProgress: false}}" class="container text-center pt-12 pb-24">
+  <section x-data="{data: {email: '', listId: 'cryptomator', captcha: null, acceptTerms: false, errorMessage: '', success: false, inProgress: false}, captchaState: null}" class="container text-center pt-12 pb-24">
     <h2 id="newsletter" class="font-h2 mb-4">{{ i18n "home_newsletter_title" . }}</h2>
 
-    <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto mb-4">
+    <form x-show="!data.success" x-ref="form" class="max-w-xl mx-auto mb-4" @submit.prevent="new Newsletter($refs.form, data).subscribe(); $refs.captcha.reset()">
       <p class="font-p mb-4">{{ i18n "home_newsletter_instruction" . | safeHTML }}</p>
       <div class="flex justify-center items-center rounded-sm bg-gray-300 mb-4">
         <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="grow rounded-l border-gray-300 focus:ring-0 focus:border-secondary" placeholder="{{ i18n "home_newsletter_email_placeholder" }}" required/>
-        <button :disabled="data.inProgress || !data.acceptTerms" @click.prevent="new Newsletter($refs.form, data).subscribe()" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="home-newsletter-form">
+        <button :disabled="data.inProgress || !data.acceptTerms || captchaState == 'verifying'" type="submit" class="shrink-0 flex items-center gap-1 btn btn-primary rounded-l-none px-4" data-umami-event="home-newsletter-form">
           <i :class="{'fa-envelope': !data.inProgress, 'fa-spinner fa-spin': data.inProgress}" class="fa-solid" aria-hidden="true"></i> {{ i18n "home_newsletter_subscribe" }}
         </button>
+
+        {{ $captchaUrl := printf "%s/connect/newsletter/challenge" .Site.Params.apiBaseUrl }}
+        {{ partial "captcha.html" (dict "challengeUrl" $captchaUrl "captchaPayload" "data.captcha" "captchaState" "captchaState") }}
       </div>
       <p class="font-p">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "data.acceptTerms" "label" (i18n "accept_newsletter_privacy" | safeHTML)) }}</p>
       <p :class="{'hidden': !data.errorMessage}" class="text-sm text-red-600 mt-2" x-text="data.errorMessage"></p>
@@ -262,10 +265,14 @@ <h2 class="font-h2 mb-1">{{ i18n "home_cebit_title" . }}</h2>
     <script type="text/javascript" src="{{ $indexJs.RelPermalink }}" defer></script>
     {{ $newsletterJs := resources.Get "js/newsletter.js" }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" defer></script>
   {{ else }}
     {{ $indexJs := resources.Get "js/index.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $indexJs.RelPermalink }}" integrity="{{ $indexJs.Data.Integrity }}" defer></script>
     {{ $newsletterJs := resources.Get "js/newsletter.js" | minify | fingerprint }}
     <script type="text/javascript" src="{{ $newsletterJs.RelPermalink }}" integrity="{{ $newsletterJs.Data.Integrity }}" defer></script>
+    {{ $altchaJs := resources.Get "js/altcha/altcha.js" }}
+    <script type="module" src="{{ $altchaJs.RelPermalink }}" integrity="{{ $altchaJs.Data.Integrity }}" defer></script>
   {{ end }}
 {{ end }}
diff --git a/layouts/partials/android-getkey.html b/layouts/partials/android-getkey.html
@@ -1,9 +1,9 @@
-<div x-data="{checkoutData: {price: null, discountedPrice: null, email: '', errorMessage: '', success: false, inProgress: false, acceptNewsletter: false}, acceptTerms: false, androidLicense: null}" x-init="androidLicense = new AndroidLicense($refs.form, checkoutData); androidLicense.loadPrice()" class="white-box">
+<div x-data="{checkoutData: {price: null, discountedPrice: null, email: '', errorMessage: '', success: false, inProgress: false, acceptNewsletter: false, captcha: null}, acceptTerms: false, androidLicense: null, captchaState: null}" x-init="androidLicense = new AndroidLicense($refs.form, checkoutData); androidLicense.loadPrice()" class="white-box">
   <div class="px-4 py-2 border-b border-primary text-center">
     <h3 class="font-h3 text-lg">{{ i18n "android_getkey_title" }}</h3>
   </div>
 
-  <form x-show="!checkoutData.success" x-ref="form" class="px-4 py-8">
+  <form x-show="!checkoutData.success" x-ref="form" class="px-4 py-8" @submit.prevent="checkoutData.acceptNewsletter && subscribeToNewsletter(checkoutData.email, 'cryptomator', checkoutData.captcha); androidLicense.checkout('{{ .Site.Language.Lang }}'); $refs.captcha.reset()">
     <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "android_getkey_price" }}</label>
       <div class="relative input-box flex items-center gap-2 w-full lg:w-1/2">
@@ -20,9 +20,11 @@ <h3 class="font-h3 text-lg">{{ i18n "android_getkey_title" }}</h3>
       <p class="font-p mb-4">{{ i18n "android_getkey_instruction" }}</p>
       <p class="font-p mb-2">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_terms_and_privacy" | safeHTML)) }}</p>
       <p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "checkoutData.acceptNewsletter" "label" (i18n "accept_newsletter_optional")) }}</p>
-      <button :disabled="checkoutData.inProgress || !acceptTerms" @click.prevent="androidLicense.checkout('{{ .Site.Language.Lang }}')" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="android-getkey-checkout">
+      <button :disabled="checkoutData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="android-getkey-checkout">
         <i x-show="!checkoutData.inProgress" class="fa-solid fa-shopping-cart" aria-hidden="true"></i><i x-show="checkoutData.inProgress" class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i> {{ i18n "android_getkey_checkout" }}
       </button>
+      {{ $captchaUrl := printf "%s/connect/newsletter/challenge" .Site.Params.apiBaseUrl }}
+      {{ partial "captcha.html" (dict "challengeUrl" $captchaUrl "captchaPayload" "checkoutData.captcha" "captchaState" "captchaState") }}
       <p :class="{'hidden': !checkoutData.errorMessage}" class="text-sm text-red-600 mt-2" x-text="checkoutData.errorMessage"></p>
     </div>
   </form>
diff --git a/layouts/partials/donate-creditcard.html b/layouts/partials/donate-creditcard.html
@@ -43,7 +43,7 @@
 
         <p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_privacy" | safeHTML)) }}</p>
 
-        <button :disabled="oneTimePaymentStatus.inProgress || !oneTimePaymentStatus.validCardNum || !acceptTerms || captchaState == 'verifying'" class="btn btn-primary w-full md:w-64" data-umami-event="donate-creditcard-onetime-checkout">
+        <button :disabled="oneTimePaymentStatus.inProgress || !oneTimePaymentStatus.validCardNum || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64" data-umami-event="donate-creditcard-onetime-checkout">
           <i :class="{'fa-credit-card': !oneTimePaymentStatus.inProgress, 'fa-spinner fa-spin': oneTimePaymentStatus.inProgress}" class="fa-solid" aria-hidden="true"></i>
           {{ i18n "donate_creditcard_once_paynow" }}
         </button>
diff --git a/layouts/partials/supporter-cert-funder.html b/layouts/partials/supporter-cert-funder.html

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ class HubContact {`
`29`	`29`	`}).done(_ => {`
`30`	`30`	`this.onRequestSucceeded();`
`31`	`31`	`if (this._submitData.acceptNewsletter) {`
`32`		`- subscribeToNewsletter(this._submitData.email, 7);`
	`32`	`+ subscribeToNewsletter(this._submitData.email, 7); // FIXME move to backend`
`33`	`33`	`}`
`34`	`34`	`}).fail(xhr => {`
`35`	`35`	`this.onRequestFailed(xhr.responseJSON?.message \|\| 'Request failed.');`
Original file line number	Diff line number	Diff line change
`@@ -111,7 +111,7 @@ class HubManaged {`
`111`	`111`	`}).done(_ => {`
`112`	`112`	`this.onRequestSucceeded();`
`113`	`113`	`if (this._submitData.acceptNewsletter) {`
`114`		`- subscribeToNewsletter(this._submitData.email, 7);`
	`114`	`+ subscribeToNewsletter(this._submitData.email, 7); // FIXME move to backend`
`115`	`115`	`}`
`116`	`116`	`}).fail(xhr => {`
`117`	`117`	`this.onRequestFailed(xhr.responseJSON?.message \|\| 'Requesting Hub Managed failed.');`