From dd47a5f4bf37140525a84a77875875536ccad7fb Mon Sep 17 00:00:00 2001
From: Trevor Vallender <trevor@tsvallender.co.uk>
Date: Wed, 29 May 2024 08:46:31 +0100
Subject: [PATCH] Add useful error feedback to forms

---
 app/assets/stylesheets/colors.css           |  2 ++
 app/assets/stylesheets/forms.css            | 12 ++++++++++++
 app/assets/stylesheets/layout.css           |  4 ++++
 app/helpers/application_helper.rb           |  7 +++++++
 app/views/admin/game_systems/_form.html.erb |  1 +
 app/views/tables/_form.html.erb             |  6 ++++--
 app/views/users/_form.html.erb              |  6 ++++++
 todo.md                                     |  1 -
 8 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css
index 0cd112b..8c77bdc 100644
--- a/app/assets/stylesheets/colors.css
+++ b/app/assets/stylesheets/colors.css
@@ -10,4 +10,6 @@
 
   --notice-bg-color: #5cb85c;
   --notice-text-color: #fff;
+
+  --invalid-alert: #d00;
 }
diff --git a/app/assets/stylesheets/forms.css b/app/assets/stylesheets/forms.css
index 20a230b..1eb719e 100644
--- a/app/assets/stylesheets/forms.css
+++ b/app/assets/stylesheets/forms.css
@@ -19,4 +19,16 @@ form {
   input[type="submit"] {
     grid-column: 1/3;
   }
+
+  .field_with_errors {
+    display: contents;
+    border: 1px solid var(--invalid-alert);
+    color: var(--invalid-alert);
+  }
+
+  .invalid-feedback {
+    grid-column: 2;
+    color: var(--invalid-alert);
+    font-size: .8em;
+  }
 }
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index d8a70a2..ab4a1ce 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -21,6 +21,10 @@ aside.flash {
   border-radius: var(--border-radius);
 }
 
+aside.alert {
+  background-color: var(--invalid-alert);
+}
+
 section.inset {
   width: 70%;
   max-width: 60em;
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 15b06f0..57ca030 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,4 +1,11 @@
 # frozen_string_literal: true
 
 module ApplicationHelper
+  def display_form_errors(object, attr)
+    return unless object.errors.include?(attr)
+
+    content_tag(:div, class: "invalid-feedback") do
+      object.errors.full_messages_for(attr).join(". ")
+    end
+  end
 end
diff --git a/app/views/admin/game_systems/_form.html.erb b/app/views/admin/game_systems/_form.html.erb
index be5e415..1cc110c 100644
--- a/app/views/admin/game_systems/_form.html.erb
+++ b/app/views/admin/game_systems/_form.html.erb
@@ -3,6 +3,7 @@
 <%= form_with model: @game_system, url: do |f| %>
   <%= f.label :name %>
   <%= f.text_field :name, required: true %>
+  <%= display_form_errors(@game_system, :name) %>
 
   <%= f.submit button_text %>
 <% end %>
diff --git a/app/views/tables/_form.html.erb b/app/views/tables/_form.html.erb
index d751ed1..78130fb 100644
--- a/app/views/tables/_form.html.erb
+++ b/app/views/tables/_form.html.erb
@@ -2,10 +2,12 @@
 
 <%= form_with model: @table do |f| %>
   <%= f.label :name %>
-  <%= f.text_field :name, required: true %>
+  <%= f.text_field :name%>
+  <%= display_form_errors(@table, :name) %>
 
   <%= f.label :game_system_id %>
-  <%= f.collection_select :game_system_id, GameSystem.all, :id, :name, required: true %>
+  <%= f.collection_select :game_system_id, GameSystem.all, :id, :name, required: true, include_blank: " " %>
+  <%= display_form_errors(@table, :game_system) %>
 
   <%= f.submit button_text %>
 <% end %>
diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb
index 73f1515..fbc298e 100644
--- a/app/views/users/_form.html.erb
+++ b/app/views/users/_form.html.erb
@@ -4,21 +4,27 @@
   <%= form_with model: user do |f| %>
     <%= f.label :username %>
     <%= f.text_field :username, required: true %>
+    <%= display_form_errors(user, :username) %>
 
     <%= f.label :first_name %>
     <%= f.text_field :first_name %>
+    <%= display_form_errors(user, :first_name) %>
 
     <%= f.label :last_name %>
     <%= f.text_field :last_name %>
+    <%= display_form_errors(user, :last_name) %>
 
     <%= f.label :email %>
     <%= f.text_field :email, required: true %>
+    <%= display_form_errors(user, :email) %>
 
     <%= f.label :password %>
     <%= f.password_field :password, required: true %>
+    <%= display_form_errors(user, :password) %>
 
     <%= f.label :password_confirmation %>
     <%= f.password_field :password_confirmation, required: true %>
+    <%= display_form_errors(user, :password_confirmation) %>
 
     <%= f.submit button_text %>
   <% end %>
diff --git a/todo.md b/todo.md
index 49b5a71..0284e99 100644
--- a/todo.md
+++ b/todo.md
@@ -1,4 +1,3 @@
-- Ensure form errors/flash show correctly
 - Add players to tables
   - notifications
 - Add characters to users/tables