Devise view basic styling

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

@@ -0,0 +1,21 @@
+<%= render PageComponent.new(title: "Resend confirmation instructions") do %>
+
+  <%= form_with model: resource, as: resource_name, url: confirmation_path(resource_name), method: :post, class: "space-y-6" do |f| %>
+    <%= render "shared/errors", object: resource %>
+
+    <div class="space-y-2">
+      <%= f.label :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-input", placeholder: "Enter your email" %>
+      <p class="text-xs text-gray-500 mt-1">We'll send you a new confirmation email</p>
+    </div>
+
+    <div class="pt-4">
+      <%= f.submit "Resend confirmation instructions", class: "du-btn du-btn-primary du-btn-block" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center space-y-2">
+    <%= render "devise/shared/links" %>
+  </div>
+
+<% end %>

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -0,0 +1,5 @@
+<p>Welcome <%= @email %>!</p>
+
+<p>You can confirm your account email through the link below:</p>
+
+<p><%= link_to "Confirm my account", confirmation_url(@resource, confirmation_token: @token) %></p>

app/views/devise/mailer/email_changed.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @email %>!</p>
+
+<% if @resource.try(:unconfirmed_email?) %>
+  <p>We're contacting you to notify you that your email is being changed to <%= @resource.unconfirmed_email %>.</p>
+<% else %>
+  <p>We're contacting you to notify you that your email has been changed to <%= @resource.email %>.</p>
+<% end %>

app/views/devise/mailer/password_change.html.erb

@@ -0,0 +1,3 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>We're contacting you to notify you that your password has been changed.</p>

app/views/devise/mailer/reset_password_instructions.html.erb

@@ -0,0 +1,8 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Someone has requested a link to change your password. You can do this through the link below.</p>
+
+<p><%= link_to "Change my password", edit_password_url(@resource, reset_password_token: @token) %></p>
+
+<p>If you didn't request this, please ignore this email.</p>
+<p>Your password won't change until you access the link above and create a new one.</p>

app/views/devise/mailer/unlock_instructions.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
+
+<p>Click the link below to unlock your account:</p>
+
+<p><%= link_to "Unlock my account", unlock_url(@resource, unlock_token: @token) %></p>

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

@@ -0,0 +1,29 @@
+<%= render PageComponent.new(title: "Change your password") do %>
+
+  <%= form_with model: resource, as: resource_name, url: password_path(resource_name), method: :put, class: "space-y-6" do |f| %>
+    <%= render "shared/errors", object: resource %>
+    <%= f.hidden_field :reset_password_token %>
+
+    <div class="space-y-2">
+      <%= f.label :password, "New password", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <% if @minimum_password_length %>
+        <p class="text-xs text-gray-500 mt-1">(<%= @minimum_password_length %> characters minimum)</p>
+      <% end %>
+      <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-input", placeholder: "Enter new password" %>
+    </div>
+
+    <div class="space-y-2">
+      <%= f.label :password_confirmation, "Confirm new password", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input", placeholder: "Confirm new password" %>
+    </div>
+
+    <div class="pt-4">
+      <%= f.submit "Change my password", class: "du-btn du-btn-primary du-btn-block" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center space-y-2">
+    <%= render "devise/shared/links" %>
+  </div>
+
+<% end %>

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

@@ -0,0 +1,21 @@
+<%= render PageComponent.new(title: "Forgot your password?") do %>
+
+  <%= form_with model: resource, as: resource_name, url: password_path(resource_name), method: :post, class: "space-y-6" do |f| %>
+    <%= render "shared/errors", object: resource %>
+
+    <div class="space-y-2">
+      <%= f.label :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", placeholder: "Enter your email" %>
+      <p class="text-xs text-gray-500 mt-1">We'll send you a link to reset your password</p>
+    </div>
+
+    <div class="pt-4">
+      <%= f.submit "Send me reset password instructions", class: "du-btn du-btn-primary du-btn-block" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center space-y-2">
+    <%= render "devise/shared/links" %>
+  </div>
+
+<% end %>

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

@@ -0,0 +1,58 @@
+<%= render PageComponent.new(title: "Edit #{resource_name.to_s.humanize}") do %>
+
+  <%= form_with model: resource, as: resource_name, url: registration_path(resource_name), method: :put, class: "space-y-6" do |f| %>
+    <%= render "shared/errors", object: resource %>
+
+    <div class="space-y-2">
+      <%= f.label :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", placeholder: "Enter your email" %>
+    </div>
+
+    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+      <div class="du-alert du-alert-info">
+        <div>
+          <strong>Pending confirmation:</strong> Currently waiting confirmation for: <%= resource.unconfirmed_email %>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="space-y-2">
+      <%= f.label :password, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <p class="text-xs text-gray-500 mt-1">Leave blank if you don't want to change it</p>
+      <%= f.password_field :password, autocomplete: "new-password", class: "form-input", placeholder: "New password" %>
+      <% if @minimum_password_length %>
+        <p class="text-xs text-gray-500 mt-1"><%= @minimum_password_length %> characters minimum</p>
+      <% end %>
+    </div>
+
+    <div class="space-y-2">
+      <%= f.label :password_confirmation, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input", placeholder: "Confirm new password" %>
+    </div>
+
+    <div class="space-y-2">
+      <%= f.label :current_password, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <p class="text-xs text-gray-500 mt-1">We need your current password to confirm your changes</p>
+      <%= f.password_field :current_password, autocomplete: "current-password", class: "form-input", placeholder: "Current password" %>
+    </div>
+
+    <div class="pt-4">
+      <%= f.submit "Update", class: "du-btn du-btn-primary du-btn-block" %>
+    </div>
+  <% end %>
+
+  <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+    <div class="du-card du-bg-error/10 du-border-error/20">
+      <div class="du-card-body">
+        <h3 class="du-card-title text-error">Danger Zone</h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          Once you delete your account, there is no going back. Please be certain.
+        </p>
+        <%= button_to "Delete my account", registration_path(resource_name), 
+            data: { confirm: "Are you sure? This action cannot be undone.", turbo_confirm: "Are you sure? This action cannot be undone." }, 
+            method: :delete, 
+            class: "du-btn du-btn-error du-btn-outline" %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,32 @@
+<%= render PageComponent.new(title: "Sign up") do %>
+
+  <%= form_with model: resource, as: resource_name, url: registration_path(resource_name), class: "space-y-6" do |f| %>
+    <%= render "shared/errors", object: resource %>
+
+    <div class="space-y-2">
+      <%= f.label :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", placeholder: "Enter your email" %>
+    </div>
+
+    <div class="space-y-2">
+      <%= f.label :password, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <% if @minimum_password_length %>
+        <p class="text-xs text-gray-500 mt-1">(<%= @minimum_password_length %> characters minimum)</p>
+      <% end %>
+      <%= f.password_field :password, autocomplete: "new-password", class: "form-input", placeholder: "Create a password" %>
+    </div>
+
+    <div class="space-y-2">
+      <%= f.label :password_confirmation, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input", placeholder: "Confirm your password" %>
+    </div>
+
+    <div class="pt-4">
+      <%= f.submit "Sign up", class: "du-btn du-btn-primary du-btn-block" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center space-y-2">
+    <%= render "devise/shared/links" %>
+  </div>
+<% end %>

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

@@ -0,0 +1,31 @@
+<%= render PageComponent.new(title: "Log in") do %>
+
+  <%= form_with model: resource, as: resource_name, url: session_path(resource_name), class: "space-y-6" do |f| %>
+    <div class="space-y-2">
+      <%= f.label :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", placeholder: "Enter your email" %>
+    </div>
+
+    <div class="space-y-2">
+      <%= f.label :password, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.password_field :password, autocomplete: "current-password", class: "form-input", placeholder: "Enter your password" %>
+    </div>
+
+    <% if devise_mapping.rememberable? %>
+      <div class="space-y-2">
+        <label class="du-label cursor-pointer justify-start gap-3">
+          <%= f.check_box :remember_me, class: "du-checkbox du-checkbox-primary" %>
+          <span class="du-label-text">Remember me</span>
+        </label>
+      </div>
+    <% end %>
+
+    <div class="pt-4">
+      <%= f.submit "Log in", class: "du-btn du-btn-primary du-btn-block" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center space-y-2">
+    <%= render "devise/shared/links" %>
+  </div>
+<% end %>

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

@@ -0,0 +1,30 @@
+<%- if controller_name != 'sessions' %>
+  <%= link_to "Log in", new_session_path(resource_name), class: "block text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 hover:underline" %>
+<% end %>
+
+<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
+  <%= link_to "Sign up", new_registration_path(resource_name), class: "block text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 hover:underline" %>
+<% end %>
+
+<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+  <%= link_to "Forgot your password?", new_password_path(resource_name), class: "block text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 hover:underline" %>
+<% end %>
+
+<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "block text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 hover:underline" %>
+<% end %>
+
+<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: "block text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200 hover:underline" %>
+<% end %>
+
+<%- if devise_mapping.omniauthable? %>
+  <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Or continue with:</p>
+    <%- resource_class.omniauth_providers.each do |provider| %>
+      <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), 
+          data: { turbo: false }, 
+          class: "du-btn du-btn-outline du-btn-block mb-2" %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,21 @@
+<%= render PageComponent.new(title: "Resend unlock instructions") do %>
+
+  <%= form_with model: resource, as: resource_name, url: unlock_path(resource_name), method: :post, class: "space-y-6" do |f| %>
+    <%= render "shared/errors", object: resource %>
+
+    <div class="space-y-2">
+      <%= f.label :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", placeholder: "Enter your email" %>
+      <p class="text-xs text-gray-500 mt-1">We'll send you instructions to unlock your account</p>
+    </div>
+
+    <div class="pt-4">
+      <%= f.submit "Resend unlock instructions", class: "du-btn du-btn-primary du-btn-block" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center space-y-2">
+    <%= render "devise/shared/links" %>
+  </div>
+
+<% end %>

app/views/shared/_errors.html.erb

@@ -1,5 +1,5 @@
 <% if object.errors.any? %>
-  <div id="error_explanation" class="du-alert du-alert-error">
+  <div id="error_explanation" class="du-alert du-alert-error" data-turbo-cache="false">
     <div>
       <h2><%= pluralize(object.errors.count, "error") %> prohibited this object from being saved:</h2>