feat: Update settings API for login form layout customization support (#1716)

* feat: Update settings API for login form layout customization support

- Enhanced wp_kses() to allow SVG elements and attributes
- Added support for radio image field type rendering
- Expanded allowed HTML tags to include: svg, path elements with required attributes
- Allows div, a, span elements needed for image-based option selection

This update enables the login form layout customization feature
by providing the necessary settings API infrastructure for
visual layout selection with SVG icons in the admin interface.

* fix: remember me design

* fix: ksses html color swatchers

* fix: pro preview?

Author: arifulhoque7

Lib/WeDevs_Settings_API.php

@@ -538,7 +538,20 @@ function callback_color( $args ) {
             $html .= wpuf_get_pro_preview_html();
         }
 
-        echo wp_kses_post( $html );
+        // Allow input tags with necessary attributes for color picker fields
+        // wp_kses_post() strips <input> tags by default, so we need to explicitly allow them
+        $allowed_html = wp_kses_allowed_html( 'post' );
+        $allowed_html['input'] = [
+            'type'               => true,
+            'class'              => true,
+            'id'                 => true,
+            'name'               => true,
+            'value'              => true,
+            'data-default-color' => true,
+            'disabled'           => true,
+        ];
+
+        echo wp_kses( $html, $allowed_html );
     }
 
     /**
@@ -740,8 +753,8 @@ function script() {
         ?>
         <script>
             jQuery(document).ready(function($) {
-                //Initiate Color Picker
-                $('.wp-color-picker-field').wpColorPicker();
+                //Initiate Color Picker (skip disabled fields for pro preview)
+                $('.wp-color-picker-field:not([disabled])').wpColorPicker();
 
                 // Switches option sections
                 $('.group').hide();

assets/css/admin.css

@@ -1549,3 +1549,25 @@ body.wpuf-modal-open {
 .wpuf-subscription-pack-settings .subscription-nav-content section .form-table td {
   padding: 15px 0;
 }
+/* Disabled color picker for pro preview */
+.wp-picker-container input[type="text"].wp-color-picker-field[disabled] {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+  background-color: #f0f0f0 !important;
+  pointer-events: none !important;
+}
+.wp-picker-container .wp-color-result[disabled],
+.wp-picker-container input[disabled] ~ .wp-picker-input-wrap .wp-color-result {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+  pointer-events: none !important;
+}
+.wp-picker-container .wp-color-result[disabled]:hover,
+.wp-picker-container input[disabled] ~ .wp-picker-input-wrap .wp-color-result:hover {
+  background-color: inherit !important;
+  border-color: inherit !important;
+}
+.wp-picker-container .wp-color-result[disabled]:active,
+.wp-picker-container input[disabled] ~ .wp-picker-input-wrap .wp-color-result:active {
+  transform: none !important;
+}

assets/css/login-form-settings.css

@@ -0,0 +1,109 @@
+/**
+ * Login Form Settings - Admin Styles
+ *
+ * Static styles for the login form settings page in admin area.
+ * Radio image selection styles for layout chooser.
+ *
+ * @package WP User Frontend
+ * @subpackage Assets/CSS
+ */
+
+.wpuf-radio-image-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.wpuf-radio-image-option {
+    flex: 0 0 calc(25% - 12px);
+    min-width: 200px;
+}
+
+.wpuf-radio-image-option input[type='radio'] {
+    position: absolute;
+    opacity: 0;
+}
+
+.wpuf-radio-image-option label {
+    position: relative;
+    display: block;
+    cursor: pointer;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    transition: all 0.3s ease;
+    background: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.wpuf-radio-image-option label:hover {
+    border-color: #0073aa;
+    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.2);
+    transform: translateY(-2px);
+}
+
+.wpuf-radio-image-option input[type='radio']:checked + label {
+    border-color: #0073aa;
+    background-color: #f0f8ff;
+    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.3);
+}
+
+.wpuf-radio-image-option input[type='radio']:checked + label::after {
+    content: '✓';
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: #0073aa;
+    color: white;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 24px;
+    text-align: center;
+}
+
+.wpuf-radio-image-option img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 4px;
+}
+
+/* Free plugin specific: Fix WordPress Settings API table layout */
+/* Force horizontal flex layout inside form tables */
+
+/* Override fieldset constraints */
+.form-table fieldset {
+    max-width: none !important;
+}
+
+.form-table td fieldset {
+    max-width: 100% !important;
+    width: 100% !important;
+}
+
+/* Force flex display on wrapper - works in all browsers */
+.form-table .wpuf-radio-image-wrapper,
+.form-table fieldset .wpuf-radio-image-wrapper,
+.form-table td .wpuf-radio-image-wrapper {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    flex-direction: row !important;
+    width: 100% !important;
+    gap: 15px !important;
+}
+
+/* Ensure each option displays inline */
+.form-table .wpuf-radio-image-option {
+    flex: 0 0 calc(25% - 12px) !important;
+    min-width: 200px !important;
+    display: inline-flex !important;
+    vertical-align: top !important;
+}
+
+