Refactor flashes

Author: patriciomacadden

lib/generators/tailwindcss/authentication/authentication_generator.rb

@@ -4,6 +4,10 @@ module Tailwindcss
   module Generators
     class AuthenticationGenerator < Erb::Generators::AuthenticationGenerator
       source_root File.expand_path("templates", __dir__)
+
+      def copy_view_files
+        template "../../scaffold/templates/_flashes.html.erb", "app/views/application/_flashes.html.erb"
+      end
     end
   end
 end

lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb

@@ -1,17 +1,15 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <%% if alert = flash[:alert] %>
-    <p class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-lg inline-block" id="alert"><%%= alert %></p>
-  <%% end %>
+<div class="w-full mx-auto md:w-2/3">
+  <%%= render "flashes" %>
 
-  <h1 class="font-bold text-4xl">Update your password</h1>
+  <h1 class="text-4xl font-bold">Update your password</h1>
 
   <%%= form_with url: password_path(params[:token]), method: :put, class: "contents" do |form| %>
     <div class="my-5">
-      <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block w-full px-3 py-2 mt-2 border border-gray-400 rounded-md shadow outline-none focus:outline-blue-600" %>
     </div>
 
     <div class="my-5">
-      <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block w-full px-3 py-2 mt-2 border border-gray-400 rounded-md shadow outline-none focus:outline-blue-600" %>
     </div>
 
     <div class="inline">

lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb

@@ -1,13 +1,11 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <%% if alert = flash[:alert] %>
-    <p class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-lg inline-block" id="alert"><%%= alert %></p>
-  <%% end %>
+<div class="w-full mx-auto md:w-2/3">
+  <%%= render "flashes" %>
 
-  <h1 class="font-bold text-4xl">Forgot your password?</h1>
+  <h1 class="text-4xl font-bold">Forgot your password?</h1>
 
   <%%= form_with url: passwords_path, class: "contents" do |form| %>
     <div class="my-5">
-      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block w-full px-3 py-2 mt-2 border border-gray-400 rounded-md shadow outline-none focus:outline-blue-600" %>
     </div>
 
     <div class="inline">

lib/generators/tailwindcss/authentication/templates/app/views/sessions/new.html.erb

@@ -1,21 +1,15 @@
-<div class="mx-auto md:w-2/3 w-full">
-  <%% if alert = flash[:alert] %>
-    <p class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-lg inline-block" id="alert"><%%= alert %></p>
-  <%% end %>
-
-  <%% if notice = flash[:notice] %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%%= notice %></p>
-  <%% end %>
+<div class="w-full mx-auto md:w-2/3">
+  <%%= render "flashes" %>
 
-  <h1 class="font-bold text-4xl">Sign in</h1>
+  <h1 class="text-4xl font-bold">Sign in</h1>
 
   <%%= form_with url: session_url, class: "contents" do |form| %>
     <div class="my-5">
-      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block w-full px-3 py-2 mt-2 border border-gray-400 rounded-md shadow focus:outline-blue-600" %>
     </div>
 
     <div class="my-5">
-      <%%= form.password_field :password, required: true, autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.password_field :password, required: true, autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72, class: "block w-full px-3 py-2 mt-2 border border-gray-400 rounded-md shadow focus:outline-blue-600" %>
     </div>
 
     <div class="col-span-6 sm:flex sm:items-center sm:gap-4">

lib/generators/tailwindcss/scaffold/scaffold_generator.rb

@@ -24,6 +24,7 @@ def copy_view_files
         end
 
         template "partial.html.erb", File.join("app/views", controller_file_path, "_#{singular_name}.html.erb")
+        template "_flashes.html.erb", "app/views/application/_flashes.html.erb"
       end
 
       private

lib/generators/tailwindcss/scaffold/templates/_flashes.html.erb.tt

@@ -0,0 +1,7 @@
+<%% if notice.present? %>
+  <p class="inline-block px-3 py-2 mb-5 font-medium text-green-500 rounded-md bg-green-50" id="notice"><%%= notice %></p>
+<%% end %>
+
+<%% if alert.present? %>
+  <p class="inline-block px-3 py-2 mb-5 font-medium text-red-500 rounded-lg bg-red-50" id="alert"><%%= alert %></p>
+<%% end %>

lib/generators/tailwindcss/scaffold/templates/index.html.erb.tt

@@ -1,12 +1,10 @@
 <%% content_for :title, "<%= human_name.pluralize %>" %>
 
 <div class="w-full">
-  <%% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%%= notice %></p>
-  <%% end %>
+  <%%= render "flashes" %>
 
-  <div class="flex justify-between items-center">
-    <h1 class="font-bold text-4xl"><%= human_name.pluralize %></h1>
+  <div class="flex items-center justify-between">
+    <h1 class="text-4xl font-bold"><%= human_name.pluralize %></h1>
     <%%= link_to "New <%= human_name.downcase %>", new_<%= singular_route_name %>_path, class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white block font-medium" %>
   </div>
 
@@ -19,7 +17,7 @@
         </p>
       <%% end %>
     <%% else %>
-      <p class="text-center my-10">No <%= human_name.downcase.pluralize %> found.</p>
+      <p class="my-10 text-center">No <%= human_name.downcase.pluralize %> found.</p>
     <%% end %>
   </div>
 </div>

lib/generators/tailwindcss/scaffold/templates/show.html.erb.tt

@@ -1,11 +1,9 @@
 <%% content_for :title, "Showing <%= human_name.downcase %>" %>
 
-<div class="md:w-2/3 w-full">
-  <%% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%%= notice %></p>
-  <%% end %>
+<div class="w-full md:w-2/3">
+  <%%= render "flashes" %>
 
-  <h1 class="font-bold text-4xl">Showing <%= human_name.downcase %></h1>
+  <h1 class="text-4xl font-bold">Showing <%= human_name.downcase %></h1>
 
   <%%= render @<%= singular_table_name %> %>