Enhance Altcha integration and add it to all forms

Author: SailReal

assets/js/cardpayments.js

@@ -127,21 +127,15 @@ class OneTimePayment {
     this._status.success = false;
     this._status.errorMessage = error.message;
     this._status.inProgress = false;
-    if (captcha) {
-      this._status.captcha = '';
-      captcha.reset();
-    }
+    this._status.captcha = null;
   }
 
   onPaymentSucceeded() {
     console.info('Stripe payment succeeded!');
     this._status.success = true;
     this._status.errorMessage = '';
     this._status.inProgress = false;
-    if (captcha) {
-      this._status.captcha = '';
-      captcha.reset();
-    }
+    this._status.captcha = null;
   }
 
 }

hugo.toml

@@ -125,6 +125,6 @@ block = true
   [[server.headers]]
       for = '/**'
       [server.headers.values]
-        Content-Security-Policy = "default-src 'none'; script-src 'self' 'unsafe-eval' https://umami.skymatic.de/ https://plausible.skymatic.de/ https://community.cryptomator.org/ https://js.stripe.com/ https://*.paddle.com/; style-src 'self' 'unsafe-inline' https://*.paddle.com/; img-src 'self' data: https://static.cryptomator.org/ https://*.paddle.com/ https://paddle.s3.amazonaws.com/; connect-src 'self' https://api.cryptomator.org/ https://store.cryptomator.org/ https://windmill.skymatic.de/ https://umami.skymatic.de/ https://plausible.skymatic.de/ http://localhost:8787/; font-src 'self'; media-src https://static.cryptomator.org/; frame-src https://community.cryptomator.org/ https://js.stripe.com/ https://*.paddle.com/; base-uri 'self'; form-action 'self' https://www.paypal.com/ https://www.coinpayments.net/; frame-ancestors 'none';"
+        Content-Security-Policy = "default-src 'none'; script-src 'self' 'unsafe-eval' https://umami.skymatic.de/ https://plausible.skymatic.de/ https://community.cryptomator.org/ https://js.stripe.com/ https://*.paddle.com/; style-src 'self' 'unsafe-inline' https://*.paddle.com/; img-src 'self' data: https://static.cryptomator.org/ https://*.paddle.com/ https://paddle.s3.amazonaws.com/; connect-src 'self' https://api.cryptomator.org/ https://store.cryptomator.org/ https://windmill.skymatic.de/ https://umami.skymatic.de/ https://plausible.skymatic.de/ http://localhost:8787/ http://localhost/; font-src 'self'; media-src https://static.cryptomator.org/; frame-src https://community.cryptomator.org/ https://js.stripe.com/ https://*.paddle.com/; base-uri 'self'; form-action 'self' https://www.paypal.com/ https://www.coinpayments.net/; frame-ancestors 'none';"
         Strict-Transport-Security = "max-age=31536000; includeSubDomains"
         X-Content-Type-Options = "nosniff"

i18n/en.yaml

@@ -988,7 +988,7 @@
 
 # Altcha
 - id: altcha_label
-  translation: "I'm not a bot"
+  translation: "I\\'m not a bot"
 - id: altcha_error
   translation: "Verification failed. Try again later."
 - id: altcha_expired

layouts/hub-billing/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class="container pt-12 pb-24">
-    <form x-data="{subscriptionData: {state: 'MISSING_PARAMS', captcha: null, hubId: null, returnUrl: null, session: null, customBilling: null, monthlyPrice: null, errorMessage: '', inProgress: false, restartModal: {open: false, nextPayment: null}, changeSeatsModal: {open: false, confirmation: false, immediatePayment: null}, token: null, details: null, quantity: 5, email: ''}, acceptTerms: false, hubSubscription: null}" x-init="hubSubscription = new HubSubscription($refs.form, subscriptionData, new URLSearchParams(location.search))" x-ref="form">
+    <form x-data="{subscriptionData: {state: 'MISSING_PARAMS', captcha: null, hubId: null, returnUrl: null, session: null, customBilling: null, monthlyPrice: null, errorMessage: '', inProgress: false, restartModal: {open: false, nextPayment: null}, changeSeatsModal: {open: false, confirmation: false, immediatePayment: null}, token: null, details: null, quantity: 5, email: ''}, acceptTerms: false, hubSubscription: null, captchaState: null}" x-init="hubSubscription = new HubSubscription($refs.form, subscriptionData, new URLSearchParams(location.search))" x-ref="form">
       <template x-if="subscriptionData.state == 'MISSING_PARAMS'">
         <div class="text-center max-w-xl mx-auto">
           <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
@@ -35,13 +35,11 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
             <i class="fas fa-sign-in fa-fw"></i>
             {{ i18n "hub_billing_createsession_description" . }}
           </p>
-          <div class="mb-2">
-            {{ partial "captcha.html" (dict "alpineVariable" "subscriptionData.captcha") }}
-          </div>
-          <button x-show="subscriptionData.captcha" :disabled="subscriptionData.inProgress" @click.prevent="hubSubscription.createSession()" type="submit" class="btn btn-primary w-full md:w-64">
+          <button x-show="subscriptionData.captcha" :disabled="subscriptionData.inProgress || captchaState == 'verifying'" @click.prevent="hubSubscription.createSession()" type="submit" class="btn btn-primary w-full md:w-64">
             <i :class="{'fa-paper-plane': !subscriptionData.inProgress, 'fa-spinner fa-spin': subscriptionData.inProgress}" class="fas fa-fw" aria-hidden="true"></i>
             {{ i18n "hub_billing_createsession_submit" . }}
           </button>
+          {{ partial "captcha.html" (dict "alpineVariable" "subscriptionData.captcha" "captchaState" "captchaState") }}
           <p :class="{'hidden': !subscriptionData.errorMessage}" class="text-sm text-red-600 mt-2" x-text="subscriptionData.errorMessage"></p>
         </div>
       </template>

layouts/hub-demo/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: '', url: null, username: null, password: null}, submitData: {captcha: null, email: ''}, hubDemo: null}" x-init="hubDemo = new HubDemo($refs.form, feedbackData, submitData)" class="container py-12">
+  <section x-data="{feedbackData: {success: false, inProgress: false, errorMessage: '', url: null, username: null, password: null}, submitData: {captcha: null, email: ''}, hubDemo: null, captchaState: null}" x-init="hubDemo = new HubDemo($refs.form, feedbackData, submitData)" class="container py-12">
     <header class="mb-6">
       <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ i18n "hub_demo_description" }}</p>
@@ -58,12 +58,10 @@ <h3 class="font-h3">
         <p class="font-p mb-4">
           {{ i18n "hub_demo_instruction" }}
         </p>
-        <div class="mb-4">
-          {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha") }}
-        </div>
-        <button x-show="submitData.captcha" :disabled="feedbackData.inProgress" @click.prevent="hubDemo.request()" type="submit" class="btn btn-primary w-full md:w-64" x-cloak>
+        <button x-show="submitData.captcha" :disabled="feedbackData.inProgress || captchaState == 'verifying'" @click.prevent="hubDemo.request()" type="submit" class="btn btn-primary w-full md:w-64" x-cloak>
           <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fas fa-fw" aria-hidden="true"></i> {{ i18n "hub_demo_submit" }}
         </button>
+        {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha" "captchaState" "captchaState") }}
         <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mt-2" x-text="feedbackData.errorMessage"></p>
       </div>
     </form>

layouts/hub-managed/single.html

@@ -1,11 +1,11 @@
 {{ define "main" }}
-  <section x-data="{steps: ['{{ i18n "hub_managed_step_1_nav_title" }}', '{{ i18n "hub_managed_step_2_nav_title" }}', '{{ i18n "hub_managed_step_3_nav_title" }}', '{{ i18n "hub_managed_step_4_nav_title" }}'], feedbackData: {currentStep: 0, success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, email: '', team: '', subdomain: '', quantity: null, message: null, acceptNewsletter: false}, acceptTerms: false, lowQuantityModalIsOpen: false, hubManaged: null}" x-init="hubManaged = new HubManaged($refs.form, feedbackData, submitData); $watch('submitData.team', team => submitData.subdomain = teamToSubdomain(team))" class="container py-12">
+  <section x-data="{steps: ['{{ i18n "hub_managed_step_1_nav_title" }}', '{{ i18n "hub_managed_step_2_nav_title" }}', '{{ i18n "hub_managed_step_3_nav_title" }}', '{{ i18n "hub_managed_step_4_nav_title" }}'], feedbackData: {currentStep: 0, success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, email: '', team: '', subdomain: '', quantity: null, message: null, acceptNewsletter: false}, acceptTerms: false, lowQuantityModalIsOpen: false, hubManaged: null, captchaState: null}" x-init="hubManaged = new HubManaged($refs.form, feedbackData, submitData); $watch('submitData.team', team => submitData.subdomain = teamToSubdomain(team))" class="container py-12">
     <header class="mb-6">
       <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ i18n "hub_managed_description" }}</p>
     </header>
 
-    <form x-ref="form">
+    <form x-ref="form" @submit.prevent="hubManaged.request()">
       <section class="white-box">
         <div x-show="!feedbackData.success" class="md:min-h-110 px-4 py-5 md:p-6 md:grid md:grid-cols-3 md:gap-6">
           <header class="mb-8 md:col-span-1 md:mt-4">
@@ -187,15 +187,13 @@ <h2 class="font-h2 mb-6">
                 <p class="font-p text-sm mb-2">
                   {{ partial "checkbox.html" (dict "context" . "alpineVariable" "submitData.acceptNewsletter" "label" (i18n "accept_hub_newsletter_optional")) }}
                 </p>
-                <div class="mb-2">
-                  {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha") }}
-                </div>
                 <div class="mt-auto">
                   <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                  <button :disabled="feedbackData.inProgress || !acceptTerms" @click.prevent="hubManaged.request()" type="submit" class="btn btn-primary w-full md:w-64 plausible-event-name=hub-managed-form" data-umami-event="hub-managed-form" x-cloak>
+                  <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64 plausible-event-name=hub-managed-form" data-umami-event="hub-managed-form" x-cloak>
                     <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fas fa-fw" aria-hidden="true"></i>
                     {{ i18n "hub_managed_step_4_submit" }}
                   </button>
+                  {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha" "captchaState" "captchaState") }}
                 </div>
               </div>
             </div>

layouts/partials/captcha.html

@@ -2,6 +2,8 @@
   challengeurl="https://windmill.skymatic.de/api/w/store/jobs/run_wait_result/p/f/captcha/challenge?token=pT9U3KnkRF4SvuChora34xRdhezaG3Yz&payload=e30%3D"
   hidelogo
   hidefooter
+  floating="auto"
+  @statechange="{{ .captchaState }} = $event.detail.state; if ($event.detail.state === 'verified') { {{ .alpineVariable }} = $event.detail.payload }"
   :strings="JSON.stringify({
     label: '{{ i18n "altcha_label" }}',
     error: '{{ i18n "altcha_error" }}',
@@ -10,5 +12,4 @@
     verifying: '{{ i18n "altcha_verifying" }}',
     waitAlert: '{{ i18n "altcha_waitAlert" }}'
   })"
-  x-on:statechange="if ($event.detail.state === 'verified') { {{ .alpineVariable }} = $event.detail.payload }"
 ></altcha-widget>

layouts/partials/donate-creditcard.html

@@ -1,4 +1,4 @@
-<div x-data="{amount: 15, currency: 'EUR', frequency: 'once', oneTimePayment: null, oneTimePaymentStatus: {validCardNum: false, captcha: null, errorMessage: '', inProgress: false, success: false}, recurringPayment: new RecurringPayment(), acceptTerms: false}" x-init="oneTimePayment = new OneTimePayment(oneTimePaymentStatus)">
+<div x-data="{amount: 15, currency: 'EUR', frequency: 'once', oneTimePayment: null, oneTimePaymentStatus: {validCardNum: false, captcha: null, errorMessage: '', inProgress: false, success: false}, recurringPayment: new RecurringPayment(), acceptTerms: false, captchaState: null}" x-init="oneTimePayment = new OneTimePayment(oneTimePaymentStatus)">
   <div class="flex flex-wrap md:flex-nowrap">
     <div class="w-full mb-4 md:w-1/2 md:pr-3">
       <label class="label-uppercase mb-2">{{ i18n "donate_creditcard_amount" }}</label>
@@ -29,7 +29,7 @@
     </div>
   </div>
 
-  <div x-show="frequency === 'once'">
+  <form x-show="frequency === 'once'" @submit.prevent="oneTimePayment.charge(amount, currency)">
     <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "donate_creditcard_number" }}</label>
       <div> <!-- wrapper needed for stripe text field -->
@@ -42,21 +42,19 @@
 
       <p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_privacy" | safeHTML)) }}</p>
 
-      <div class="flex justify-center mb-4">
-        {{ partial "captcha.html" (dict "alpineVariable" "oneTimePaymentStatus.captcha") }}
-      </div>
-
-      <button x-show="oneTimePaymentStatus.captcha" :disabled="oneTimePaymentStatus.inProgress || !acceptTerms" @click="oneTimePayment.charge(amount, currency)" class="btn btn-primary w-full md:w-64 plausible-event-name=donate-creditcard-onetime-checkout" data-umami-event="donate-creditcard-onetime-checkout">
+      <button :disabled="oneTimePaymentStatus.inProgress || !oneTimePaymentStatus.validCardNum || !acceptTerms || captchaState == 'verifying'" class="btn btn-primary w-full md:w-64 plausible-event-name=donate-creditcard-onetime-checkout" data-umami-event="donate-creditcard-onetime-checkout">
         <i class="fas fa-credit-card"></i>
         {{ i18n "donate_creditcard_once_paynow" }}
         <i class="fas fa-spinner fa-spin" x-show="oneTimePaymentStatus.inProgress" aria-hidden="true"></i>
       </button>
 
+      {{ partial "captcha.html" (dict "alpineVariable" "oneTimePaymentStatus.captcha" "captchaState" "captchaState") }}
+
       <p class="text-sm text-red-600 mt-2" x-text="oneTimePaymentStatus.errorMessage"></p>
     </div>
 
     <p class="text-lg text-center mt-8" x-show="oneTimePaymentStatus.success">{{ ":+1:" | emojify }} {{ i18n "donate_creditcard_once_success" }}</p>
-  </div>
+  </form>
 
   <div x-show="frequency === 'recurring'" class="text-center">
     <p class="font-p mb-4">{{ i18n "donate_creditcard_recurring_instruction" | safeHTML }}</p>

layouts/partials/supporter-cert-contributor.html

@@ -1,5 +1,5 @@
-<div x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, type: 'contributor', email: '', github_username: '', github_contribution_link: ''}, acceptTerms: false}">
-  <form x-show="!feedbackData.success" x-ref="form">
+<div x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, type: 'contributor', email: '', github_username: '', github_contribution_link: ''}, acceptTerms: false, captchaState: null}">
+  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request()">
     <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "supporter_cert_contributor_github_username" }}</label>
       <input x-model="submitData.github_username" x-ref="github_username" @blur="$refs.github_username.classList.add('show-invalid')" type="text" class="input-box w-full" pattern="^[A-Za-z\d](?:[A-Za-z\d]|-(?=[A-Za-z\d])){0,38}$" maxlength="39" placeholder="{{ i18n "supporter_cert_contributor_github_username_placeholder" }}" required/>
@@ -15,12 +15,10 @@
     <div class="text-center mt-8">
       <p class="font-p mb-4">{{ i18n "supporter_cert_contributor_instruction" . | safeHTML }}</p>
       <p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_terms_and_privacy" | safeHTML)) }}</p>
-      <div class="flex justify-center mb-4">
-        {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha") }}
-      </div>
-      <button x-show="submitData.captcha" :disabled="feedbackData.inProgress || !acceptTerms" @click.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request()" type="submit" class="btn btn-primary w-full md:w-64 plausible-event-name=supporter-cert-contributor-form" data-umami-event="supporter-cert-contributor-submit" x-cloak>
+      <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" class="btn btn-primary w-full md:w-64 plausible-event-name=supporter-cert-contributor-form" data-umami-event="supporter-cert-contributor-submit" x-cloak>
         <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fas fa-fw" aria-hidden="true"></i> {{ i18n "supporter_cert_common_submit" }}
       </button>
+      {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha" "captchaState" "captchaState") }}
       <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mt-2" x-text="feedbackData.errorMessage"></p>
     </div>
   </form>

layouts/partials/supporter-cert-influencer.html

@@ -1,5 +1,5 @@
-<div x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, type: 'influencer', email: '', reference: ''}, acceptTerms: false}">
-  <form x-show="!feedbackData.success" x-ref="form">
+<div x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, type: 'influencer', email: '', reference: ''}, acceptTerms: false, captchaState: null}">
+  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request()">
     <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "supporter_cert_influencer_reference" }}</label>
       <textarea x-model="submitData.reference" x-ref="reference" @blur="$refs.reference.classList.add('show-invalid')" type="url" class="input-box w-full" rows="5" maxlength="800" placeholder="{{ i18n "supporter_cert_influencer_reference_placeholder" }}" required></textarea>
@@ -11,12 +11,10 @@
     <div class="text-center mt-8">
       <p class="font-p mb-4">{{ i18n "supporter_cert_influencer_instruction" }}</p>
       <p class="font-p mb-4">{{ partial "checkbox.html" (dict "context" . "alpineVariable" "acceptTerms" "label" (i18n "accept_terms_and_privacy" | safeHTML)) }}</p>
-      <div class="flex justify-center mb-4">
-        {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha") }}
-      </div>
-      <button x-show="submitData.captcha" :disabled="feedbackData.inProgress || !acceptTerms" @click.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request()" type="submit" class="btn btn-primary w-full md:w-64 plausible-event-name=supporter-cert-influencer-form" data-umami-event="supporter-cert-influencer-form" x-cloak>
+      <button :disabled="feedbackData.inProgress || !acceptTerms || captchaState == 'verifying'" type="submit" class="btn btn-primary w-full md:w-64 plausible-event-name=supporter-cert-influencer-form" data-umami-event="supporter-cert-influencer-form" x-cloak>
         <i :class="{'fa-paper-plane': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fas fa-fw" aria-hidden="true"></i> {{ i18n "supporter_cert_common_submit" }}
       </button>
+      {{ partial "captcha.html" (dict "alpineVariable" "submitData.captcha" "captchaState" "captchaState") }}
       <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mt-2" x-text="feedbackData.errorMessage"></p>
     </div>
   </form>