Action uncanny-learndash-toolkit

uo_reset_before_form

Fires before the password reset form is displayed on the frontend for user account management.

add_action( 'uo_reset_before_form', $callback, 10, 1 );

Description

Fires before the password reset form is displayed. Use this hook to add custom content or modify the form's structure before it renders, allowing for enhanced customization of the password reset process.

Usage

add_action( 'uo_reset_before_form', 'your_function_name', 10, 1 );

Examples

add_action( 'uo_reset_before_form', 'my_uo_add_password_strength_indicator_to_reset_form', 10, 0 );

/**
 * Adds a visual password strength indicator above the password fields in the reset password form.
 *
 * This function hooks into the 'uo_reset_before_form' action and injects HTML
 * for a password strength meter. It assumes JavaScript will be used to dynamically
 * update the strength indicator based on user input.
 *
 * @since 1.0.0
 */
function my_uo_add_password_strength_indicator_to_reset_form() {
    ?>
    <div class="password-strength-meter-wrap" style="margin-bottom: 15px;">
        <div id="password-strength-meter" style="height: 8px; width: 0%; background-color: #ddd; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;"></div>
        <span id="password-strength-text" style="font-size: 0.8em; color: #666;"></span>
    </div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var passwordInput = document.getElementById('user_pass'); // Assuming 'user_pass' is the ID of the password field
            var strengthMeter = document.getElementById('password-strength-meter');
            var strengthText = document.getElementById('password-strength-text');

            if (!passwordInput || !strengthMeter || !strengthText) {
                return; // Exit if elements are not found
            }

            var strengthLevels = {
                0: { color: '#f00', text: 'Weak' },
                25: { color: '#f90', text: 'Fair' },
                50: { color: '#ff0', text: 'Good' },
                75: { color: '#0f0', text: 'Strong' },
                100: { color: '#0f0', text: 'Very Strong' }
            };

            passwordInput.addEventListener('input', function() {
                var password = passwordInput.value;
                var strength = 0;

                if (password.length >= 8) {
                    strength += 25; // Basic length check
                }
                if (/[a-z]/.test(password) && /[A-Z]/.test(password)) {
                    strength += 25; // Uppercase and lowercase
                }
                if (/[0-9]/.test(password)) {
                    strength += 25; // Numbers
                }
                if (/[^a-zA-Z0-9]/.test(password)) {
                    strength += 25; // Special characters
                }

                var level = Math.min(strength, 100); // Cap at 100%

                // Update meter width and color
                strengthMeter.style.width = level + '%';
                var meterColor = '#ddd'; // Default if level is 0

                for (var threshold in strengthLevels) {
                    if (level >= threshold) {
                        meterColor = strengthLevels[threshold].color;
                        strengthText.textContent = strengthLevels[threshold].text;
                    }
                }
                strengthMeter.style.backgroundColor = meterColor;

                if (password.length === 0) {
                    strengthMeter.style.width = '0%';
                    strengthMeter.style.backgroundColor = '#ddd';
                    strengthText.textContent = '';
                }
            });
        });
    </script>
    <?php
}
?>

Placement

This code should be placed in the functions.php file of your active theme, a custom plugin, or using a code snippets plugin.

Source Code

src/templates/frontend-login/default-reset-pwd.php:11
src/templates/frontend-login/modern_ui-reset-pwd.php:55
src/templates/frontend-login/layout_1-reset-pwd.php:48

?>
<?php do_action( 'uo_reset_before_container' ); ?>
<?php do_action( 'uo_reset_before_title' ); ?>
<h2><?php echo $innerText['Reset-Password-Title']; ?></h2>
<?php do_action( 'uo_reset_before_description' ); ?>
<p><?php echo $innerText['Reset-Password-Desc']; ?></p>
<?php do_action( 'uo_reset_before_form' ); ?>
<form name="resetpassform" id="resetpassform" action="?action=validatepasswordreset" method="post" autocomplete="off">
	<?php if ( ! empty( $error ) ) { ?>
		<?php do_action( 'uo_reset_before_error' ); ?>
        <p>
			<?php do_action( 'uo_reset_before_error_message' ); ?>
			<?php echo $error; ?>
			<?php do_action( 'uo_reset_after_error_message' ); ?>
Scroll to Top