Add useful error feedback to forms

app/assets/stylesheets/colors.css

@@ -10,4 +10,6 @@
 
   --notice-bg-color: #5cb85c;
   --notice-text-color: #fff;
+
+  --invalid-alert: #d00;
 }

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;
+  }
 }

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;

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

app/views/admin/game_systems/_form.html.erb

@@ -1,8 +1,9 @@
-<% # locals: (game_system: @game_system, button_text:, url:) %>
+<%# locals: (game_system: @game_system, button_text:, url:) %>
 
 <%= form_with model: @game_system, url: do |f| %>
   <%= f.label :name %>
-  <%= f.text_field :name %>
+  <%= f.text_field :name, required: true %>
+  <%= display_form_errors(@game_system, :name) %>
 
   <%= f.submit button_text %>
 <% end %>

app/views/sessions/new.html.erb

@@ -5,10 +5,10 @@
 <section class="inset">
   <%= form_with url: sessions_path do |f| %>
     <%= f.label :username %>
-    <%= f.text_field :username %>
+    <%= f.text_field :username, required: true %>
 
     <%= f.label :password %>
-    <%= f.password_field :password %>
+    <%= f.password_field :password, required: true %>
 
     <%= f.submit t(".log_in") %>
   <% end %>

app/views/tables/_form.html.erb

@@ -1,11 +1,13 @@
-<%# locals: (table:, button_text:) -%>
+<%# locals: (button_text:) -%>
 
 <%= form_with model: @table do |f| %>
   <%= f.label :name %>
-  <%= f.text_field :name %>
+  <%= f.text_field :name%>
+  <%= display_form_errors(@table, :name) %>
 
   <%= f.label :game_system_id %>
-  <%= f.collection_select :game_system_id, GameSystem.all, :id, :name %>
+  <%= 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 %>

app/views/tables/edit.html.erb

@@ -5,4 +5,4 @@
 <%= link_to t(".delete_table", name: @table.name), table_path(@table),
     data: { turbo_method: :delete, turbo_confirm: t(".delete_table_confirmation", name: @table.name) } %>
 <%= render partial: "tables/form",
-  locals: { table: @table, button_text: t(".update_table") } %>
+  locals: { button_text: t(".update_table") } %>

app/views/tables/new.html.erb

@@ -3,4 +3,4 @@
 <h2><%= t(".new_table") %></h2>
 
 <%= render partial: "tables/form",
-  locals: { table: @table, button_text: t(".create_table") } %>
+  locals: { button_text: t(".create_table") } %>

app/views/users/_form.html.erb

@@ -3,22 +3,28 @@
 <section class="inset">
   <%= form_with model: user do |f| %>
     <%= f.label :username %>
-    <%= f.text_field :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 %>
+    <%= f.text_field :email, required: true %>
+    <%= display_form_errors(user, :email) %>
 
     <%= f.label :password %>
-    <%= f.password_field :password %>
+    <%= f.password_field :password, required: true %>
+    <%= display_form_errors(user, :password) %>
 
     <%= f.label :password_confirmation %>
-    <%= f.password_field :password_confirmation %>
+    <%= f.password_field :password_confirmation, required: true %>
+    <%= display_form_errors(user, :password_confirmation) %>
 
     <%= f.submit button_text %>
   <% end %>

todo.md

@@ -1,4 +1,4 @@
-- Ensure form errors/flash show correctly
 - Add players to tables
+  - notifications
 - Add characters to users/tables
 - Character sheets/prototypes