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.



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