railsui 3.1.0

data/app/views/railsui/themes/shepherd/authentication/devise/_overview.html.erb

@@ -0,0 +1,290 @@
+<div id="auth-prerequisites">
+   <div class="prose prose-neutral dark:prose-invert mb-6">
+    <h3>Prerequisites</h3>
+
+    <p>In the version 3 of Rails UI, direct integration with <a href="https://rubygems.org/gems/devise/" target="_blank">Devise</a> was dropped in favor of a more flexible approach that is based on code snippets you copy and paste into your app.</p>
+
+    <p>If you use Devise, these snippets should give you a head start on all the views generated when running/having run <code>rails generate devise:views</code>.</p>
+
+
+    <p>Here are the pages you'll find in the Devise authentication system:</p>
+
+    <ul>
+      <li><%= link_to("Sign up", systems_authentication_devise_signup_path) %></li>
+      <li><%= link_to("Sign in", systems_authentication_devise_signin_path) %></li>
+      <li><%= link_to("Change password", systems_authentication_devise_change_password_path) %></li>
+      <li><%= link_to("Reset password", path: systems_authentication_devise_reset_password_path) %></li>
+      <li><%= link_to("Confirmation", systems_authentication_devise_confirmation_path) %></li>
+      <li><%= link_to("Edit account", systems_authentication_devise_edit_path) %></li>
+      <li><%= link_to("Unlock", systems_authentication_devise_unlocks_path) %></li>
+    </ul>
+  </div>
+</div>
+
+<div id="auth-global-layout" class="pb-6">
+  <div class="prose prose-neutral dark:prose-invert my-6 max-w-full">
+    <h3>Main Layout</h3>
+    <p>Consider extracting this to a reusable partial. For the examples shown it's assumed you've added this partial in the <code>app/views/devise</code> directory.</p>
+  </div>
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/_auth_layout.html.erb -->
+<div class="md:flex grid flex-wrap md:w-screen md:h-[calc(100vh-60px)]">
+  <div class="md:w-1/2 flex items-center justify-center p-10 md:order-1 order-2">
+    <div class="md:w-[400px] w-full">
+      <%%= link_to root_path, class: "group inline-block mb-6" do %>
+        <!-- Swap for your logo -->
+        <%%= icon "logo", custom_path: "/railsui/logo.svg", class: "group-hover:brightness-105 group-hover:scale-95 transform ease-in-out duration-200 transition-transform group-hover:-rotate-2 w-10 h-10 text-primary-500 fill-current" %>
+      <%% end %>
+
+
+      <!-- Add or yield form content here -->
+      <%%= yield %>
+
+      <!--
+      Add additional provider SVG icons in app/assets/images/railsui/omniauth as necessary.
+      Default options include: Google, LinkedIn, Twitter, Facebook.
+
+      **You will need to install additional dependencies
+      not included in Rails UI for omniauth support.**
+      -->
+      <%% if devise_mapping.omniauthable? && %w{ registrations sessions }.include?(controller_name) %>
+
+      <hr class="mt-8 border-zinc-100" />
+
+      <div class="space-y-3 mt-10">
+        <%% resource_class.omniauth_providers.each do |provider| %>
+          <%%= button_to omniauth_authorize_path(resource_name, provider), class: "btn btn-white w-full", data: { turbo: false } do %>
+            <div class="flex items-center gap-2">
+              <%%= icon provider.gsub(/\s+/, '').downcase, custom_path: "/railsui/omniauth/#{provider.gsub(/\s+/, '').downcase}.svg", class: "size-4 text-zinc-600 fill-current" %>
+              <span>Continue with <%%= OmniAuth::Utils.camelize(provider) %></span>
+            </div>
+          <%% end %>
+        <%% end %>
+      </div>
+      <%% end %>
+
+      <div class="mt-4">
+        <%%= render "devise/shared/links" %>
+      </div>
+    </div>
+  </div>
+  <div class="md:w-1/2 md:order-2 order-1 bg-zinc-900 overflow-hidden">
+    <%%= image_tag ["railsui/auth-cabin.jpg", "railsui/auth-desert.jpg"].sample, class: "object-cover md:h-screen h-[140px] w-full animate-fadeIn", alt: "Sign in to Shepherd" %>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/_auth_layout.html.erb
+.md:flex.grid.flex-wrap.md:w-screen{class: "md:h-[calc(100vh-60px)]"}
+  .flex.items-center.justify-center.p-10.md:order-1.order-2{class: "md:w-1/2"}
+    .w-full{class: "md:w-[400px]"}
+      = link_to root_path, class: "group inline-block mb-6" do
+        = icon "logo", custom_path: "/railsui/logo.svg", class:  "group-hover:brightness-105 group-hover:scale-95 transform ease-in-out duration-200 transition-transform group-hover:-rotate-2 w-10 h-10 text-primary-500 fill-current"
+
+      = yield
+      /
+        Add additional provider SVG icons in app/assets/images/railsui/omniauth as necessary.
+        Default options include: Google, LinkedIn, Twitter, Facebook.
+
+        **You will need to install additional dependencies
+        not included in Rails UI for omniauth support.**
+      - if devise_mapping.omniauthable? && %w{ registrations sessions }.include?(controller_name)
+        %hr.mt-8.border-zinc-100/
+        .space-y-3.mt-10
+          - resource_class.omniauth_providers.each do |provider|
+            = button_to omniauth_authorize_path(resource_name, provider), class: "btn  btn-white w-full", data: { turbo: false } do
+              .flex.items-center.space-x-2
+                = icon provider.gsub(/\s+/, '').downcase, custom_path: "/railsui/omniauth/#{provider.gsub(/\s+/, '').downcase}.svg", class: "size-4 text-zinc-600 fill-current"
+                %span
+                  Continue with #{OmniAuth::Utils.camelize(provider)}
+      .mt-4
+        = render "devise/shared/links"
+  .md:order-2.order-1.bg-zinc-900.overflow-hidden{class: "md:w-1/2"}
+    = image_tag ["railsui/auth-cabin.jpg", "railsui/auth-desert.jpg"].sample, class: "object-cover md:h-screen h-[140px] w-full animate-fadeIn", alt: "Sign in to Shepherd"
+<% end %>
+
+<%= render_snippet(active_tab: "erb", erb_filename: "_auth_layout.html.erb", haml_filename: "_auth_layout.haml.erb") %>
+
+<div class="prose prose-neutral dark:prose-invert my-6 max-w-full">
+  <p>Then in dedicated Devise views you can render the main meat and potatoes.</p>
+</div>
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :haml, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= render "devise/auth_layout" do %>
+  <!-- Add or yield form content here -->
+<%%% end %>
+<% end %>
+
+<%= render_snippet(active_tab: "erb") %>
+</div>
+
+<%= divider %>
+
+<div id="auth-links-partial" class="py-6">
+<div class="prose dark:prose-invert my-6 max-w-full prose-neutral">
+
+<h2 class="mt-3">Modified Devise links partial</h2>
+
+<p>If you're using Devise be sure to update the _links.html.erb partial in your app to match the following.</p>
+</div>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/shared/_links -->
+<%#- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+<%#= link_to "Forgot your password?", new_password_path(resource_name) %>
+<%# end %>
+
+<%% if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+  <div class="prose prose-sm prose-zinc dark:prose-invert py-3 text-center">
+  <%%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>
+  </div>
+<%% end %>
+
+<%% if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+  <div class="prose prose-sm prose-zinc dark:prose-invert py-3 text-center">
+    <%%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
+  </div>
+<%% end %>
+
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/shared/_links
+- if devise_mapping.confirmable? && controller_name != 'confirmations'
+  .prose.prose-sm.prose-zinc.dark:prose-invert.py-3.text-center
+    = link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name)
+- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks'
+  .prose.prose-sm.prose-zinc.dark:prose-invert.py-3.text-center
+    = link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name)
+<% end %>
+
+<%= render_snippet(active_tab: "erb", erb_filename: "_links.html.erb", haml_filename: "_links.haml.erb") %>
+</div>
+
+<%= divider %>
+
+<div id="auth-omniauth-ui" class="py-6">
+<div class="prose prose-neutral dark:prose-invert my-6 max-w-full">
+
+<h3>OmniAuth</h3>
+
+<p>The <%= theme_name.humanize %> theme has support for themed and branded Omniauth provider icons. Icons for those providers are rendered from <code>app/assets/images/railsui/omniauth</code>.</p>
+
+<%= render callout do %>
+  <%= link_to "OmniAuth", "https://github.com/omniauth/omniauth", target: :_blank %> will need to be installed and configured to work with the <%= theme_name.humanize %> theme.
+<% end %>
+
+<p>Here's an example of the UI with various providers:</p>
+
+<%= render preview('zinc') do %>
+<div class="flex flex-col gap-4 items-center justify-center max-w-xs mx-auto">
+  <button class="btn btn-white w-full">
+    <div class="flex items-center gap-2">
+      <%= icon "google", custom_path: "/railsui/omniauth/google.svg", class: "size-4 text-[#4285f4] fill-current" %>
+      <span>Continue with Google</span>
+    </div>
+  </button>
+
+   <button class="btn btn-white w-full">
+    <div class="flex items-center gap-2">
+      <%= icon "github", custom_path: "/railsui/omniauth/github.svg", class: "size-4 text-zinc-900 fill-current" %>
+      <span>Continue with GitHub</span>
+    </div>
+  </button>
+
+  <button class="btn btn-white w-full">
+    <div class="flex items-center gap-2">
+      <%= icon "x", custom_path: "/railsui/omniauth/x.svg", class: "size-4 text-zinc-900 fill-current" %>
+      <span>Continue with X</span>
+    </div>
+  </button>
+
+  <button class="btn btn-white w-full">
+    <div class="flex items-center gap-2">
+      <%= icon "linkedin", custom_path: "/railsui/omniauth/linkedin.svg", class: "size-4 text-[#0a66c2] fill-current" %>
+      <span>Continue with LinkedIn</span>
+    </div>
+  </button>
+</div>
+<% end %>
+</div>
+</div>
+
+<%= divider %>
+
+<div id="auth-error-messages" class="py-6">
+<%= render layout: example, locals: { heading: "_error_messages partial" } do %>
+<div class="prose prose-neutral dark:prose-invert mb-6">
+<p>By default Rails UI copies over a pre-styled error partial made to work out of the box and save you time during development. This file is called <code>_error_messages.html.erb</code>.</p>
+
+<p>The <%= theme_name.humanize %> theme leverages this partial for all form error rendering to keep the error/validation handling experience consistent.</p>
+
+<p>You may optionally swap the default Devise error_messages partial for this one.</p>
+</div>
+
+<%= render preview 'zinc' do %>
+<div class="bg-primary-50/50 text-primary-700 sm:px-9 sm:py-6 px-6 py-6 rounded-lg mb-6 dark:bg-primary-400/10 dark:border dark:border-primary-400/20 dark:text-primary-50 text-sm" role="alert">
+  <p class="font-semibold font-heading">1 error prohibited this post from being saved:</p>
+  <ul class="list-disc mt-3 ml-4">
+    <li>Title must exist</li>
+  </ul>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%= content_for :erb, flush: true do %>
+<!-- app/views/rui/shared/_error_messages.html.erb -->
+<%% if resource.errors.any? %>
+<div class="bg-primary-50/50 text-primary-700 sm:px-9 sm:py-6 px-6 py-6 rounded-lg mb-6 dark:bg-primary-400/10 dark:border dark:border-primary-400/20 dark:text-primary-50 text-sm" role="alert">
+  <p class="font-semibold font-heading"><%%= pluralize(resource.errors.count, "error") %> prohibited this post from being saved:</p>
+  <ul class="list-disc mt-3 ml-4">
+    <%% resource.errors.each do |error| %>
+      <li><%%= error.full_message %></li>
+      <%% end %>
+    </ul>
+  </div>
+<%% end %>
+<% end %>
+
+  <% content_for :haml, flush: true do %>
+/ app/views/rui/shared/_error_messages.html.erb
+- if resource.errors.any?
+  .text-primary-700.sm:px-9.sm:py-6.px-6.py-6.rounded-lg.mb-6.dark:border.dark:text-primary-50.text-sm(class="bg-primary-50/50 dark:bg-primary-400/10 dark:border-primary-400/20" role="alert")
+  %p.font-semibold.font-heading
+  = 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
+  <% end %>
+
+  <%= render_snippet active_tab: "erb", erb_filename: "_error_messages.html.erb", haml_filename: "_error_messages.haml.erb" %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_components_tooltip_path, prev_text: "Tooltip", next_path: systems_authentication_devise_signup_path, next_text: "Sign up") %>
+
+<%= content_for :component_nav do %>
+<%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+<%= component_link "Prerequisites", "#auth-prerequisites" %>
+<%= component_link "Main layout", "#auth-global-layout" %>
+<%= component_link "Links partial", "#auth-links-partial" %>
+<%= component_link "OmniAuth", "#auth-omniauth-ui" %>
+<%= component_link "Error messages", "#auth-error-messages" %>
+<% end %>
+<% end %>

data/app/views/railsui/themes/shepherd/authentication/devise/_reset_password.html.erb

@@ -0,0 +1,69 @@
+<%= render layout: example, locals: { heading: "Devise: Reset Password", section: "Authentication" } do %>
+
+<div class="rounded-xl border-zinc-200 dark:border-zinc-600/80 overflow-hidden border dark:bg-zinc-900">
+<div class="md:flex grid flex-wrap md:w-full md:h-[calc(100vh-60px)]">
+  <div class="md:w-1/2 flex items-center justify-center p-10 md:order-1 order-2">
+    <div class="md:w-[400px] w-full">
+      <a class="group inline-block mb-6" href="#" data-controller="prevent" data-action="click->prevent#prevent">
+        <!-- Shepherd logo -->
+        <svg class="group-hover:brightness-105 group-hover:scale-95 transform ease-in-out duration-200 transition-transform group-hover:-rotate-2 w-10 h-10 text-primary-500 fill-current" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M42 0C45.3137 0 48 2.68629 48 6V42C48 45.3137 45.3137 48 42 48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42ZM21.5033 40.9481C21.7923 40.9918 22.026 40.7078 22.026 40.4156V34.1876C22.026 31.1727 18.7622 29.2883 16.1511 30.7958C15.207 31.3409 13.9997 31.0174 13.4545 30.0732C12.9094 29.1291 13.2329 27.9218 14.1771 27.3767C16.8164 25.8529 16.8164 22.0433 14.1771 20.5195C13.2329 19.9744 12.9094 18.7671 13.4545 17.8229C13.9997 16.8788 15.207 16.5553 16.1511 17.1004C18.7622 18.6079 22.026 16.7235 22.026 13.7085V12.1819C22.026 9.30521 19.4534 7.03474 16.8446 8.24694C10.9466 10.9875 6.85714 16.9642 6.85714 23.8961C6.85714 32.5373 13.2121 39.6941 21.5033 40.9481ZM41.3507 23.8961C41.3507 32.6033 34.8983 39.8034 26.5142 40.9758C26.2134 41.0178 25.974 40.7193 25.974 40.4156V34.0722C25.974 31.0759 29.2176 29.2032 31.8125 30.7013C32.7567 31.2464 33.964 30.9229 34.5091 29.9788C35.0542 29.0346 34.7307 27.8273 33.7865 27.2822C31.2199 25.8004 31.2199 22.0958 33.7865 20.614C34.7307 20.0689 35.0542 18.8616 34.5091 17.9174C33.964 16.9732 32.7567 16.6497 31.8125 17.1949C29.2176 18.693 25.974 16.8203 25.974 13.824V12.1564C25.974 9.26895 28.5381 6.9748 31.1714 8.15925C37.1723 10.8585 41.3507 16.8893 41.3507 23.8961Z"></path></svg></a>
+
+        <h1 class="h3 mb-6">Forget your password?</h1>
+
+        <form data-turbo="false" class="new_user" id="new_user" action="#" accept-charset="UTF-8" method="post" data-controller="prevent" data-action="submit->prevent#prevent">
+
+          <div class="form-group">
+            <label class="form-label" for="user_email">Email</label>
+            <input autofocus="autofocus" autocomplete="email" class="form-input" pattern="[^@ ]+@[^@ ]+.[^@ ]+" title="Invalid email address" placeholder="john.doe@example.com" type="email" value="" name="user[email]" id="user_email">
+          </div>
+
+          <input type="submit" name="commit" value="Send me reset password instructions" class="btn btn-primary w-full" data-disable-with="Send me reset password instructions" data-controller="prevent" data-action="click->prevent#prevent">
+      </form>
+    </div>
+  </div>
+  <div class="md:w-1/2 md:order-2 order-1 bg-zinc-900 overflow-hidden">
+    <%= image_tag ["themes/shepherd/auth-cabin.jpg", "themes/shepherd/auth-desert.jpg"].sample, class: "object-cover md:h-screen h-[140px] w-full animate-fadeIn" %>
+  </div>
+</div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/passwords/new.html.erb -->
+<%%= render "devise/auth_layout" do %>
+  <h1 class="h3 mb-6">Forget your password?</h1>
+
+  <%%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+    <%%= render "rui/shared/error_messages", resource: resource %>
+
+    <div class="form-group">
+      <%%= f.label :email, class: "form-label" %>
+      <%%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address", placeholder: "john.doe@example.com" %>
+    </div>
+
+    <%%= f.submit "Send me reset password instructions", class: "btn btn-primary w-full" %>
+  <%% end %>
+<%% end %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/passwords/new.html.erb
+= render "devise/auth_layout" do
+  %h1.h3.mb-6 Forget your password?
+  = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f|
+    = render "rui/shared/error_messages", resource: resource
+    .form-group
+      = f.label :email, class: "form-label"
+      = f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address", placeholder: "john.doe@example.com"
+    = f.submit "Send me reset password instructions", class: "btn btn-primary w-full"
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb", haml_filename: "new.haml.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_change_password_path, prev_text: "Change password", next_path: systems_authentication_devise_confirmation_path, next_text: "Confirmation") %>

data/app/views/railsui/themes/shepherd/authentication/devise/_signin.html.erb

@@ -0,0 +1,121 @@
+<%= render layout: example, locals: { heading: "Devise: Sign In", section: "Authentication" } do %>
+<div class="rounded-xl border-zinc-200 dark:border-zinc-600/80 overflow-hidden border dark:bg-zinc-900">
+ <div class="md:flex grid flex-wrap md:w-full md:h-[calc(100vh-60px)]">
+  <div class="md:w-1/2 flex items-center justify-center p-10 md:order-1 order-2">
+    <div class="md:w-[400px] w-full">
+      <a class="group inline-block mb-6" href="#" data-controller="prevent" data-action="click->prevent#prevent">
+        <!-- Shepherd logo -->
+        <svg class="group-hover:brightness-105 group-hover:scale-95 transform ease-in-out duration-200 transition-transform group-hover:-rotate-2 w-10 h-10 text-primary-500 fill-current" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M42 0C45.3137 0 48 2.68629 48 6V42C48 45.3137 45.3137 48 42 48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42ZM21.5033 40.9481C21.7923 40.9918 22.026 40.7078 22.026 40.4156V34.1876C22.026 31.1727 18.7622 29.2883 16.1511 30.7958C15.207 31.3409 13.9997 31.0174 13.4545 30.0732C12.9094 29.1291 13.2329 27.9218 14.1771 27.3767C16.8164 25.8529 16.8164 22.0433 14.1771 20.5195C13.2329 19.9744 12.9094 18.7671 13.4545 17.8229C13.9997 16.8788 15.207 16.5553 16.1511 17.1004C18.7622 18.6079 22.026 16.7235 22.026 13.7085V12.1819C22.026 9.30521 19.4534 7.03474 16.8446 8.24694C10.9466 10.9875 6.85714 16.9642 6.85714 23.8961C6.85714 32.5373 13.2121 39.6941 21.5033 40.9481ZM41.3507 23.8961C41.3507 32.6033 34.8983 39.8034 26.5142 40.9758C26.2134 41.0178 25.974 40.7193 25.974 40.4156V34.0722C25.974 31.0759 29.2176 29.2032 31.8125 30.7013C32.7567 31.2464 33.964 30.9229 34.5091 29.9788C35.0542 29.0346 34.7307 27.8273 33.7865 27.2822C31.2199 25.8004 31.2199 22.0958 33.7865 20.614C34.7307 20.0689 35.0542 18.8616 34.5091 17.9174C33.964 16.9732 32.7567 16.6497 31.8125 17.1949C29.2176 18.693 25.974 16.8203 25.974 13.824V12.1564C25.974 9.26895 28.5381 6.9748 31.1714 8.15925C37.1723 10.8585 41.3507 16.8893 41.3507 23.8961Z"></path></svg></a>
+
+  <h1 class="h2 mb-6">Sign in</h1>
+
+  <form data-turbo="false" class="new_user" id="new_user" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="#" autocomplete="off">
+
+    <div class="form-group">
+      <label class="form-label" for="user_email">Email</label>
+      <input autofocus="autofocus" autocomplete="email" class="form-input" pattern="[^@ ]+@[^@ ]+.[^@ ]+" title="Invalid email address" type="email" value="" name="user[email]" id="user_email">
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="user_password">Password</label>
+      <input autocomplete="current-password" class="form-input" type="password" name="user[password]" id="user_password">
+    </div>
+
+    <div class="flex flex-wrap justify-between items-center form-group">
+      <div class="flex items-center">
+        <input name="user[remember_me]" type="hidden" value="0" autocomplete="off"><input class="form-input-checkbox" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">
+        <label class="form-check-label ml-2" for="user_remember_me">Remember me</label>
+      </div>
+      <a class="btn-link text-sm" href="#" data-controller="prevent" data-action="click->prevent#prevent">Forgot your password?</a>
+    </div>
+
+    <input type="submit" name="commit" value="Sign in" class="btn btn-primary hover:cursor-pointer w-full" data-disable-with="Sign in" data-controller="prevent" data-action="click->prevent#prevent">
+
+    <div class="prose prose-sm text-center prose-zinc mt-6 dark:prose-invert">
+      <p>Don't have an account? <a class="btn-link" href="#" data-controller="prevent" data-action="click->prevent#prevent">Sign up</a>.</p>
+    </div>
+    </form>
+    </div>
+  </div>
+  <div class="md:w-1/2 md:order-2 order-1 bg-zinc-900 overflow-hidden">
+    <%= image_tag ["themes/shepherd/auth-cabin.jpg", "themes/shepherd/auth-desert.jpg"].sample, class: "object-cover md:h-screen h-[140px] w-full animate-fadeIn" %>
+  </div>
+</div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/sessions/new.html.erb -->
+<%%= render "devise/auth_layout" do %>
+  <h1 class="h2 mb-6">Sign in</h1>
+
+  <%%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+    <%%= render "rui/shared/error_messages", resource: resource %>
+
+    <div class="form-group">
+      <%%= f.label :email, class: "form-label" %>
+      <%%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address" %>
+    </div>
+
+    <div class="form-group">
+      <%%= f.label :password, class: "form-label" %>
+      <%%= f.password_field :password, autocomplete: "current-password", class: "form-input" %>
+    </div>
+
+    <div class="flex flex-wrap justify-between items-center form-group">
+      <%% if devise_mapping.rememberable? %>
+        <div class="flex items-center">
+          <%%= f.check_box :remember_me, class: "form-input-checkbox" %>
+          <%%= f.label :remember_me, class: "form-check-label ml-2" %>
+        </div>
+      <%% end %>
+
+      <%% if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+        <%%= link_to "Forgot your password?", new_password_path(resource_name), class: "btn-link text-sm" %>
+      <%% end %>
+    </div>
+
+    <%%= f.submit "Sign in", class: "btn btn-primary hover:cursor-pointer w-full" %>
+
+    <div class="prose prose-sm text-center prose-zinc mt-6 dark:prose-invert">
+      <p>Don't have an account? <%%= link_to "Sign up", new_registration_path(resource_name), class: "btn-link" %>.</p>
+    </div>
+  <%% end %>
+<%% end %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/sessions/new.html.erb
+= render "devise/auth_layout" do
+  %h1.h3.mb-6 Sign in
+  = form_for(resource, as: resource_name, url: session_path(resource_name), data: { turbo: false }) do |f|
+    = render "rui/shared/error_messages", resource: resource
+    .form-group
+      = f.label :email, class: "form-label"
+      = f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address"
+    .form-group
+      = f.label :password, class: "form-label"
+      = f.password_field :password, autocomplete: "current-password", class: "form-input"
+    .flex.flex-wrap.justify-between.items-center.form-group
+      - if devise_mapping.rememberable?
+        .flex.items-center
+          = f.check_box :remember_me, class: "form-input-checkbox"
+          = f.label :remember_me, class: "form-check-label ml-2"
+      - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
+        = link_to "Forgot your password?", new_password_path(resource_name), class: "btn-link text-sm"
+    = f.submit "Sign in", class: "btn btn-primary hover:cursor-pointer w-full"
+    .prose.prose-sm.text-center.prose-zinc.mt-6.dark:prose-invert
+      %p
+        Don't have an account? #{link_to "Sign up", new_registration_path(resource_name), class: "btn-link"}.
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb", haml_filename: "new.haml.erb" %>
+
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_signup_path, prev_text: "Sign up", next_path: systems_authentication_devise_change_password_path, next_text: "Change password") %>

data/app/views/railsui/themes/shepherd/authentication/devise/_signup.html.erb

@@ -0,0 +1,128 @@
+<%= render layout: example, locals: { heading: "Devise: Sign up", section: "Authentication" } do %>
+
+<div class="rounded-xl border-zinc-200 dark:border-zinc-600/80 overflow-hidden border dark:bg-zinc-900">
+  <div class="md:flex grid flex-wrap md:w-full md:h-[calc(100vh-60px)]">
+    <div class="md:w-1/2 flex items-center justify-center p-10 md:order-1 order-2">
+      <div class="md:w-[400px] w-full">
+        <a class="group inline-block mb-6" href="#" data-controller="prevent" data-action="click->prevent#prevent">
+          <!-- Shepherd logo -->
+          <svg class="group-hover:brightness-105 group-hover:scale-95 transform ease-in-out duration-200 transition-transform group-hover:-rotate-2 w-10 h-10 text-primary-500 fill-current" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M42 0C45.3137 0 48 2.68629 48 6V42C48 45.3137 45.3137 48 42 48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42ZM21.5033 40.9481C21.7923 40.9918 22.026 40.7078 22.026 40.4156V34.1876C22.026 31.1727 18.7622 29.2883 16.1511 30.7958C15.207 31.3409 13.9997 31.0174 13.4545 30.0732C12.9094 29.1291 13.2329 27.9218 14.1771 27.3767C16.8164 25.8529 16.8164 22.0433 14.1771 20.5195C13.2329 19.9744 12.9094 18.7671 13.4545 17.8229C13.9997 16.8788 15.207 16.5553 16.1511 17.1004C18.7622 18.6079 22.026 16.7235 22.026 13.7085V12.1819C22.026 9.30521 19.4534 7.03474 16.8446 8.24694C10.9466 10.9875 6.85714 16.9642 6.85714 23.8961C6.85714 32.5373 13.2121 39.6941 21.5033 40.9481ZM41.3507 23.8961C41.3507 32.6033 34.8983 39.8034 26.5142 40.9758C26.2134 41.0178 25.974 40.7193 25.974 40.4156V34.0722C25.974 31.0759 29.2176 29.2032 31.8125 30.7013C32.7567 31.2464 33.964 30.9229 34.5091 29.9788C35.0542 29.0346 34.7307 27.8273 33.7865 27.2822C31.2199 25.8004 31.2199 22.0958 33.7865 20.614C34.7307 20.0689 35.0542 18.8616 34.5091 17.9174C33.964 16.9732 32.7567 16.6497 31.8125 17.1949C29.2176 18.693 25.974 16.8203 25.974 13.824V12.1564C25.974 9.26895 28.5381 6.9748 31.1714 8.15925C37.1723 10.8585 41.3507 16.8893 41.3507 23.8961Z"></path></svg></a>
+
+        <h1 class="h3 mb-6">Sign up</h1>
+
+    <form data-turbo="false" class="new_user" id="new_user" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="#" autocomplete="off" data-controller="prevent" data-action="submit->prevent#prevent">
+        <div class="form-group">
+          <label class="form-label" for="user_email">Email</label>
+          <input autofocus="autofocus" autocomplete="email" class="form-input" pattern="[^@ ]+@[^@ ]+.[^@ ]+" title="Invalid email address" placeholder="john.doe@example.com" type="email" value="" name="user[email]" id="user_email">
+        </div>
+
+        <div class="form-group">
+          <div class="flex items-center justify-between mb-2">
+            <label class="form-label mb-0" for="user_password">Password</label>
+
+            <div class="inline prose prose-sm prose-zinc dark:prose-invert">
+              <p>(6 characters minimum)</p>
+            </div>
+          </div>
+
+          <input autocomplete="new-password" class="form-input" type="password" name="user[password]" id="user_password">
+        </div>
+
+        <div class="form-group">
+          <label class="form-label" for="user_password_confirmation">Password confirmation</label>
+          <input autocomplete="new-password" class="form-input" type="password" name="user[password_confirmation]" id="user_password_confirmation">
+        </div>
+
+        <input type="submit" name="commit" value="Sign up" class="btn btn-primary w-full" data-disable-with="Sign up" data-controller="prevent" data-action="click->prevent#prevent">
+
+        <div class="prose prose-sm text-center prose-zinc mt-6 dark:prose-invert">
+          <p>Already have an account? <a href="#" data-controller="prevent" data-action="click->prevent#prevent">Sign in</a></p>
+        </div>
+      </form>
+    </div>
+
+    </div>
+    <div class="md:w-1/2 md:order-2 order-1 bg-zinc-900 overflow-hidden">
+      <%= image_tag ["themes/shepherd/auth-cabin.jpg", "themes/shepherd/auth-desert.jpg"].sample, class: "object-cover md:h-screen h-[140px] w-full animate-fadeIn" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/registrations/new.html.erb-->
+<%%= render "devise/auth_layout" do %>
+  <h1 class="h3 mb-6">Sign up</h1>
+
+  <%%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+
+    <%%= render "rui/shared/error_messages", resource: resource %>
+
+    <div class="form-group">
+      <%%= f.label :email, class: "form-label" %>
+      <%%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address", placeholder: "john.doe@example.com" %>
+    </div>
+
+    <div class="form-group">
+      <div class="flex items-center justify-between mb-2">
+        <%%= f.label :password, class: "form-label mb-0" %>
+
+        <%% if @minimum_password_length %>
+          <div class="inline prose prose-sm prose-zinc dark:prose-invert">
+            <p>(<%%= @minimum_password_length %> characters minimum)</p>
+          </div>
+        <%% end %>
+      </div>
+
+      <%%= f.password_field :password, autocomplete: "new-password", class: "form-input" %>
+    </div>
+
+    <div class="form-group">
+      <%%= f.label :password_confirmation, class: "form-label" %>
+      <%%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input" %>
+    </div>
+
+    <%%= f.submit "Sign up", class: "btn btn-primary w-full" %>
+
+    <div class="prose prose-sm text-center prose-zinc mt-6 dark:prose-invert">
+      <p>Already have an account? <%%= link_to "Sign in", new_session_path(resource_name) %></p>
+    </div>
+  <%% end %>
+<%% end %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/registrations/new.html.erb
+= render "devise/auth_layout" do
+  %h1.h3.mb-6 Sign up
+  = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
+    = render "rui/shared/error_messages", resource: resource
+    .form-group
+      = f.label :email, class: "form-label"
+      = f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address", placeholder: "john.doe@example.com"
+    .form-group
+      .flex.items-center.justify-between.mb-2
+        = f.label :password, class: "form-label mb-0"
+        - if @minimum_password_length
+          .inline.prose.prose-sm.prose-zinc.dark:prose-invert
+            %p
+              (#{@minimum_password_length} characters minimum)
+      = f.password_field :password, autocomplete: "new-password", class: "form-input"
+    .form-group
+      = f.label :password_confirmation, class: "form-label"
+      = f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input"
+    = f.submit "Sign up", class: "btn btn-primary w-full"
+    .prose.prose-sm.text-center.prose-zinc.mt-6
+      %p
+        Already have an account? #{link_to "Sign in", new_session_path(resource_name)}
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb", haml_filename: "new.haml.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_overview_path, prev_text: "Authentication", next_path: systems_authentication_devise_signin_path, next_text: "Sign in") %>