FEATURE: add support for fusion form rendering

Configuration/Development/Settings.Cloudflare.Turnstile.yaml

@@ -10,4 +10,4 @@ Tms:
 
       secretKey: '1x0000000000000000000000000000000AA'  # Always passes
       #secretKey: '2x0000000000000000000000000000000AA' # Always fails
-      #secretKey: '3x0000000000000000000000000000000AA' # Yields a “token already spent” error
+      #secretKey: '3x0000000000000000000000000000000AA' # Yields a "token already spent" error

Resources/Private/Fusion/Elements/Turnstile.Definition.fusion

@@ -0,0 +1,9 @@
+prototype(Tms.Cloudflare.Turnstile:Turnstile.Definition) < prototype(Neos.Form.Builder:FormElement.Definition) {
+    @if.enabled = ${Configuration.setting('Tms.Cloudflare.Turnstile.enabled')}
+    @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
+
+    formElementType = 'Tms.Cloudflare.Turnstile:Turnstile'
+    properties = ${Configuration.setting('Tms.Cloudflare.Turnstile')}
+
+    validators.turnstile = Tms.Cloudflare.Turnstile:TurnstileValidator.Definition
+}

Resources/Private/Fusion/Elements/Turnstile.fusion

@@ -1,9 +1,47 @@
-prototype(Tms.Cloudflare.Turnstile:Turnstile.Definition) < prototype(Neos.Form.Builder:FormElement.Definition) {
-    @if.enabled = ${Configuration.setting('Tms.Cloudflare.Turnstile.enabled')}
-    @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
+prototype(Tms.Cloudflare.Turnstile:Turnstile) < prototype(Neos.Form.FusionRenderer:FormElement) {
+    label {
+        @if.notEmpty = ${element.label != ''}
+    }
 
-    formElementType = 'Tms.Cloudflare.Turnstile:Turnstile'
-    properties = ${Configuration.setting('Tms.Cloudflare.Turnstile')}
-
-    validators.turnstile = Tms.Cloudflare.Turnstile:TurnstileValidator.Definition
+    fieldContainer {
+        field {
+            tagName = 'div'
+            content = Neos.Fusion:Join {
+                noscript = Neos.Fusion:Tag {
+                    tagName = 'noscript'
+                    content = ${I18n.translate('Tms.Cloudflare.Turnstile:Main:widget.noScript.message')}
+                }
+                turnstile = Neos.Fusion:Tag {
+                    tagName = 'div'
+                    attributtes {
+                        id = ${element.uniqueIdentifier}
+                        class = 'cf-turnstile'
+                        data-action=${element.uniqueIdentifier}
+                        data-sitekey=${element.properties.siteKey}
+                        data-theme=${element.properties.theme}
+                        data-language=${element.properties.language}
+                        data-tabindex=${element.properties.tabindex}
+                        data-size=${element.properties.size}
+                        data-response-field-name=${'--' + element.parentRenderable.parentRenderable.identifier + '[' + element.identifier']'}
+                    }
+                }
+            }
+        }
+        [email protected] = Neos.Fusion:Tag {
+            tagName = 'div'
+            attributes.class = 'cf-turnstile-error'
+            content = Neos.Fusion:Join {
+                validationErrors = ${value}
+                turnstilereset = Neos.Fusion:Tag  {
+                    tagName = 'a'
+                    attributes {
+                        data-cf-turnstile-reset = ''
+                        href = 'javascript:;'
+                        onclick = 'javascript:cfTurnstileReset(this);'
+                    }
+                    content = ${I18n.translate('Tms.Cloudflare.Turnstile:Main:widget.reset.btn')}
+                }
+            }
+        }
+    }
 }

Resources/Private/Fusion/Override.Page.fusion

@@ -1,29 +1,6 @@
 prototype(Neos.Neos:Page) {
     body.javascripts {
-        cloudflareTurnstileApi = Neos.Fusion:Tag {
-            @if.enabled = ${Configuration.setting('Tms.Cloudflare.Turnstile.enabled')}
-            @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
-            tagName = 'script'
-            attributes {
-                src = ${!Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && 'https://challenges.cloudflare.com/turnstile/v0/api.js'}
-                data-src = ${Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && 'https://challenges.cloudflare.com/turnstile/v0/api.js'}
-                data-cf-turnstile-api = true
-                async = true
-                defer = true
-            }
-        }
-        cloudflareTurnstileLazyload = Neos.Fusion:Tag {
-            @if.enabled = ${Configuration.setting('Tms.Cloudflare.Turnstile.enabled')}
-            @if.lazyload = ${Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && Configuration.setting('Tms.Cloudflare.Turnstile.autoIncludeLazyloadScript')}
-            @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
-            tagName = 'script'
-            attributes {
-                src = Neos.Fusion:ResourceUri {
-                    path = 'resource://Tms.Cloudflare.Turnstile/Public/JavaScript/Turnstile.js'
-                }
-                async = true
-                defer = true
-            }
-        }
+        cloudflareTurnstileApi = Tms.Cloudflare.Turnstile:TurnstilApiScript
+        cloudflareTurnstileLazyload = Tms.Cloudflare.Turnstile:TurnstilLazyLoadScript
     }
 }

Resources/Private/Fusion/Resoucres/TurnstilApiScript.fusion

@@ -0,0 +1,13 @@
+
+prototype(Tms.Cloudflare.Turnstile:TurnstilApiScript) < prototype(Neos.Fusion:Tag) {
+    @if.enabled = ${Configuration.setting('Tms.Cloudflare.Turnstile.enabled')}
+    @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
+    tagName = 'script'
+    attributes {
+        src = ${!Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && 'https://challenges.cloudflare.com/turnstile/v0/api.js'}
+        data-src = ${Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && 'https://challenges.cloudflare.com/turnstile/v0/api.js'}
+        data-cf-turnstile-api = true
+        async = true
+        defer = true
+    }
+}

Resources/Private/Fusion/Resoucres/TurnstilLazyLoadScript.fusion

@@ -0,0 +1,14 @@
+
+prototype(Tms.Cloudflare.Turnstile:TurnstilLazyLoadScript) < prototype(Neos.Fusion:Tag) {
+    @if.enabled = ${Configuration.setting('Tms.Cloudflare.Turnstile.enabled')}
+    @if.lazyload = ${Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && Configuration.setting('Tms.Cloudflare.Turnstile.autoIncludeLazyloadScript')}
+    @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
+    tagName = 'script'
+    attributes {
+        src = Neos.Fusion:ResourceUri {
+            path = 'resource://Tms.Cloudflare.Turnstile/Public/JavaScript/Turnstile.js'
+        }
+        async = true
+        defer = true
+    }
+}

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "tms/cloudflare-turnstile",
     "type": "neos-plugin",
-    "description": "Cloudflare’s smart CAPTCHA alternative Turnstile for Neos.Form",
+    "description": "Cloudflare's smart CAPTCHA alternative Turnstile for Neos.Form",
     "require": {
         "neos/form": "^4.0 || ^5.0"
     },
@@ -10,6 +10,9 @@
             "Tms\\Cloudflare\\Turnstile\\": "Classes"
         }
     },
+    "suggest": {
+        "neos/form-fusionrenderer": "A Flow Form Framework preset for Fusion based Form rendering."
+    },
     "extra": {
         "neos": {
             "package-key": "Tms.Cloudflare.Turnstile",