reset captcha when submitting form

Author: tobihagemann

assets/js/cardpayments.js

@@ -19,9 +19,8 @@ class OneTimePayment {
    * @param {boolean} status.inProgress Whether an async payment task is currently running
    * @param {boolean} status.success Whether the payment succeeded
    */
-  constructor(status, captcha) {
+  constructor(status) {
     this._status = status;
-    this._captcha = captcha;
   }
 
   /**
@@ -128,7 +127,6 @@ class OneTimePayment {
     this._status.success = false;
     this._status.errorMessage = error.message;
     this._status.inProgress = false;
-    this._captcha.reset();
   }
 
   onPaymentSucceeded() {

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, captchaState: null}" x-init="hubSubscription = new HubSubscription($refs.form, subscriptionData, new URLSearchParams(location.search))" x-ref="form" @submit.prevent="hubSubscription.createSession()">
+    <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" @submit.prevent="hubSubscription.createSession(); $refs.captcha.reset()">
       <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">

layouts/hub-demo/single.html

@@ -5,7 +5,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ i18n "hub_demo_description" }}</p>
     </header>
 
-    <form x-ref="form" @submit.prevent="hubDemo.request()">
+    <form x-ref="form" @submit.prevent="hubDemo.request(); $refs.captcha.reset()">
       <section class="relative white-box">
         <div x-show="!feedbackData.success" class="px-4 py-5 md:p-6 md:grid md:grid-cols-3 md:gap-6">
           <header class="md:col-span-1">

layouts/hub-managed/single.html

@@ -5,7 +5,7 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ i18n "hub_managed_description" }}</p>
     </header>
 
-    <form x-ref="form" @submit.prevent="hubManaged.request()">
+    <form x-ref="form" @submit.prevent="hubManaged.request(); $refs.captcha.reset()">
       <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">

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, captchaState: null}" x-init="oneTimePayment = new OneTimePayment(oneTimePaymentStatus, $refs.captcha)">
+<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>
 
-  <form x-show="frequency === 'once'" @submit.prevent="oneTimePayment.charge(amount, currency)">
+  <form x-show="frequency === 'once'" @submit.prevent="oneTimePayment.charge(amount, currency); $refs.captcha.reset()">
     <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "donate_creditcard_number" }}</label>
       <div> <!-- wrapper needed for stripe text field -->

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, captchaState: null}">
-  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request()">
+  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request(); $refs.captcha.reset()">
     <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/>

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, captchaState: null}">
-  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request()">
+  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request(); $refs.captcha.reset()">
     <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>

layouts/partials/supporter-cert-other.html

@@ -1,5 +1,5 @@
 <div x-data="{feedbackData: {success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, type: 'other', email: '', reason: ''}, acceptTerms: false, captchaState: null}">
-  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request()">
+  <form x-show="!feedbackData.success" x-ref="form" @submit.prevent="new SupporterCertificate($refs.form, feedbackData, submitData).request(); $refs.captcha.reset()">
     <div class="mb-4">
       <label class="label-uppercase mb-2">{{ i18n "supporter_cert_other_reason" }}</label>
       <textarea x-model="submitData.reason" x-ref="reason" @blur="$refs.reason.classList.add('show-invalid')" type="url" class="input-box w-full" rows="5" maxlength="800" placeholder="{{ i18n "supporter_cert_other_reason_placeholder" }}" required></textarea>