user profile and edit form

Gemfile

@@ -26,6 +26,7 @@ gem "bootsnap", '~> 1.9.4'
 gem 'browser'
 gem 'c_geohash', require: false
 gem 'countries'
+gem "country_select"
 gem 'dalli'
 gem 'date_validator'
 gem 'diffy', require: false

Gemfile.lock

@@ -142,6 +142,8 @@ GEM
     connection_pool (2.4.1)
     countries (5.4.0)
       unaccent (~> 0.3)
+    country_select (9.0.0)
+      countries (> 5.0, < 7.0)
     crack (0.4.5)
       rexml
     crass (1.0.6)
@@ -603,6 +605,7 @@ DEPENDENCIES
   cane
   capybara
   countries
+  country_select
   dalli
   date_validator
   diffy

app/assets/stylesheets/global.scss

@@ -37,10 +37,18 @@ body > .container {
     background-color: $white;
     border: 3px solid $black;
   }
+  &.btn-dark {
+    background-color: $black;
+    color: $white;
+    border: 3px solid $white;
+  }
   &:hover, &:active, &:focus, &:focus-visible {
     background-color: $primary !important;
     color: $black !important;
     border: 3px solid $black !important;
+    &.btn-dark {
+      border: 3px solid $primary !important;
+    }
     outline: none !important;
     box-shadow: none !important;
     &.btn-danger {
@@ -90,6 +98,22 @@ input:checked[type="checkbox"] {
     background-color: $white !important;
 }
 
+input[type="file"] {
+  padding: 0;
+  &::file-selector-button {
+    padding: 1rem 1rem 1rem 2rem;
+    background-color: $black;
+    color: $white;
+    border-right: 2px solid $black;
+  }
+  &:hover {
+    &::file-selector-button {
+      background-color: $primary !important;
+      color: $black;
+    }
+  }
+}
+
 .form-label {
   margin-left: 1rem;
 }

app/assets/stylesheets/user_profile.scss

@@ -1,6 +1,6 @@
 .user-profile-header {
   h1 {
-    line-height: 0.6 !important;
+    line-height: 1.6rem !important;
     padding-bottom: 0.4rem !important;
   }
 }

app/controllers/shared_controller_methods.rb

@@ -4,6 +4,7 @@ module SharedControllerMethods
 
   def self.included(klass)
     klass.helper_method :current_user
+    klass.helper_method :authorize?
   end
 
   def authorize?(*args)

app/controllers/ui/users_controller.rb

@@ -7,7 +7,8 @@ def index
     end
 
     def show
-      @user = User.find(params[:id])
+      @user = User.friendly.find(params[:id])
+      @title = I18n.t(:users_show_title, username: @user.username)
       render "show", layout: "base"
     end
 
@@ -42,38 +43,65 @@ def create
       else
         flash[:alert] = I18n.t(:new_user_failure)
         render :new, status: :unprocessable_entity
-        ned
       end
-      def delete
-        @user = User.find(params[:id])
-        unless authorize? @user, :destroy?
-          flash[:alert] = I18n.t(:delete_user_forbidden)
-          redirect_to current_user ? ui_users_path : login_path
-          return
-        end
-        @title = I18n.t(:delete_user_title)
+    end
+
+    def edit
+      @user = User.friendly.find(params[:id])
+      @title = I18n.t(:edit_user_title)
+    end
+
+    def update
+      @user = User.friendly.find(params[:id])
+      @user.update(params.require(:user).permit(
+        :profile_picture,
+        :username,
+        :email,
+        :password,
+        :password_confirmation,
+        :city,
+        :country_code,
+        :url
+      ))
+      if @user.valid?
+        @user.save
+        flash[:success] = I18n.t(:update_user_success)
+        redirect_to ui_user_path(@user.username)
+      else
+        flash[:alert] = I18n.t(:update_user_failure)
+        redirect_to edit_ui_user_path(@user.username)
       end
+    end
 
-      def destroy
-        @user = User.find(params[:id])
-        unless authorize? @user
-          flash[:alert] = I18n.t(:delete_user_forbidden)
-          redirect_to current_user ? ui_users_path : login_path
-          return
-        end
-        if @user.username != params[:username]
-          flash[:alert] = I18n.t(:delete_user_wrong_username)
-          redirect_to delete_ui_user_path(@user.id)
-          return
-        end
-        @user.archive!
-        session[:user_id] = nil
-        redirect_to post_delete_ui_users_path
+    def delete
+      @user = User.friendly.find(params[:id])
+      unless authorize? @user, :destroy?
+        flash[:alert] = I18n.t(:delete_user_forbidden)
+        redirect_to current_user ? ui_users_path : login_path
+        return
       end
+      @title = I18n.t(:delete_user_title)
+    end
 
-      def post_delete
-        @title = I18n.t(:post_delete_user_title)
+    def destroy
+      @user = User.friendly.find(params[:id])
+      unless authorize? @user
+        flash[:alert] = I18n.t(:delete_user_forbidden)
+        redirect_to current_user ? ui_users_path : login_path
+        return
+      end
+      if @user.username != params[:username]
+        flash[:alert] = I18n.t(:delete_user_wrong_username)
+        redirect_to delete_ui_user_path(@user.username)
+        return
       end
+      @user.archive!
+      session[:user_id] = nil
+      redirect_to post_delete_ui_users_path
+    end
+
+    def post_delete
+      @title = I18n.t(:post_delete_user_title)
     end
   end
 end

app/views/layouts/_base.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= [t(:title), @title].compact.join(" – ") %></title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+    <%= csrf_meta_tags %>
+  </head>
+  <body>
+    <%= render partial: "layouts/flashes" %>
+    <%= render partial: "layouts/nav" %>
+    <%= content_for?(:container) ? yield(:container) : yield %>
+    <%= render partial: "layouts/footer" %>
+  </body>
+</html>

app/views/layouts/_nav.html.erb

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-dark navbar-expand-md bg-black m-2 sticky-top rounded-4">
-  <div class="container px-3 px-md-0">
+  <div class="container px-3 px-sm-0">
     <a class="navbar-brand" href="https://www.smartcitizen.me">
       <img src="<%= image_url("smartcitizen_logo.svg") %>" alt="<%= t :logo_alt %>" width="36" height ="36" />
     </a>

app/views/layouts/application.erb → app/views/layouts/application.html.erb

@@ -12,4 +12,4 @@
     </div>
   </div>
 <% end  %>
-<%= render layout: "base" %>
+<%= render "layouts/base" %>

app/views/layouts/base.html.erb

@@ -1,17 +1 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title><%= [t(:title), @title].compact.join(" – ") %></title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
-    <%= csrf_meta_tags %>
-  </head>
-  <body>
-    <%= render partial: "layouts/flashes" %>
-    <%= render partial: "layouts/nav" %>
-    <%= content_for?(:container) ? yield(:container) : yield %>
-    <%= render partial: "layouts/footer" %>
-  </body>
-</html>
+<%= render "layouts/base" %>

app/views/ui/users/edit.html.erb

@@ -0,0 +1,23 @@
+<%= bootstrap_form_for @user, url: ui_user_path(@user.username) do |f| %>
+  <div>
+    <h2 class="mb-3"><%= t(:edit_user_account_details_subhead) %></h2>
+    <%= f.text_field :email %>
+    <%= f.text_field :username %>
+    <%= f.password_field :password %>
+    <%= f.password_field :password_confirmation %>
+  </div>
+  <div class="mt-5">
+    <h2 class="mb-3"><%= t(:edit_user_public_profile_subhead) %></h2>
+    <%= f.file_field :profile_picture %>
+    <%= f.text_field :city %>
+    <%= f.form_group :country_code, label: { text: t(:edit_user_country_code_label) } do %>
+      <%= f.country_select :country_code, { include_blank: t(:edit_user_country_code_cta) } , { class: 'form-control' } %>
+    <% end %>
+    <%= f.text_field :url, label: t(:edit_user_url_label) %>
+  </div>
+  <div class="mt-5">
+    <%= f.primary t(:edit_user_submit), class: "btn btn-primary w-100 w-md-auto" %>
+  </div>
+  <h2 class="mt-5 mb-3"><%= t(:edit_user_other_actions_subhead) %></h2>
+  <div><%= link_to t(:edit_user_delete_account_submit), delete_ui_user_path(@user.username), class: "btn btn-danger w-100 w-md-auto" %></div>
+<% end %>

app/views/ui/users/index.html.erb

@@ -2,9 +2,8 @@
   <p><%= t :users_index_logged_in_message, username: current_user.username %></p>
   <p><%= t :users_index_access_token_label  %>
   <br /><code><%= current_user.access_token.token %></code></p>
-  <p><%= link_to t(:users_index_profile_link), ui_user_path(current_user.id) %></p>
+  <p><%= link_to t(:users_index_profile_link), ui_user_path(current_user.username) %></p>
   <p><%= link_to t(:users_index_log_out_submit), logout_path, class: "btn btn-secondary w-100 w-md-auto" %></p>
-  <p><%= link_to t(:users_index_delete_account_submit), delete_ui_user_path(current_user.id), class: "danger" %></p>
 <% else %>
   <p><%= t :users_index_not_logged_in_message %></p>
   <a class="btn btn-secondary w-100 w-md-auto" href="<%= new_ui_session_path %>"><%= t :users_index_log_in_link %></a>

app/views/ui/users/show.html.erb

@@ -1,29 +1,42 @@
 <div class="user-profile-header bg-black text-white mx-2 mb-2 rounded-4">
-  <div class="container mx-2 mx-md-auto w-auto w-md-100 my-3 md-md-5 g-0">
+  <div class="container mx-2 mx-sm-auto w-auto w-sm-100 my-3 px-sm-3 g-0">
     <header class="row">
-      <div class="col-12 col-md-2 px-3 px-md-0">
+      <div class="col-12 col-sm-6 col-md-3 col-lg-2 px-3 px-sm-0">
         <div class="circular-image-crop">
-          <%= image_tag @user.profile_picture, alt: t(:show_user_profile_pic_alt, username: @user.username), class: "w-100" %>
+          <%= image_tag(
+            @user.profile_picture.present? ? @user.profile_picture : "default_avatar.svg",
+            alt: t(:show_user_profile_pic_alt, username: @user.username),
+            class: "w-100"
+          ) %>
         </div>
       </div>
-      <div class="col-12 col-md-10 mt-4 mt-md-0 mx-1 mx-md-0">
-        <h1 class="mb-2"><%= t(:show_user_headline, username: @user.username) %></h1>
-        <p class="mb-0 small">
+      <div class="col-12 col-sm-6 col-md-9 col-lg-10 mt-4 mt-sm-0 mx-2 mx-sm-0 mb-2 mb-sm-0 px-2 px-sm-0 ps-sm-3 ps-md-4 justify-content-between d-flex g-0 flex-column">
+        <div class="meta">
+          <h1 class="mb-2"><%= t(:show_user_headline, username: @user.username) %></h1>
+          <p class="mb-0 small">
           <%= image_tag("user_details_icon_light.svg", class: "pe-1") %>
           <%= @user.role.capitalize %>
-        </p>
-        <% if @user.city || @user.country %>
-          <p class="mb-0 small">
-          <%= image_tag("location_icon_light.svg", class: "pe-1") %>
-          <%= [@user.city, @user.country].join(", ") %>
-          </p>
-        <% end %>
-        <% if @user.url %>
-          <p class="mb-0 small">
-          <%= image_tag("url_icon_light.svg", class: "pe-1") %>
-          <%= link_to(@user.url, @user.url, class: "link-white") %>
           </p>
-        <% end %>
+          <% if @user.city || @user.country %>
+            <p class="mb-0 small">
+            <%= image_tag("location_icon_light.svg", class: "pe-1") %>
+            <%= [@user.city, @user.country].join(", ") %>
+            </p>
+          <% end %>
+          <% if @user.url %>
+            <p class="mb-0 small">
+            <%= image_tag("url_icon_light.svg", class: "pe-1") %>
+            <%= link_to(@user.url, @user.url, class: "link-white") %>
+            </p>
+          <% end %>
+        </div>
+        <div class="actions">
+          <% if authorize? @user, :update? %>
+            <p class="mb-0">
+            <%= link_to(t(:show_user_edit_cta), edit_ui_user_path(@user), class: "btn btn-dark mt-3 mt-sm-0") %>
+            </p>
+          <% end %>
+        </div>
       </div>
     </header>
   </div>

config/locales/controllers/en.yml

@@ -10,7 +10,13 @@ en:
     password_reset_invalid: "Your reset code might be too old or have been used before."
     destroy_session_success: "Logged out!"
     users_index_title: "User information"
+    users_show_title: "%{username}'s profile"
     new_user_title: "Sign up"
+    new_user_success: "Thanks for signing up! You are now logged in."
+    new_user_failure: "Some errors prevented us from creating your account. Please check below and try again!"
+    edit_user_title: "Edit your profile"
+    update_user_success: "Your profile has been updated!"
+    update_user_failure: "Some errors prevented us from updating your profile. Please check below and try again!"
     delete_user_title: "Delete your account"
     post_delete_user_title: "We are sorry to see you go!"
     delete_user_forbidden: "You are not allowed to delete that user account!"