Class: Fluxbit::Form::PasswordComponent

Inherits:
TextFieldComponent
  • Object
show all
Defined in:
app/components/fluxbit/form/password_component.rb

Overview

The ‘Fluxbit::Form::PasswordComponent` is a password input component that extends `Fluxbit::Form::TextFieldComponent`. It provides a password field with a toggleable visibility icon (eye/eye-slash) and optional password strength indicators. The component can display validation checks for password requirements such as length, letters, capital letters, numbers, and special characters.

Examples:

Basic usage

= render Fluxbit::Form::PasswordComponent.new(name: :password)

With password strength checks

= render Fluxbit::Form::PasswordComponent.new(name: :password, show_strength: true)

Custom requirements

= render Fluxbit::Form::PasswordComponent.new(
  name: :password,
  show_strength: true,
  min_length: 12,
  require_uppercase: true,
  require_lowercase: true,
  require_numbers: true,
  require_special: true
)

See Also:

  • For detailed documentation and examples.

Instance Method Summary collapse

Constructor Details

#initialize(**props) ⇒ PasswordComponent

Initializes the password field component with the given properties.

Parameters:

  • form (ActionView::Helpers::FormBuilder) —

    The form builder (optional, for Rails forms)

  • attribute (Symbol) —

    The model attribute to be used in the form (required if using form builder)

  • show_strength (Boolean) —

    Whether to display password strength indicators (default: false)

  • min_length (Integer) —

    Minimum password length requirement (default: 8)

  • require_uppercase (Boolean) —

    Require at least one uppercase letter (default: true)

  • require_lowercase (Boolean) —

    Require at least one lowercase letter (default: true)

  • require_numbers (Boolean) —

    Require at least one number (default: true)

  • require_special (Boolean) —

    Require at least one special character (default: false)

  • strength_labels (Hash) —

    Custom labels for strength checks

  • ... —

    any other options supported by TextFieldComponent



38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
# File 'app/components/fluxbit/form/password_component.rb', line 38

def initialize(**props)
  @show_strength = props.delete(:show_strength) || false
  @min_length = props.delete(:min_length) || 8

  # Get boolean values, defaulting to true for uppercase/lowercase/numbers, false for special
  uppercase_val = props.delete(:require_uppercase)
  @require_uppercase = uppercase_val.nil? ? true : uppercase_val

  lowercase_val = props.delete(:require_lowercase)
  @require_lowercase = lowercase_val.nil? ? true : lowercase_val

  numbers_val = props.delete(:require_numbers)
  @require_numbers = numbers_val.nil? ? true : numbers_val

  @require_special = props.delete(:require_special) || false
  @strength_labels = props.delete(:strength_labels) || default_strength_labels

  # Force type to password and add eye icon for visibility toggle
  props[:type] = :password
  props[:right_icon] ||= :"heroicons_outline:eye"

  # Add data attributes for Stimulus controller
  props[:data] ||= {}
  # props[:data][:controller] = add_controller(props[:data][:controller], "fx-password")
  props[:data][:action] = add_action(props[:data][:action], "input->fx-password#validate")

  # Store right_icon_html for later use in create_right_icon
  @password_right_icon_html = props.delete(:right_icon_html) || {}

  # Set up wrapper_html with controller before calling super
  props[:wrapper_html] ||= {}
  props[:wrapper_html][:data] ||= {}
  props[:wrapper_html][:data][:controller] = "fx-password"
  props[:wrapper_html][:data].merge!(
    {
      "fx-password-target": "inputWrapper",
      "fx-password-min-length-value": @min_length,
      "fx-password-require-uppercase-value": @require_uppercase,
      "fx-password-require-lowercase-value": @require_lowercase,
      "fx-password-require-numbers-value": @require_numbers,
      "fx-password-require-special-value": @require_special
    }
  )


  super(**props)
end

Instance Method Details

#call ⇒ Object 



86
87
88
89
90
91
92
93
94
95
 
# File 'app/components/fluxbit/form/password_component.rb', line 86

def call
  content_tag :div, **@wrapper_html do
    safe_join [
      label,
      icon_container_wrapper,
      help_text,
      (@show_strength ? strength_indicator : nil)
    ].compact
  end
end