TASK: Add Turnstile reset link to validation errors in lazyload mode

tmsdev · Feb 28, 2023 · 580f941 · 580f941
1 parent e1c3fba
commit 580f941
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 16 deletions.
diff --git a/Classes/Validation/Validator/TurnstileValidator.php b/Classes/Validation/Validator/TurnstileValidator.php
@@ -41,7 +41,7 @@ class TurnstileValidator extends AbstractValidator
     protected function isValid($value)
     {
         if (!is_string($value) || empty($value)) {
-            $this->addError('We could not identify you as a human. Please try again.', 1676890456);
+            $this->addError('The captcha challenge failed.', 1676890456);
             return;
         }
 

diff --git a/Resources/Private/Form/Turnstile.html b/Resources/Private/Form/Turnstile.html
@@ -19,11 +19,16 @@
                  data-response-field-name="--{element.parentRenderable.parentRenderable.identifier}[{element.identifier}]"
             ></div>
             <f:if condition="{validationResults.flattenedErrors}">
-                <span class="help-inline">
-                    <f:for each="{validationResults.errors}" as="error">
-                        <div>{error -> f:translate(id: '{error.code}', arguments: error.arguments, package: '{element.renderingOptions.validationErrorTranslationPackage}', source: 'ValidationErrors')}</div>
-                    </f:for>
-                </span>
+                <div class="cf-turnstile-error">
+                    <span class="help-inline">
+                        <f:for each="{validationResults.errors}" as="error">
+                            <div>{error -> f:translate(id: '{error.code}', arguments: error.arguments, package: '{element.renderingOptions.validationErrorTranslationPackage}', source: 'ValidationErrors')}</div>
+                        </f:for>
+                    </span>
+                    <f:if condition="{element.properties.lazyload}">
+                    <a data-cf-turnstile-reset href="javascript:;" onclick="javascript:cfTurnstileReset(this);">{f:translate(id: 'widget.reset.btn', package: 'Tms.Cloudflare.Turnstile')}</a>
+                    </f:if>
+                </div>
             </f:if>
         </div>
     </div>

diff --git a/Resources/Private/Translations/de/Main.xlf b/Resources/Private/Translations/de/Main.xlf
@@ -6,6 +6,10 @@
                 <source>This form is protected by Cloudflare Turnstile. Please enable JavaScript for this page to identify you as a human.</source>
                 <target state="final">Dieses Formular ist durch Cloudflare Turnstile geschützt. Bitte aktivieren Sie JavaScript, damit diese Seite Sie als Mensch erkennen kann.</target>
             </trans-unit>
+            <trans-unit id="widget.reset.btn" xml:space="preserve" approved="yes">
+                <source>Please click here to confirm that you are not a robot.</source>
+                <target state="final">Bitte klicken Sie hier, um zu bestätigen, dass Sie kein Roboter sind.</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>
diff --git a/Resources/Private/Translations/de/ValidationErrors.xlf b/Resources/Private/Translations/de/ValidationErrors.xlf
@@ -9,12 +9,12 @@
 
             <!-- Override NotEmptyValidator translations for the Turnstile element -->
             <trans-unit id="1221560910" xml:space="preserve" approved="yes">
-				<source>We could not identify you as a human. Please try again.</source>
-                <target state="final">Wir konnten Sie nicht als Mensch identifizieren. Bitte versuchen Sie es erneut.</target>
+				<source>The captcha challenge failed.</source>
+                <target state="final">Die Captcha-Abfrage ist fehlgeschlagen.</target>
             </trans-unit>
             <trans-unit id="1221560718" xml:space="preserve" approved="yes">
-				<source>We could not identify you as a human. Please try again.</source>
-                <target state="final">Wir konnten Sie nicht als Mensch identifizieren. Bitte versuchen Sie es erneut.</target>
+				<source>The captcha challenge failed.</source>
+                <target state="final">Die Captcha-Abfrage ist fehlgeschlagen.</target>
             </trans-unit>
         </body>
     </file>

diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf
@@ -5,6 +5,9 @@
             <trans-unit id="widget.noScript.message">
                 <source>This form is protected by Cloudflare Turnstile. Please enable JavaScript for this page to identify you as a human.</source>
             </trans-unit>
+            <trans-unit id="widget.reset.btn">
+                <source>Please click here to confirm that you are not a robot.</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>
diff --git a/Resources/Private/Translations/en/ValidationErrors.xlf b/Resources/Private/Translations/en/ValidationErrors.xlf
@@ -8,10 +8,10 @@
 
             <!-- Override NotEmptyValidator translations for the Turnstile element -->
             <trans-unit id="1221560910">
-				<source>We could not identify you as a human. Please try again.</source>
+				<source>The captcha challenge failed.</source>
             </trans-unit>
             <trans-unit id="1221560718">
-				<source>We could not identify you as a human. Please try again.</source>
+				<source>The captcha challenge failed.</source>
             </trans-unit>
         </body>
     </file>

diff --git a/Resources/Private/Translations/es/Main.xlf b/Resources/Private/Translations/es/Main.xlf
@@ -6,6 +6,10 @@
                 <source>This form is protected by Cloudflare Turnstile. Please enable JavaScript for this page to identify you as a human.</source>
                 <target state="final">Este formulario está protegido por Cloudflare Turnstile. Por favor, active JavaScript para que esta página le identifique como humano.</target>
             </trans-unit>
+            <trans-unit id="widget.reset.btn" xml:space="preserve" approved="yes">
+                <source>Please click here to confirm that you are not a robot.</source>
+                <target state="final">Haga clic aquí para confirmar que no es un robot.</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>
diff --git a/Resources/Private/Translations/es/ValidationErrors.xlf b/Resources/Private/Translations/es/ValidationErrors.xlf
@@ -9,12 +9,12 @@
 
             <!-- Override NotEmptyValidator translations for the Turnstile element -->
             <trans-unit id="1221560910" xml:space="preserve" approved="yes">
-				<source>We could not identify you as a human. Please try again.</source>
-                <target state="final">No hemos podido identificarle como humano. Por favor, inténtelo de nuevo.</target>
+				<source>The captcha challenge failed.</source>
+                <target state="final">El desafío captcha ha fallado.</target>
             </trans-unit>
             <trans-unit id="1221560718" xml:space="preserve" approved="yes">
-				<source>We could not identify you as a human. Please try again.</source>
-                <target state="final">No hemos podido identificarle como humano. Por favor, inténtelo de nuevo.</target>
+				<source>The captcha challenge failed.</source>
+                <target state="final">El desafío captcha ha fallado.</target>
             </trans-unit>
         </body>
     </file>

diff --git a/Resources/Public/JavaScript/Turnstile.js b/Resources/Public/JavaScript/Turnstile.js
@@ -13,3 +13,9 @@ function cfTurnstileLazyload() {
     }
 }
 cfTurnstileLazyload();
+
+function cfTurnstileReset(btn) {
+    cfTurnstileLazyload();
+    btn.closest('form').dispatchEvent(new Event('input'));
+    btn.closest('.cf-turnstile-error').style.display = 'none';
+}