Double-Opt-In Feature

Author: solverat

README.md

@@ -53,7 +53,8 @@ Nothing to tell here, it's just [Symfony](https://symfony.com/doc/current/templa
 ## Further Information
 - [Usage (Rendering Types, Configuration)](docs/0_Usage.md)
   - [Headless Mode](docs/1_HeadlessMode.md)
-- [SPAM Protection (Honeypot, reCAPTCHA)](docs/03_SpamProtection.md)
+- [SPAM Protection](docs/03_SpamProtection.md)
+  - [Double-Opt-In Feature](docs/03_SpamProtection.md)
 - [Output Workflows](docs/OutputWorkflow/0_Usage.md)
   - [API Channel](docs/OutputWorkflow/09_ApiChannel.md)
   - [Email Channel](docs/OutputWorkflow/10_EmailChannel.md)

UPGRADE.md

@@ -1,6 +1,7 @@
 # Upgrade Notes
 
 ## 5.1.0
+- **[SECURITY FEATURE]** Double-Opt-In Feature, read more about it [here](/docs/.md)
 - **[SECURITY FEATURE]** Add [friendly captcha field](/docs/03_SpamProtection.md#friendly-captcha)
 - **[SECURITY FEATURE]** Add [cloudflare turnstile](/docs/03_SpamProtection.md#cloudflare-turnstile)
 - **[BUGFIX]** Use Pimcore AdminUserTranslator for Editable Dialog Box [#450](https://github.com/dachcom-digital/pimcore-formbuilder/issues/450)

config/doctrine/model/DoubleOptInSession.orm.yml

@@ -0,0 +1,49 @@
+FormBuilderBundle\Model\DoubleOptInSession:
+    type: entity
+    table: formbuilder_double_opt_in_session
+    indexes:
+        token_form:
+            columns: [ token, form_definition, applied ]
+    id:
+        token:
+            unique: true
+            column: token
+            type: uuid
+            generator:
+                strategy: CUSTOM
+            customIdGenerator:
+                class: Symfony\Bridge\Doctrine\IdGenerator\UuidGenerator
+    fields:
+        email:
+            column: email
+            type: string
+            nullable: false
+            length: 190
+        additionalData:
+            column: additional_data
+            type: array
+            nullable: true
+        dispatchLocation:
+            column: dispatch_location
+            type: text
+            nullable: true
+        applied:
+            column: applied
+            type: boolean
+            options:
+                default: 0
+        creationDate:
+            column: creationDate
+            type: datetime
+            nullable: false
+    manyToOne:
+        formDefinition:
+            targetEntity: FormBuilderBundle\Model\FormDefinition
+            orphanRemoval: true
+            joinColumn:
+                name: form_definition
+                referencedColumnName: id
+                onDelete: CASCADE
+    uniqueConstraints:
+        email_form_definition:
+            columns: [email, form_definition, applied]

config/doctrine/model/FormDefinition.orm.yml

@@ -33,10 +33,6 @@ FormBuilderBundle\Model\FormDefinition:
         modifiedBy:
             column: modifiedBy
             type: integer
-        mailLayout:
-            column: mailLayout
-            type: object
-            nullable: true
         configuration:
             column: configuration
             type: object

config/install/translations/frontend.csv

@@ -36,4 +36,5 @@
 "form_builder.dynamic_multi_file.remove","Remove file","Datei entfernen"
 "form_builder.dynamic_multi_file.global.cannot_destroy_active_instance","This uploader is currently active or has some unprocessed files. in case there are some uploaded files, please remove them first.","Ein Uploader ist derzeit in dieser Sektion aktiv oder es wurden bereits Daten verarbeitet. Falls es bereits hochgeladene Dateien gibt, entfernen Sie diese bitte zuerst."
 "form_builder.form.container.repeater.min","%label%: You need to add at least %items% items.","%label%: Es werden mindestens %items% Einträge benötigt."
-"form_builder.form.container.repeater.max","%label%: Only %items% item(s) allowed.","%label%: Maximal %items% Einträge erlaubt."
+"form_builder.form.container.repeater.max","%label%: Only %items% item(s) allowed.","%label%: Maximal %items% Einträge erlaubt."
+"form_builder.form.double_opt_in.duplicate_session","Double-Opt-In Session for the given address has already been created.","Ein Zugang wurde für diese Adresse bereits erstellt."

config/services/double_opt_in.yaml

@@ -0,0 +1,6 @@
+services:
+
+    _defaults:
+        autowire: true
+        autoconfigure: true
+        public: true

config/services/forms/forms.yaml

@@ -52,6 +52,11 @@ services:
         tags:
             - { name: form.type }
 
+    FormBuilderBundle\Form\Type\InstructionsType:
+        public: false
+        tags:
+            - { name: form.type }
+
     FormBuilderBundle\Form\Type\SnippetType:
         autowire: true
         public: false
@@ -96,3 +101,11 @@ services:
         tags:
             - { name: form.type }
 
+
+    #
+    # Double-Opt-In
+
+    FormBuilderBundle\Form\Type\DoubleOptIn\DoubleOptInType:
+        public: false
+        tags:
+            - { name: form.type }

config/services/manager.yaml

@@ -15,4 +15,7 @@ services:
     FormBuilderBundle\Manager\PresetManager: ~
 
     # manager: template (form themes, type templates)
-    FormBuilderBundle\Manager\TemplateManager: ~
+    FormBuilderBundle\Manager\TemplateManager: ~
+
+    # manager: double-opt-in
+    FormBuilderBundle\Manager\DoubleOptInManager: ~

config/services/repository.yaml

@@ -9,4 +9,7 @@ services:
     FormBuilderBundle\Repository\FormDefinitionRepository: ~
 
     FormBuilderBundle\Repository\OutputWorkflowRepositoryInterface: '@FormBuilderBundle\Repository\OutputWorkflowRepository'
-    FormBuilderBundle\Repository\OutputWorkflowRepository: ~
+    FormBuilderBundle\Repository\OutputWorkflowRepository: ~
+
+    FormBuilderBundle\Repository\DoubleOptInSessionRepositoryInterface: '@FormBuilderBundle\Repository\DoubleOptInSessionRepository'
+    FormBuilderBundle\Repository\DoubleOptInSessionRepository: ~

config/services/runtime_data.yaml

@@ -9,3 +9,7 @@ services:
 
     FormBuilderBundle\Form\RuntimeData\FormRuntimeDataAllocator: ~
     FormBuilderBundle\Form\RuntimeData\FormRuntimeDataAllocatorInterface: '@FormBuilderBundle\Form\RuntimeData\FormRuntimeDataAllocator'
+
+    FormBuilderBundle\Form\RuntimeData\Provider\DoubleOptInSessionDataProvider:
+        tags:
+            - { name: form_builder.runtime_data_provider }

docs/03_SpamProtection.md

@@ -1,5 +1,8 @@
 # Spam Protection
 
+## Double-Opt-In
+Read more about the double-opt-in feature [here](./04_DoubleOptIn.md).
+
 ## HoneyPot
 The Honeypot Field is enabled by default. You can disable it via [configuration flags](100_ConfigurationFlags.md).
 

docs/04_DoubleOptIn.md

@@ -0,0 +1,38 @@
+# Double-Opt-In
+![image](https://github.com/user-attachments/assets/aa4f1f24-607c-4ed3-aa72-2d9d91fddf12)
+
+When enabled, a user must confirm its email identity via confirmation before the real form shows up.
+
+This feature is disabled by default.
+
+```yaml
+form_builder:
+
+    double_opt_in:
+        
+        # enable the feature
+        enabled: true
+        
+        # redeem_mode:
+        # choose between "delete" or "devalue"
+        # - "delete" (default): The double-opt-in session token gets deleted, after the form submission was successful
+        # - "devalue": The double-opt-in session token only gets redeemed but not deleted, after the form submission was successful. 
+        redeem_mode: 'delete'
+        
+        expiration:
+            # delete open sessions after 24 hours (default). If you set it to 0, no sessions will be deleted ever.
+            open_sessions: 24
+            # delete redeemed session after x hours (default 0, which means: disabled)
+            redeemed_sessions: 0
+```
+
+## Extending Double-Opt-In Form
+By default, the `DoubleOptInType` form type only contains a `emailAddress` field to keep users effort small.
+If you want to extend the form, you may want to use a symfony [form extension](https://symfony.com/doc/current/form/create_form_type_extension.html).
+
+Additional Info:
+- `emailAddress` is required and you're not allowed to remove it
+- Additional fields will be stored as array in the DoubleOptInSession in `additionalData`
+
+## Trash-Mail Protection
+TBD

public/js/extjs/_form/tab/configPanel.js

@@ -49,6 +49,7 @@ Formbuilder.extjs.formPanel.config = Class.create({
         this.formConditionalsStructured = formData.conditional_logic;
         this.formConditionalsStore = formData.conditional_logic_store;
         this.formFields = formData.fields;
+        this.doubleOptIn = formData.double_opt_in;
         this.availableFormFields = formData.fields_structure;
         this.availableContainerTypes = formData.container_types;
         this.availableConstraints = formData.validation_constraints;
@@ -500,10 +501,12 @@ Formbuilder.extjs.formPanel.config = Class.create({
             return el.submitValue === undefined || el.submitValue === true;
         });
 
-        for (var i = 0; i < items.length; i++) {
-            if (typeof items[i].getValue === 'function') {
-                var val = items[i].getValue(),
-                    fieldName = items[i].name;
+        Ext.Array.each(items, function (item, index) {
+            if (typeof item.getValue === 'function') {
+
+                var val = item.getValue(),
+                    fieldName = item.name;
+
                 if (fieldName) {
 
                     if (fieldName === 'name') {
@@ -519,6 +522,13 @@ Formbuilder.extjs.formPanel.config = Class.create({
                     }
                 }
             }
+        }.bind(this));
+
+        // parse form config
+        this.formConfig = DataObjectParser.transpose(this.formConfig).data();
+
+        if (this.formConfig.doubleOptIn && this.formConfig.doubleOptIn.enabled === false) {
+            this.formConfig.doubleOptIn = {enabled: false}
         }
 
         // parse conditional logic to add them later again
@@ -632,7 +642,8 @@ Formbuilder.extjs.formPanel.config = Class.create({
 
     getRootPanel: function () {
 
-        var methodStore = new Ext.data.ArrayStore({
+        var doubleOptInLocalizedField,
+            methodStore = new Ext.data.ArrayStore({
                 fields: ['value', 'label'],
                 data: [['post', 'POST'], ['get', 'GET']]
             }),
@@ -658,8 +669,8 @@ Formbuilder.extjs.formPanel.config = Class.create({
                 listeners: {
                     load: function (store) {
                         store.insert(0, {
-                            id : 'all',
-                            name : t('form_builder_email_csv_export_mail_type_all')
+                            id: 'all',
+                            name: t('form_builder_email_csv_export_mail_type_all')
                         });
                     }
                 }
@@ -675,6 +686,92 @@ Formbuilder.extjs.formPanel.config = Class.create({
             ),
             clBuilder = new Formbuilder.extjs.conditionalLogic.builder(this.formConditionalsStructured, this.formConditionalsStore, this);
 
+        if (this.doubleOptIn.enabled === true) {
+
+            doubleOptInLocalizedField = new Formbuilder.extjs.types.localizedField(function (locale) {
+
+                var hrefField = new Formbuilder.extjs.types.href({
+                        label: t('form_builder_form.double_opt_in.mail_template'),
+                        id: 'doubleOptIn.mailTemplate.' + locale,
+                        config: {
+                            types: ['document'],
+                            subtypes: {document: ['email']}
+                        }
+                    },
+                    this.formConfig.doubleOptIn && this.formConfig.doubleOptIn.mailTemplate && this.formConfig.doubleOptIn.mailTemplate[locale]
+                        ? this.formConfig.doubleOptIn.mailTemplate[locale]
+                        : null,
+                    null
+                );
+
+                return hrefField.getHref();
+
+            }.bind(this), true);
+
+            this.doubleOptInPanel = new Ext.form.FieldSet({
+                title: t('form_builder_form.double_opt_in'),
+                collapsible: false,
+                autoHeight: true,
+                width: '100%',
+                style: 'margin-top: 20px;',
+                submitValue: false,
+                defaults: {
+                    labelWidth: 160
+                },
+                items: [
+                    {
+                        xtype: 'checkbox',
+                        name: 'doubleOptIn.enabled',
+                        fieldLabel: t('form_builder_form.double_opt_in.enable'),
+                        inputValue: true,
+                        uncheckedValue: false,
+                        value: this.formConfig.doubleOptIn ? this.formConfig.doubleOptIn.enabled : false,
+                        listeners: {
+                            change: function (cb, value) {
+
+                                var containerField = cb.nextSibling();
+
+                                containerField.setHidden(!value);
+                                containerField.query('textfield[name="doubleOptIn.confirmationMessage"]')[0].allowBlank = !value
+
+                            }.bind(this)
+                        }
+                    },
+                    {
+                        xtype: 'container',
+                        hidden: !this.formConfig.doubleOptIn || this.formConfig.doubleOptIn.enabled === false,
+                        items: [
+                            {
+                                fieldLabel: false,
+                                xtype: 'displayfield',
+                                style: 'display:block !important; margin-bottom:15px !important; font-weight: 300;',
+                                value: t('form_builder_form.double_opt_in.description')
+                            },
+                            {
+                                xtype: 'textfield',
+                                name: 'doubleOptIn.instructionNote',
+                                fieldLabel: t('form_builder_form.double_opt_in.double_opt_in_instruction_note'),
+                                value: this.formConfig.doubleOptIn ? this.formConfig.doubleOptIn.instructionNote : null,
+                                allowBlank: true,
+                                width: '100%',
+                                inputAttrTpl: ' data-qwidth="250" data-qalign="br-r?" data-qtrackMouse="false" data-qtip="' + t('form_builder_type_field_base.translatable_field') + '"',
+                            },
+                            {
+                                xtype: 'textfield',
+                                name: 'doubleOptIn.confirmationMessage',
+                                fieldLabel: t('form_builder_form.double_opt_in.confirmation_message'),
+                                value: this.formConfig.doubleOptIn ? this.formConfig.doubleOptIn.confirmationMessage : null,
+                                allowBlank: true,
+                                width: '100%',
+                                inputAttrTpl: ' data-qwidth="250" data-qalign="br-r?" data-qtrackMouse="false" data-qtip="' + t('form_builder_type_field_base.translatable_field') + '"',
+                            },
+                            doubleOptInLocalizedField.getField()
+                        ]
+                    }
+                ]
+            });
+        }
+
         this.metaDataPanel = keyValueRepeater.getRepeater();
 
         // add conditional logic field
@@ -792,11 +889,10 @@ Formbuilder.extjs.formPanel.config = Class.create({
                     checked: this.formConfig.useAjax === undefined,
                     value: this.formConfig.useAjax
                 },
-
                 this.metaDataPanel,
                 this.clBuilder,
+                this.doubleOptInPanel ? this.doubleOptInPanel : null,
                 this.exportPanel
-
             ]
         });
 

src/Assembler/FormAssembler.php

@@ -6,6 +6,7 @@
 use FormBuilderBundle\Event\FormAssembleEvent;
 use FormBuilderBundle\Form\RuntimeData\FormRuntimeDataAllocatorInterface;
 use FormBuilderBundle\FormBuilderEvents;
+use FormBuilderBundle\Manager\DoubleOptInManager;
 use FormBuilderBundle\Resolver\FormOptionsResolver;
 use FormBuilderBundle\Manager\FormDefinitionManager;
 use FormBuilderBundle\Model\FormDefinitionInterface;
@@ -18,6 +19,7 @@ public function __construct(
         protected EventDispatcherInterface $eventDispatcher,
         protected FrontendFormBuilder $frontendFormBuilder,
         protected FormDefinitionManager $formDefinitionManager,
+        protected DoubleOptInManager $doubleOptInManager,
         protected FormRuntimeDataAllocatorInterface $formRuntimeDataAllocator
     ) {
     }
@@ -121,9 +123,13 @@ public function buildForm(
         $formAttributes = $optionsResolver->getFormAttributes();
         $useCsrfProtection = $optionsResolver->useCsrfProtection();
 
-        $formRuntimeDataCollector = $this->formRuntimeDataAllocator->allocate($formDefinition, $systemRuntimeData);
+        $formRuntimeDataCollector = $this->formRuntimeDataAllocator->allocate($formDefinition, $systemRuntimeData, $headless);
         $formRuntimeData = $formRuntimeDataCollector->getData();
 
+        if ($this->doubleOptInManager->requiresDoubleOptInForm($formDefinition, $formRuntimeData)) {
+            return $this->frontendFormBuilder->buildDoubleOptInForm($formDefinition, $formAttributes, $headless, $useCsrfProtection);
+        }
+
         if ($headless === true) {
             return $this->frontendFormBuilder->buildHeadlessForm($formDefinition, $formRuntimeData, $formAttributes, $formData, $useCsrfProtection);
         }