Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance: form builder field Cloudflare Turnstile #1496

Merged
merged 5 commits into from
Nov 11, 2024
Merged

enhance: form builder field Cloudflare Turnstile #1496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b9e0014
toggle button styling and data save in settings
sapayth Oct 29, 2024
6b01a8c
show/hide dependent field conditionally
sapayth Oct 29, 2024
0dbd738
client side rendering and validation
sapayth Oct 30, 2024
89e7c24
server side verification done
sapayth Oct 30, 2024
6aa3b3f
enhance: form builder field Cloudflare Turnstile
sapayth Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 76 additions & 2 deletions Lib/WeDevs_Settings_API.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ function admin_init() {
'max' => isset( $option['max'] ) ? $option['max'] : '',
'step' => isset( $option['step'] ) ? $option['step'] : '',
'is_pro_preview' => ! empty( $option['is_pro_preview'] ) ? $option['is_pro_preview'] : false,
'depends_on' => ! empty( $option['depends_on'] ) ? $option['depends_on'] : '',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add documentation for the new 'depends_on' parameter

The 'depends_on' parameter is introduced in the $args array without accompanying documentation. For better maintainability and clarity, please update the method's PHPDoc to include a description of this new parameter and its expected usage.

);

add_settings_field( $section . '[' . $option['name'] . ']', $option['label'], (isset($option['callback']) ? $option['callback'] : array($this, 'callback_' . $type )), $section, $section, $args );
Expand Down Expand Up @@ -173,14 +174,17 @@ public function get_field_description( $args ) {
* @param array $args settings field args
*/
function callback_text( $args ) {

$value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
$size = isset( $args['size'] ) && !is_null( $args['size'] ) ? $args['size'] : 'regular';
$type = isset( $args['type'] ) ? $args['type'] : 'text';
$placeholder = empty( $args['placeholder'] ) ? '' : ' placeholder="' . $args['placeholder'] . '"';
$disabled = ! empty( $args['is_pro_preview'] ) && $args['is_pro_preview'] ? 'disabled' : '';
$depends_on = ! empty( $args['depends_on'] ) ? $args['depends_on'] : '';

$html = sprintf( '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s/>', $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled );
$html = sprintf(
'<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s data-depends-on="%8$s" />',
$type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled, $depends_on
);
Comment on lines +182 to +187
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Escape the 'depends_on' attribute to prevent XSS vulnerabilities

The $depends_on variable is output directly into the HTML attribute data-depends-on without proper escaping. To enhance security and prevent potential XSS attacks, ensure that this variable is appropriately escaped using esc_attr().

Apply this diff to escape the $depends_on variable:

 $depends_on  = ! empty( $args['depends_on'] ) ? $args['depends_on'] : '';

 $html        = sprintf(
-    '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s data-depends-on="%8$s" />',
+    '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s data-depends-on="%8$s" />',
     $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled, $depends_on
 );

Updated code:

$depends_on  = ! empty( $args['depends_on'] ) ? esc_attr( $args['depends_on'] ) : '';

$html        = sprintf(
    '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s data-depends-on="%8$s" />',
    $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled, $depends_on
);

$html .= $this->get_field_description( $args );

if ( ! empty( $args['is_pro_preview'] ) && $args['is_pro_preview'] ) {
Expand Down Expand Up @@ -460,6 +464,38 @@ function callback_color( $args ) {
echo $html;
}

/**
* Displays a toggle field for a settings field
*
* @param array $args settings field args
*/
public function callback_toggle( $args ) {
$value = esc_attr( $this->get_option( $args['id'], $args['section'], $args['std'] ) );
$disabled = ! empty( $args['is_pro_preview'] ) && $args['is_pro_preview'] ? 'disabled' : '';
$name = $args['section'] . '[' . $args['id'] . ']';
?>
<fieldset>
<label for="<?php echo 'wpuf-' . $name; ?>" class="wpuf-toggle-switch">
<input
type="hidden"
name="<?php echo $name; ?>"
value="off" />
<input
type="checkbox"
<?php echo $value === 'on' ? 'checked' : ''; ?>
<?php echo $disabled ? 'disabled' : ''; ?>
id="<?php echo 'wpuf-' . $name; ?>"
name="<?php echo $name; ?>"
class="wpuf-toggle-module checkbox"
value="on">
<span class="slider round"></span>
</label>
</fieldset>

<?php echo $args['desc']; ?>
<?php
}
Comment on lines +472 to +497
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Sanitize the 'toggle' field input before saving

In the callback_toggle method, the value from the toggle input field is not explicitly sanitized before saving to the database. To ensure data integrity and security, please verify that the 'on'/'off' values are properly sanitized in the sanitize_options method.


/**
* Sanitize callback for Settings API
*
Expand Down Expand Up @@ -673,6 +709,44 @@ 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
fields.each(function() {
var $this = $(this);
var data_depends_on = $this.data('depends-on');

if (!data_depends_on) {
return;
}

var $depends_on = $("input[id*='"+ data_depends_on +"']");
var $depends_on_type = $depends_on.attr('type');

if ($depends_on_type === 'checkbox') {
if ($depends_on.is(':checked')) {
$this.closest('tr').show();
} else {
$this.closest('tr').hide();
}
$depends_on.on('change', function() {
if ($(this).is(':checked')) {
$this.closest('tr').show();
} else {
$this.closest('tr').hide();
}
});
} else {
$depends_on.on('keyup change', function() {
if ($(this).val() === $this.data('depends-on-value')) {
$this.closest('tr').show();
} else {
$this.closest('tr').hide();
}
});
}
Comment on lines +741 to +748
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

⚠️ Potential issue

The data-depends-on-value attribute is missing from the HTML generation

The code shows that while data-depends-on is properly set in the HTML generation (data-depends-on="%8$s"), there is no corresponding code that sets the data-depends-on-value attribute which is being read by the JavaScript code. This will cause the dependency check to fail.

  • In Lib/WeDevs_Settings_API.php, add the data-depends-on-value attribute to the input HTML generation:
sprintf(
    '<input type="%1$s" class="%2$s-text" id="%3$s[%4$s]" name="%3$s[%4$s]" value="%5$s"%6$s %7$s data-depends-on="%8$s" data-depends-on-value="%9$s" />',
    $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled, $depends_on, $depends_on_value
)
🔗 Analysis chain

Verify the existence of 'data-depends-on-value' attribute in HTML

The JavaScript code references $this.data('depends-on-value'), but it's unclear if the data-depends-on-value attribute is set in the corresponding HTML elements. Please ensure that this attribute is properly defined where necessary to avoid unexpected behavior.

Run the following script to search for the usage of data-depends-on-value in the codebase:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search the codebase for occurrences of 'data-depends-on-value'

# Test: Expect to find all HTML elements that use 'data-depends-on-value' attribute.
rg 'data-depends-on-value'

Length of output: 26

Script:

#!/bin/bash
# Let's search for where this data attribute might be set in PHP code
# Search for variations of setting data-depends-on-value
rg -i "data.*depends.*value" -A 3

# Also search for the method that might be setting up these dependencies
ast-grep --pattern 'function $_ ($$$) {
  $$$
  depends
  $$$
}'

Length of output: 21224

Script:

#!/bin/bash
# Let's search for where this dependency functionality is set up
rg -i "depends.*on" -B 3 -A 3 Lib/WeDevs_Settings_API.php

# Also search for any data attribute setting in the PHP code
ast-grep --pattern 'data($$$)' Lib/WeDevs_Settings_API.php

Length of output: 2970

});
Comment on lines +712 to +749
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Optimize the JavaScript for field dependencies

The JavaScript code handling field dependencies can be optimized for improved performance and readability. Repeated DOM queries within loops may affect efficiency.

Consider the following refactoring suggestions:

  • Cache jQuery selectors: Store frequently accessed jQuery objects in variables to avoid redundant DOM queries.
  • Optimize event handlers: Attach event handlers outside of loops when possible, and use event delegation if applicable.

Example refactored code snippet:

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
$fields.each(function() {
    var $this = $(this);
    var dependsOn = $this.data('depends-on');

    if (!dependsOn) {
        return;
    }

    var $dependsOn = $("input[id*='" + dependsOn + "']");
    var dependsOnType = $dependsOn.attr('type');

    var toggleFieldVisibility = function() {
        if (dependsOnType === 'checkbox') {
            $this.closest('tr').toggle($dependsOn.is(':checked'));
        } else {
            $this.closest('tr').toggle($dependsOn.val() === $this.data('depends-on-value'));
        }
    };

    // Initial check
    toggleFieldVisibility();

    // Event binding
    var events = (dependsOnType === 'checkbox') ? 'change' : 'keyup change';
    $dependsOn.on(events, toggleFieldVisibility);
});

});
</script>

Expand Down
36 changes: 36 additions & 0 deletions admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
},
Comment on lines +12 to +14
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add defensive checks for global object access

The code assumes wpuf_form_builder is always defined. Consider adding defensive checks to prevent runtime errors.

Apply this diff to add defensive checks:

 has_turnstile_api_keys: function () {
-    return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+    return typeof wpuf_form_builder !== 'undefined' 
+           && wpuf_form_builder.turnstile_site 
+           && wpuf_form_builder.turnstile_secret;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
has_turnstile_api_keys: function () {
return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
},
has_turnstile_api_keys: function () {
return typeof wpuf_form_builder !== 'undefined'
&& wpuf_form_builder.turnstile_site
&& wpuf_form_builder.turnstile_secret;
},


no_api_keys_msg: function () {
return wpuf_form_builder.field_settings.turnstile.validator.msg;
},
Comment on lines +16 to +18
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add null check for field settings access

Similar to the previous issue, add defensive checks for accessing nested properties.

Apply this diff to prevent potential undefined errors:

 no_api_keys_msg: function () {
-    return wpuf_form_builder.field_settings.turnstile.validator.msg;
+    return wpuf_form_builder?.field_settings?.turnstile?.validator?.msg || 'API keys are required';
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
no_api_keys_msg: function () {
return wpuf_form_builder.field_settings.turnstile.validator.msg;
},
no_api_keys_msg: function () {
return wpuf_form_builder?.field_settings?.turnstile?.validator?.msg || 'API keys are required';
},


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';
}
Comment on lines +20 to +34
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Enhance input validation for theme and size properties

The function should validate the theme and size values before using them in URL construction. Also, consider using a constant for the base URL.

Apply this diff to improve the implementation:

+ const VALID_THEMES = ['dark', 'light'];
+ const VALID_SIZES = ['normal', 'compact'];
+ const BASE_PLACEHOLDER_PATH = '/images/cloudflare-placeholder-';

 turnstile_image: function () {
-    var base_url = wpuf_form_builder.asset_url + '/images/cloudflare-placeholder-';
+    if (typeof wpuf_form_builder === 'undefined' || !wpuf_form_builder.asset_url) {
+        console.error('Asset URL is not defined');
+        return '';
+    }
+
+    const theme = VALID_THEMES.includes(this.field.turnstile_theme) 
+        ? this.field.turnstile_theme 
+        : 'light';
+
+    const size = VALID_SIZES.includes(this.field.turnstile_size)
+        ? this.field.turnstile_size
+        : 'normal';
+
+    let imagePath = BASE_PLACEHOLDER_PATH + theme;
+    if (size === 'compact') {
+        imagePath += '-compact';
+    }
+
+    return wpuf_form_builder.asset_url + imagePath + '.png';
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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';
}
const VALID_THEMES = ['dark', 'light'];
const VALID_SIZES = ['normal', 'compact'];
const BASE_PLACEHOLDER_PATH = '/images/cloudflare-placeholder-';
turnstile_image: function () {
if (typeof wpuf_form_builder === 'undefined' || !wpuf_form_builder.asset_url) {
console.error('Asset URL is not defined');
return '';
}
const theme = VALID_THEMES.includes(this.field.turnstile_theme)
? this.field.turnstile_theme
: 'light';
const size = VALID_SIZES.includes(this.field.turnstile_size)
? this.field.turnstile_size
: 'normal';
let imagePath = BASE_PLACEHOLDER_PATH + theme;
if (size === 'compact') {
imagePath += '-compact';
}
return wpuf_form_builder.asset_url + imagePath + '.png';
}

}
});
12 changes: 12 additions & 0 deletions admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Comment on lines +7 to +11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance image accessibility and loading behavior.

The image element could be improved for better accessibility and user experience.

 <img
     class="wpuf-turnstile-placeholder"
     :src="turnstile_image"
-    alt="">
+    :alt="'Cloudflare Turnstile verification widget'"
+    loading="lazy"
+    @error="handleImageLoadError">

Consider adding:

  1. A meaningful alt text for screen readers
  2. Lazy loading for better performance
  3. Error handling for failed image loads

Committable suggestion was skipped due to low confidence.

</div>
4 changes: 4 additions & 0 deletions admin/form-builder/assets/js/mixins/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
Comment on lines +47 to +49
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add defensive programming for global object access.

Consider adding a safety check for the wpuf_form_builder global object to prevent potential runtime errors.

 has_turnstile_api_keys: function () {
-    return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+    return typeof wpuf_form_builder !== 'undefined' 
+        && wpuf_form_builder.turnstile_site 
+        && wpuf_form_builder.turnstile_secret;
 },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
has_turnstile_api_keys: function () {
return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
},
has_turnstile_api_keys: function () {
return typeof wpuf_form_builder !== 'undefined'
&& wpuf_form_builder.turnstile_site
&& wpuf_form_builder.turnstile_secret;
},


containsField: function(field_name) {
var self = this,
i = 0;
Expand Down
44 changes: 44 additions & 0 deletions assets/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -944,6 +944,50 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
.wrap h2.with-headway-icon #HW_frame_cont {
top: 78px !important;
}
.wpuf-toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
}
.wpuf-toggle-switch input {
display: none;
}
.wpuf-toggle-switch input:checked + .slider {
background-color: #0073aa;
}
.wpuf-toggle-switch input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
.wpuf-toggle-switch input:checked + .slider:before {
transform: translateX(26px);
}
.wpuf-toggle-switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .2s;
}
.wpuf-toggle-switch .slider.round {
border-radius: 34px;
}
.wpuf-toggle-switch .slider.round:before {
border-radius: 50%;
}
.wpuf-toggle-switch .slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 4px;
background-color: white;
transition: .2s;
}
@media only screen and (max-width: 1399px) {
a.wpuf-button.button-upgrade-to-pro {
padding: 10px;
Expand Down
59 changes: 0 additions & 59 deletions assets/css/admin/wpuf-module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,65 +35,6 @@
line-height: 1.6em;
}

.wpuf-toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
}

.wpuf-toggle-switch input {
display: none;
}

.wpuf-toggle-switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.wpuf-toggle-switch .slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

.wpuf-toggle-switch input:checked + .slider {
background-color: #0073aa;
}

.wpuf-toggle-switch input:focus + .slider {
-webkit-box-shadow: 0 0 1px #2196F3;
box-shadow: 0 0 1px #2196F3;
}

.wpuf-toggle-switch input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.wpuf-modules .plugin-card {
border: 1px solid #e5e5e5;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
Expand Down
2 changes: 1 addition & 1 deletion assets/css/frontend-forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ body .wpuf-error {
background-color: #f2dede;
color: #a94442;
border: 1px solid #ebccd1;
margin: 10px 10px 20px;
margin: 10px 0 20px 0;
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
Expand Down
Binary file added assets/images/cloudflare-placeholder-dark-compact.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/cloudflare-placeholder-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/cloudflare-placeholder-light-compact.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/cloudflare-placeholder-light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions assets/js-templates/form-components.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
37 changes: 37 additions & 0 deletions assets/js/wpuf-form-builder-components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down
4 changes: 4 additions & 0 deletions assets/js/wpuf-form-builder-mixins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading
Loading