From 86798d8e39c7ea8ff5c4a7aa6c25f57ca7fdd8fa Mon Sep 17 00:00:00 2001
From: cryptogopher <cryptogopher@noreply.me>
Date: Thu, 20 Apr 2023 23:22:03 +0200
Subject: [PATCH] Display resource error messages beside form

---
 app/assets/stylesheets/application.css          | 13 ++++++++++++-
 app/helpers/application_helper.rb               |  9 +++++++--
 app/views/users/confirmations/new.html.erb      |  2 --
 app/views/users/passwords/edit.html.erb         |  2 --
 app/views/users/passwords/new.html.erb          |  2 --
 app/views/users/registrations/new.html.erb      |  2 --
 app/views/users/shared/_error_messages.html.erb | 15 ---------------
 config/environment.rb                           |  3 +++
 8 files changed, 22 insertions(+), 26 deletions(-)
 delete mode 100644 app/views/users/shared/_error_messages.html.erb

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 5ea608e..9eb98a6 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -168,9 +168,20 @@ form tr td:first-child {
 form label.required {
   font-weight: bold;
 }
-form label.error {
+form label.error,
+form td.error::after {
   color: #ff1f5b;
 }
+form td.error {
+  display: -webkit-box;
+}
+form td.error::after {
+  content: attr(data-content);
+  font-size: 0.9rem;
+  margin-left: 1rem;
+  padding: 0.25rem 0;
+  position: absolute;
+}
 form em {
   color: #707070;
   font-size: 0.75rem;
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1dacef5..a3671df 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -5,7 +5,10 @@ module ApplicationHelper
         def #{selector}(method, options = {})
           @template.content_tag :tr do
             @template.content_tag(:td, label_for(method, options)) +
-            @template.content_tag(:td, super)
+            @template.content_tag(:td, super,
+              @object&.errors[method].present? ?
+                {class: "error", data: {content: @object&.errors.delete(method).join(" and ")}} :
+                {})
           end
         end
       RUBY_EVAL
@@ -30,7 +33,9 @@ module ApplicationHelper
     end
 
     def table_form_for(&block)
-      @template.content_tag(:table) { yield(self) }
+      @template.content_tag(:table) { yield(self) } +
+      # NOTE: display leftover error messages (there shouldn't be any)
+      @template.content_tag(:div, @object&.errors.full_messages.join(@template.tag :br))
     end
   end
 
diff --git a/app/views/users/confirmations/new.html.erb b/app/views/users/confirmations/new.html.erb
index 16d45ec..264f70b 100644
--- a/app/views/users/confirmations/new.html.erb
+++ b/app/views/users/confirmations/new.html.erb
@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_confirmation_path, html: { method: :post } do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email",
     value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
 
diff --git a/app/views/users/passwords/edit.html.erb b/app/views/users/passwords/edit.html.erb
index 70abb9e..e3a1076 100644
--- a/app/views/users/passwords/edit.html.erb
+++ b/app/views/users/passwords/edit.html.erb
@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_password_path, html: { method: :put } do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.hidden_field :reset_password_token, label: false %>
 
   <%= f.password_field :password, label: t('.new_password'),
diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb
index e9dec5d..4e3ea0d 100644
--- a/app/views/users/passwords/new.html.erb
+++ b/app/views/users/passwords/new.html.erb
@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_password_path, html: { method: :post } do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
 
   <%= f.submit t(:recover_password) %>
diff --git a/app/views/users/registrations/new.html.erb b/app/views/users/registrations/new.html.erb
index 256c84b..fcb196b 100644
--- a/app/views/users/registrations/new.html.erb
+++ b/app/views/users/registrations/new.html.erb
@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_registration_path do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
   <%= f.password_field :password, required: true, size: 30, minlength: @minimum_password_length,
     autocomplete: "new-password",
diff --git a/app/views/users/shared/_error_messages.html.erb b/app/views/users/shared/_error_messages.html.erb
deleted file mode 100644
index cabfe30..0000000
--- a/app/views/users/shared/_error_messages.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<% if resource.errors.any? %>
-  <div id="error_explanation" data-turbo-cache="false">
-    <h2>
-      <%= I18n.t("errors.messages.not_saved",
-                 count: resource.errors.count,
-                 resource: resource.class.model_name.human.downcase)
-       %>
-    </h2>
-    <ul>
-      <% resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
-      <% end %>
-    </ul>
-  </div>
-<% end %>
diff --git a/config/environment.rb b/config/environment.rb
index cac5315..43dd201 100644
--- a/config/environment.rb
+++ b/config/environment.rb
@@ -3,3 +3,6 @@ require_relative "application"
 
 # Initialize the Rails application.
 Rails.application.initialize!
+
+# Disable field_with_errors div wrapper for form inputs
+ActionView::Base.field_error_proc = Proc.new { |html_tag, instance| html_tag.html_safe }