feat: captcha field for form editor

This commit is contained in:
Björn Fromme
2024-07-17 15:57:01 +02:00
parent 096571b605
commit 4991d972c2
8 changed files with 103 additions and 3 deletions
@@ -1,5 +1,6 @@
@import 'EXT:form/Configuration/TypoScript/setup.typoscript'
@import 'EXT:form_element_linked_checkbox/Configuration/TypoScript/setup.typoscript'
@import 'EXT:bw_captcha/Configuration/TypoScript/setup.typoscript'
plugin.tx_form.view {
templateRootPaths.10 = EXT:ep_theme/Resources/Private/Templates/Form/
@@ -193,3 +193,4 @@ plugin.tx_eptheme {
@import 'EXT:seo/Configuration/TypoScript/XmlSitemap/constants.typoscript'
@import 'EXT:typo3_encore/Configuration/TypoScript/constants.typoscript'
@import 'EXT:news/Configuration/TypoScript/constants.txt'
@import 'EXT:bw_captcha/Configuration/TypoScript/constants.typoscript'
@@ -14,7 +14,7 @@ TYPO3:
templateRootPaths:
1505042810: 'EXT:ep_theme/Resources/Private/Templates/Form/'
partialRootPaths:
1505042810: 'EXT:ep_theme/Resources/Private/Partials/Form/'
1623227657: 'EXT:ep_theme/Resources/Private/Partials/Form/'
layoutRootPaths:
1505042810: 'EXT:ep_theme/Resources/Private/Layouts/Form/'
@@ -29,7 +29,7 @@ TYPO3:
templateRootPaths:
1505042810: 'EXT:ep_theme/Resources/Private/Templates/Form/'
partialRootPaths:
1505042810: 'EXT:ep_theme/Resources/Private/Partials/Form/'
1623227657: 'EXT:ep_theme/Resources/Private/Partials/Form/'
layoutRootPaths:
1505042810: 'EXT:ep_theme/Resources/Private/Layouts/Form/'
contactform:
@@ -133,3 +133,11 @@ renderables:
validators:
-
identifier: NotEmpty
-
type: Captcha
identifier: captcha
label: Captcha
properties:
fluidAdditionalAttributes:
required: required
autocomplete: 'off'
@@ -0,0 +1,29 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<div class="flex items-center space-x-2">
<f:form.textfield property="{element.identifier}"
id="{element.uniqueIdentifier}"
value=""
class="form-field"
errorClass="form-field--has-error"
placeholder="Bitte die Zeichen aus der Grafik eingeben"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"/>
<img src="{f:uri.page(pageType:3413)}" alt="Captcha image" loading="lazy" onload="this.parentElement.classList.remove('captcha--reloading'); return false;"/>
<f:if condition="{element.properties.showRefresh}">
<button type="button" class="captcha__reload" data-url="{f:uri.page(pageType:3413)}" onclick="const div = this.parentElement; div.classList.add('captcha--reloading', 'captcha--spin'); let captchaUrl = this.dataset.url; this.previousElementSibling.setAttribute('src', captchaUrl + (/\?/.test(captchaUrl) ? '&' : '?') + 'now=' + Date.now()); setTimeout(function(){div.classList.remove('captcha--spin')},400); return false;">
<svg width="31" height="28" xmlns="http://www.w3.org/2000/svg">
<g fill="#000" fill-rule="evenodd">
<path d="M10 10.7 6.3 8.5a11 11 0 0 1 20 3l2.5-.8h.4v-.3A14 14 0 0 0 3.6 7L.3 5l1.8 8.3 8-2.6ZM31 23l-1.7-8-8 2.5 3.7 2.1a10.9 10.9 0 0 1-19.8-2.3l-2 .6-1 .3a13.9 13.9 0 0 0 17 9.3 14 14 0 0 0 8.4-6.4l3.4 2Z"/>
</g>
</svg>
</button>
</f:if>
</div>
</f:render>
</formvh:renderRenderable>
</html>