Fix password change validation feedback - display clear error messages instead of browser icon

app/views/devise/passwords/edit.html.erb

@@ -16,14 +16,14 @@
         <label class="password required" for="user_password">New password <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= f.password_field :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",
+                               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" } %>
           <button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
             <i class="fa-solid fa-eye" data-password-toggle-target="icon"></i>
@@ -37,12 +37,14 @@
         <label class="password required" for="user_password_confirmation">Confirm new password <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= f.password_field :password_confirmation,
-                      class: "w-full form-control form-input password-field pr-10",
-                      required: true,
-                      autocomplete: "new-password",
-                      autocorrect: "off",
-                      autocapitalize: "off",
-                      spellcheck: "false",
+                               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" } %>
           <button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
             <i class="fa-solid fa-eye" data-password-toggle-target="icon"></i>

app/views/devise/sessions/new.html.erb

@@ -20,9 +20,10 @@
         <label class="password required" for="user_password">Password <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= f.password_field :password,
-                  class: "w-full form-control password-field rounded-md border-gray-300 shadow-sm
-                  focus:ring-blue-500 focus:border-blue-500 px-3 py-2 pr-10",
+                  class: "w-full form-control form-input password-field pr-10",
                   required: true,
+                  minlength: 5,
+                  autofocus: true,
                   autocomplete: "current-password",
                   autocorrect: "off",
                   autocapitalize: "off",

app/views/devise/shared/_error_messages.html.erb

@@ -0,0 +1,19 @@
+<% if resource.errors.any? %>
+  <div id="error_explanation" class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md" role="alert">
+    <div class="flex items-start">
+      <div class="flex-shrink-0">
+        <i class="fa-solid fa-circle-xmark text-red-400" aria-hidden="true"></i>
+      </div>
+      <div class="ml-3">
+        <h3 class="text-sm font-medium text-red-800 mb-2">
+          <%= pluralize(resource.errors.count, "error") %> prevented this from being saved:
+        </h3>
+        <ul class="list-disc list-inside text-sm text-red-700 space-y-1">
+          <% resource.errors.full_messages.each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  </div>
+<% end %>

app/views/users/_password_errors.html.erb

@@ -1,11 +1,19 @@
 <% password_errors = user.errors.select { |e| e.attribute.to_s =~ /^password/ || e.attribute == :current_password } %>
 <% if password_errors.any? %>
-  <div id="password-errors" class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
-    <ul class="list-disc list-inside text-sm text-red-600">
-      <% password_errors.each do |error| %>
-        <li><%= error.full_message %></li>
-      <% end %>
-    </ul>
+  <div id="password-errors" class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md" role="alert">
+    <div class="flex items-start">
+      <div class="flex-shrink-0">
+        <i class="fa-solid fa-circle-xmark text-red-400" aria-hidden="true"></i>
+      </div>
+      <div class="ml-3">
+        <h3 class="text-sm font-medium text-red-800 mb-2">There was a problem with your password:</h3>
+        <ul class="list-disc list-inside text-sm text-red-700 space-y-1">
+          <% password_errors.each do |error| %>
+            <li><%= error.full_message %></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
   </div>
 <% else %>
   <div id="password-errors"></div>

app/views/users/change_password.html.erb

@@ -11,13 +11,15 @@
         <label class="password required" for="user_current_password">Current password <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= f.password_field :current_password,
-                      class: "w-full password-field rounded-md border-gray-300 shadow-sm p-2 pr-10",
-                      required: true,
-                      autocomplete: "current-password",
-                      autocorrect: "off",
-                      autocapitalize: "off",
-                      spellcheck: "false",
-                      data: { password_toggle_target: "input" } %>
+                               class: "w-full form-control form-input password-field pr-10",
+                               required: true,
+                               minlength: 5,
+                               autofocus: true,
+                               autocomplete: "current-password",
+                               autocorrect: "off",
+                               autocapitalize: "off",
+                               spellcheck: "false",
+                               data: { password_toggle_target: "input" } %>
           <button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
             <i class="fa fa-eye" data-password-toggle-target="icon"></i>
           </button>
@@ -38,32 +40,37 @@
         <label class="password required" for="change-password-new-password">New password <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= 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" } %>
           <button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
             <i class="fa fa-eye" data-password-toggle-target="icon"></i>
           </button>
         </div>
+        <p class="text-sm text-gray-500 mt-1">Password must be at least 5 characters long</p>
       </div>
       <!-- CONFIRM PASSWORD -->
       <div data-controller="password-toggle" class="input password required">
         <label class="password required" for="change-password-new-password-confirmation">New password confirmation <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= 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" } %>
           <button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
             <i class="fa fa-eye" data-password-toggle-target="icon"></i>
           </button>

app/views/welcome/show.html.erb

@@ -23,14 +23,16 @@
         <label class="password required" for="change-password-new-password">New password <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= 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" } %>
           <button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
             <i class="fa fa-eye" data-password-toggle-target="icon"></i>
           </button>
@@ -42,14 +44,16 @@
         <label class="password required" for="change-password-new-password-confirmation">New password confirmation <abbr title="required">*</abbr></label>
         <div class="relative">
           <%= 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" } %>
           <button type="button" class="toggle-password" data-action="password-toggle#toggle" aria-label="Toggle password visibility">
             <i class="fa fa-eye" data-password-toggle-target="icon"></i>
           </button>

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

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