railsui 3.1.5 → 3.2.1

data/app/views/railsui/themes/corgie/authentication/devise/_confirmation.html.erb

@@ -0,0 +1,63 @@
+<%= render layout: example, locals: { heading: "Confirmation", section: "Authentication" } do %>
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+          <% end %>
+
+          <%= f.submit "Resend confirmation instructions", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </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/confirmations/new.html.erb -->
+<%% content_for :title, "Resend confirmation instructions" %>
+
+<%%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }, builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Resend confirmation instructions", class: "btn btn-primary w-full" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_reset_password_path, prev_text: "Reset password", next_path: systems_authentication_devise_edit_path, next_text: "Edit account") %>

data/app/views/railsui/themes/corgie/authentication/devise/_edit.html.erb

@@ -0,0 +1,103 @@
+<%= render layout: example, locals: { heading: "Edit account", section: "Authentication" } do %>
+
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+    <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+      <%= render "rui/shared/flash" %>
+      <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+        <div class="w-full max-w-sm space-y-8">
+          <div class="flex flex-col items-center justify-center gap-4">
+            <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+              <!-- Corgie logo -->
+              <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+              <span class="h4 font-semibold">Corgie</span>
+            <% end %>
+
+            <% if content_for?(:title) %>
+              <p class="text-neutral-500 dark:text-neutral-400">
+                <%= yield :title %>
+              </p>
+            <% end %>
+          </div>
+
+          <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+
+            <%= f.form_group do %>
+              <%= f.email_field :email, label: "Email", placeholder: "Enter email", value: "john.doe@example.com" %>
+            <% end %>
+
+            <%= f.form_group do %>
+              <%= f.password_field :password, label: "New password", placeholder: "Enter password", help: "Leave this blank if you don't want to change it." %>
+            <% end %>
+
+            <%= f.form_group do %>
+              <%= f.password_field :password_confirmation, label: "Confirm password", placeholder: "Confirm password", help: "Your current password is required to update your account." %>
+            <% end %>
+
+            <%= f.form_group do %>
+              <%= f.password_field :current_password, label: "Current password", placeholder: "Enter current password" %>
+            <% end %>
+
+            <%= f.submit "Update account", class: "w-full btn btn-lg btn-primary" %>
+          <% end %>
+
+          <hr class="my-6">
+
+          <%= button_to "Delete account", "#", method: :delete, data: { confirm: "Are you sure you want to delete your account?" }, class: "btn btn-danger btn-lg w-full" %>
+        </div>
+      </div>
+      <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+        <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+      </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/edit.html.erb -->
+<%% content_for :title, "Edit account" %>
+
+<%% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+  <div class="bg-neutral-50/90 text-neutral-700 border-l-4 border-neutral-700 py-4 pr-4 pl-6 text-sm dark:bg-neutral-50/10 dark:text-neutral-50 dark:border-neutral-400 mt-6">
+    <p class="text-neutral-800 dark:text-neutral-400 ">Currently waiting on confirmation for: <span class="font-semibold"><%%= resource.unconfirmed_email %></span></p>
+  </div>
+<%% end %>
+
+<%%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }, builder: Railsui::FormBuilder) do |f| %>
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email", placeholder: "Enter email", value: "john.doe@example.com" %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "New password", placeholder: "Enter password", help: "Leave this blank if you don't want to change it." %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password_confirmation, label: "Confirm password", placeholder: "Confirm password", help: "Your current password is required to update your account." %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :current_password, label: "Current password", placeholder: "Enter current password" %>
+  <%% end %>
+
+  <%%= f.submit "Update account", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+
+<hr class="my-6">
+
+<%%= button_to "Delete account", registration_path(resource_name), method: :delete, data: { confirm: "Are you sure you want to delete your account?" }, class: "btn btn-danger btn-lg w-full" %>
+
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "edit.html.erb" %>
+
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_confirmation_path, prev_text: "Confirmation", next_path: systems_authentication_devise_unlocks_path, next_text: "Unlock") %>

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

@@ -0,0 +1,225 @@
+<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>. Not using Devise? Check out the <%= link_to "static version", systems_authentication_static_overview_path %>.</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="py-6">
+  <div class="prose prose-neutral dark:prose-invert my-6 max-w-full">
+    <h3>Main Layout</h3>
+    <p>Add a new layout called <code>devise.html.erb</code> to the <code>app/views/layouts</code> directory. You can copy the code from <code>app/views/layouts/rui/railsui_auth.html.erb</code> to this file and modify it as needed. Historically, just adding a layout named <code>devise.html.erb</code> to the <code>app/views/layouts</code> directory is sufficient but it might require additional configuration to overide the devise defaults.</p>
+  </div>
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+  <!-- app/views/layouts/devise.html.erb-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      <%%= Railsui.config.application_name || "Rails UI" %>
+    </title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <%%= csrf_meta_tags %>
+    <%%= csp_meta_tag %>
+
+    <%%= yield :head %>
+
+    <%%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+
+    <%%= railsui_head %>
+  </head>
+
+  <body class="<%%= railsui_body_classes %>">
+    <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+      <%%= render "rui/shared/flash" %>
+      <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+        <div class="w-full max-w-sm space-y-8">
+          <div class="flex flex-col items-center justify-center gap-4">
+            <%%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+              <!-- Corgie logo -->
+              <%%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+              <span class="h4"><%%= Railsui.config.application_name || "Corgie" %></span>
+            <%% end %>
+
+            <%% if content_for?(:title) %>
+              <p class="text-neutral-500 dark:text-neutral-400">
+                <%%= yield :title %>
+              </p>
+            <%% end %>
+          </div>
+
+          <%% if devise_mapping.omniauthable? && %w{ registrations sessions }.include?(controller_name) %>
+            <div class="space-y-3 mb-6">
+              <%% resource_class.omniauth_providers.each do |provider| %>
+                <%%= button_to omniauth_authorize_path(resource_name, provider), class: "w-full gap-3 btn btn-white btn-lg", data: { turbo: false } do %>
+                  <%%= icon "#{provider.gsub(/\s+/, '').downcase}", custom_path: "/railsui/icons/social/#{provider.gsub(/\s+/, '').downcase}.svg", class: "size-4" %>
+                  <span>"Continue in with <%%= OmniAuth::Utils.camelize(provider) %></span>
+                  <%% end %>
+                <%% end %>
+              <%% end %>
+           </div>
+
+           <!-- Divider -->
+           <div class="relative">
+             <div class="absolute inset-0 flex items-center">
+               <div class="w-full border-t border-neutral-300 dark:border-neutral-600"></div>
+             </div>
+             <div class="relative flex justify-center text-sm">
+               <span class="px-2 bg-white text-neutral-500 dark:bg-neutral-900 dark:text-neutral-400">Or continue with email</span>
+             </div>
+           </div>
+          <%% end %>
+
+          <%%= yield %>
+        </div>
+      </div>
+      <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+        <%%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+      </div>
+    </div>
+    <%%= railsui_launcher if Rails.env.development? %>
+  </body>
+</html>
+<% end %>
+
+<%= render_snippet(active_tab: "erb", erb_filename: "devise.html.erb") %>
+
+<div class="prose prose-neutral dark:prose-invert my-6 max-w-full">
+  <p>Then in dedicated Devise views you can render the form elements and dynamic title.</p>
+</div>
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%% content_for :title, "Sign in to your account" %>
+<% end %>
+
+<%= render_snippet(active_tab: "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/icons/social</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("neutral") do %>
+<div class="max-w-sm mx-auto">
+  <!-- Social Auth Buttons -->
+  <div class="space-y-3 mb-6">
+    <button type="button" class="w-full gap-3 btn btn-white btn-lg">
+      <%= icon "google", custom_path: "/railsui/icons/social/google.svg", class: "size-4 fill-current" %>
+      Continue with Google
+    </button>
+
+    <button type="button" class="w-full gap-3 btn btn-white btn-lg">
+      <%= icon "github", custom_path: "/railsui/icons/social/github.svg", class: "size-4 fill-current" %>
+      Continue with GitHub
+    </button>
+  </div>
+
+  <!-- Divider -->
+  <div class="relative">
+    <div class="absolute inset-0 flex items-center">
+      <div class="w-full border-t border-neutral-300 dark:border-neutral-600"></div>
+    </div>
+    <div class="relative flex justify-center text-sm">
+      <span class="px-2 bg-white text-neutral-500 dark:bg-neutral-900 dark:text-neutral-400">Or continue with email</span>
+    </div>
+  </div>
+</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 my-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.</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('neutral') do %>
+<div class="bg-neutral-50 text-neutral-700 px-6 py-4 rounded-2xl mb-6 dark:bg-neutral-400/10 dark:border dark:border-neutral-400/20 dark:text-neutral-50 text-sm" role="alert">
+  <p class="font-semibold">2 errors prohibited this user from being saved:</p>
+  <ul class="list-disc mt-3 ml-4">
+    <li>Name required</li>
+    <li>Email required</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-neutral-50 text-neutral-700 px-6 py-4 rounded-2xl mb-6 dark:bg-neutral-400/10 dark:border dark:border-neutral-400/20 dark:text-neutral-50 text-sm" role="alert">
+    <p class="font-semibold"><%%= pluralize(resource.errors.count, "error") %> prohibited this <%%= resource.class.name.downcase %> 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 %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "_error_messages.html.erb" %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_authentication_overview_path, prev_text: "Authentication Overview", 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 "OmniAuth UI", "#auth-omniauth-ui" %>
+    <%= component_link "Error messages", "#auth-error-messages" %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,60 @@
+<%= render layout: example, locals: { heading: "Reset password", section: "Authentication" } do %>
+
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.password_field :password, label: "New password", placeholder: "Enter password", required: true %>
+          <% end %>
+
+          <%= f.submit "Reset Password", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }, builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "New password", placeholder: "Enter password", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Reset Password", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.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/corgie/authentication/devise/_signin.html.erb

@@ -0,0 +1,93 @@
+<%= render layout: example, locals: { heading: "Sign in", section: "Authentication" } do %>
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+    <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+      <%= render "rui/shared/flash" %>
+      <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+        <div class="w-full max-w-sm space-y-8">
+          <div class="flex flex-col items-center justify-center gap-4">
+            <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+              <!-- Corgie logo -->
+              <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+              <span class="h4 font-semibold">Corgie</span>
+            <% end %>
+
+            <% if content_for?(:title) %>
+              <p class="text-neutral-500 dark:text-neutral-400">
+                <%= yield :title %>
+              </p>
+            <% end %>
+          </div>
+
+    <%= render "rui/shared/common/social_auth_buttons" %>  <!-- Email Form -->
+    <form>
+      <div class="form-group">
+        <label for="email" class="form-label form-label-required">
+          Email address
+        </label>
+        <input id="email" name="email" type="email" autocomplete="email" required class="form-input" placeholder="Enter your email">
+      </div>
+
+      <div class="form-group">
+        <label for="password" class="form-label form-label-required">
+          Password
+        </label>
+        <input id="password" name="password" type="password" required class="form-input" placeholder="Enter password">
+      </div>
+
+      <div class="flex items-center form-group">
+        <input id="persist_login" name="persist_login" type="checkbox" class="form-input-checkbox">
+        <label for="persist_login" class="ml-3 text-sm text-neutral-600 dark:text-neutral-400">
+          Keep me signed in
+        </label>
+      </div>
+
+      <button type="submit" class="w-full btn btn-lg btn-primary">
+        Sign in
+      </button>
+    </form>
+
+    <!-- Sign in link -->
+    <div class="text-center">
+      <p class="text-sm text-neutral-600 dark:text-neutral-400">
+        Don't have an account?
+        <%= link_to "Sign up", rui_signup_path, class: "font-medium underline text-neutral-900 dark:text-white hover:text-neutral-700 dark:hover:text-neutral-200" %>
+      </p>
+    </div>
+    </div>
+  </div>
+  <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+    <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+  </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/sessions/new.html.erb -->
+<%%= form_for(resource, as: resource_name, url: session_path(resource_name), builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/errors", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email address", placeholder: "Enter your email", autocomplete: "email", required: true %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "Password", placeholder: "Enter password", required: true %>
+  <%% end %>
+
+  <%%= f.form_group class: "flex items-center" do %>
+    <%%= f.check_box :remember_me, label: "Keep me signed in", label_class: "ml-3 text-sm text-neutral-600 dark:text-neutral-400" %>
+  <%% end %>
+
+  <%%= f.submit "Sign in", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.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/corgie/authentication/devise/_signup.html.erb

@@ -0,0 +1,98 @@
+<%= render layout: example, locals: { heading: "Sign up", section: "Authentication" } do %>
+
+<div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= render "rui/shared/common/social_auth_buttons" %>
+
+        <!-- Email Form -->
+        <form>
+          <div class="form-group">
+            <label for="email" class="form-label form-label-required">
+              Email address
+            </label>
+            <input id="email" name="email" type="email" autocomplete="email" required class="form-input" placeholder="Enter your email">
+          </div>
+
+          <div class="form-group">
+            <label for="password" class="form-label form-label-required">
+              Password
+            </label>
+            <input id="password" name="password" type="password" autocomplete="new-password" required class="form-input" placeholder="Create a password">
+            <p class="text-xs form-help">Must be at least 8 characters long</p>
+          </div>
+
+          <div class="flex items-center form-group">
+            <input id="persist_login" name="persist_login" type="checkbox" class="form-input-checkbox">
+            <label for="persist_login" class="ml-3 text-sm text-neutral-600 dark:text-neutral-400">
+              Keep me signed in
+            </label>
+          </div>
+
+          <button type="submit" class="w-full btn btn-lg btn-primary">
+            Create account
+          </button>
+        </form>
+
+        <!-- Sign in link -->
+        <div class="text-center">
+          <p class="text-sm text-neutral-600 dark:text-neutral-400">
+            Already have an account?
+            <%= link_to "Sign in", rui_signin_path, class: "font-medium underline text-neutral-900 dark:text-white hover:text-neutral-700 dark:hover:text-neutral-200" %>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb, flush: true do %>
+  <!-- app/views/devise/registrations/new.html.erb-->
+<%% content_for :title, "Sign up for your account" %>
+
+<%%= form_for(resource, as: resource_name, url: registration_path(resource_name), builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email address", placeholder: "Enter your email", autocomplete: "email", required: true %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "Password", placeholder: "Create a password", autocomplete: "new-password", required: true %>
+    <%% if @minimum_password_length
+      <%%= f.form_help "Must be at least <%%= @minimum_password_length %> characters long" %>
+    <%% end %>
+  <%% end %>
+
+  <%%= f.submit "Sign up", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_overview_path, prev_text: "Authentication", next_path: systems_authentication_devise_signin_path, next_text: "Sign in") %>