update rodauth views to match flowbite design

Appraisals

@@ -6,6 +6,6 @@ appraise "rails-7" do
   gem "importmap-rails"
   gem "turbo-rails"
   gem "stimulus-rails"
-  gem "tzinfo-data", platforms: %i[ windows jruby ]
+  gem "tzinfo-data", platforms: %i[windows jruby]
   # gem "bootsnap", require: false
 end

app/views/application/_flash.html.erb

@@ -1 +1 @@
-<%= render "flash_alerts" %>
+<%= render "flash_toasts" %>

app/views/application/_flash_toasts.html.erb

@@ -21,7 +21,7 @@
 <div data-controller="resource-dismiss"
     data-resource-dismiss-target="target"
     data-resource-dismiss-after-value="6000"
-    class="fixed z-50 top-16 right-5 flex items-center w-full max-w-md p-4 text-gray-500 bg-<%= color %>-50 rounded-lg shadow dark:text-<%= color %>-400 dark:bg-gray-800"
+    class="fixed z-50 top-16 right-50% flex items-center w-full max-w-md p-4 text-gray-500 bg-<%= color %>-50 rounded-lg shadow dark:text-<%= color %>-400 dark:bg-gray-800"
     role="alert">
 
   <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-<%= color %>-500 bg-<%= color %>-100 rounded-lg dark:bg-<%= color %>-800 dark:text-<%= color %>-200">

app/views/layouts/rodauth.html.erb

@@ -4,14 +4,13 @@
   <% layout.with_favicon do %>
     <%= resource_favicon_tag %>
   <% end %>
-
-  <p class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
-    <%= resource_logo_tag classname: "w-24 h-24 mr-2" %>
-  </p>
-  <div class="w-full max-w-md bg-white rounded-lg shadow dark:border md:mt-0 xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-    <div class="w-full p-6 space-y-4 md:space-y-6 sm:p-8">
-      <%= yield %>
-    </div>
+  <%= link_to root_path, class: "flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white" do %>
+      <%= resource_logo_tag classname: "w-24 h-24 mr-2" %>
+  <% end %>
+  <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+      <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+        <%= yield %>
+      </div>
   </div>
   <div class="mt-4 flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline">
     <%= render_icon "outline/home" %>

app/views/rodauth/_email_auth_request_form.html.erb

@@ -1,5 +1,5 @@
-<%= form_with url: rodauth.email_auth_request_path, method: :post, data: { turbo: false }, class: "w-full max-w-sm" do |form| %>
+<%= form_with url: rodauth.email_auth_request_path, method: :post, data: { turbo: false }, class: "space-y-4 md:space-y-6" do |form| %>
   <%= form.hidden_field rodauth.login_param, value: params[rodauth.login_param] %>
 
-  <%= form.submit rodauth.email_auth_request_button, class: "w-full px-8 py-3 cursor-pointer font-semibold text-sm rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 dark:bg-emerald-400 dark:hover:bg-emerald-500 dark:text-gray-900 dark:focus:ring-emerald-400 dark:focus:ring-offset-current" %>
+  <%= form.submit rodauth.email_auth_request_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
 <% end %>

app/views/rodauth/_login_form.html.erb

@@ -1,24 +1,30 @@
-<%= form_with url: rodauth.login_path, method: :post, data: { turbo: false }, class: "w-full max-w-sm" do |form| %>
-  <% if rodauth.skip_login_field_on_login? %>
-    <div class="mb-6">
-      <%= form.label "login", rodauth.login_label, class: "block text-sm font-semibold" %>
-      <%= form.email_field rodauth.login_param, value: params[rodauth.login_param], id: "login", readonly: true, class: "mt-2 text-sm w-full py-2 px-0 bg-inherit border-transparent focus:ring-0 focus:border-transparent" %>
-    </div>
-  <% else %>
-    <div class="mb-6">
-      <%= form.label "login", rodauth.login_label, class: "block text-sm font-semibold" %>
-      <%= form.email_field rodauth.login_param, value: params[rodauth.login_param], id: "login", autocomplete: rodauth.login_field_autocomplete_value, required: true, class: "mt-2 text-sm w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.login_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "login_error_message" } if rodauth.field_error(rodauth.login_param)) %>
-      <%= content_tag(:span, rodauth.field_error(rodauth.login_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "login_error_message") if rodauth.field_error(rodauth.login_param) %>
-    </div>
-  <% end %>
+<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+  Sign in to your account
+</h1>
+<%= form_with url: rodauth.login_path, method: :post, data: { turbo: false }, class: "space-y-4 md:space-y-6" do |form| %>
+  <div class="mb-6">
+    <%= form.label "login", rodauth.login_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
+    <%= form.email_field rodauth.login_param, value: params[rodauth.login_param],
+                                              id: "login", autocomplete: rodauth.login_field_autocomplete_value,
+                                              required: true,
+                                              placeholder: "[email protected]",
+                                              class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.login_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "login_error_message" } if rodauth.field_error(rodauth.login_param)) %>
+    <% unless rodauth.skip_login_field_on_login? %>
+        <%= content_tag(:span, rodauth.field_error(rodauth.login_param), class: "block mt-1 text-red-600 text-sm dark:text-red-400", id: "login_error_message") if rodauth.field_error(rodauth.login_param) %>
+    <% end %>
+  </div>
 
   <% unless rodauth.skip_password_field_on_login? %>
     <div class="mb-6">
-      <%= form.label "password", rodauth.password_label, class: "block text-sm font-semibold" %>
-      <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "mt-2 text-sm w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
-      <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
+      <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
+      <%= form.password_field rodauth.password_param, value: "",
+                                                      id: "password",
+                                                      autocomplete: rodauth.password_field_autocomplete_value,
+                                                      required: true,
+                                                      class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
+      <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-sm dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
     </div>
   <% end %>
 
-  <%= form.submit rodauth.login_button, class: "w-full px-8 py-3 cursor-pointer font-semibold text-sm rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 dark:bg-emerald-400 dark:hover:bg-emerald-500 dark:text-gray-900 dark:focus:ring-emerald-400 dark:focus:ring-offset-current" %>
+  <%= form.submit rodauth.login_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
 <% end %>

app/views/rodauth/_login_form_footer.html.erb

@@ -1,7 +1,7 @@
 <% unless rodauth.login_form_footer_links.empty? %>
   <ul>
     <% rodauth.login_form_footer_links.sort.each do |_, link, text| %>
-      <li><%= link_to text, link, class: "text-blue-600 rounded-sm text-sm hover:underline hover:text-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-blue-300 dark:hover:text-blue-400 dark:focus-visible:ring-2 dark:focus-visible:ring-blue-300" %></li>
+      <li><%= link_to text, link, class: "text-primary-600 rounded-sm text-sm hover:underline hover:text-primary-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 dark:text-primary-300 dark:hover:text-primary-400 dark:focus-visible:ring-2 dark:focus-visible:ring-primary-300" %></li>
     <% end %>
   </ul>
 <% end %>

app/views/rodauth/change_login.html.erb

@@ -1,25 +1,34 @@
-<%= form_with url: rodauth.change_login_path, method: :post, data: { turbo: false }, class: "w-full max-w-sm" do |form| %>
+<%= form_with url: rodauth.change_login_path, method: :post, data: { turbo: false }, class: "space-y-4 md:space-y-6" do |form| %>
   <div class="mb-6">
-    <%= form.label "login", rodauth.login_label, class: "block text-sm font-semibold" %>
-    <%= form.email_field rodauth.login_param, value: params[rodauth.login_param], id: "login", autocomplete: "email", required: true, class: "mt-2 text-sm w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.login_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "login_error_message" } if rodauth.field_error(rodauth.login_param)) %>
+    <%= form.label "login", rodauth.login_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
+    <%= form.email_field rodauth.login_param, value: params[rodauth.login_param],
+                                              id: "login",
+                                              autocomplete: "email",
+                                              required: true,
+                                              placeholder: "[email protected]",
+                                              class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.login_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "login_error_message" } if rodauth.field_error(rodauth.login_param)) %>
     <%= content_tag(:span, rodauth.field_error(rodauth.login_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "login_error_message") if rodauth.field_error(rodauth.login_param) %>
   </div>
 
   <% if rodauth.require_login_confirmation? %>
     <div class="mb-6">
-      <%= form.label "login-confirm", rodauth.login_confirm_label, class: "block text-sm font-semibold" %>
-      <%= form.email_field rodauth.login_confirm_param, value: params[rodauth.login_confirm_param], id: "login-confirm", autocomplete: "email", required: true, class: "mt-2 text-sm w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.login_confirm_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "login-confirm_error_message" } if rodauth.field_error(rodauth.login_confirm_param)) %>
+      <%= form.label "login-confirm", rodauth.login_confirm_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
+      <%= form.email_field rodauth.login_confirm_param, value: params[rodauth.login_confirm_param],
+                                                        id: "login-confirm", autocomplete: "email",
+                                                        required: true,
+                                                        placeholder: "[email protected]",
+                                                        class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.login_confirm_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "login-confirm_error_message" } if rodauth.field_error(rodauth.login_confirm_param)) %>
       <%= content_tag(:span, rodauth.field_error(rodauth.login_confirm_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "login-confirm_error_message") if rodauth.field_error(rodauth.login_confirm_param) %>
     </div>
   <% end %>
 
   <% if rodauth.change_login_requires_password? %>
     <div class="mb-6">
-      <%= form.label "password", rodauth.password_label, class: "block text-sm font-semibold" %>
-      <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "mt-2 text-sm w-full px-3 py-2 border rounded-md dark:bg-gray-900 dark:text-gray-100 dark:focus:bg-gray-800 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
+      <%= form.label "password", rodauth.password_label, class: "block mb-2 text-sm font-semibold text-gray-900 dark:text-white" %>
+      <%= form.password_field rodauth.password_param, value: "", id: "password", autocomplete: rodauth.password_field_autocomplete_value, required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 #{rodauth.field_error(rodauth.password_param) ? "border-red-600 focus:ring-red-600 focus:border-red-600 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-700 dark:focus:border-emerald-400 dark:focus:ring-emerald-400" }", aria: ({ invalid: true, describedby: "password_error_message" } if rodauth.field_error(rodauth.password_param)) %>
       <%= content_tag(:span, rodauth.field_error(rodauth.password_param), class: "block mt-1 text-red-600 text-xs dark:text-red-400", id: "password_error_message") if rodauth.field_error(rodauth.password_param) %>
     </div>
   <% end %>
 
-  <%= form.submit rodauth.change_login_button, class: "w-full px-8 py-3 cursor-pointer font-semibold text-sm rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 dark:bg-emerald-400 dark:hover:bg-emerald-500 dark:text-gray-900 dark:focus:ring-emerald-400 dark:focus:ring-offset-current" %>
+  <%= form.submit rodauth.change_login_button, class: "w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-semibold rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" %>
 <% end %>