Authentication

Change Password

Theme

Hound

Framework

Tailwind CSS

Be sure to read the Rails UI authentication design patterns overview to understand how we've customized the default Devise views to work nicely inside the Hound theme.

Change your password

Please enter a new password to update and secure your account.

Didn't receive confirmation instructions?

Didn't receive unlock instructions?

new.html.erb
new.haml.erb

<!-- app/views/devise/passwords/edit.html.erb -->
<% content_for :masthead do %>
<div class="text-center">
  <h1 class="text-3xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight 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 "shared/error_messages", resource: resource %>
<% end %>

<%= render "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", classes: "w-5 h-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-indigo-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-indigo-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", classes: "w-5 h-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-indigo-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-indigo-400" %>
      </div>
    </div>

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

/ app/views/devise/passwords/edit.html.erb
- content_for :masthead do
  .text-center
    %h1.text-3xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight.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 "shared/error_messages", resource: resource
= render "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", classes: "w-5 h-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-indigo-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-indigo-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", classes: "w-5 h-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-indigo-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-indigo-400"
    = f.submit "Change password", class: "btn btn-primary hover:cursor-pointer w-full"

Reset password