Hound -> Auth work

app/views/railsui/shared/_email_spacer.html.erb

@@ -5,3 +5,4 @@
     </tr>
   </tbody>
 </table>
+x

app/views/railsui/systems/authentication/change_password.html.erb

@@ -0,0 +1,7 @@
+<% content_for :fullwidth, true %>
+
+<div class="lg:px-6">
+  <%= render "railsui/shared/header" %>
+</div>
+
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/change_password" %>

app/views/railsui/systems/authentication/confirmation.html.erb

@@ -4,4 +4,5 @@
   <%= render "railsui/shared/header" %>
 </div>
 
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/read_before" %>
 <%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/confirmation" %>

app/views/railsui/systems/authentication/edit.html.erb

@@ -4,4 +4,5 @@
   <%= render "railsui/shared/header" %>
 </div>
 
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/read_before" %>
 <%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/edit" %>

app/views/railsui/systems/authentication/edit_password.html.erb

@@ -4,4 +4,5 @@
   <%= render "railsui/shared/header" %>
 </div>
 
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/read_before" %>
 <%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/edit_password" %>

app/views/railsui/systems/authentication/reset_password.html.erb

@@ -4,4 +4,5 @@
   <%= render "railsui/shared/header" %>
 </div>
 
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/read_before" %>
 <%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/reset_password" %>

app/views/railsui/systems/authentication/signin.html.erb

@@ -4,4 +4,5 @@
   <%= render "railsui/shared/header" %>
 </div>
 
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/read_before" %>
 <%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/signin" %>

app/views/railsui/systems/authentication/signup.html.erb

@@ -4,4 +4,5 @@
   <%= render "railsui/shared/header" %>
 </div>
 
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/read_before" %>
 <%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/signup" %>

app/views/railsui/systems/authentication/unlocks.html.erb

@@ -4,4 +4,5 @@
   <%= render "railsui/shared/header" %>
 </div>
 
+<%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/read_before" %>
 <%= render "railsui/themes/#{Railsui.config.css_framework}/#{Railsui.config.theme}/authentication/unlocks" %>

app/views/railsui/themes/tailwind/hound/authentication/_change_password.html.erb

@@ -0,0 +1,135 @@
+<%= render preview do %>
+<div class="pointer-events-none select-none sm:h-[800px] min-h-[600px] sm:-m-8 -m-4 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('fusion.png') %>')">
+  <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
+    <div>
+      <div class="flex justify-center">
+        <a href="/">
+          <img alt="Hound logo" class="w-10 h-auto" src="https://f001.backblazeb2.com/file/railsui/themes/hound/logo.svg">
+        </a>
+      </div>
+
+      <div class="mt-6">
+        <div class="text-center">
+          <h1 class="text-3xl 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>
+      </div>
+
+      <div class="bg-white dark:bg-slate-800 dark:border-slate-700/80 shadow-sm rounded-lg p-8 border border-slate-300/60">
+
+      <form class="new_user" id="new_user" action="#" accept-charset="UTF-8" method="post">
+        <input type="hidden" name="_method" value="put" autocomplete="off"><input type="hidden" name="authenticity_token" value="#" autocomplete="off">
+        <input autocomplete="off" type="hidden" value="R6ZdL9coz642z78qaqsr" name="user[reset_password_token]" id="user_reset_password_token">
+
+        <div class="form-group">
+          <label class="form-label" for="user_password">New password</label>
+          <div class="relative">
+            <input autofocus="autofocus" autocomplete="new-password" class="form-input focus:pl-10 peer transition" type="password" name="user[password]" id="user_password">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="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" role="img" aria-labelledby="ar71butxjb5gz2j6p7waghnh9oumt8mp"><title id="ar71butxjb5gz2j6p7waghnh9oumt8mp">Lock closed</title>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path>
+            </svg>
+
+          </div>
+            <p class="mt-1 text-xs text-slate-600 dark:text-slate-400">6 characters minimum</p>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label" for="user_password_confirmation">Confirm new password</label>
+          <div class="relative">
+            <input autocomplete="new-password" class="form-input focus:pl-10 peer transition" type="password" name="user[password_confirmation]" id="user_password_confirmation">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="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" role="img" aria-labelledby="a81fu34qo8o330fc2psw0cp7g0a4madx"><title id="a81fu34qo8o330fc2psw0cp7g0a4madx">Lock closed</title>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path>
+            </svg>
+
+            </div>
+          </div>
+
+          <input type="submit" name="commit" value="Change password" class="btn btn-primary hover:cursor-pointer w-full" data-disable-with="Change password">
+        </form>
+      </div>
+
+      <div class="mt-4">
+        <div class="text-center mb-1">
+          <a class="text-sm text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-500" href="/users/confirmation/new">Didn't receive confirmation instructions?</a>
+        </div>
+
+        <div class="text-center mb-2">
+          <a class="text-sm text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-500" href="/users/unlock/new">Didn't receive unlock instructions?</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/passwords/edit.html.erb -->
+<%% content_for :masthead do %>
+  <div class="text-center">
+    <h1 class="text-3xl 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 %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/passwords/edit.haml.erb
+- content_for :masthead do
+  .text-center
+    %h1.text-3xl.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"
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb", haml_filename: "new.haml.erb" %>

app/views/railsui/themes/tailwind/hound/authentication/_confirmation.html.erb

@@ -1,11 +1,5 @@
-<div class="my-6">
-  <%= render callout do %>
-    <p>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  <%= theme_name.humanize %> theme.
-    <% end %>
-  </div>
-
-  <%= render preview do %>
-  <div class="pointer-events-none select-none sm:h-[800px] -m-8 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_path('fusion.png')%>')">
+<%= render preview do %>
+  <div class="pointer-events-none select-none sm:h-[800px] min-h-[600px] sm:-m-8 -m-4 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_path('fusion.png')%>')">
     <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
       <div>
         <div class="flex justify-center">

app/views/railsui/themes/tailwind/hound/authentication/_edit.html.erb

@@ -1,10 +1,5 @@
-<div class="my-6">
-  <%= render callout do %>
-    <p>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  <%= theme_name.humanize %> theme.
-    <% end %>
-  </div>
 
-  <div class="border dark:border-slate-700 rounded pointer-events-none select none">
+<div class="border dark:border-slate-700 rounded pointer-events-none select none">
     <header class="relative dark:bg-slate-900 bg-white border-b border-slate-200 dark:border-slate-700 py-1" data-controller="nav">
   <div class="container mx-auto px-4">
     <div class="md:flex items-center flex-wrap md:space-x-2">

app/views/railsui/themes/tailwind/hound/authentication/_overview.html.erb

@@ -1,6 +1,6 @@
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 my-8">
   <%= link_to systems_authentication_signin_path, class: "border border-slate-200 rounded-lg shadow-sm p-5 group hover:shadow-lg shadow-indigo-50 hover:shadow-indigo-50 transition ease-in-out duration-200 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none dark:hover:shadow-none dark:hover:border-slate-500 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none dark:hover:shadow-none dark:hover:border-slate-500" do %>
-    <h3 class="font-bold text-transparent bg-clip-text bg-gradient-to-tl from-salmon-500 to-indigo-600 block mb-1 text-base dark:text-white dark:bg-none dark:text-white dark:bg-none">Sign in</h3>
+    <h3 class="font-bold text-transparent bg-clip-text bg-gradient-to-tl from-salmon-500 to-indigo-600 block mb-1 text-base dark:text-white dark:bg-none">Sign in</h3>
   <% end %>
 
   <%= link_to systems_authentication_signup_path, class: "border border-slate-200 rounded-lg shadow-sm p-5 group hover:shadow-lg shadow-indigo-50 hover:shadow-indigo-50 transition ease-in-out duration-200 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none dark:hover:shadow-none dark:hover:border-slate-500" do %>
@@ -11,6 +11,10 @@
     <h3 class="font-bold text-transparent bg-clip-text bg-gradient-to-tl from-salmon-500 to-indigo-600 block mb-1 text-base dark:text-white dark:bg-none">Edit Account</h3>
   <% end %>
 
+  <%= link_to systems_authentication_change_password_path, class: "border border-slate-200 rounded-lg shadow-sm p-5 group hover:shadow-lg shadow-indigo-50 hover:shadow-indigo-50 transition ease-in-out duration-200 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none dark:hover:shadow-none dark:hover:border-slate-500" do %>
+    <h3 class="font-bold text-transparent bg-clip-text bg-gradient-to-tl from-salmon-500 to-indigo-600 block mb-1 text-base dark:text-white dark:bg-none">Change password</h3>
+  <% end %>
+
   <%= link_to systems_authentication_reset_password_path, class: "border border-slate-200 rounded-lg shadow-sm p-5 group hover:shadow-lg shadow-indigo-50 hover:shadow-indigo-50 transition ease-in-out duration-200 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none dark:hover:shadow-none dark:hover:border-slate-500" do %>
     <h3 class="font-bold text-transparent bg-clip-text bg-gradient-to-tl from-salmon-500 to-indigo-600 block mb-1 text-base dark:text-white dark:bg-none">Reset password</h3>
   <% end %>
@@ -231,7 +235,7 @@
 
 <%= content_for :erb, flush: true do %>
 <%% if resource.errors.any? %>
-<div class="bg-rose-50 text-rose-700 sm:px-9 sm:py-6 px-6 py-6 rounded-lg mb-6 text-sm" role="alert">
+<div class="bg-rose-50 text-rose-700 sm:px-9 sm:py-6 px-6 py-6 rounded-lg mb-6 dark:bg-rose-400/10 dark:border dark:border-rose-400/20 dark:text-rose-50 text-sm" role="alert">
   <div class="flex items-start space-x-4">
     <%%= icon "shield-exclamation", classes: "w-6 h-6 text-rose-700 flex-shrink-0", variant: :solid %>
     <div class="flex-1">
@@ -244,20 +248,21 @@
     </div>
   </div>
 </div>
+<%% end %>
 <% end %>
 
 <% content_for :haml, flush: true do %>
 - if resource.errors.any?
-  .bg-rose-50.text-rose-700.sm:px-9.sm:py-6.px-6.py-6.rounded-lg.mb-6.text-sm{role: "alert"}
+  .bg-rose-50.text-rose-700.sm:px-9.sm:py-6.px-6.py-6.rounded-lg.mb-6.dark:border.dark:text-rose-50.text-sm{class: "dark:bg-rose-400/10 dark:border-rose-400/20", role: "alert"}
     .flex.items-start.space-x-4
       = icon "shield-exclamation", classes: "w-6 h-6 text-rose-700 flex-shrink-0", variant: :solid
       .flex-1
         %p.font-bold
-          = pluralize(resource.errors.count, "error")
-          prohibited this post from being saved:
+          = pluralize(resource.errors.count, "error")   prohibited this post from being saved:
         %ul.list-disc.mt-3.ml-4
           - resource.errors.each do |error|
-            %li= error.full_message
+            %li
+            = error.full_message
 <% end %>
 
 <%= render_snippet active_tab: "erb", erb_filename: "_error_messages.html.erb", haml_filename: "_error_messages.haml.erb" %>

app/views/railsui/themes/tailwind/hound/authentication/_read_before.html.erb

@@ -0,0 +1,5 @@
+<div class="my-6">
+<%= render callout do %>
+  <p>Be sure to read the <%= link_to "Rails UI authentication design patterns", systems_authentication_overview_path %> overview to understand how we've customized the default Devise views to work nicely inside the  <%= theme_name.humanize %> theme.
+<% end %>
+</div>

app/views/railsui/themes/tailwind/hound/authentication/_reset_password.html.erb

@@ -1,11 +1,5 @@
-<div class="my-6">
-<%= render callout do %>
-  <p>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  <%= theme_name.humanize %> theme.
-<% end %>
-</div>
-
 <%= render preview do %>
-<div class="pointer-events-none select-none sm:h-[800px] -m-8 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('fusion.png') %>')">
+<div class="pointer-events-none select-none sm:h-[800px] min-h-[600px] sm:-m-8 -m-4 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('fusion.png') %>')">
   <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
     <div>
       <div class="flex justify-center">

app/views/railsui/themes/tailwind/hound/authentication/_signin.html.erb

@@ -1,11 +1,5 @@
-<div class="my-6">
-  <%= render callout do %>
-    <p>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  <%= theme_name.humanize %> theme.
-    <% end %>
-  </div>
-
 <%= render preview do %>
-  <div class="pointer-events-none select-none sm:h-[800px] -m-8 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('fusion.png') %>')">
+  <div class="pointer-events-none select-none sm:h-[800px] min-h-[600px] sm:-m-8 -m-4 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('fusion.png') %>')">
     <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
       <div>
         <div class="flex justify-center">

app/views/railsui/themes/tailwind/hound/authentication/_signup.html.erb

@@ -1,11 +1,5 @@
-<div class="my-6">
-<%= render callout do %>
-  <p>Be sure to read the <%= link_to "Rails UI authentication design patterns", systems_authentication_overview_path %> overview to understand how we've customized the default Devise views to work nicely inside the  <%= theme_name.humanize %> theme.
-<% end %>
-</div>
-
 <%= render preview do %>
-<div class="pointer-events-none select-none sm:h-[800px] -m-8 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('fusion.png') %>')">
+<div class="pointer-events-none select-none sm:h-[800px] min-h-[600px] sm:-m-8 -m-4 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('fusion.png') %>')">
   <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
     <div>
       <div class="flex justify-center">