diff --git a/Lib/WeDevs_Settings_API.php b/Lib/WeDevs_Settings_API.php index eac841279..9f3098aa8 100644 --- a/Lib/WeDevs_Settings_API.php +++ b/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 diff --git a/admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js new file mode 100644 index 000000000..1de5a8a4b --- /dev/null +++ b/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'; + } + } +}); diff --git a/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php new file mode 100644 index 000000000..6eb749161 --- /dev/null +++ b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php @@ -0,0 +1,12 @@ +
+ + + +
diff --git a/admin/form-builder/assets/js/mixins/global.js b/admin/form-builder/assets/js/mixins/global.js index 60ecffd03..0482a6834 100644 --- a/admin/form-builder/assets/js/mixins/global.js +++ b/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; diff --git a/assets/images/cloudflare-placeholder-dark-compact.png b/assets/images/cloudflare-placeholder-dark-compact.png new file mode 100644 index 000000000..ed8eae746 Binary files /dev/null and b/assets/images/cloudflare-placeholder-dark-compact.png differ diff --git a/assets/images/cloudflare-placeholder-dark.png b/assets/images/cloudflare-placeholder-dark.png new file mode 100644 index 000000000..417250f0e Binary files /dev/null and b/assets/images/cloudflare-placeholder-dark.png differ diff --git a/assets/images/cloudflare-placeholder-light-compact.png b/assets/images/cloudflare-placeholder-light-compact.png new file mode 100644 index 000000000..be7012d1c Binary files /dev/null and b/assets/images/cloudflare-placeholder-light-compact.png differ diff --git a/assets/images/cloudflare-placeholder-light.png b/assets/images/cloudflare-placeholder-light.png new file mode 100644 index 000000000..b63cd087c Binary files /dev/null and b/assets/images/cloudflare-placeholder-light.png differ diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php index ca68db439..93414ac83 100644 --- a/assets/js-templates/form-components.php +++ b/assets/js-templates/form-components.php @@ -438,6 +438,21 @@ class="option-chooser-radio" + + + + '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 Settings in order to use "Cloudflare Turnstile" field. Click here to get the these key.', '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; + } +}