enhance: form builder field Cloudflare Turnstile

Lib/WeDevs_Settings_API.php

@@ -710,7 +710,6 @@ function(){
                 // disable the pro preview checkboxes
                 $('span.pro-icon-title').siblings('input[type="checkbox"]').prop('disabled', true);
 
-
                 var fields = $('table.form-table input, table.form-table select, table.form-table textarea');
 
                 // iterate over each field and check if it depends on another field

admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js

@@ -0,0 +1,36 @@
+/**
+ * Field template: Cloudflare Turnstile
+ */
+Vue.component('form-cloudflare_turnstile', {
+    template: '#tmpl-wpuf-form-cloudflare_turnstile',
+
+    mixins: [
+        wpuf_mixins.form_field_mixin
+    ],
+
+    computed: {
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
+        no_api_keys_msg: function () {
+            return wpuf_form_builder.field_settings.turnstile.validator.msg;
+        },
+
+        turnstile_image: function () {
+            var base_url = wpuf_form_builder.asset_url + '/images/cloudflare-placeholder-';
+
+            if (this.field.turnstile_theme === 'dark') {
+                base_url += 'dark';
+            } else {
+                base_url += 'light';
+            }
+
+            if (this.field.turnstile_size === 'compact') {
+                base_url += '-compact';
+            }
+
+            return base_url + '.png';
+        }
+    }
+});

admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php

@@ -0,0 +1,12 @@
+<div class="wpuf-fields">
+    <template v-if="!has_turnstile_api_keys">
+        <p v-html="no_api_keys_msg"></p>
+    </template>
+
+    <template v-else>
+        <img
+            class="wpuf-turnstile-placeholder"
+            :src="turnstile_image"
+            alt="">
+    </template>
+</div>

admin/form-builder/assets/js/mixins/global.js

@@ -44,6 +44,10 @@ Vue.mixin({
             return (wpuf_form_builder.recaptcha_site && wpuf_form_builder.recaptcha_secret) ? true : false;
         },
 
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
         containsField: function(field_name) {
             var self = this,
                 i = 0;

assets/js-templates/form-components.php

@@ -438,6 +438,21 @@ class="option-chooser-radio"
 </div>
 </script>
 
+<script type="text/x-template" id="tmpl-wpuf-form-cloudflare_turnstile">
+<div class="wpuf-fields">
+    <template v-if="!has_turnstile_api_keys">
+        <p v-html="no_api_keys_msg"></p>
+    </template>
+
+    <template v-else>
+        <img
+            class="wpuf-turnstile-placeholder"
+            :src="turnstile_image"
+            alt="">
+    </template>
+</div>
+</script>
+
 <script type="text/x-template" id="tmpl-wpuf-form-column_field">
 <div v-bind:class="['wpuf-field-columns', 'has-columns-'+field.columns]">
     <div class="wpuf-column-field-inner-columns">

assets/js/wpuf-form-builder-components.js

@@ -765,6 +765,43 @@ Vue.component('form-checkbox_field', {
     ]
 });
 
+/**
+ * Field template: Cloudflare Turnstile
+ */
+Vue.component('form-cloudflare_turnstile', {
+    template: '#tmpl-wpuf-form-cloudflare_turnstile',
+
+    mixins: [
+        wpuf_mixins.form_field_mixin
+    ],
+
+    computed: {
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
+        no_api_keys_msg: function () {
+            return wpuf_form_builder.field_settings.turnstile.validator.msg;
+        },
+
+        turnstile_image: function () {
+            var base_url = wpuf_form_builder.asset_url + '/images/cloudflare-placeholder-';
+
+            if (this.field.turnstile_theme === 'dark') {
+                base_url += 'dark';
+            } else {
+                base_url += 'light';
+            }
+
+            if (this.field.turnstile_size === 'compact') {
+                base_url += '-compact';
+            }
+
+            return base_url + '.png';
+        }
+    }
+});
+
 /**
  * Field template: Column Field
  */

assets/js/wpuf-form-builder-mixins.js

@@ -151,6 +151,10 @@ Vue.mixin({
             return (wpuf_form_builder.recaptcha_site && wpuf_form_builder.recaptcha_secret) ? true : false;
         },
 
+        has_turnstile_api_keys: function () {
+            return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+        },
+
         containsField: function(field_name) {
             var self = this,
                 i = 0;

includes/Admin/Forms/Admin_Form_Builder.php

@@ -124,6 +124,7 @@ public function admin_enqueue_scripts() {
             'password',
             'user_avatar',
             'taxonomy',
+            'cloudflare_turnstile',
         ];
         $taxonomy_terms = array_keys( get_taxonomies() );
         $single_objects = array_merge( $single_objects, $taxonomy_terms );
@@ -159,8 +160,11 @@ public function admin_enqueue_scripts() {
                 'notifications'    => wpuf_get_form_notifications( $post->ID ),
                 'pro_link'         => Pro_Prompt::get_pro_url(),
                 'site_url'         => site_url( '/' ),
+                'asset_url'        => WPUF_ASSET_URI,
                 'recaptcha_site'   => wpuf_get_option( 'recaptcha_public', 'wpuf_general' ),
                 'recaptcha_secret' => wpuf_get_option( 'recaptcha_private', 'wpuf_general' ),
+                'turnstile_site'   => wpuf_get_option( 'turnstile_site_key', 'wpuf_general' ),
+                'turnstile_secret' => wpuf_get_option( 'turnstile_secret_key', 'wpuf_general' ),
                 'nonce'            => wp_create_nonce( 'form-builder-setting-nonce' ),
             ]
         );

includes/Admin/Forms/Field_Manager.php

@@ -5,6 +5,7 @@
 use WeDevs\Wpuf\Admin\Subscription;
 use WeDevs\Wpuf\Fields\Field_Contract;
 use WeDevs\Wpuf\Fields\Form_Field_Checkbox;
+use WeDevs\Wpuf\Fields\Form_Field_Cloudflare_Turnstile;
 use WeDevs\Wpuf\Fields\Form_Field_Column;
 use WeDevs\Wpuf\Fields\Form_Field_Dropdown;
 use WeDevs\Wpuf\Fields\Form_Field_Email;
@@ -83,25 +84,26 @@ public function get_field( $field_type ) {
      */
     private function register_field_types() {
         $fields = [
-            'post_title'          => new Form_Field_Post_Title(),
-            'post_content'        => new Form_Field_Post_Content(),
-            'post_tags'           => new Form_Field_Post_Tags(),
-            'taxonomy'            => new Form_Field_Post_Taxonomy( 'category', 'category' ),
-            'text_field'          => new Form_Field_Text(),
-            'email_address'       => new Form_Field_Email(),
-            'textarea_field'      => new Form_Field_Textarea(),
-            'radio_field'         => new Form_Field_Radio(),
-            'checkbox_field'      => new Form_Field_Checkbox(),
-            'dropdown_field'      => new Form_Field_Dropdown(),
-            'multiple_select'     => new Form_Field_MultiDropdown(),
-            'website_url'         => new Form_Field_URL(),
-            'column_field'        => new Form_Field_Column(),
-            'section_break'       => new Form_Field_SectionBreak(),
-            'custom_html'         => new Form_Field_HTML(),
-            'custom_hidden_field' => new Form_Field_Hidden(),
-            'image_upload'        => new Form_Field_Image(),
-            'recaptcha'           => new Form_Field_reCaptcha(),
-            'featured_image'      => new Form_Field_Featured_Image(),
+            'post_title'           => new Form_Field_Post_Title(),
+            'post_content'         => new Form_Field_Post_Content(),
+            'post_tags'            => new Form_Field_Post_Tags(),
+            'taxonomy'             => new Form_Field_Post_Taxonomy( 'category', 'category' ),
+            'text_field'           => new Form_Field_Text(),
+            'email_address'        => new Form_Field_Email(),
+            'textarea_field'       => new Form_Field_Textarea(),
+            'radio_field'          => new Form_Field_Radio(),
+            'checkbox_field'       => new Form_Field_Checkbox(),
+            'dropdown_field'       => new Form_Field_Dropdown(),
+            'multiple_select'      => new Form_Field_MultiDropdown(),
+            'website_url'          => new Form_Field_URL(),
+            'column_field'         => new Form_Field_Column(),
+            'section_break'        => new Form_Field_SectionBreak(),
+            'custom_html'          => new Form_Field_HTML(),
+            'custom_hidden_field'  => new Form_Field_Hidden(),
+            'image_upload'         => new Form_Field_Image(),
+            'recaptcha'            => new Form_Field_reCaptcha(),
+            'cloudflare_turnstile' => new Form_Field_Cloudflare_Turnstile(),
+            'featured_image'       => new Form_Field_Featured_Image(),
         ];
         $this->fields = apply_filters( 'wpuf_form_fields', $fields );
     }
@@ -170,6 +172,7 @@ private function get_others_fields() {
                 'section_break',
                 'custom_html',
                 'recaptcha',
+                'cloudflare_turnstile',
             ]
         );
 

includes/Fields/Form_Field_Cloudflare_Turnstile.php

@@ -0,0 +1,168 @@
+<?php
+
+namespace WeDevs\Wpuf\Fields;
+
+/**
+ * Turnstile Field Class
+ */
+class Form_Field_Cloudflare_Turnstile extends Field_Contract {
+    public function __construct() {
+        $this->name       = __( 'Cloudflare Turnstile', 'wp-user-frontend' );
+        $this->input_type = 'cloudflare_turnstile';
+        $this->icon       = 'cloud';
+
+        wp_enqueue_script( 'wpuf-turnstile' );
+    }
+
+    /**
+     * Render the field in frontend
+     *
+     * @since WPUF_SINCE
+     *
+     * @param array $field_settings
+     * @param int   $form_id
+     *
+     * @return void
+     */
+    public function render( $field_settings, $form_id, $type = 'post', $post_id = null ) {
+        $turnstile = wpuf_get_option( 'login_form_turnstile', 'wpuf_profile', 'off' );
+        $site_key  = wpuf_get_option( 'turnstile_site_key', 'wpuf_general', '' );
+        $theme     = ! empty( $field_settings['turnstile_theme'] ) ? $field_settings['turnstile_theme'] : 'light';
+        $size      = ! empty( $field_settings['turnstile_size'] ) ? $field_settings['turnstile_size'] : 'normal';
+        $action    = ! empty( $field_settings['turnstile_type'] ) ? $field_settings['turnstile_type'] : 'non-interactive';
+
+        if ( 'off' === $turnstile || empty( $site_key ) ) {
+            return;
+        }
+
+        $action = 'non_interactive' === $action ? 'non-interactive' : $action;
+        ?>
+
+        <div
+            <?php if ( 'invisible' === $action ) { ?>
+                style="display: none;"
+            <?php } ?>
+            id="wpuf-turnstile"
+            class="wpuf-turnstile"></div>
+
+        <script>
+            window.onloadTurnstileCallback = function () {
+                turnstile.render("#wpuf-turnstile", {
+                    sitekey: "<?php echo esc_js( $site_key ); ?>",
+                    theme:"<?php echo esc_js( $theme ); ?>",
+                    size:"<?php echo esc_js( $size ); ?>"
+                });
+            };
+        </script>
+
+        <?php
+    }
+
+    /**
+     * Custom validator
+     *
+     * @since WPUF_SINCE
+     *
+     * @return array
+     */
+    public function get_validator() {
+        return [
+            'callback'      => 'has_turnstile_api_keys',
+            'button_class'  => 'button-faded',
+            'msg_title'     => __( 'Site key and Secret key', 'wp-user-frontend' ),
+            'msg'           => sprintf(
+                // translators: %s: settings url
+                __( 'You need to set Site key and Secret key in <a href="%1$s" target="_blank">Settings</a> in order to use "Cloudflare Turnstile" field. <a href="%2$s" target="_blank">Click here to get the these key</a>.', 'wp-user-frontend' ),
+                admin_url( 'admin.php?page=wpuf-settings' ),
+                'https://developers.cloudflare.com/turnstile/'
+            ),
+        ];
+    }
+
+    /**
+     * Get field options setting
+     *
+     * @since WPUF_SINCE
+     *
+     * @return array
+     */
+    public function get_options_settings() {
+        $settings = [
+            [
+                'name'          => 'label',
+                'title'         => __( 'Title', 'wp-user-frontend' ),
+                'type'          => 'text',
+                'section'       => 'basic',
+                'priority'      => 10,
+                'help_text'     => __( 'Title of the section', 'wp-user-frontend' ),
+            ],
+            [
+                'name'          => 'turnstile_theme',
+                'title'         => 'Turnstile Theme',
+                'type'          => 'radio',
+                'options'       => [
+                    'light' => __( 'Light', 'wp-user-frontend' ),
+                    'dark'  => __( 'Dark', 'wp-user-frontend' ),
+                ],
+                'default'       => 'light',
+                'section'       => 'basic',
+                'priority'      => 12,
+                'help_text'     => __( 'Select turnstile theme', 'wp-user-frontend' ),
+            ],
+            [
+                'name'          => 'turnstile_size',
+                'title'         => 'Turnstile Size',
+                'type'          => 'radio',
+                'options'       => [
+                    'normal'   => __( 'Normal [Width: 300px, Height: 65px]', 'wp-user-frontend' ),
+                    'flexible' => __( 'Flexible [Width: 100% (min: 300px), Height: 65px]', 'wp-user-frontend' ),
+                    'compact'  => __( 'Compact [Width: 150px, Height: 140px]', 'wp-user-frontend' ),
+                ],
+                'default'       => 'normal',
+                'section'       => 'basic',
+                'priority'      => 13,
+                'help_text'     => __( 'Select turnstile size', 'wp-user-frontend' ),
+            ],
+            [
+                'name'      => 'turnstile_type',
+                'title'     => 'Turnstile type',
+                'type'      => 'radio',
+                'options'   => [
+                    'managed'         => __( 'Managed (recommended)', 'wp-user-frontend' ),
+                    'non_interactive' => __( 'Non-Interactive', 'wp-user-frontend' ),
+                    'invisible'       => __( 'Invisible', 'wp-user-frontend' ),
+                ],
+                'default'   => 'managed',
+                'section'   => 'advanced',
+                'priority'  => 11,
+                'help_text' => __( 'Select turnstile type', 'wp-user-frontend' ),
+            ],
+        ];
+
+        return $settings;
+    }
+
+    /**
+     * Get the field props
+     *
+     * @since WPUF_SINCE
+     *
+     * @return array
+     */
+    public function get_field_props() {
+
+        $props = [
+            'input_type'      => 'turnstile',
+            'template'        => $this->get_type(),
+            'label'           => '',
+            'turnstile_type'  => 'managed',
+            'turnstile_theme' => 'light',
+            'turnstile_size'  => 'normal',
+            'is_meta'         => 'yes',
+            'id'              => 0,
+            'wpuf_cond'       => null,
+        ];
+
+        return $props;
+    }
+}