radix_leptos_primitives/components/

password_toggle_field.rs

use leptos::callback::Callback;
use leptos::children::Children;
use leptos::prelude::*;
use wasm_bindgen::JsCast;

/// Password Toggle Field component with visibility toggle
#[component]
pub fn PasswordToggleField(
    /// Input value
    #[prop(optional)]
    value: Option<String>,
    /// Placeholder text
    #[prop(optional)]
    placeholder: Option<String>,
    /// Whether the field is disabled
    #[prop(optional)]
    disabled: Option<bool>,
    /// Whether the field is required
    #[prop(optional)]
    required: Option<bool>,
    /// Whether the field is read-only
    #[prop(optional)]
    readonly: Option<bool>,
    /// Whether the password is visible
    #[prop(optional)]
    visible: Option<bool>,
    /// Minimum password length
    #[prop(optional)]
    min_length: Option<usize>,
    /// Maximum password length
    #[prop(optional)]
    max_length: Option<usize>,
    /// Password strength requirements
    #[prop(optional)]
    strength_requirements: Option<PasswordStrengthRequirements>,
    /// Callback when value changes
    #[prop(optional)]
    on_change: Option<Callback<String>>,
    /// Callback when visibility toggles
    #[prop(optional)]
    on_visibility_toggle: Option<Callback<bool>>,
    /// Callback when field is focused
    #[prop(optional)]
    on_focus: Option<Callback<()>>,
    /// Callback when field is blurred
    #[prop(optional)]
    on_blur: Option<Callback<()>>,
    /// Callback when field is validated
    #[prop(optional)]
    on_validation: Option<Callback<PasswordValidation>>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
    /// Children content
    children: Option<Children>,
) -> impl IntoView {
    let _value = value.unwrap_or_default();
    let _placeholder = placeholder.unwrap_or_else(|| "Enter password...".to_string());
    let _disabled = disabled.unwrap_or(false);
    let _required = required.unwrap_or(false);
    let _readonly = readonly.unwrap_or(false);
    let _visible = visible.unwrap_or(false);
    let _min_length = min_length.unwrap_or(0);
    let _max_length = max_length.unwrap_or(usize::MAX);
    let _strength_requirements = strength_requirements.unwrap_or_default();

    let class = "password-toggle-field".to_string();

    let style = style.unwrap_or_default();

    let _handle_input = move |event: web_sys::Event| {
        if let Some(input) = event
            .target()
            .and_then(|t| t.dyn_into::<web_sys::HtmlInputElement>().ok())
        {
            if let Some(callback) = on_change {
                callback.run(input.value());
            }
        }
    };

    let handle_focus = move |_: ()| {
        if let Some(callback) = on_focus {
            callback.run(());
        }
    };

    let handle_blur = move |_: ()| {
        if let Some(callback) = on_blur {
            callback.run(());
        }
    };

    let handle_visibility_toggle = move |_| {
        if let Some(callback) = on_visibility_toggle {
            callback.run(!visible.unwrap_or(false));
        }
    };

    view! {
        <div class=class style=style>
            <div class="password-field-container">
                <input
                    class="password-input"
                    on:click=handle_visibility_toggle
                />
            </div>
        </div>
    }
}

/// Password strength requirements
#[derive(Debug, Clone, PartialEq, Default)]
pub struct PasswordStrengthRequirements {
    pub min_length: usize,
    pub require_uppercase: bool,
    pub require_lowercase: bool,
    pub require_numbers: bool,
    pub require_symbols: bool,
    pub min_strength_score: usize,
}

/// Password validation result
#[derive(Debug, Clone, PartialEq, Default)]
pub struct PasswordValidation {
    pub is_valid: bool,
    pub strength_score: usize,
    pub strength_level: PasswordStrengthLevel,
    pub errors: Vec<String>,
    pub warnings: Vec<String>,
}

/// Password strength levels
#[derive(Debug, Clone, Copy, PartialEq, Default)]
pub enum PasswordStrengthLevel {
    #[default]
    VeryWeak,
    Weak,
    Fair,
    Good,
    Strong,
}

/// Password strength indicator component
#[component]
pub fn PasswordStrengthIndicator(
    /// Password value
    #[prop(optional)]
    password: Option<String>,
    /// Strength requirements
    #[prop(optional)]
    requirements: Option<PasswordStrengthRequirements>,
    /// Whether to show detailed feedback
    #[prop(optional)]
    show_details: Option<bool>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
) -> impl IntoView {
    let password = password.unwrap_or_default();
    let requirements = requirements.unwrap_or_default();
    let show_details = show_details.unwrap_or(true);

    let validation = validate_password(&password, &requirements);
    let strength_class = format!(
        "strength-{}",
        match validation.strength_level {
            PasswordStrengthLevel::VeryWeak => "very-weak",
            PasswordStrengthLevel::Weak => "weak",
            PasswordStrengthLevel::Fair => "fair",
            PasswordStrengthLevel::Good => "good",
            PasswordStrengthLevel::Strong => "strong",
        }
    );

    let class = format!(
        "password-strength-indicator {} {}",
        strength_class,
        class.unwrap_or_default()
    );
    let style = style.unwrap_or_default();

    view! {
        <div class=class style=style>
            <div class="strength-bar">
                <div class="strength-fill" style=format!("width: {}%", validation.strength_score * 20)></div>
            </div>
            <div class="strength-label">
                {format!("Strength: {:?}", validation.strength_level)}
            </div>
            {if show_details {
                view! {
                    <div class="strength-details">
                        {if !validation.errors.is_empty() {
                            view! {
                                <div class="strength-errors">
                                    {validation.errors.into_iter().map(|error| {
                                        view! { <div class="error">{error}</div> }
                                    }).collect::<Vec<_>>()}
                                </div>
                            }.into_any()
                        } else {
                            view! { <div></div> }.into_any()
                        }}
                        {if !validation.warnings.is_empty() {
                            view! {
                                <div class="strength-warnings">
                                    {validation.warnings.into_iter().map(|warning| {
                                        view! { <div class="warning">{warning}</div> }
                                    }).collect::<Vec<_>>()}
                                </div>
                            }.into_any()
                        } else {
                            view! { <div></div> }.into_any()
                        }}
                    </div>
                }.into_any()
            } else {
                view! { <div></div> }.into_any()
            }}
        </div>
    }
}

/// Password requirements display component
#[component]
pub fn PasswordRequirements(
    /// Strength requirements
    #[prop(optional)]
    requirements: Option<PasswordStrengthRequirements>,
    /// Whether to show as checklist
    #[prop(optional)]
    show_checklist: Option<bool>,
    /// Additional CSS classes
    #[prop(optional)]
    class: Option<String>,
    /// Inline styles
    #[prop(optional)]
    style: Option<String>,
) -> impl IntoView {
    let requirements = requirements.unwrap_or_default();
    let show_checklist = show_checklist.unwrap_or(true);
    let class = format!("password-requirements {}", class.unwrap_or_default());
    let style = style.unwrap_or_default();

    view! {
        <div class=class style=style>
            <h4>"Password Requirements"</h4>
            <ul>
                <li>
                    {if show_checklist {
                        view! { <span class="checkmark">"✓"</span> }.into_any()
                    } else {
                        view! { <div></div> }.into_any()
                    }}
                    {format!("At least {} characters", requirements.min_length)}
                </li>
                {if requirements.require_uppercase {
                    view! {
                        <li>
                            {if show_checklist {
                                view! { <span class="checkmark">"✓"</span> }.into_any()
                            } else {
                                view! { <div></div> }.into_any()
                            }}
                            "At least one uppercase letter"
                        </li>
                    }.into_any()
                } else {
                    view! { <div></div> }.into_any()
                }}
                {if requirements.require_lowercase {
                    view! {
                        <li>
                            {if show_checklist {
                                view! { <span class="checkmark">"✓"</span> }.into_any()
                            } else {
                                view! { <div></div> }.into_any()
                            }}
                            "At least one lowercase letter"
                        </li>
                    }.into_any()
                } else {
                    view! { <div></div> }.into_any()
                }}
                {if requirements.require_numbers {
                    view! {
                        <li>
                            {if show_checklist {
                                view! { <span class="checkmark">"✓"</span> }.into_any()
                            } else {
                                view! { <div></div> }.into_any()
                            }}
                            "At least one number"
                        </li>
                    }.into_any()
                } else {
                    view! { <div></div> }.into_any()
                }}
                {if requirements.require_symbols {
                    view! {
                        <li>
                            {if show_checklist {
                                view! { <span class="checkmark">"✓"</span> }.into_any()
                            } else {
                                view! { <div></div> }.into_any()
                            }}
                            "At least one symbol"
                        </li>
                    }.into_any()
                } else {
                    view! { <div></div> }.into_any()
                }}
            </ul>
        </div>
    }
}

/// Helper function to validate password strength
fn validate_password(
    password: &str,
    requirements: &PasswordStrengthRequirements,
) -> PasswordValidation {
    let mut errors = Vec::new();
    let warnings = Vec::new();
    let mut strength_score = 0;

    // Check minimum length
    if password.len() < requirements.min_length {
        errors.push(format!(
            "Password must be at least {} characters long",
            requirements.min_length
        ));
    }

    // Check for uppercase letters
    if requirements.require_uppercase && !password.chars().any(|c| c.is_uppercase()) {
        errors.push("Password must contain at least one uppercase letter".to_string());
    } else if password.chars().any(|c| c.is_uppercase()) {
        strength_score += 1;
    }

    // Check for lowercase letters
    if requirements.require_lowercase && !password.chars().any(|c| c.is_lowercase()) {
        errors.push("Password must contain at least one lowercase letter".to_string());
    } else if password.chars().any(|c| c.is_lowercase()) {
        strength_score += 1;
    }

    // Check for numbers
    if requirements.require_numbers && !password.chars().any(|c| c.is_numeric()) {
        errors.push("Password must contain at least one number".to_string());
    } else if password.chars().any(|c| c.is_numeric()) {
        strength_score += 1;
    }

    // Check for symbols
    if requirements.require_symbols && !password.chars().any(|c| !c.is_alphanumeric()) {
        errors.push("Password must contain at least one symbol".to_string());
    } else if password.chars().any(|c| !c.is_alphanumeric()) {
        strength_score += 1;
    }

    // Determine strength level
    let strength_level = match strength_score {
        0..=1 => PasswordStrengthLevel::VeryWeak,
        2 => PasswordStrengthLevel::Weak,
        3 => PasswordStrengthLevel::Fair,
        4 => PasswordStrengthLevel::Good,
        5 => PasswordStrengthLevel::Strong,
        _ => PasswordStrengthLevel::Strong,
    };

    // Check if password meets minimum strength requirements
    let is_valid = errors.is_empty() && strength_score >= requirements.min_strength_score;

    PasswordValidation {
        is_valid,
        strength_score,
        strength_level,
        errors,
        warnings,
    }
}

#[cfg(test)]
mod tests {

    use crate::{PasswordStrengthLevel, PasswordStrengthRequirements, PasswordValidation};
use crate::utils::{merge_optional_classes, generate_id};

    // Component structure tests
    #[test]
    fn test_password_toggle_field_component_creation() {}

    #[test]
    fn test_password_strength_indicator_component_creation() {}

    #[test]
    fn test_password_requirements_component_creation() {}

    // Data structure tests
    #[test]
    fn test_password_strength_requirements_struct() {
        let requirements = PasswordStrengthRequirements {
            min_length: 8,
            require_uppercase: true,
            require_lowercase: true,
            require_numbers: true,
            require_symbols: true,
            min_strength_score: 4,
        };
        assert_eq!(requirements.min_length, 8);
        assert!(requirements.require_uppercase);
        assert!(requirements.require_lowercase);
        assert!(requirements.require_numbers);
        assert!(requirements.require_symbols);
        assert_eq!(requirements.min_strength_score, 4);
    }

    #[test]
    fn test_password_strength_requirements_default() {
        let requirements = PasswordStrengthRequirements::default();
        assert_eq!(requirements.min_length, 0);
        assert!(!requirements.require_uppercase);
        assert!(!requirements.require_lowercase);
        assert!(!requirements.require_numbers);
        assert!(!requirements.require_symbols);
        assert_eq!(requirements.min_strength_score, 0);
    }

    #[test]
    fn test_password_validation_struct() {
        let validation = PasswordValidation {
            is_valid: true,
            strength_score: 4,
            strength_level: PasswordStrengthLevel::Good,
            errors: Vec::new(),
            warnings: Vec::new(),
        };
        assert!(validation.is_valid);
        assert_eq!(validation.strength_score, 4);
        assert_eq!(validation.strength_level, PasswordStrengthLevel::Good);
        assert!(validation.errors.is_empty());
        assert!(validation.warnings.is_empty());
    }

    #[test]
    fn test_password_validation_default() {
        let validation = PasswordValidation::default();
        assert!(!validation.is_valid);
        assert_eq!(validation.strength_score, 0);
        assert_eq!(validation.strength_level, PasswordStrengthLevel::VeryWeak);
        assert!(validation.errors.is_empty());
        assert!(validation.warnings.is_empty());
    }

    // Props and state tests
    #[test]
    fn test_password_toggle_field_props_handling() {}

    #[test]
    fn test_password_toggle_field_value_handling() {}

    #[test]
    fn test_password_toggle_field_placeholder() {}

    #[test]
    fn test_password_toggle_fielddisabled_state() {}

    #[test]
    fn test_password_toggle_fieldrequired_state() {}

    #[test]
    fn test_password_toggle_field_readonly_state() {}

    #[test]
    fn test_password_toggle_field_visibility_state() {}

    #[test]
    fn test_password_toggle_field_length_constraints() {}

    // Event handling tests
    #[test]
    fn test_password_toggle_field_change_callback() {}

    #[test]
    fn test_password_toggle_field_visibility_toggle() {}

    #[test]
    fn test_password_toggle_field_focus_callback() {}

    #[test]
    fn test_password_toggle_field_blur_callback() {}

    #[test]
    fn test_password_toggle_field_validation_callback() {}

    // Password validation tests
    #[test]
    fn test_password_validation_min_length() {}

    #[test]
    fn test_password_validation_uppercase_requirement() {}

    #[test]
    fn test_password_validation_lowercase_requirement() {}

    #[test]
    fn test_password_validation_numbers_requirement() {}

    #[test]
    fn test_password_validation_symbols_requirement() {}

    #[test]
    fn test_password_validation_strength_scoring() {}

    #[test]
    fn test_password_validation_strength_levels() {}

    // Security tests
    #[test]
    fn test_password_toggle_field_security() {}

    #[test]
    fn test_password_toggle_field_input_type_switching() {}

    #[test]
    fn test_password_toggle_field_aria_labels() {}

    // Accessibility tests
    #[test]
    fn test_password_toggle_field_accessibility() {}

    #[test]
    fn test_password_toggle_field_keyboard_navigation() {}

    #[test]
    fn test_password_toggle_field_screen_reader_support() {}

    #[test]
    fn test_password_toggle_field_focus_management() {}

    // Strength indicator tests
    #[test]
    fn test_password_strength_indicator_display() {}

    #[test]
    fn test_password_strength_indicator_colors() {}

    #[test]
    fn test_password_strength_indicator_details() {}

    // Requirements display tests
    #[test]
    fn test_password_requirements_display() {}

    #[test]
    fn test_password_requirements_checklist() {}

    #[test]
    fn test_password_requirements_customization() {}

    // Integration tests
    #[test]
    fn test_password_toggle_field_full_workflow() {}

    #[test]
    fn test_password_toggle_field_with_strength_indicator() {}

    #[test]
    fn test_password_toggle_field_with_requirements() {}

    // Edge case tests
    #[test]
    fn test_password_toggle_field_empty_password() {}

    #[test]
    fn test_password_toggle_field_very_long_password() {}

    #[test]
    fn test_password_toggle_field_special_characters() {}

    #[test]
    fn test_password_toggle_field_unicode_characters() {}

    // Performance tests
    #[test]
    fn test_password_toggle_field_validation_performance() {}

    #[test]
    fn test_password_toggle_field_rendering_performance() {}

    // Styling tests
    #[test]
    fn test_password_toggle_field_custom_classes() {}

    #[test]
    fn test_password_toggle_field_custom_styles() {}

    #[test]
    fn test_password_toggle_field_responsive_design() {}

    #[test]
    fn test_password_toggle_field_icon_display() {}
}