<!-- app/views/devise/passwords/edit.html.erb -->
<% content_for :masthead do %>
<div class="text-center">
  <h1 class="md:h3 h4 my-3">Change your password</h1>
  <p class="mb-6 text-slate-700 dark:text-slate-200 max-w-sm mx-auto">Please enter a new password to update and secure your account.</p>
</div>
<%= render "rui/shared/error_messages", resource: resource %>
<% end %>

<%= render "devise/auth_layout" do %>
  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
    <%= f.hidden_field :reset_password_token %>

    <div class="form-group">
      <%= f.label :password, "New password", class: "form-label" %>
      <div class="relative">
        <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition" %>
        <%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
      </div>
      <% if @minimum_password_length %>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400"><%= @minimum_password_length %> characters minimum</p>
      <% end %>
    </div>

    <div class="form-group">
      <%= f.label :password_confirmation, "Confirm new password", class: "form-label" %>
      <div class="relative">
        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition" %>
        <%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
      </div>
    </div>

  <%= f.submit "Change password", class: "btn btn-primary hover:cursor-pointer w-full"  %>
  <% end %>
<% end %>

/ app/views/devise/passwords/edit.haml.erb
- content_for :masthead do
  .text-center
    %h1.md:h3.h4.my-3 Change your password
    %p.mb-6.text-slate-700.dark:text-slate-200.max-w-sm.mx-auto Please enter a new password to update and secure your account.
  = render "rui/shared/error_messages", resource: resource
= render "rui/devise/auth_layout" do
  = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
    = f.hidden_field :reset_password_token
    .form-group
      = f.label :password, "New password", class: "form-label"
      .relative
        = f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition"
        = icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
      - if @minimum_password_length
        %p.mt-1.text-sm.text-slate-600.dark:text-slate-400
          = @minimum_password_length
          characters minimum
    .form-group
      = f.label :password_confirmation, "Confirm new password", class: "form-label"
      .relative
        = f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition"
        = icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
    = f.submit "Change password", class: "btn btn-primary hover:cursor-pointer w-full"