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

app/assets/stylesheets/main.css

@@ -5,6 +5,7 @@
   --dark-background-color: #3A3A3A;
   --inset-background-color: #FFFFFF;
   --alert-border-color: #800000;
+  --form-error-color: #FF0000;
 }
 
 * {
@@ -119,6 +120,13 @@ form {
     grid-column: 1/3;
     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 {

app/controllers/users_controller.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class UsersController < ApplicationController
+  before_action :set_user, only: [:edit, :update, :show]
+
   def new
     @user = User.new
   end
@@ -16,12 +18,29 @@ class UsersController < ApplicationController
     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])
+    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
 
   private
 
+  def set_user
+    @user = User.find_by(username: params[:id])
+  end
+
   def user_params
     params.require(:user).permit(
       :username,

app/views/layouts/application.html.erb

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

app/views/shared/_flash.html.erb

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

app/views/users/_form.html.erb

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

app/views/users/edit.html.erb

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

app/views/users/edit.turbo_stream.erb

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

app/views/users/new.html.erb

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

app/views/users/show.html.erb

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

config/application.rb

@@ -12,5 +12,9 @@ module SummonPlayer
     config.load_defaults 7.0
 
     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

config/locales/controllers/users/en.yml

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

config/locales/views/users/en.yml

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

config/routes.rb

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