Add flashes with StumulusJS

app/helpers/application_helper.rb

@@ -1,2 +1,10 @@
 module ApplicationHelper
+  def classes_for_flash(flash_type)
+    case flash_type.to_sym
+    when :error
+      'bg-red-100 text-red-700 border-red-300'
+    else
+      'bg-blue-100 text-blue-700 border-blue-300'
+    end
+  end
 end

app/javascript/application.js

@@ -1,4 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 
 import "@rails/actioncable"
+import "controllers"
 import "@hotwired/turbo-rails"

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/index.js

@@ -0,0 +1,5 @@
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

app/javascript/controllers/removals_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  remove() {
+    this.element.remove()
+  }
+}

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

@@ -1,5 +1,5 @@
 <div class="hero min-h-content bg-base-200">
-  <div class="hero-content flex-col lg:flex-row-reverse w-full">
+  <div class="hero-content flex-col lg:flex-row-reverse w-full my-10">
     <div class="text-center lg:text-left">
       <h1 class="text-5xl font-bold">Edit your account!</h1>
       <p class="py-6">And change this text!</p>

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

@@ -1,5 +1,5 @@
 <div class="hero min-h-content bg-base-200">
-  <div class="hero-content flex-col lg:flex-row-reverse w-full">
+  <div class="hero-content flex-col lg:flex-row-reverse w-full my-10">
     <div class="text-center lg:text-left">
       <h1 class="text-5xl font-bold">Register now!</h1>
       <p class="py-6">And change this text!</p>

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

@@ -1,5 +1,5 @@
 <div class="hero min-h-content bg-base-200">
-  <div class="hero-content flex-col lg:flex-row-reverse w-full">
+  <div class="hero-content flex-col lg:flex-row-reverse w-full my-10">
     <div class="text-center lg:text-left">
       <h1 class="text-5xl font-bold">Login now!</h1>
       <p class="py-6">And change this text!</p>

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

@@ -1,25 +1,37 @@
-<%- if controller_name != 'sessions' %>
-  <%= link_to "Log in", new_session_path(resource_name) %><br />
-<% end %>
-
-<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-  <%= link_to "Sign up", new_registration_path(resource_name) %><br />
-<% end %>
-
-<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-  <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
-<% end %>
-
-<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
-  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
-<% 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) %><br />
-<% end %>
-
-<%- if devise_mapping.omniauthable? %>
-  <%- 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 } %><br />
+<div class='my-5'>
+  <%- if controller_name != 'sessions' %>
+    <div class='my-2'>
+      <%= link_to "Log in", new_session_path(resource_name) %>
+    </div>
   <% end %>
-<% end %>
+
+  <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
+    <div class='my-2'>
+      <%= link_to "Sign up", new_registration_path(resource_name) %>
+    </div>
+  <% end %>
+
+  <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+    <div class='my-2'>
+      <%= link_to "Forgot your password?", new_password_path(resource_name) %>
+    </div>
+  <% end %>
+
+  <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+    <div class='my-2'>
+      <%= 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='my-2'>
+      <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>
+    </div>
+  <% end %>
+
+  <%- if devise_mapping.omniauthable? %>
+    <%- 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 } %><br />
+    <% end %>
+  <% end %>
+</div>

app/views/layouts/application.html.erb

@@ -44,6 +44,7 @@
   <body class='min-h-screen'>
     <div class='container mx-auto'>
       <%= render 'shared/navbar' %>
+      <%= render 'shared/flash' %>
       <%= yield %>
     </div>
   </body>

app/views/shared/_flash.html.erb

@@ -0,0 +1,11 @@
+<% flash.each do |key, value| %>
+  <div data-controller="removals" class="flex items-center fixed top-5 right-5 <%= classes_for_flash(key) %> py-3 px-5 rounded-lg">
+    <div class="mr-4"><%= value %></div>
+
+    <button type="button" data-action="click->removals#remove">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+<% end %>

config/importmap.rb

@@ -5,4 +5,6 @@ pin_all_from "app/javascript/channels", under: "channels"
 pin "application", preload: true
 pin "@rails/actioncable", to: "actioncable.esm.js"
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
-
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+pin_all_from "app/javascript/controllers", under: "controllers"