<%= f.password_field :password_confirmation,
- id: "change-password-new-password-confirmation",
- class: "w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
- required: true,
- autocomplete: "new-password",
- autocorrect: "off",
- autocapitalize: "off",
- spellcheck: "false",
- data: { password_toggle_target: "input" } %>
+ id: "change-password-new-password-confirmation",
+ class: "w-full form-control form-input password-field pr-10",
+ required: true,
+ minlength: 5,
+ autofocus: true,
+ autocomplete: "new-password",
+ autocorrect: "off",
+ autocapitalize: "off",
+ spellcheck: "false",
+ data: { password_toggle_target: "input" } %>
diff --git a/app/views/welcome/show.html.erb b/app/views/welcome/show.html.erb
index ea424bebb..9fb2e6ec9 100644
--- a/app/views/welcome/show.html.erb
+++ b/app/views/welcome/show.html.erb
@@ -23,14 +23,16 @@
<%= f.password_field :password,
- id: "change-password-new-password",
- class: "w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
- required: true,
- autocomplete: "new-password",
- autocorrect: "off",
- autocapitalize: "off",
- spellcheck: "false",
- data: { password_toggle_target: "input" } %>
+ id: "change-password-new-password",
+ class: "w-full form-control form-input password-field pr-10",
+ required: true,
+ minlength: 5,
+ autofocus: true,
+ autocomplete: "new-password",
+ autocorrect: "off",
+ autocapitalize: "off",
+ spellcheck: "false",
+ data: { password_toggle_target: "input" } %>
@@ -42,14 +44,16 @@
<%= f.password_field :password_confirmation,
- id: "change-password-new-password-confirmation",
- class: "w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10",
- required: true,
- autocomplete: "new-password",
- autocorrect: "off",
- autocapitalize: "off",
- spellcheck: "false",
- data: { password_toggle_target: "input" } %>
+ id: "change-password-new-password-confirmation",
+ class: "w-full form-control form-input password-field pr-10",
+ required: true,
+ minlength: 5,
+ autofocus: true,
+ autocomplete: "new-password",
+ autocorrect: "off",
+ autocapitalize: "off",
+ spellcheck: "false",
+ data: { password_toggle_target: "input" } %>
diff --git a/spec/views/devise/passwords/edit.html.erb_spec.rb b/spec/views/devise/passwords/edit.html.erb_spec.rb
index 256e8cc54..ca76d7f76 100644
--- a/spec/views/devise/passwords/edit.html.erb_spec.rb
+++ b/spec/views/devise/passwords/edit.html.erb_spec.rb
@@ -47,7 +47,7 @@
end
it "displays error messages" do
- expect(rendered).to have_content("prevented this user from being saved")
+ expect(rendered).to have_content("prevented this from being saved")
expect(rendered).to have_content("Password is too short")
expect(rendered).to have_content("Password confirmation doesn't match")
end
diff --git a/spec/views/users/change_password.html.erb_spec.rb b/spec/views/users/change_password.html.erb_spec.rb
new file mode 100644
index 000000000..cceaacd7b
--- /dev/null
+++ b/spec/views/users/change_password.html.erb_spec.rb
@@ -0,0 +1,53 @@
+require 'rails_helper'
+
+RSpec.describe "users/change_password", type: :view do
+ let(:user) { create(:user) }
+
+ before do
+ assign(:user, user)
+ allow(view).to receive(:current_user).and_return(user)
+ render
+ end
+
+ it "displays password requirements hint" do
+ expect(rendered).to have_content("Password must be at least 5 characters long")
+ end
+
+ it "has minlength attribute on password field" do
+ expect(rendered).to have_css('input[type="password"][minlength="5"]#change-password-new-password')
+ end
+
+ it "displays current password field" do
+ expect(rendered).to have_field("Current password", type: :password)
+ end
+
+ it "displays new password field" do
+ expect(rendered).to have_field("New password", type: :password)
+ end
+
+ it "displays password confirmation field" do
+ expect(rendered).to have_field("New password confirmation", type: :password)
+ end
+
+ it "has a submit button" do
+ expect(rendered).to have_button("Change Password")
+ end
+
+ context "when user has password errors" do
+ before do
+ user.errors.add(:password, "is too short (minimum is 5 characters)")
+ user.errors.add(:current_password, "is invalid")
+ render
+ end
+
+ it "displays error messages" do
+ expect(rendered).to have_content("There was a problem with your password")
+ expect(rendered).to have_content("Password is too short")
+ expect(rendered).to have_content("Current password is invalid")
+ end
+
+ it "displays error alert with proper styling" do
+ expect(rendered).to have_css('div[role="alert"]#password-errors')
+ end
+ end
+end