stimulus-password-strength 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +7 -0
- data/README.md +12 -0
- data/app/views/stimulus_password_strength/_field.html.erb +2 -2
- data/lib/stimulus_password_strength/configuration.rb +6 -2
- data/lib/stimulus_password_strength/helper.rb +4 -0
- data/lib/stimulus_password_strength/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 787fe4298029dcee2caeb7017f855898db05922601132037d26b8a7b22538694
|
|
4
|
+
data.tar.gz: a1eb04050ff77b58dc236c85ac2056744e2b4a082a48475d56060747a9123cf1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: af929a1bef9d1d660a12008e05f31242a1ac09b02e947ea64a551d9aec002a91aaf28d3db02b8050c4d1d5a74e1de968a2e1123fffa4966916fa062016df14f9
|
|
7
|
+
data.tar.gz: 4e9d6016040a619edf04ada7473f8e78c9404abc3f0aff2aa468ef8376caeb730ad3d7c9f984cb1531709990ba4e10f70be077a6f8049c7d9354b58d47a12a07
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.1.8
|
|
4
|
+
|
|
5
|
+
- moved the field wrapper and label row layout into inline style defaults so critical flex/position behavior no longer depends on host-app utility classes
|
|
6
|
+
- strengthened the toggle inline style with button-reset mechanics and a stable hit area contract
|
|
7
|
+
- changed the default strength-label style to a fixed width to prevent layout shift across locales
|
|
8
|
+
- added dummy-app hostile-style coverage plus isolated render assertions for the new layout contracts
|
|
9
|
+
|
|
3
10
|
## 0.1.7
|
|
4
11
|
|
|
5
12
|
- moved password toggle positioning into inline style defaults so the show/hide icon stays inside the input even when host-app Tailwind utilities are incomplete
|
data/README.md
CHANGED
|
@@ -114,6 +114,7 @@ The gem does not try to infer rules from the model and does not add hidden fallb
|
|
|
114
114
|
```ruby
|
|
115
115
|
StimulusPasswordStrength.configure do |config|
|
|
116
116
|
config.input_class = "w-full rounded-md border px-3 py-2 pr-16"
|
|
117
|
+
config.wrapper_style = "position: relative;"
|
|
117
118
|
config.toggle_style = "position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);"
|
|
118
119
|
config.text_style = "width: 5.5rem; text-align: right; white-space: nowrap;"
|
|
119
120
|
config.status_row_class = "flex min-h-5 flex-row-reverse items-center justify-start gap-2"
|
|
@@ -133,6 +134,17 @@ end
|
|
|
133
134
|
|
|
134
135
|
Adding more languages is standard Rails I18n: add another locale file in [config/locales](/Users/justi/projects_prod/stimulus-password-strength/config/locales).
|
|
135
136
|
|
|
137
|
+
## Layout Contract
|
|
138
|
+
|
|
139
|
+
The gem now treats critical layout as component mechanics, not host-app theme:
|
|
140
|
+
|
|
141
|
+
- the password-field wrapper must stay positioned
|
|
142
|
+
- the show/hide toggle must stay inside the input
|
|
143
|
+
- the label/requirements row must remain a flex row
|
|
144
|
+
- the strength label uses a fixed width by default
|
|
145
|
+
|
|
146
|
+
If you override these settings, preserve the same mechanics and keep right-side padding on the input (`pr-16` or equivalent) so typed text does not collide with the toggle.
|
|
147
|
+
|
|
136
148
|
## Post-Install Checklist
|
|
137
149
|
|
|
138
150
|
1. Signup: weak password -> backend validation still works.
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
data-password-strength-good-text-color="<%= text_colors[:good] %>"
|
|
16
16
|
data-password-strength-strong-text-color="<%= text_colors[:strong] %>">
|
|
17
17
|
<% if label.present? %>
|
|
18
|
-
<div class="<%= label_row_class %>">
|
|
18
|
+
<div class="<%= label_row_class %>" style="<%= label_row_style %>">
|
|
19
19
|
<%= form.label attribute, label, class: label_class %>
|
|
20
20
|
|
|
21
21
|
<div class="<%= header_aux_class %>" style="<%= header_aux_style %>">
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
</div>
|
|
79
79
|
<% end %>
|
|
80
80
|
|
|
81
|
-
<div class="relative">
|
|
81
|
+
<div class="relative" style="<%= wrapper_style %>">
|
|
82
82
|
<%= form.password_field attribute,
|
|
83
83
|
required: required,
|
|
84
84
|
autocomplete: autocomplete,
|
|
@@ -4,6 +4,7 @@ module StimulusPasswordStrength
|
|
|
4
4
|
class Configuration
|
|
5
5
|
attr_accessor :container_class,
|
|
6
6
|
:label_row_class,
|
|
7
|
+
:label_row_style,
|
|
7
8
|
:label_class,
|
|
8
9
|
:header_aux_class,
|
|
9
10
|
:header_aux_style,
|
|
@@ -13,6 +14,7 @@ module StimulusPasswordStrength
|
|
|
13
14
|
:requirements_style,
|
|
14
15
|
:requirement_class,
|
|
15
16
|
:requirement_style,
|
|
17
|
+
:wrapper_style,
|
|
16
18
|
:input_class,
|
|
17
19
|
:toggle_class,
|
|
18
20
|
:toggle_style,
|
|
@@ -32,6 +34,7 @@ module StimulusPasswordStrength
|
|
|
32
34
|
def initialize
|
|
33
35
|
@container_class = "space-y-1"
|
|
34
36
|
@label_row_class = "flex items-end justify-between gap-3"
|
|
37
|
+
@label_row_style = "display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem;"
|
|
35
38
|
@label_class = "block text-sm font-medium text-gray-700"
|
|
36
39
|
@header_aux_class = "flex justify-end"
|
|
37
40
|
@header_aux_style = "display: flex; justify-content: flex-end; align-items: center;"
|
|
@@ -41,15 +44,16 @@ module StimulusPasswordStrength
|
|
|
41
44
|
@requirements_style = "display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; min-height: 1rem;"
|
|
42
45
|
@requirement_class = "text-xs text-right leading-tight"
|
|
43
46
|
@requirement_style = "font-size: 0.75rem; line-height: 1rem; text-align: right;"
|
|
47
|
+
@wrapper_style = "position: relative;"
|
|
44
48
|
@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"
|
|
45
49
|
@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"
|
|
46
|
-
@toggle_style = "position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;"
|
|
50
|
+
@toggle_style = "position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; line-height: 0; z-index: 1;"
|
|
47
51
|
@bar_track_class = "h-1.5 w-20 overflow-hidden rounded-full bg-gray-100"
|
|
48
52
|
@bar_track_style = "height: 0.375rem; width: 5rem; overflow: hidden; border-radius: 9999px; background-color: #e5e7eb; visibility: hidden; flex-shrink: 0;"
|
|
49
53
|
@bar_base_class = "h-full rounded-full transition-all duration-300"
|
|
50
54
|
@bar_style = "display: block; height: 100%; border-radius: 9999px; visibility: hidden; transition: width 300ms ease, background-color 300ms ease;"
|
|
51
55
|
@text_base_class = "text-xs"
|
|
52
|
-
@text_style = "display: block;
|
|
56
|
+
@text_style = "display: inline-block; width: 5.5rem; text-align: right; white-space: nowrap;"
|
|
53
57
|
@hint_class = "mt-1 text-xs text-gray-500"
|
|
54
58
|
@requirement_pending_style = "color: #6b7280;"
|
|
55
59
|
@requirement_met_style = "color: #047857;"
|
|
@@ -14,6 +14,7 @@ module StimulusPasswordStrength
|
|
|
14
14
|
input_class = options.delete(:input_class) || config.input_class
|
|
15
15
|
container_class = options.delete(:container_class) || config.container_class
|
|
16
16
|
label_row_class = options.delete(:label_row_class) || config.label_row_class
|
|
17
|
+
label_row_style = options.delete(:label_row_style) || config.label_row_style
|
|
17
18
|
label_class = options.delete(:label_class) || config.label_class
|
|
18
19
|
header_aux_class = options.delete(:header_aux_class) || config.header_aux_class
|
|
19
20
|
header_aux_style = options.delete(:header_aux_style) || config.header_aux_style
|
|
@@ -23,6 +24,7 @@ module StimulusPasswordStrength
|
|
|
23
24
|
requirements_style = options.delete(:requirements_style) || config.requirements_style
|
|
24
25
|
requirement_class = options.delete(:requirement_class) || config.requirement_class
|
|
25
26
|
requirement_style = options.delete(:requirement_style) || config.requirement_style
|
|
27
|
+
wrapper_style = options.delete(:wrapper_style) || config.wrapper_style
|
|
26
28
|
toggle_class = options.delete(:toggle_class) || config.toggle_class
|
|
27
29
|
toggle_style = options.delete(:toggle_style) || config.toggle_style
|
|
28
30
|
bar_track_class = options.delete(:bar_track_class) || config.bar_track_class
|
|
@@ -49,6 +51,7 @@ module StimulusPasswordStrength
|
|
|
49
51
|
input_class: input_class,
|
|
50
52
|
container_class: container_class,
|
|
51
53
|
label_row_class: label_row_class,
|
|
54
|
+
label_row_style: label_row_style,
|
|
52
55
|
label_class: label_class,
|
|
53
56
|
header_aux_class: header_aux_class,
|
|
54
57
|
header_aux_style: header_aux_style,
|
|
@@ -58,6 +61,7 @@ module StimulusPasswordStrength
|
|
|
58
61
|
requirements_style: requirements_style,
|
|
59
62
|
requirement_class: requirement_class,
|
|
60
63
|
requirement_style: requirement_style,
|
|
64
|
+
wrapper_style: wrapper_style,
|
|
61
65
|
toggle_class: toggle_class,
|
|
62
66
|
toggle_style: toggle_style,
|
|
63
67
|
bar_track_class: bar_track_class,
|