kaze 0.5.0 → 0.6.0

data/stubs/hotwire/app/controllers/profile_controller.rb

@@ -1,6 +1,6 @@
 class ProfileController < ApplicationController
   def edit
-    @update_profile_information_form = UpdateProfileInformationForm.new(name: Current.user.name, email: Current.user.email)
+    @update_profile_information_form = UpdateProfileInformationForm.new(name: Current.auth.user.name, email: Current.auth.user.email)
     @update_password_form = UpdatePasswordForm.new
     @delete_user_form = DeleteUserForm.new
 
@@ -12,7 +12,7 @@ class ProfileController < ApplicationController
 
     return render partial: 'profile/partials/update_profile_information_form', status: :unprocessable_entity if @update_profile_information_form.invalid?
 
-    Current.user.update(name: @update_profile_information_form.name, email: @update_profile_information_form.email)
+    Current.auth.user.update(name: @update_profile_information_form.name, email: @update_profile_information_form.email)
 
     redirect_to profile_edit_path, flash: { status: 'profile-updated' }
   end
@@ -22,12 +22,14 @@ class ProfileController < ApplicationController
 
     return render partial: 'profile/partials/delete_user_form', status: :unprocessable_entity if @delete_user_form.invalid?
 
-    user = Current.user
+    user = Current.auth.user
 
-    logout
+    Current.auth.logout
 
     user.delete
 
+    reset_session
+
     redirect_to '/'
   end
 end

data/stubs/hotwire/app/controllers/welcome_controller.rb

@@ -1,5 +1,5 @@
 class WelcomeController < ApplicationController
-  skip_authentication
+  skip_authenticate
 
   def index
     render layout: nil

data/stubs/hotwire/app/javascript/application.js

@@ -1,8 +1,8 @@
-import "@hotwired/turbo-rails"
+import '@hotwired/turbo-rails'
 
-import Alpine from "alpinejs"
+import Alpine from 'alpinejs'
 window.Alpine = Alpine
 
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener('DOMContentLoaded', function (event) {
   window.Alpine.start()
 })

data/stubs/hotwire/app/views/auth/forgot_password.html.erb

@@ -1,23 +1,18 @@
 <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
-    Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
+  Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.
 </div>
-
 <!-- Session Status -->
 <%= render(AuthSessionStatusComponent.new({ class: "mb-4", status: flash[:status] })) %>
-
 <%= form_with model: @form, url: password_request_path do |form| %>
-    <!-- Email Address -->
-    <div>
-        <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
-
-        <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autofocus: true, autocomplete: "username" })) %>
-
-        <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
-    </div>
-
-    <div class="flex items-center justify-end mt-4">
-        <%= render(PrimaryButtonComponent.new) do %>
-            Email Password Reset Link
-        <% end %>
-    </div>
+  <!-- Email Address -->
+  <div>
+    <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
+    <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autofocus: true, autocomplete: "username" })) %>
+    <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
+  </div>
+  <div class="flex items-center justify-end mt-4">
+    <%= render(PrimaryButtonComponent.new) do %>
+      Email Password Reset Link
+    <% end %>
+  </div>
 <% end %>

data/stubs/hotwire/app/views/auth/login.html.erb

@@ -1,25 +1,18 @@
 <!-- Session Status -->
 <%= render(AuthSessionStatusComponent.new({ class: "mb-4", status: flash[:status] })) %>
-
 <%= form_with model: @form, url: login_path do |form| %>
   <!-- Email Address -->
   <div>
     <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
-
     <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autofocus: true, autocomplete: "username" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
   </div>
-
   <!-- Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password", value: "Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password", class: "block mt-1 w-full", type: "password", name: "password", required: true, autocomplete: "current-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password] })) %>
   </div>
-
   <!-- Remember Me -->
   <div class="block mt-4">
     <label for="remember_me" class="inline-flex items-center">
@@ -27,12 +20,10 @@
       <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
     </label>
   </div>
-
   <div class="flex items-center justify-end mt-4">
     <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= password_request_path %>">
       Forgot your password?
     </a>
-
     <%= render(PrimaryButtonComponent.new({ class: "ms-4" })) do %>
       Login
     <% end %>

data/stubs/hotwire/app/views/auth/register.html.erb

@@ -2,44 +2,31 @@
   <!-- Name -->
   <div>
     <%= render(InputLabelComponent.new({ for: "name", value: "Name" })) %>
-
     <%= render(TextInputComponent.new({ id: "name", class: "block mt-1 w-full", type: "text", name: "name", value: @form.name, required: true, autofocus: true, autocomplete: "name" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:name] })) %>
   </div>
-
   <!-- Email Address -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "email", value: "Email" })) %>
-
     <%= render(TextInputComponent.new({ id: "email", class: "block mt-1 w-full", type: "email", name: "email", value: @form.email, required: true, autocomplete: "username" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:email] })) %>
   </div>
-
   <!-- Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password", value: "Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password", class: "block mt-1 w-full", type: "password", name: "password", required: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password] })) %>
   </div>
-
   <!-- Confirm Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password_confirmation", value: "Confirm Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password_confirmation", class: "block mt-1 w-full", type: "password", name: "password_confirmation", required: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password_confirmation] })) %>
   </div>
-
   <div class="flex items-center justify-end mt-4">
     <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="<%= login_path %>">
       Already registered?
     </a>
-
     <%= render(PrimaryButtonComponent.new({ class: "ms-4" })) do %>
       Register
     <% end %>

data/stubs/hotwire/app/views/auth/reset_password.html.erb

@@ -1,25 +1,18 @@
 <%= form_with model: @form, url: password_store_path do |form| %>
   <!-- Password Reset Token -->
   <input type="hidden" name="token" value="<%= @form.token %>">
-
   <!-- Password -->
   <div>
     <%= render(InputLabelComponent.new({ for: "password", value: "Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password", class: "block mt-1 w-full", type: "password", name: "password", required: true, autofocus: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password] })) %>
   </div>
-
   <!-- Confirm Password -->
   <div class="mt-4">
     <%= render(InputLabelComponent.new({ for: "password_confirmation", value: "Confirm Password" })) %>
-
     <%= render(TextInputComponent.new({ id: "password_confirmation", class: "block mt-1 w-full", type: "password", name: "password_confirmation", required: true, autocomplete: "new-password" })) %>
-
     <%= render(InputErrorComponent.new({ class: "mt-2", message: @form.error_messages[:password_confirmation] })) %>
   </div>
-
   <div class="flex items-center justify-end mt-4">
     <%= render(PrimaryButtonComponent.new) do %>
       Reset Password

data/stubs/hotwire/app/views/dashboard/index.html.erb

@@ -1,15 +1,14 @@
 <% content_for(:header) do %>
-    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-        Dashboard
-    </h2>
+  <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+    Dashboard
+  </h2>
 <% end %>
-
 <div class="py-12">
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-            <div class="p-6 text-gray-900 dark:text-gray-100">
-                You're logged in!
-            </div>
-        </div>
+  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+      <div class="p-6 text-gray-900 dark:text-gray-100">
+        You're logged in!
+      </div>
     </div>
+  </div>
 </div>

data/stubs/hotwire/app/views/layouts/_navigation.html.erb

@@ -1,92 +1,82 @@
 <nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
-    <!-- Primary Navigation Menu -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-16">
-            <div class="flex">
-                <!-- Logo -->
-                <div class="shrink-0 flex items-center">
-                    <a href="<%= dashboard_path %>">
-                        <%= render(ApplicationLogoComponent.new({ class: "block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" })) %>
-                    </a>
-                </div>
-
-                <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
-                    <%= render(NavLinkComponent.new({ href: dashboard_path })) do %>
-                        Dashboard
-                    <% end %>
-                </div>
-            </div>
-
-            <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ms-6">
-                <%= render DropdownComponent.new do |component| %>
-                    <% component.with_trigger(classes: "") do %>
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
-                            <div><%= Current.user.name %></div>
-
-                            <div class="ms-1">
-                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                        </button>
-                    <% end %>
-
-                    <%= render(DropdownLinkComponent.new({ href: profile_edit_path })) do %>
-                        Profile
-                    <% end %>
-
-                    <!-- Authentication -->
-                    <form method="POST" action="<%= logout_path %>">
-                        <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
-                        <%= render(DropdownLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit();" })) do %>
-                            Log Out
-                        <% end %>
-                    </form>
-                <% end %>
-            </div>
-
-            <!-- Hamburger -->
-            <div class="-me-2 flex items-center sm:hidden">
-                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
-                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
+  <!-- Primary Navigation Menu -->
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex justify-between h-16">
+      <div class="flex">
+        <!-- Logo -->
+        <div class="shrink-0 flex items-center">
+          <a href="/">
+            <%= render(ApplicationLogoComponent.new({ class: "block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" })) %>
+          </a>
         </div>
-    </div>
-
-    <!-- Responsive Navigation Menu -->
-    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
-        <div class="pt-2 pb-3 space-y-1">
-            <%= render(ResponsiveNavLinkComponent.new({ href: dashboard_path })) do %>
-                Dashboard
-            <% end %>
-        </div>
-
-        <!-- Responsive Settings Options -->
-        <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
-            <div class="px-4">
-                <div class="font-medium text-base text-gray-800 dark:text-gray-200"><%= Current.user.name %></div>
-                <div class="font-medium text-sm text-gray-500"><%= Current.user.email %></div>
-            </div>
-
-            <div class="mt-3 space-y-1">
-                <%= render(ResponsiveNavLinkComponent.new({ href: profile_edit_path })) do %>
-                    Profile
-                <% end %>
-
-                <!-- Authentication -->
-                <form method="POST" action="<%= logout_path %>">
-                    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
-                    <%= render(ResponsiveNavLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit();" })) do %>
-                        Log Out
-                    <% end %>
-                </form>
-            </div>
+        <!-- Navigation Links -->
+        <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
+          <%= render(NavLinkComponent.new({ href: dashboard_path, active: current_page?(dashboard_path) })) do %>
+            Dashboard
+          <% end %>
         </div>
+      </div>
+      <!-- Settings Dropdown -->
+      <div class="hidden sm:flex sm:items-center sm:ms-6">
+        <%= render DropdownComponent.new do |component| %>
+          <% component.with_trigger(classes: "") do %>
+            <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
+              <div><%= Current.auth.user.name %></div>
+              <div class="ms-1">
+                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            </button>
+          <% end %>
+          <%= render(DropdownLinkComponent.new({ href: profile_edit_path })) do %>
+            Profile
+          <% end %>
+          <!-- Authentication -->
+          <form method="POST" action="<%= logout_path %>">
+            <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+            <%= render(DropdownLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit()" })) do %>
+              Log Out
+            <% end %>
+          </form>
+        <% end %>
+      </div>
+      <!-- Hamburger -->
+      <div class="-me-2 flex items-center sm:hidden">
+        <button x-on:click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
+          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+            <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Responsive Navigation Menu -->
+  <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
+    <div class="pt-2 pb-3 space-y-1">
+      <%= render(ResponsiveNavLinkComponent.new({ href: dashboard_path, active: current_page?(dashboard_path) })) do %>
+        Dashboard
+      <% end %>
+    </div>
+    <!-- Responsive Settings Options -->
+    <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
+      <div class="px-4">
+        <div class="font-medium text-base text-gray-800 dark:text-gray-200"><%= Current.auth.user.name %></div>
+        <div class="font-medium text-sm text-gray-500"><%= Current.auth.user.email %></div>
+      </div>
+      <div class="mt-3 space-y-1">
+        <%= render(ResponsiveNavLinkComponent.new({ href: profile_edit_path })) do %>
+          Profile
+        <% end %>
+        <!-- Authentication -->
+        <form method="POST" action="<%= logout_path %>">
+          <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+          <%= render(ResponsiveNavLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit()" })) do %>
+            Log Out
+          <% end %>
+        </form>
+      </div>
     </div>
+  </div>
 </nav>

data/stubs/hotwire/app/views/layouts/application.html.erb

@@ -3,27 +3,19 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-
     <title><%= content_for(:title) || "Rails" %></title>
-
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
-
     <%= hotwire_livereload_tags if Rails.env.development? %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
-
     <%= yield :head %>
   </head>
-
   <body class="font-sans antialiased">
     <div class="min-h-screen bg-gray-100">
       <%= render "layouts/navigation" %>
-
       <!-- Page Heading -->
       <% if content_for?(:header) %>
         <header class="bg-white dark:bg-gray-800 shadow">
@@ -32,7 +24,6 @@
           </div>
         </header>
       <% end %>
-
       <!-- Page Content -->
       <main>
         <%= yield %>

data/stubs/hotwire/app/views/layouts/guest.html.erb

@@ -3,17 +3,12 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-
     <title><%= content_for(:title) || "Rails" %></title>
-
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
-
     <%= hotwire_livereload_tags if Rails.env.development? %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
   </head>
@@ -24,7 +19,6 @@
           <%= render(ApplicationLogoComponent.new({ class: "w-20 h-20 fill-current text-gray-500" })) %>
         </a>
       </div>
-
       <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
         <%= yield %>
       </div>

data/stubs/hotwire/app/views/profile/edit.html.erb

@@ -1,27 +1,24 @@
 <% content_for(:header) do %>
-    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-        Profile
-    </h2>
+  <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+    Profile
+  </h2>
 <% end %>
-
 <div class="py-12">
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
-            <div class="max-w-xl">
-                <%= render "profile/partials/update_profile_information_form" %>
-            </div>
-        </div>
-
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
-            <div class="max-w-xl">
-                <%= render "profile/partials/update_password_form" %>
-            </div>
-        </div>
-
-        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
-            <div class="max-w-xl">
-                <%= render "profile/partials/delete_user_form" %>
-            </div>
-        </div>
+  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+      <div class="max-w-xl">
+        <%= render "profile/partials/update_profile_information_form" %>
+      </div>
     </div>
+    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+      <div class="max-w-xl">
+        <%= render "profile/partials/update_password_form" %>
+      </div>
+    </div>
+    <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+      <div class="max-w-xl">
+        <%= render "profile/partials/delete_user_form" %>
+      </div>
+    </div>
+  </div>
 </div>

data/stubs/hotwire/app/views/profile/partials/_delete_user_form.html.erb

@@ -1,48 +1,38 @@
 <section class="space-y-6">
-    <header>
+  <header>
+    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+      Delete Account
+    </h2>
+    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+      Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.
+    </p>
+  </header>
+  <%= render(DangerButtonComponent.new({"x-data": "", "x-on:click.prevent": "$dispatch('open-modal', 'confirm-user-deletion')"})) do %>
+    Delete Account
+  <% end %>
+  <%= render(ModalComponent.new({ :name => "confirm-user-deletion", :show => @delete_user_form.error_messages.has_key?(:password), :focusable => true })) do %>
+    <turbo-frame id="delete_user_form">
+      <%= form_with model: @delete_user_form, url: profile_destroy_path, method: "delete", class: "p-6" do %>
         <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-            Delete Account
+          Are you sure you want to delete your account?
         </h2>
-
         <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-            Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.
+          Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
         </p>
-    </header>
-
-    <%= render(DangerButtonComponent.new({"x-data": "", "x-on:click.prevent": "$dispatch('open-modal', 'confirm-user-deletion')"})) do %>
-        Delete Account
-    <% end %>
-
-    <%= render(ModalComponent.new({ :name => "confirm-user-deletion", :show => @delete_user_form.error_messages.has_key?(:password), :focusable => true })) do %>
-        <turbo-frame id="delete_user_form">
-            <%= form_with model: @delete_user_form, url: profile_destroy_path, method: "delete", class: "p-6" do %>
-                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                    Are you sure you want to delete your account?
-                </h2>
-
-                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-                    Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
-                </p>
-
-                <div class="mt-6">
-                    <%= render(InputLabelComponent.new({ for: "password", value: "Password", class: "sr-only" })) %>
-
-                    <%= render(TextInputComponent.new({ id: "password", class: "mt-1 block w-3/4", type: "password", name: "password", placeholder: "Password" })) %>
-
-                    <%= render(InputErrorComponent.new({ class: "mt-2", message: @delete_user_form.error_messages[:password] })) %>
-                </div>
-
-                <div class="mt-6 flex justify-end">
-                    <%= render(SecondaryButtonComponent.new({ "x-on:click": "$dispatch('close')" })) do %>
-                        Cancel
-                    <% end %>
-
-                    <%= render(DangerButtonComponent.new({ class: "ms-3" })) do %>
-                        Delete Account
-                    <% end %>
-                </div>
-            <% end %>
-        </turbo-frame>
-    <% end %>
+        <div class="mt-6">
+          <%= render(InputLabelComponent.new({ for: "password", value: "Password", class: "sr-only" })) %>
+          <%= render(TextInputComponent.new({ id: "password", class: "mt-1 block w-3/4", type: "password", name: "password", placeholder: "Password" })) %>
+          <%= render(InputErrorComponent.new({ class: "mt-2", message: @delete_user_form.error_messages[:password] })) %>
+        </div>
+        <div class="mt-6 flex justify-end">
+          <%= render(SecondaryButtonComponent.new({ "x-on:click": "$dispatch('close')" })) do %>
+            Cancel
+          <% end %>
+          <%= render(DangerButtonComponent.new({ class: "ms-3" })) do %>
+            Delete Account
+          <% end %>
+        </div>
+      <% end %>
+    </turbo-frame>
+  <% end %>
 </section>
-