stimulus-password-strength 0.1.2

data/app/views/stimulus_password_strength/_field.html.erb

@@ -0,0 +1,114 @@
+<div class="<%= container_class %>"
+     data-controller="password-strength"
+     data-password-strength-weak-label="<%= labels[:weak] %>"
+     data-password-strength-fair-label="<%= labels[:fair] %>"
+     data-password-strength-good-label="<%= labels[:good] %>"
+     data-password-strength-strong-label="<%= labels[:strong] %>"
+     data-password-strength-bar-base-class="<%= bar_base_class %>"
+     data-password-strength-text-base-class="<%= text_base_class %>"
+     data-password-strength-weak-bar-color="<%= bar_colors[:weak] %>"
+     data-password-strength-fair-bar-color="<%= bar_colors[:fair] %>"
+     data-password-strength-good-bar-color="<%= bar_colors[:good] %>"
+     data-password-strength-strong-bar-color="<%= bar_colors[:strong] %>"
+     data-password-strength-weak-text-color="<%= text_colors[:weak] %>"
+     data-password-strength-fair-text-color="<%= text_colors[:fair] %>"
+     data-password-strength-good-text-color="<%= text_colors[:good] %>"
+     data-password-strength-strong-text-color="<%= text_colors[:strong] %>">
+  <% if label.present? %>
+    <div class="<%= label_row_class %>">
+      <%= form.label attribute, label, class: label_class %>
+
+      <div class="<%= header_aux_class %>">
+        <% if requirements.any? %>
+          <div class="<%= requirements_class %>" style="<%= requirements_style %>">
+            <% requirements.each do |requirement| %>
+              <p data-password-strength-target="requirement"
+                 data-rule="<%= requirement[:rule] %>"
+                 data-value="<%= requirement[:value] %>"
+                 data-label="<%= requirement[:label] %>"
+                 data-remaining-singular="<%= requirement[:remaining_singular] %>"
+                 data-remaining-plural="<%= requirement[:remaining_plural] %>"
+                 data-met-label="<%= requirement[:met_label] %>"
+                 data-pending-style="<%= requirement_pending_style %>"
+                 data-met-style="<%= requirement_met_style %>"
+                 data-unmet-style="<%= requirement_unmet_style %>"
+                 class="<%= requirement_class %>"
+                 style="<%= requirement_pending_style %>"><%= requirement[:label] %></p>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div data-password-strength-target="statusRow" class="<%= status_row_class %>" style="<%= status_row_style %>; visibility: hidden;">
+      <div data-password-strength-target="strengthTrack" class="<%= bar_track_class %>" style="visibility: hidden;">
+        <div data-password-strength-target="strengthBar" class="<%= bar_base_class %>" style="width: 0%"></div>
+      </div>
+
+      <p data-password-strength-target="strengthText" class="<%= text_base_class %>" style="<%= text_style %>" aria-live="polite"></p>
+    </div>
+  <% else %>
+    <% if requirements.any? %>
+      <div class="<%= requirements_class %>" style="<%= requirements_style %>">
+        <% requirements.each do |requirement| %>
+          <p data-password-strength-target="requirement"
+             data-rule="<%= requirement[:rule] %>"
+             data-value="<%= requirement[:value] %>"
+             data-label="<%= requirement[:label] %>"
+             data-remaining-singular="<%= requirement[:remaining_singular] %>"
+             data-remaining-plural="<%= requirement[:remaining_plural] %>"
+             data-met-label="<%= requirement[:met_label] %>"
+             data-pending-style="<%= requirement_pending_style %>"
+             data-met-style="<%= requirement_met_style %>"
+             data-unmet-style="<%= requirement_unmet_style %>"
+             class="<%= requirement_class %>"
+             style="<%= requirement_pending_style %>"><%= requirement[:label] %></p>
+        <% end %>
+      </div>
+    <% end %>
+
+    <div data-password-strength-target="statusRow" class="<%= status_row_class %>" style="<%= status_row_style %>; visibility: hidden;">
+      <div data-password-strength-target="strengthTrack" class="<%= bar_track_class %>" style="visibility: hidden;">
+        <div data-password-strength-target="strengthBar" class="<%= bar_base_class %>" style="width: 0%"></div>
+      </div>
+
+      <p data-password-strength-target="strengthText" class="<%= text_base_class %>" style="<%= text_style %>" aria-live="polite"></p>
+    </div>
+  <% end %>
+
+  <div class="relative">
+    <%= form.password_field attribute,
+                            required: required,
+                            autocomplete: autocomplete,
+                            placeholder: placeholder,
+                            class: input_class,
+                            data: {
+                              password_strength_target: "input",
+                              action: "input->password-strength#evaluate"
+                            } %>
+
+    <button type="button"
+            data-password-strength-target="toggle"
+            aria-label="<%= toggle_labels[:show] %>"
+            title="<%= toggle_labels[:show] %>"
+            data-show-label="<%= toggle_labels[:show] %>"
+            data-hide-label="<%= toggle_labels[:hide] %>"
+            data-action="click->password-strength#toggle"
+            class="<%= toggle_class %>">
+      <svg data-password-strength-target="showIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width: 1rem; height: 1rem;" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.27 2.943 9.542 7-1.273 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7Z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+      <svg data-password-strength-target="hideIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width: 1rem; height: 1rem;" aria-hidden="true" hidden>
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M10.584 10.587A2 2 0 0 0 13.414 13.4" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.364 5.365A10.45 10.45 0 0 1 12 5c4.478 0 8.27 2.943 9.542 7a10.46 10.46 0 0 1-4.132 5.411" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.657 6.658C4.798 7.936 3.423 9.79 2.458 12c1.273 4.057 5.064 7 9.542 7 1.536 0 2.992-.346 4.293-.965" />
+      </svg>
+    </button>
+  </div>
+
+  <% if hint.present? %>
+    <p class="<%= hint_class %>"><%= hint %></p>
+  <% end %>
+</div>

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin "stimulus-password-strength", to: "stimulus_password_strength_controller.js", preload: false
+pin "zxcvbn", to: "zxcvbn.js", preload: false

data/config/locales/en.yml

@@ -0,0 +1,8 @@
+en:
+  stimulus_password_strength:
+    show: "Show"
+    hide: "Hide"
+    weak: "Weak"
+    fair: "Fair"
+    good: "Good"
+    strong: "Strong"

data/config/locales/pl.yml

@@ -0,0 +1,8 @@
+pl:
+  stimulus_password_strength:
+    show: "Pokaż"
+    hide: "Ukryj"
+    weak: "Słabe"
+    fair: "Przeciętne"
+    good: "Dobre"
+    strong: "Silne"

data/lib/generators/stimulus_password_strength/install/install_generator.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module StimulusPasswordStrength
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      def add_importmap_pins
+        importmap_path = "config/importmap.rb"
+        return unless destination_file?(importmap_path)
+
+        add_pin(importmap_path, 'pin "stimulus-password-strength", to: "stimulus_password_strength_controller.js", preload: false')
+        add_pin(importmap_path, 'pin "zxcvbn", to: "zxcvbn.js", preload: false')
+      end
+
+      def register_stimulus_controller
+        index_path = "app/javascript/controllers/index.js"
+        return unless destination_file?(index_path)
+
+        content = read_destination(index_path)
+        import_line = 'import PasswordStrengthController from "stimulus-password-strength"'
+        register_line = 'application.register("password-strength", PasswordStrengthController)'
+
+        append_to_file(index_path, "\n#{import_line}\n") unless content.include?(import_line)
+        append_to_file(index_path, "#{register_line}\n") unless read_destination(index_path).include?(register_line)
+      end
+
+      def create_initializer
+        template "stimulus_password_strength.rb.tt", "config/initializers/stimulus_password_strength.rb"
+      end
+
+      def create_password_policy
+        policy_path = "app/lib/password_policy.rb"
+        return if destination_file?(policy_path)
+
+        template "password_policy.rb.tt", policy_path
+      end
+
+      private
+
+      def add_pin(path, line)
+        content = read_destination(path)
+        append_to_file(path, "#{line}\n") unless content.include?(line)
+      end
+
+      def destination_file?(path)
+        File.exist?(File.join(destination_root, path))
+      end
+
+      def read_destination(path)
+        File.read(File.join(destination_root, path))
+      end
+    end
+  end
+end

data/lib/generators/stimulus_password_strength/install/templates/password_policy.rb.tt

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module PasswordPolicy
+  MIN_LENGTH = 12
+
+  REQUIREMENTS = [
+    {
+      rule: :min_length,
+      value: MIN_LENGTH,
+      label: "At least #{MIN_LENGTH} characters",
+      remaining_singular: "Type 1 more character",
+      remaining_plural: "Type %{count} more characters",
+      met_label: "#{MIN_LENGTH}+ chars"
+    }
+  ].freeze
+
+  def self.requirements
+    REQUIREMENTS
+  end
+end

data/lib/generators/stimulus_password_strength/install/templates/stimulus_password_strength.rb.tt

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+StimulusPasswordStrength.configure do |config|
+  # Example customization:
+  # config.input_class = "w-full rounded-md border px-3 py-2 pr-16"
+  # config.text_style = "min-width: 2.5rem; text-align: right; white-space: nowrap;"
+  # config.status_row_class = "flex min-h-5 items-center gap-2"
+  # config.status_row_style = "min-height: 1rem;"
+  # config.requirements_style = "min-height: 1rem;"
+  # config.requirement_pending_style = "color: #6b7280;"
+  # config.requirement_met_style = "color: #047857;"
+  # config.requirement_unmet_style = "color: #b91c1c;"
+  # config.bar_colors = {
+  #   weak: "#f87171",
+  #   fair: "#fbbf24",
+  #   good: "#22c55e",
+  #   strong: "#059669"
+  # }
+end

data/lib/stimulus/password/strength.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require_relative "../../stimulus_password_strength"

data/lib/stimulus_password_strength/configuration.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module StimulusPasswordStrength
+  class Configuration
+    attr_accessor :container_class,
+                  :label_row_class,
+                  :label_class,
+                  :header_aux_class,
+                  :status_row_class,
+                  :status_row_style,
+                  :requirements_class,
+                  :requirements_style,
+                  :requirement_class,
+                  :input_class,
+                  :toggle_class,
+                  :bar_track_class,
+                  :bar_base_class,
+                  :text_base_class,
+                  :text_style,
+                  :hint_class,
+                  :requirement_pending_style,
+                  :requirement_met_style,
+                  :requirement_unmet_style,
+                  :bar_colors,
+                  :text_colors
+
+    def initialize
+      @container_class = "space-y-1"
+      @label_row_class = "flex items-end justify-between gap-3"
+      @label_class = "block text-sm font-medium text-gray-700"
+      @header_aux_class = "flex justify-end"
+      @status_row_class = "flex min-h-5 items-center gap-2"
+      @status_row_style = "min-height: 1rem;"
+      @requirements_class = "flex justify-end gap-2"
+      @requirements_style = "min-height: 1rem;"
+      @requirement_class = "text-xs text-right leading-tight"
+      @input_class = "w-full rounded-xl border border-gray-300 px-4 py-3 pr-16 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+      @toggle_class = "absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-xs font-medium text-gray-500 hover:text-gray-700"
+      @bar_track_class = "h-1.5 w-20 overflow-hidden rounded-full bg-gray-100"
+      @bar_base_class = "h-full rounded-full transition-all duration-300"
+      @text_base_class = "text-xs"
+      @text_style = "min-width: 2.5rem; text-align: right; white-space: nowrap;"
+      @hint_class = "mt-1 text-xs text-gray-500"
+      @requirement_pending_style = "color: #6b7280;"
+      @requirement_met_style = "color: #047857;"
+      @requirement_unmet_style = "color: #b91c1c;"
+
+      @bar_colors = {
+        weak: "#f87171",
+        fair: "#fbbf24",
+        good: "#22c55e",
+        strong: "#059669"
+      }
+
+      @text_colors = {
+        weak: "#ef4444",
+        fair: "#d97706",
+        good: "#16a34a",
+        strong: "#047857"
+      }
+    end
+  end
+end

data/lib/stimulus_password_strength/engine.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module StimulusPasswordStrength
+  class Engine < ::Rails::Engine
+    initializer "stimulus_password_strength.assets" do |app|
+      next unless app.config.respond_to?(:assets)
+
+      app.config.assets.paths << root.join("app/javascript")
+      app.config.assets.paths << root.join("vendor/javascript")
+    end
+
+    initializer "stimulus_password_strength.importmap", before: "importmap" do |app|
+      next unless app.config.respond_to?(:importmap)
+
+      app.config.importmap.paths << root.join("config/importmap.rb")
+    end
+
+    initializer "stimulus_password_strength.helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include StimulusPasswordStrength::Helper
+      end
+    end
+  end
+end

data/lib/stimulus_password_strength/helper.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+module StimulusPasswordStrength
+  module Helper
+    def password_strength_field(form, attribute, **options)
+      config = StimulusPasswordStrength.configuration
+
+      placeholder = options.delete(:placeholder)
+      hint = options.delete(:hint)
+      label = options.delete(:label)
+      required = options.delete(:required)
+      autocomplete = options.delete(:autocomplete) || "new-password"
+      requirements = normalize_requirements(options.delete(:requirements) || [])
+      input_class = options.delete(:input_class) || config.input_class
+      container_class = options.delete(:container_class) || config.container_class
+      label_row_class = options.delete(:label_row_class) || config.label_row_class
+      label_class = options.delete(:label_class) || config.label_class
+      header_aux_class = options.delete(:header_aux_class) || config.header_aux_class
+      status_row_class = options.delete(:status_row_class) || config.status_row_class
+      status_row_style = options.delete(:status_row_style) || config.status_row_style
+      requirements_class = options.delete(:requirements_class) || config.requirements_class
+      requirements_style = options.delete(:requirements_style) || config.requirements_style
+      requirement_class = options.delete(:requirement_class) || config.requirement_class
+      toggle_class = options.delete(:toggle_class) || config.toggle_class
+      bar_track_class = options.delete(:bar_track_class) || config.bar_track_class
+      bar_base_class = options.delete(:bar_base_class) || config.bar_base_class
+      text_base_class = options.delete(:text_base_class) || config.text_base_class
+      text_style = options.delete(:text_style) || config.text_style
+      hint_class = options.delete(:hint_class) || config.hint_class
+
+      labels = i18n_labels(options.delete(:strength_labels) || {})
+      toggle_labels = i18n_toggle_labels(options.delete(:toggle_labels) || {})
+
+      render(
+        "stimulus_password_strength/field",
+        form: form,
+        attribute: attribute,
+        label: label,
+        placeholder: placeholder,
+        hint: hint,
+        required: required,
+        autocomplete: autocomplete,
+        requirements: requirements,
+        input_class: input_class,
+        container_class: container_class,
+        label_row_class: label_row_class,
+        label_class: label_class,
+        header_aux_class: header_aux_class,
+        status_row_class: status_row_class,
+        status_row_style: status_row_style,
+        requirements_class: requirements_class,
+        requirements_style: requirements_style,
+        requirement_class: requirement_class,
+        toggle_class: toggle_class,
+        bar_track_class: bar_track_class,
+        bar_base_class: bar_base_class,
+        text_base_class: text_base_class,
+        text_style: text_style,
+        hint_class: hint_class,
+        requirement_pending_style: config.requirement_pending_style,
+        requirement_met_style: config.requirement_met_style,
+        requirement_unmet_style: config.requirement_unmet_style,
+        labels: labels,
+        toggle_labels: toggle_labels,
+        bar_colors: config.bar_colors,
+        text_colors: config.text_colors
+      )
+    end
+
+    private
+
+    def i18n_labels(override_labels)
+      {
+        weak: override_labels[:weak] || I18n.t("stimulus_password_strength.weak", default: "Weak"),
+        fair: override_labels[:fair] || I18n.t("stimulus_password_strength.fair", default: "Fair"),
+        good: override_labels[:good] || I18n.t("stimulus_password_strength.good", default: "Good"),
+        strong: override_labels[:strong] || I18n.t("stimulus_password_strength.strong", default: "Strong")
+      }
+    end
+
+    def i18n_toggle_labels(override_labels)
+      {
+        show: override_labels[:show] || I18n.t("stimulus_password_strength.show", default: "Show"),
+        hide: override_labels[:hide] || I18n.t("stimulus_password_strength.hide", default: "Hide")
+      }
+    end
+
+    def normalize_requirements(raw_requirements)
+      raw_requirements.map do |requirement|
+        item = requirement.to_h.transform_keys(&:to_sym)
+        rule = item.fetch(:rule).to_sym
+        label = item.fetch(:label).to_s
+
+        raise ArgumentError, "Requirement label must be present" if label.strip.empty?
+
+        case rule
+        when :min_length
+          {
+            rule: rule.to_s,
+            value: Integer(item.fetch(:value)),
+            label: label,
+            remaining_singular: item[:remaining_singular].to_s,
+            remaining_plural: item[:remaining_plural].to_s,
+            met_label: item[:met_label].to_s
+          }
+        when :uppercase
+          {
+            rule: rule.to_s,
+            value: "",
+            label: label,
+            remaining_singular: "",
+            remaining_plural: "",
+            met_label: item[:met_label].to_s
+          }
+        else
+          raise ArgumentError, "Unsupported requirement rule: #{rule}"
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_password_strength/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module StimulusPasswordStrength
+  VERSION = "0.1.2"
+end

data/lib/stimulus_password_strength.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require_relative "stimulus_password_strength/version"
+require_relative "stimulus_password_strength/configuration"
+require_relative "stimulus_password_strength/helper"
+require_relative "stimulus_password_strength/engine" if defined?(Rails)
+
+module StimulusPasswordStrength
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
+  end
+end