Display resource error messages beside form

This commit is contained in:
cryptogopher 2023-04-20 23:22:03 +02:00
parent 85beaf23fd
commit 86798d8e39
8 changed files with 22 additions and 26 deletions

View File

@ -168,9 +168,20 @@ form tr td:first-child {
form label.required { form label.required {
font-weight: bold; font-weight: bold;
} }
form label.error { form label.error,
form td.error::after {
color: #ff1f5b; 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 { form em {
color: #707070; color: #707070;
font-size: 0.75rem; font-size: 0.75rem;

View File

@ -5,7 +5,10 @@ module ApplicationHelper
def #{selector}(method, options = {}) def #{selector}(method, options = {})
@template.content_tag :tr do @template.content_tag :tr do
@template.content_tag(:td, label_for(method, options)) + @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
end end
RUBY_EVAL RUBY_EVAL
@ -30,7 +33,9 @@ module ApplicationHelper
end end
def table_form_for(&block) 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
end end

View File

@ -1,6 +1,4 @@
<%= tabular_form_for resource, url: user_confirmation_path, html: { method: :post } do |f| %> <%= 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", <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email",
value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %> value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>

View File

@ -1,6 +1,4 @@
<%= tabular_form_for resource, url: user_password_path, html: { method: :put } do |f| %> <%= 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.hidden_field :reset_password_token, label: false %>
<%= f.password_field :password, label: t('.new_password'), <%= f.password_field :password, label: t('.new_password'),

View File

@ -1,6 +1,4 @@
<%= tabular_form_for resource, url: user_password_path, html: { method: :post } do |f| %> <%= 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.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
<%= f.submit t(:recover_password) %> <%= f.submit t(:recover_password) %>

View File

@ -1,6 +1,4 @@
<%= tabular_form_for resource, url: user_registration_path do |f| %> <%= 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.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
<%= f.password_field :password, required: true, size: 30, minlength: @minimum_password_length, <%= f.password_field :password, required: true, size: 30, minlength: @minimum_password_length,
autocomplete: "new-password", autocomplete: "new-password",

View File

@ -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 %>

View File

@ -3,3 +3,6 @@ require_relative "application"
# Initialize the Rails application. # Initialize the Rails application.
Rails.application.initialize! 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 }