WordPress.org
Get WordPress

Plugin Directory

Changeset 3373498


Ignore:
Timestamp:
10/06/2025 08:33:22 AM (5 months ago)
Author:
chrmrtns
Message:

Version 2.6.3 - Performance & Dark Mode Control

Performance Improvements:

  • Conditional CSS loading for login forms (saves ~15KB per page)
  • Conditional 2FA CSS/JS loading (saves additional ~38KB per page)
  • Total savings: ~53KB on pages without any shortcodes
  • wp-login.php integration still loads CSS automatically when enabled

Dark Mode Control:

  • New Appearance & Theme Settings section in Options page
  • Three dark mode options: Auto (default), Light Only, Dark Only
  • Separate CSS files: forms-enhanced-light.css, forms-enhanced-dark.css
  • Admin can force light or dark theme regardless of user preferences

UI Improvements:

  • Added horizontal rules for better visual separation in Options page
  • New Appearance & Theme Settings section with dedicated heading
  • Comprehensive dark mode documentation in Help page
  • Performance notes explaining conditional loading benefits

Technical Changes:

  • Removed global wp_enqueue_scripts hooks from login and 2FA classes
  • CSS/JS enqueued directly in shortcode render methods
  • New option: chrmrtns_kla_dark_mode_setting with validation
  • Removed unused is_2fa_page() helper function
  • Cleaned up debug logging and comments
Location:
keyless-auth
Files:
35 added
5 edited

Legend:

Unmodified
Added
Removed

  • keyless-auth/trunk/includes/class-chrmrtns-kla-2fa-frontend.php

    r3372203 r3373498  
    4545        // Initialize hooks
    4646        add_shortcode('keyless-auth-2fa', array($this, 'render_2fa_shortcode'));
    47         add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_scripts'));
    4847        add_action('wp_ajax_chrmrtns_2fa_setup', array($this, 'handle_ajax_setup'));
    4948        add_action('wp_ajax_chrmrtns_2fa_disable', array($this, 'handle_ajax_disable'));
    … …  
    7372    /**
    7473     * Enqueue frontend scripts and styles
     74     * Called when [keyless-auth-2fa] shortcode is rendered
    7575     */
    7676    public function enqueue_frontend_scripts() {
    77         // Debug: Log script enqueue attempt
    78         if (defined('WP_DEBUG') && WP_DEBUG) {
    79             // phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_error_log -- Debug logging when WP_DEBUG is enabled
    80             error_log('Keyless Auth Debug: enqueue_frontend_scripts called');
    81         }
    82 
    83         // Always enqueue scripts - let WordPress handle conditional loading
    84         // This ensures scripts are available when shortcode is used
     77        // Only enqueue when shortcode is actually used
     78        // This ensures scripts/styles are available when needed without loading globally
    8579
    8680        // Debug: Log the URLs being used
    … …  
    127121            CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/2fa-frontend.css',
    128122            array(),
    129             CHRMRTNS_KLA_VERSION . '.2' // Added .2 to force cache bust for --kla-primary-light fix
     123            CHRMRTNS_KLA_VERSION
    130124        );
    131     }
    132 
    133     /**
    134      * Check if current page contains 2FA shortcode
    135      *
    136      * @return bool
    137      */
    138     private function is_2fa_page() {
    139         global $post;
    140         return $post && has_shortcode($post->post_content, 'keyless-auth-2fa');
    141125    }
    142126

  • keyless-auth/trunk/includes/class-chrmrtns-kla-admin.php

    r3372303 r3373498  
    152152            'sanitize_callback' => 'esc_url_raw',
    153153            'default' => ''
     154        ));
     155        register_setting('chrmrtns_kla_options_group', 'chrmrtns_kla_dark_mode_setting', array(
     156            'sanitize_callback' => array($this, 'sanitize_dark_mode_setting'),
     157            'default' => 'auto'
    154158        ));
    155159
    … …  
    767771            $custom_2fa_setup_url = isset($_POST['chrmrtns_kla_custom_2fa_setup_url']) ? esc_url_raw(wp_unslash($_POST['chrmrtns_kla_custom_2fa_setup_url'])) : '';
    768772            update_option('chrmrtns_kla_custom_2fa_setup_url', $custom_2fa_setup_url);
     773
     774            $dark_mode_setting = isset($_POST['chrmrtns_kla_dark_mode_setting']) ? sanitize_text_field(wp_unslash($_POST['chrmrtns_kla_dark_mode_setting'])) : 'auto';
     775            update_option('chrmrtns_kla_dark_mode_setting', $this->sanitize_dark_mode_setting($dark_mode_setting));
    769776
    770777            // Handle 2FA settings
    … …  
    889896                </table>
    890897
     898                <hr style="margin: 40px 0; border: 0; border-top: 1px solid #dcdcde;">
     899
     900                <!-- Dark Mode Settings Section -->
     901                <h2><?php esc_html_e('Appearance & Theme Settings', 'keyless-auth'); ?></h2>
     902                <p class="description" style="margin-bottom: 20px;">
     903                    <?php esc_html_e('Control how login forms appear in light and dark mode themes.', 'keyless-auth'); ?>
     904                </p>
     905
     906                <table class="form-table">
     907                    <tr>
     908                        <th scope="row">
     909                            <label for="chrmrtns_kla_dark_mode_setting"><?php esc_html_e('Dark Mode Behavior', 'keyless-auth'); ?></label>
     910                        </th>
     911                        <td>
     912                            <?php $dark_mode_setting = get_option('chrmrtns_kla_dark_mode_setting', 'auto'); ?>
     913                            <select id="chrmrtns_kla_dark_mode_setting" name="chrmrtns_kla_dark_mode_setting">
     914                                <option value="auto" <?php selected($dark_mode_setting, 'auto'); ?>><?php esc_html_e('Auto (System Preference + Theme Classes)', 'keyless-auth'); ?></option>
     915                                <option value="light" <?php selected($dark_mode_setting, 'light'); ?>><?php esc_html_e('Light Only (No Dark Mode)', 'keyless-auth'); ?></option>
     916                                <option value="dark" <?php selected($dark_mode_setting, 'dark'); ?>><?php esc_html_e('Dark Only (Force Dark Mode)', 'keyless-auth'); ?></option>
     917                            </select>
     918                            <p class="description">
     919                                <?php esc_html_e('Control how login forms appear in dark mode. Auto detects system preferences and theme dark mode classes. Light Only forces light theme. Dark Only forces dark theme.', 'keyless-auth'); ?>
     920                            </p>
     921                        </td>
     922                    </tr>
     923                </table>
     924
     925                <hr style="margin: 40px 0; border: 0; border-top: 1px solid #dcdcde;">
     926
    891927                <!-- 2FA Settings Section -->
    892                 <h2 style="margin-top: 40px;"><?php esc_html_e('Two-Factor Authentication (2FA)', 'keyless-auth'); ?></h2>
     928                <h2><?php esc_html_e('Two-Factor Authentication (2FA)', 'keyless-auth'); ?></h2>
    893929                <p class="description" style="margin-bottom: 20px;">
    894930                    <?php esc_html_e('Add an extra layer of security with TOTP-based two-factor authentication using authenticator apps.', 'keyless-auth'); ?>
    … …  
    12371273                <div class="notice notice-warning inline" style="margin: 15px 0;">
    12381274                    <p><strong><?php esc_html_e('Security Note:', 'keyless-auth'); ?></strong> <?php esc_html_e('Application Passwords are time-limited tokens that can be revoked individually. They provide better security than using regular passwords for API access.', 'keyless-auth'); ?></p>
     1275                </div>
     1276            </div>
     1277
     1278            <div class="chrmrtns_kla_card">
     1279                <h2><?php esc_html_e('Appearance & Theme Settings', 'keyless-auth'); ?></h2>
     1280                <p><?php esc_html_e('Control how login forms appear in light and dark mode themes.', 'keyless-auth'); ?></p>
     1281
     1282                <h3><?php esc_html_e('Dark Mode Behavior', 'keyless-auth'); ?></h3>
     1283                <p><?php esc_html_e('You can control how login forms render in dark mode from the Options page. Three modes are available:', 'keyless-auth'); ?></p>
     1284
     1285                <ul>
     1286                    <li><strong><?php esc_html_e('Auto (Default):', 'keyless-auth'); ?></strong> <?php esc_html_e('Automatically detects system dark mode preference and theme dark mode classes. Forms adapt to match user\'s system settings and theme.', 'keyless-auth'); ?></li>
     1287                    <li><strong><?php esc_html_e('Light Only:', 'keyless-auth'); ?></strong> <?php esc_html_e('Forces light theme always, disables dark mode completely. Use this if you want consistent light appearance regardless of user preferences.', 'keyless-auth'); ?></li>
     1288                    <li><strong><?php esc_html_e('Dark Only:', 'keyless-auth'); ?></strong> <?php esc_html_e('Forces dark theme always. Use this if your site has a dark theme and you want forms to always match.', 'keyless-auth'); ?></li>
     1289                </ul>
     1290
     1291                <p><strong><?php esc_html_e('Where to configure:', 'keyless-auth'); ?></strong> <?php esc_html_e('Go to Options → Appearance & Theme Settings → Dark Mode Behavior', 'keyless-auth'); ?></p>
     1292
     1293                <div class="notice notice-info inline" style="margin: 15px 0;">
     1294                    <p><strong><?php esc_html_e('Performance Note:', 'keyless-auth'); ?></strong> <?php esc_html_e('CSS files only load when shortcodes are used on a page, saving bandwidth on pages without login forms.', 'keyless-auth'); ?></p>
    12391295                </div>
    12401296            </div>
    … …  
    15611617        return ($input === '1' || $input === 1 || $input === true) ? '1' : '0';
    15621618    }
     1619
     1620    /**
     1621     * Sanitize dark mode setting
     1622     */
     1623    public function sanitize_dark_mode_setting($input) {
     1624        $valid_options = array('auto', 'light', 'dark');
     1625        return in_array($input, $valid_options, true) ? $input : 'auto';
     1626    }
    15631627}

  • keyless-auth/trunk/includes/class-chrmrtns-kla-core.php

    r3372303 r3373498  
    2323        add_shortcode('keyless-auth', array($this, 'render_login_form'));
    2424        add_shortcode('keyless-auth-full', array($this, 'render_full_login_form'));
    25         add_action('wp_enqueue_scripts', array($this, 'enqueue_frontend_scripts'));
    2625
    2726        // wp-login.php integration - only add hooks if enabled
    … …  
    2928            add_action('login_footer', array($this, 'chrmrtns_kla_add_wp_login_field'));
    3029            add_action('login_init', array($this, 'chrmrtns_kla_handle_wp_login_submission'));
     30            add_action('login_enqueue_scripts', array($this, 'enqueue_frontend_scripts'));
    3131        }
    3232
    … …  
    5858     */
    5959    public function render_login_form($atts = array()) {
     60        // Enqueue styles when shortcode is rendered
     61        $this->enqueue_frontend_scripts();
     62
    6063        // Parse attributes with defaults
    6164        $atts = shortcode_atts(array(
    … …  
    155158     */
    156159    public function render_full_login_form($atts = array()) {
     160        // Enqueue styles when shortcode is rendered
     161        $this->enqueue_frontend_scripts();
     162
    157163        // Parse attributes with defaults
    158164        $atts = shortcode_atts(array(
    … …  
    741747        // Enqueue legacy styles for backward compatibility
    742748        if (file_exists(CHRMRTNS_KLA_PLUGIN_DIR . '/assets/css/style-front-end.css')) {
    743             wp_register_style('chrmrtns_frontend_stylesheet', CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/style-front-end.css', array(), CHRMRTNS_KLA_VERSION . '.1');
     749            wp_register_style('chrmrtns_frontend_stylesheet', CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/style-front-end.css', array(), CHRMRTNS_KLA_VERSION);
    744750            wp_enqueue_style('chrmrtns_frontend_stylesheet');
    745751        }
    746752
    747         // Enqueue enhanced forms stylesheet with higher priority
    748         if (file_exists(CHRMRTNS_KLA_PLUGIN_DIR . '/assets/css/forms-enhanced.css')) {
     753        // Get dark mode setting
     754        $dark_mode_setting = get_option('chrmrtns_kla_dark_mode_setting', 'auto');
     755
     756        // Determine which CSS file to load based on dark mode setting
     757        $css_file = 'forms-enhanced.css'; // Default: auto mode
     758
     759        switch ($dark_mode_setting) {
     760            case 'light':
     761                $css_file = 'forms-enhanced-light.css';
     762                break;
     763            case 'dark':
     764                $css_file = 'forms-enhanced-dark.css';
     765                break;
     766            case 'auto':
     767            default:
     768                $css_file = 'forms-enhanced.css';
     769                break;
     770        }
     771
     772        // Enqueue the appropriate enhanced forms stylesheet
     773        if (file_exists(CHRMRTNS_KLA_PLUGIN_DIR . '/assets/css/' . $css_file)) {
    749774            wp_enqueue_style(
    750775                'chrmrtns_kla_forms_enhanced',
    751                 CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/forms-enhanced.css',
     776                CHRMRTNS_KLA_PLUGIN_URL . 'assets/css/' . $css_file,
    752777                array('chrmrtns_frontend_stylesheet'), // Load after the base stylesheet
    753                 CHRMRTNS_KLA_VERSION . '.1', // Added .1 to force cache bust for message box colors and dark mode
     778                CHRMRTNS_KLA_VERSION,
    754779                'all'
    755780            );

  • keyless-auth/trunk/keyless-auth.php

    r3372303 r3373498  
    44* Plugin URI: https://github.com/chrmrtns/keyless-auth
    55* Description: Enhanced passwordless authentication allowing users to login securely without passwords via email magic links. Fork of Passwordless Login by Cozmoslabs with additional security features.
    6 * Version: 2.6.2
     6* Version: 2.6.3
    77* Author: Chris Martens
    88* Author URI: https://github.com/chrmrtns
    … …  
    3838
    3939// Define plugin constants
    40 define('CHRMRTNS_KLA_VERSION', '2.6.2');
     40define('CHRMRTNS_KLA_VERSION', '2.6.3');
    4141define('CHRMRTNS_KLA_PLUGIN_DIR', plugin_dir_path(__FILE__));
    4242define('CHRMRTNS_KLA_PLUGIN_URL', plugin_dir_url(__FILE__));

  • keyless-auth/trunk/readme.txt

    r3372303 r3373498  
    66Requires at least: 3.9
    77Tested up to: 6.8
    8 Stable tag: 2.6.2
     8Stable tag: 2.6.3
    99License: GPLv2 or later
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    271271
    272272== Changelog ==
     273= 2.6.3 =
     274* PERFORMANCE: CSS files now load conditionally only when shortcodes are used (saves ~15KB on pages without login forms)
     275* PERFORMANCE: 2FA CSS and JS now load conditionally only when [keyless-auth-2fa] shortcode is used (saves additional ~38KB)
     276* PERFORMANCE: CSS no longer loads on every page globally, only when [keyless-auth], [keyless-auth-full], or [keyless-auth-2fa] shortcodes are rendered
     277* PERFORMANCE: wp-login.php integration still loads CSS automatically when enabled
     278* NEW: Dark Mode Behavior setting in Options page - control how forms appear in dark mode
     279* NEW: Three dark mode options: Auto (default, respects system + theme), Light Only (force light), Dark Only (force dark)
     280* NEW: Separate CSS files for light-only and dark-only modes (forms-enhanced-light.css, forms-enhanced-dark.css)
     281* ENHANCEMENT: Better performance for sites with many pages without login forms (total savings: ~53KB per page)
     282* ENHANCEMENT: Admin can now force light or dark theme regardless of user system preferences
     283* COMPATIBILITY: Dark mode setting works with all major WordPress themes and block themes
     284
    273285= 2.6.2 =
    274286* FIX: Replaced hardcoded colors in style-front-end.css with CSS variables for proper dark mode support
Note: See TracChangeset for help on using the changeset viewer.