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: global settings for Cloudflare Turnstile #1495

Merged
merged 4 commits into from
Nov 11, 2024
Merged

enhance: global settings for Cloudflare Turnstile #1495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 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
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
79 changes: 77 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'] : '',
);

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 in the input field

The $depends_on variable is output directly into the data-depends-on attribute without sanitization. To prevent potential security vulnerabilities such as XSS attacks, please use esc_attr() when outputting $depends_on.

Apply this diff to fix the issue:

 $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" />',
-    $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled, $depends_on
+    esc_attr( $type ), esc_attr( $size ), esc_attr( $args['section'] ), esc_attr( $args['id'] ), esc_attr( $value ), $placeholder, $disabled, esc_attr( $depends_on )
 );
📝 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
$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
);
$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" />',
esc_attr( $type ), esc_attr( $size ), esc_attr( $args['section'] ), esc_attr( $args['id'] ), esc_attr( $value ), $placeholder, $disabled, esc_attr( $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 output in 'callback_toggle' method to prevent XSS vulnerabilities

In the callback_toggle method, variables like $name are output directly into HTML attributes without escaping. To enhance security and prevent XSS attacks, consider using esc_attr() when echoing these variables.

Apply this diff to fix the issue:

 $name = $args['section'] . '[' . $args['id'] . ']';

 ?>

 <fieldset>
     <label for="<?php echo 'wpuf-' . $name; ?>" class="wpuf-toggle-switch">
         <input
             type="hidden"
-            name="<?php echo $name; ?>"
+            name="<?php echo esc_attr( $name ); ?>"
             value="off" />
         <input
             type="checkbox"
             <?php echo $value === 'on' ? 'checked' : ''; ?>
             <?php echo $disabled ? 'disabled' : ''; ?>
-            id="<?php echo 'wpuf-' . $name; ?>"
-            name="<?php echo $name; ?>"
+            id="<?php echo esc_attr( 'wpuf-' . $name ); ?>"
+            name="<?php echo esc_attr( $name ); ?>"
             class="wpuf-toggle-module checkbox"
             value="on">
         <span class="slider round"></span>
     </label>
 </fieldset>

 <?php echo $args['desc']; ?>
📝 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
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
}
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 esc_attr( $name ); ?>"
value="off" />
<input
type="checkbox"
<?php echo $value === 'on' ? 'checked' : ''; ?>
<?php echo $disabled ? 'disabled' : ''; ?>
id="<?php echo esc_attr( 'wpuf-' . $name ); ?>"
name="<?php echo esc_attr( $name ); ?>"
class="wpuf-toggle-module checkbox"
value="on">
<span class="slider round"></span>
</label>
</fieldset>
<?php echo $args['desc']; ?>
<?php
}


/**
* Sanitize callback for Settings API
*
Expand Down Expand Up @@ -673,6 +709,45 @@ 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 +742 to +748
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Define and use 'data-depends-on-value' for accurate dependency checking

The code references $this.data('depends-on-value'), but this attribute is not set in the HTML markup. To ensure the dependency check functions correctly, please define the data-depends-on-value attribute when rendering the input fields.

Suggested addition in the HTML input generation (e.g., in the callback_text method):

 $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" data-depends-on-value="%9$s" />',
-    $type, $size, $args['section'], $args['id'], $value, $placeholder, $disabled, $depends_on
+    esc_attr( $type ), esc_attr( $size ), esc_attr( $args['section'] ), esc_attr( $args['id'] ), esc_attr( $value ), $placeholder, $disabled, esc_attr( $depends_on ), esc_attr( $args['depends_on_value'] )
 );

Ensure that $args['depends_on_value'] is set appropriately in the settings fields array.

Committable suggestion was skipped due to low confidence.

}
});
Comment on lines +714 to +750
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Use specific selectors to prevent unintended matches in dependency logic

In the JavaScript code handling field dependencies, the selector $("input[id*='"+ data_depends_on +"']") may unintentionally match multiple elements if their IDs contain the data_depends_on string. To ensure the correct element is selected, use a more specific selector.

Apply this change to the selector:

- var $depends_on = $("input[id*='"+ data_depends_on +"']");
+ var $depends_on = $("#wpuf-" + data_depends_on);

This change assumes that the dependent field's ID follows the format wpuf- plus the depends_on value, which aligns with how IDs are generated in the settings fields.

Committable suggestion was skipped due to low confidence.

});
</script>

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
53 changes: 53 additions & 0 deletions assets/less/admin.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1169,6 +1169,59 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
}
}

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

input {
display: none;

&:checked + .slider {
background-color: #0073aa;
}

&:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

&:checked + .slider:before {
transform: translateX(26px);
}
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .2s;

&.round {
border-radius: 34px;
}

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

&::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
2 changes: 1 addition & 1 deletion assets/less/frontend-forms.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ body {
background-color: #f2dede;
color: #a94442;
border: 1px solid #ebccd1;
margin: 10px 10px 20px;
margin: 10px 0 20px 0;
padding: 10px;
.border-radius(3px);
font-size: 13px;
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/Plugin_Upgrade_Notice.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ protected function check_for_notice() {

$min_version = ! empty( $notice['min-version'] ) ? $notice['min-version'] : '';

if ( version_compare( WPUF_VERSION, $min_version, '>=' ) ) {
if ( version_compare( WPUF_VERSION, $min_version, '>=' ) ) {
return;
}

Expand Down
5 changes: 4 additions & 1 deletion includes/Assets.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ public function get_scripts() {
'version' => '1.6.0',
'in_footer' => true,
],
'admin-shortcode' => [
'admin-shortcode' => [
'src' => WPUF_ASSET_URI . '/js/admin-shortcode.js',
'deps' => [ 'jquery' ],
],
Expand Down Expand Up @@ -374,6 +374,9 @@ public function get_scripts() {
'headway' => [
'src' => '//cdn.headwayapp.co/widget.js',
],
'turnstile' => [
'src' => 'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback',
],
];

if ( ! empty( $api_key ) ) {
Expand Down
Loading
Loading