diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css index 0c71a096..c5486706 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/css/community-login-enhanced.css @@ -165,6 +165,66 @@ color: var(--hvac-primary); } +/* Password group with toggle button */ +.hvac-password-group .hvac-login-form-input { + padding-right: var(--hvac-spacing-12); +} + +.hvac-password-toggle { + position: absolute; + right: var(--hvac-spacing-4); + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: var(--hvac-theme-text-light); + font-size: var(--hvac-font-size-lg); + cursor: pointer; + padding: var(--hvac-spacing-1); + border-radius: var(--hvac-radius-sm); + transition: all var(--hvac-transition-fast); + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + z-index: 10; +} + +.hvac-password-toggle:hover { + color: var(--hvac-primary); + background-color: var(--hvac-primary-light); +} + +.hvac-password-toggle:focus { + outline: 2px solid var(--hvac-primary); + outline-offset: 2px; + color: var(--hvac-primary); +} + +.hvac-password-toggle:active { + transform: translateY(-50%) scale(0.95); +} + +.hvac-password-toggle-icon { + transition: opacity var(--hvac-transition-fast); + display: inline-block; +} + +.hvac-password-toggle[aria-pressed="true"] .hvac-password-toggle-icon { + opacity: 0.7; +} + +/* Password visibility states */ +.hvac-password-input[type="text"] + .hvac-input-icon { + opacity: 0.5; +} + +/* Enhanced focus states for password group */ +.hvac-password-group .hvac-login-form-input:focus ~ .hvac-password-toggle { + color: var(--hvac-primary); +} + /* Login button */ .hvac-login-submit { width: 100%; @@ -293,6 +353,27 @@ border: 1px solid var(--hvac-accent); } +/* Field validation errors */ +.hvac-input-error { + border-color: var(--hvac-error) !important; + box-shadow: 0 0 0 4px var(--hvac-error-light) !important; +} + +.hvac-field-error { + color: var(--hvac-error); + font-size: var(--hvac-font-size-sm); + font-weight: var(--hvac-font-weight-medium); + margin-top: var(--hvac-spacing-2); + display: flex; + align-items: center; + gap: var(--hvac-spacing-1); +} + +.hvac-field-error::before { + content: '⚠️'; + font-size: var(--hvac-font-size-sm); +} + /* Loading state */ .hvac-login-loading { display: inline-flex; diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/community-login.js b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/community-login.js new file mode 100644 index 00000000..650e82e8 --- /dev/null +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/assets/js/community-login.js @@ -0,0 +1,223 @@ +/** + * HVAC Community Events: Login Form JavaScript + * + * Enhanced login form functionality including password show/hide toggle, + * form validation, and loading states. + * + * @version 1.0.0 + */ + +(function($) { + 'use strict'; + + /** + * Password Show/Hide Toggle + */ + const HVACPasswordToggle = { + init: function() { + $('.hvac-password-toggle').on('click', this.togglePassword); + + // Handle keyboard accessibility + $('.hvac-password-toggle').on('keydown', function(e) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + $(this).click(); + } + }); + }, + + togglePassword: function() { + const $button = $(this); + const $input = $button.siblings('.hvac-password-input'); + const $icon = $button.find('.hvac-password-toggle-icon'); + + const isVisible = $input.attr('type') === 'text'; + + if (isVisible) { + // Hide password + $input.attr('type', 'password'); + $icon.text('👁️'); + $button.attr('aria-label', hvacLogin.showPassword); + $button.attr('aria-pressed', 'false'); + } else { + // Show password + $input.attr('type', 'text'); + $icon.text('🙈'); + $button.attr('aria-label', hvacLogin.hidePassword); + $button.attr('aria-pressed', 'true'); + } + + // Keep focus on the input field + $input.focus(); + } + }; + + /** + * Form Validation + */ + const HVACLoginValidation = { + init: function() { + $('#hvac_community_loginform').on('submit', this.validateForm); + + // Real-time validation feedback + $('.hvac-login-form-input').on('blur', this.validateField); + $('.hvac-login-form-input').on('input', this.clearFieldError); + }, + + validateForm: function(e) { + const $form = $(this); + let isValid = true; + + // Clear previous errors + $form.find('.hvac-field-error').remove(); + $form.find('.hvac-login-form-input').removeClass('hvac-input-error'); + + // Validate username/email + const $username = $form.find('#user_login'); + if (!$username.val().trim()) { + HVACLoginValidation.showFieldError($username, hvacLogin.usernameRequired); + isValid = false; + } + + // Validate password + const $password = $form.find('#user_pass'); + if (!$password.val()) { + HVACLoginValidation.showFieldError($password, hvacLogin.passwordRequired); + isValid = false; + } + + if (!isValid) { + e.preventDefault(); + return false; + } + + // Show loading state + HVACLoginLoading.show(); + }, + + validateField: function() { + const $field = $(this); + const value = $field.val().trim(); + + HVACLoginValidation.clearFieldError($field); + + if ($field.attr('id') === 'user_login' && !value) { + HVACLoginValidation.showFieldError($field, hvacLogin.usernameRequired); + } else if ($field.attr('id') === 'user_pass' && !value) { + HVACLoginValidation.showFieldError($field, hvacLogin.passwordRequired); + } + }, + + clearFieldError: function() { + const $field = $(this); + HVACLoginValidation.clearFieldError($field); + }, + + showFieldError: function($field, message) { + $field.addClass('hvac-input-error'); + const $error = $('
' + message + '
'); + $field.closest('.hvac-login-form-group').append($error); + }, + + clearFieldError: function($field) { + $field.removeClass('hvac-input-error'); + $field.closest('.hvac-login-form-group').find('.hvac-field-error').remove(); + } + }; + + /** + * Loading States + */ + const HVACLoginLoading = { + show: function() { + const $button = $('#wp-submit'); + const $text = $button.find('.hvac-login-submit-text'); + const $spinner = $button.find('.hvac-login-spinner'); + + $button.prop('disabled', true); + $text.text(hvacLogin.loggingIn); + $spinner.show(); + }, + + hide: function() { + const $button = $('#wp-submit'); + const $text = $button.find('.hvac-login-submit-text'); + const $spinner = $button.find('.hvac-login-spinner'); + + $button.prop('disabled', false); + $text.text(hvacLogin.logIn); + $spinner.hide(); + } + }; + + /** + * Enhanced User Experience + */ + const HVACLoginUX = { + init: function() { + // Auto-focus first empty field + this.autoFocus(); + + // Add smooth scrolling to errors + this.setupErrorScrolling(); + + // Handle form submission with better UX + this.enhanceFormSubmission(); + }, + + autoFocus: function() { + const $username = $('#user_login'); + const $password = $('#user_pass'); + + if (!$username.val()) { + $username.focus(); + } else if (!$password.val()) { + $password.focus(); + } + }, + + setupErrorScrolling: function() { + // Scroll to first error after form submission + $('#hvac_community_loginform').on('submit', function() { + setTimeout(function() { + const $firstError = $('.hvac-field-error').first(); + if ($firstError.length) { + $('html, body').animate({ + scrollTop: $firstError.offset().top - 100 + }, 300); + } + }, 50); + }); + }, + + enhanceFormSubmission: function() { + // Prevent double submission + $('#hvac_community_loginform').on('submit', function() { + const $form = $(this); + if ($form.data('submitting')) { + return false; + } + $form.data('submitting', true); + + // Reset after 10 seconds as fallback + setTimeout(function() { + $form.removeData('submitting'); + HVACLoginLoading.hide(); + }, 10000); + }); + } + }; + + /** + * Initialize all components when document is ready + */ + $(document).ready(function() { + // Only initialize if we're on a page with the login form + if ($('#hvac_community_loginform').length) { + HVACPasswordToggle.init(); + HVACLoginValidation.init(); + HVACLoginUX.init(); + } + }); + +})(jQuery); \ No newline at end of file diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/community/class-login-handler.php b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/community/class-login-handler.php index 01d15c4b..ab58f906 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/community/class-login-handler.php +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/includes/community/class-login-handler.php @@ -85,12 +85,37 @@ class Login_Handler { // Only enqueue if the shortcode is present on the current page. if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'hvac_community_login' ) ) { + // Enqueue enhanced CSS wp_enqueue_style( - 'hvac-community-login-style', - HVAC_CE_PLUGIN_URL . 'assets/css/community-login.css', - array(), // Add dependencies like theme stylesheet if needed + 'hvac-community-login-enhanced', + HVAC_CE_PLUGIN_URL . 'assets/css/community-login-enhanced.css', + array(), HVAC_CE_VERSION ); + + // Enqueue jQuery (dependency for our JavaScript) + wp_enqueue_script('jquery'); + + // Enqueue login JavaScript + wp_enqueue_script( + 'hvac-community-login-js', + HVAC_CE_PLUGIN_URL . 'assets/js/community-login.js', + array('jquery'), + HVAC_CE_VERSION, + true + ); + + // Localize script with translatable strings + wp_localize_script('hvac-community-login-js', 'hvacLogin', array( + 'showPassword' => __('Show password', 'hvac-community-events'), + 'hidePassword' => __('Hide password', 'hvac-community-events'), + 'usernameRequired' => __('Username or email is required.', 'hvac-community-events'), + 'passwordRequired' => __('Password is required.', 'hvac-community-events'), + 'loggingIn' => __('Logging in...', 'hvac-community-events'), + 'logIn' => __('Log In', 'hvac-community-events'), + 'ajaxUrl' => admin_url('admin-ajax.php'), + 'nonce' => wp_create_nonce('hvac_login_nonce') + )); } } diff --git a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/community/login-form.php b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/community/login-form.php index 404e1656..14104e21 100644 --- a/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/community/login-form.php +++ b/wordpress-dev/wordpress/wp-content/plugins/hvac-community-events/templates/community/login-form.php @@ -37,26 +37,53 @@ if ( ! defined( 'ABSPATH' ) ) { ?> true, - // 'redirect' is handled by the 'login_redirect' filter in Login_Handler class - 'form_id' => 'hvac_community_loginform', - 'label_username' => __( 'Username or Email Address', 'hvac-community-events' ), - 'label_password' => __( 'Password', 'hvac-community-events' ), - 'label_remember' => __( 'Remember Me', 'hvac-community-events' ), // Task 2.3 - 'label_log_in' => __( 'Log In', 'hvac-community-events' ), - 'id_username' => 'user_login', - 'id_password' => 'user_pass', - 'id_remember' => 'rememberme', - 'id_submit' => 'wp-submit', - 'remember' => true, // Task 2.3 - 'value_username' => '', - 'value_remember' => false, // Set to true to default the checkbox to checked - ); - - wp_login_form( $args ); + // Custom login form with password show/hide toggle + $redirect_to = isset($_REQUEST['redirect_to']) ? esc_url($_REQUEST['redirect_to']) : ''; ?> +
+ +
+ +
+ + 👤 +
+
+ +
+ +
+ + 🔒 + +
+
+ +
+ + +
+ + + + + + + + + +