Set up forms and error messages

- Assign error class to the existing tags, don't add a wrapper div. This
  keeps the code cleaner and doesn't break our styling.
- Use Turbo Streams to update flash
- Style form errors
This commit is contained in:
Trevor Vallender 2023-08-18 19:08:49 +01:00
parent 7fc05d6c9c
commit ad4fa94bfa
13 changed files with 97 additions and 29 deletions

View File

@ -5,6 +5,7 @@
--dark-background-color: #3A3A3A; --dark-background-color: #3A3A3A;
--inset-background-color: #FFFFFF; --inset-background-color: #FFFFFF;
--alert-border-color: #800000; --alert-border-color: #800000;
--form-error-color: #FF0000;
} }
* { * {
@ -119,6 +120,13 @@ form {
grid-column: 1/3; grid-column: 1/3;
border-radius: .2em .2em 0 0; border-radius: .2em .2em 0 0;
} }
> label.field_with_errors {
color: var(--form-error-color);
}
> input.field_with_errors {
border-color: var(--form-error-color);
}
} }
div.flash { div.flash {

View File

@ -1,6 +1,8 @@
# frozen_string_literal: true # frozen_string_literal: true
class UsersController < ApplicationController class UsersController < ApplicationController
before_action :set_user, only: [:edit, :update, :show]
def new def new
@user = User.new @user = User.new
end end
@ -16,12 +18,29 @@ class UsersController < ApplicationController
end end
end end
def show def edit
head :forbidden and return unless @user == helpers.current_user
end
def update
@user = User.find_by(username: params[:id]) @user = User.find_by(username: params[:id])
if @user.update(user_params)
redirect_to @user, notice: t(".account_updated")
else
flash.now.alert = t(".update_failed")
render :edit
end
end
def show
end end
private private
def set_user
@user = User.find_by(username: params[:id])
end
def user_params def user_params
params.require(:user).permit( params.require(:user).permit(
:username, :username,

View File

@ -27,11 +27,7 @@
</nav> </nav>
</header> </header>
<main> <main>
<% flash.each do |type, message| %> <%= render "shared/flash" %>
<div class="flash <%= type %>">
<%= message %>
</div>
<% end %>
<%= yield %> <%= yield %>
</main> </main>
</body> </body>

View File

@ -0,0 +1,7 @@
<div id="flash_wrapper">
<% flash.each do |type, message| %>
<div class="flash <%= type %>">
<%= message %>
</div>
<% end %>
</div>

View File

@ -0,0 +1,23 @@
<%= form_with model: user, id: "user_form" do |f| %>
<h2><%= title %></h2>
<%= f.label :username %>
<%= f.text_field :username %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_names %>
<%= f.text_field :last_names %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
<%= f.submit button_text %>
<% end %>

View File

@ -0,0 +1,6 @@
<%= render partial: "form",
locals: {
user: @user,
button_text: t(".edit"),
title: t(".edit"),
} %>

View File

@ -0,0 +1,12 @@
<%= turbo_stream.replace "flash_wrapper" do %>
<%= render "shared/flash" %>
<% end %>
<%= turbo_stream.replace "user_form" do %>
<%= render partial: "form",
locals: {
user: @user,
button_text: t(".edit"),
title: t(".edit"),
} %>
<% end %>

View File

@ -1,22 +1,6 @@
<%= form_with model: @user do |f| %> <%= render partial: "form",
<h2><%= t(".register") %></h2> locals: {
<%= f.label :username %> user: @user,
<%= f.text_field :username %> button_text: t(".register"),
title: t(".register"),
<%= f.label :email %> } %>
<%= f.text_field :email %>
<%= f.label :first_name %>
<%= f.text_field :first_name %>
<%= f.label :last_names %>
<%= f.text_field :last_names %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation %>
<%= f.submit t(".register") %>
<% end %>

View File

@ -1,3 +1,6 @@
<h2><%= @user.username %></h2> <h2><%= @user.username %></h2>
<h4><%= @user.full_name %></h4> <h4><%= @user.full_name %></h4>
<% if @user == current_user %>
<%= link_to t(".edit_user_details"), edit_user_path(@user) %>
<% end %>

View File

@ -12,5 +12,9 @@ module SummonPlayer
config.load_defaults 7.0 config.load_defaults 7.0
config.time_zone = "London" config.time_zone = "London"
config.action_view.field_error_proc = proc do |html_tag, _instance|
html_tag.gsub(/<(\w*) /, '<\1 class="field_with_errors"').html_safe
end
end end
end end

View File

@ -1,3 +1,5 @@
en: en:
users: users:
account_created: Account created! account_created: Account created!
account_updated: Your details have been updated.
update_failed: Could not update your details.

View File

@ -3,3 +3,7 @@ en:
new: new:
register: Register register: Register
welcome: Welcome welcome: Welcome
edit:
edit: Edit
show:
edit_user_details: Edit your account details

View File

@ -3,7 +3,7 @@
Rails.application.routes.draw do Rails.application.routes.draw do
root "sessions#new" root "sessions#new"
resources :users, only: [:new, :create, :show] resources :users, only: [:new, :create, :show, :edit, :update]
resources :sessions, only: [:new, :create] resources :sessions, only: [:new, :create]
delete "log_out", to: "sessions#destroy_session" delete "log_out", to: "sessions#destroy_session"
end end