Separate edit profile page

Gemfile

@@ -33,6 +33,8 @@ gem 'bootsnap', '>= 1.4.2', require: false # https://github.com/Shopify/bootsnap
 gem 'devise', '~> 4.7', '>= 4.7.3' # https://github.com/plataformatec/devise
 gem 'devise-i18n', '~> 1.9', '>= 1.9.2' # https://github.com/tigrish/devise-i18n
 gem 'devise-bootstrap-views', '~> 1.1' # https://github.com/hisea/devise-bootstrap-views
+gem 'devise-i18n-bootstrap'
+
 gem 'activestorage-validator'
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby] # https://github.com/tzinfo/tzinfo-data

Gemfile.lock

@@ -106,6 +106,7 @@ GEM
     devise-bootstrap-views (1.1.0)
     devise-i18n (1.9.2)
       devise (>= 4.7.1)
+    devise-i18n-bootstrap (0.3.0.beta)
     diff-lcs (1.4.4)
     docile (1.3.4)
     erubi (1.10.0)
@@ -311,6 +312,7 @@ DEPENDENCIES
   devise (~> 4.7, >= 4.7.3)
   devise-bootstrap-views (~> 1.1)
   devise-i18n (~> 1.9, >= 1.9.2)
+  devise-i18n-bootstrap
   factory_bot_rails (~> 6.1)
   faker (~> 2.14)
   font-awesome-rails (~> 4.7, >= 4.7.0.5)

app/controllers/users_controller.rb

@@ -13,6 +13,12 @@ def edit
     @social_account = @user.social_accounts.build
   end
 
+  def edit_profile
+    return unless authorize_to_update!
+
+    @user = User.find(params[:id])
+  end
+
   def update
     return unless authorize_to_update!
     # prototype for create social account form
@@ -54,7 +60,7 @@ def handle_error
   end
 
   def user_params
-    params.require(:user).permit(:username, :firstname, :lastname, :birthdate, :place_of_residence, :avatar)
+    params.require(:user).permit(:username, :firstname, :lastname, :email, :birthdate, :place_of_residence, :avatar)
   end
 
   def authorize

app/views/users/confirmations/new.html.erb

@@ -1,16 +1,16 @@
-<h2>Resend confirmation instructions</h2>
+<h1><%= t('.resend_confirmation_instructions') %></h1>
 
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
+  <%= bootstrap_devise_error_messages! %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+  <div class="form-group">
+    <%= f.label :email %>
+    <%= f.email_field :email, autofocus: true, autocomplete: 'email', value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: 'form-control' %>
   </div>
 
-  <div class="actions">
-    <%= f.submit "Resend confirmation instructions" %>
+  <div class="form-group">
+    <%= f.submit t('.resend_confirmation_instructions'), class: 'btn btn-primary' %>
   </div>
 <% end %>
 
-<%= render "users/shared/links" %>
+<%= render 'devise/shared/links' %>

app/views/users/edit.html.erb

@@ -1,48 +1,7 @@
 <h1><%= I18n.t('user.edit.edit_profile_heading') %></h1>
 <hr />
-<h2><%= I18n.t('user.edit.profile_heading') %></h2>
-<%= form_with(model: @user, local: true) do |form| %>
-  <% if @user.errors.any? %>
-    <%= render 'layouts/flash_messages'%>
-  <% end %>
-
-  <p>
-    <%= image_tag @user.avatar, height: 160, width: 160, :style => "margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;", class: "rounded-circle" %>
-  </p>
-
-  <p>
-    <%= form.file_field :avatar %>
-  </p>
-
-  <p>
-    <%= form.label I18n.t('user.attributes.username') %>
-    <%= form.text_field :username %>
-  </p>
-
-  <p>
-    <%= form.label I18n.t('user.attributes.firstname') %>
-    <%= form.text_field :firstname %>
-  </p>
-
-  <p>
-    <%= form.label I18n.t('user.attributes.lastname') %>
-    <%= form.text_field :lastname %>
-  </p>
-
-  <p>
-    <%= form.label I18n.t('user.attributes.place_of_residence') %>
-    <%= form.text_field :place_of_residence %>
-  </p>
-
-  <p>
-    <%= form.label I18n.t('user.attributes.birthdate') %>
-    <%= form.date_select :birthdate, start_year: 1900, end_year: Time.now.year %>
-  </p>
-
-  <p>
-    <%= form.submit %>
-  </p>
-<% end %>
+<h2><%= I18n.t('user.edit.profile_settings_heading') %></h2>
+<%= link_to I18n.t('user.edit.edit_profile_settings_heading'), edit_profile_user_path(@user) %>
 
 <hr />
 

app/views/users/edit_profile.html.erb

@@ -0,0 +1,49 @@
+<h2><%= I18n.t('user.edit.edit_profile_settings_heading') %></h2>
+
+<%= form_with(model: @user, local: true) do |form| %>
+  <% if @user.errors.any? %>
+    <%= render 'layouts/flash_messages'%>
+  <% end %>
+
+  <p>
+    <%= image_tag @user.avatar, height: 160, width: 160, :style => "margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;", class: "rounded-circle" %>
+  </p>
+
+  <p>
+    <%= form.file_field :avatar %>
+  </p>
+
+  <p>
+    <%= form.label I18n.t('user.attributes.username') %>
+    <%= form.text_field :username %>
+  </p>
+
+  <p>
+    <%= form.label I18n.t('user.attributes.firstname') %>
+    <%= form.text_field :firstname %>
+  </p>
+
+  <p>
+    <%= form.label I18n.t('user.attributes.lastname') %>
+    <%= form.text_field :lastname %>
+  </p>
+
+  <p>
+    <%= form.label I18n.t('user.attributes.email') %>
+    <%= form.text_field :email %>
+  </p>
+
+  <p>
+    <%= form.label I18n.t('user.attributes.place_of_residence') %>
+    <%= form.text_field :place_of_residence %>
+  </p>
+
+  <p>
+    <%= form.label I18n.t('user.attributes.birthdate') %>
+    <%= form.date_select :birthdate, start_year: 1900, end_year: Time.now.year %>
+  </p>
+
+  <p>
+    <%= form.submit %>
+  </p>
+<% end %>

app/views/users/mailer/confirmation_instructions.html.erb

@@ -1,5 +1,6 @@
-<p>Welcome <%= @email %>!</p>
+<p><%= t('.greeting', :recipient => @resource.email, :default => "Welcome #{@resource.email}!") %></p>
 
-<p>You can confirm your account email through the link below:</p>
+<p><%= t('.instruction', :default => "You can confirm your account email through the link below:") %></p>
 
-<p><%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>
+<p><%= link_to t('.action', :default => "Confirm my account"),
+         confirmation_url(@resource, :confirmation_token => @resource.confirmation_token) %></p>

app/views/users/mailer/reset_password_instructions.html.erb

@@ -1,8 +1,8 @@
-<p>Hello <%= @resource.email %>!</p>
+<p><%= t('.greeting', :recipient => @resource.email, :default => "Hello #{@resource.email}!") %></p>
 
-<p>Someone has requested a link to change your password. You can do this through the link below.</p>
+<p><%= t('.instruction', :default => "Someone has requested a link to change your password, and you can do this through the link below.") %></p>
 
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
+<p><%= link_to t('.action', :default => "Change my password"), edit_password_url(@resource, :reset_password_token => @resource.reset_password_token) %></p>
 
-<p>If you didn't request this, please ignore this email.</p>
-<p>Your password won't change until you access the link above and create a new one.</p>
+<p><%= t('.instruction_2', :default => "If you didn't request this, please ignore this email.") %></p>
+<p><%= t('.instruction_3', :default => "Your password won't change until you access the link above and create a new one.") %></p>

app/views/users/mailer/unlock_instructions.html.erb

@@ -1,7 +1,7 @@
-<p>Hello <%= @resource.email %>!</p>
+<p><%= t('.greeting', :recipient => @resource.email, :default => "Hello #{@resource.email}!") %></p>
 
-<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
+<p><%= t('.message', :default => "Your account has been locked due to an excessive amount of unsuccessful sign in attempts.") %></p>
 
-<p>Click the link below to unlock your account:</p>
+<p><%= t('.instruction', :default => "Click the link below to unlock your account:") %></p>
 
-<p><%= link_to 'Unlock my account', unlock_url(@resource, unlock_token: @token) %></p>
+<p><%= link_to t('.action', :default => "Unlock my account"), unlock_url(@resource, :unlock_token => @resource.unlock_token) %></p>

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

@@ -1,25 +1,26 @@
-<h2>Change your password</h2>
+<h1><%= t('.change_your_password') %></h1>
 
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
+  <%= bootstrap_devise_error_messages! %>
   <%= f.hidden_field :reset_password_token %>
 
-  <div class="field">
-    <%= f.label :password, "New password" %><br />
+  <div class="form-group">
+    <%= f.label :password, t('.new_password') %>
+    <%= f.password_field :password, autofocus: true, class: 'form-control'  %>
+
     <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
+      <small class="form-text text-muted"><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></small>
     <% end %>
-    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
   </div>
 
-  <div class="field">
-    <%= f.label :password_confirmation, "Confirm new password" %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  <div class="form-group">
+    <%= f.label :password_confirmation, t('.confirm_new_password') %>
+    <%= f.password_field :password_confirmation, autocomplete: 'off', class: 'form-control'  %>
   </div>
 
-  <div class="actions">
-    <%= f.submit "Change my password" %>
+  <div class="form-group">
+    <%= f.submit t('.change_my_password'), class: 'btn btn-primary' %>
   </div>
 <% end %>
 
-<%= render "users/shared/links" %>
+<%= render 'devise/shared/links' %>

app/views/users/passwords/new.html.erb

@@ -1,16 +1,16 @@
-<h2>Forgot your password?</h2>
+<h1><%= t('.forgot_your_password') %></h1>
 
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
+  <%= bootstrap_devise_error_messages! %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  <div class="form-group">
+    <%= f.label :email %>
+    <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control' %>
   </div>
 
-  <div class="actions">
-    <%= f.submit "Send me reset password instructions" %>
+  <div class="form-group">
+    <%= f.submit t('.send_me_reset_password_instructions'), class: 'btn btn-primary' %>
   </div>
 <% end %>
 
-<%= render "users/shared/links" %>
+<%= render 'devise/shared/links' %>

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

@@ -1,43 +1,32 @@
-<h2>Edit <%= resource_name.to_s.humanize %></h2>
+<h1><%= t('.title') %></h1>
 
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
+  <%= bootstrap_devise_error_messages! %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+  <div class="form-group">
+    <%= f.label :password %>
+    <%= f.password_field :password, autocomplete: 'new-password', class: 'form-control' %>
 
-  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
-    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
-  <% end %>
-
-  <div class="field">
-    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-    <% if @minimum_password_length %>
-      <br />
-      <em><%= @minimum_password_length %> characters minimum</em>
-    <% end %>
+    <small class="form-text text-muted"><%= t('leave_blank_if_you_don_t_want_to_change_it') %></small>
   </div>
 
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  <div class="form-group">
+    <%= f.label :password_confirmation %>
+    <%= f.password_field :password_confirmation, autocomplete: 'new-password', class: 'form-control'  %>
   </div>
 
-  <div class="field">
-    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
-    <%= f.password_field :current_password, autocomplete: "current-password" %>
+  <div class="form-group">
+    <%= f.label :current_password %>
+    <%= f.password_field :current_password, autocomplete: 'current-password', class: 'form-control' %>
+
+    <small class="form-text text-muted"><%= t('.we_need_your_current_password_to_confirm_your_changes') %></small>
   </div>
 
-  <div class="actions">
-    <%= f.submit "Update" %>
+  <div class="form-group">
+    <%= f.submit t('.update'), class: 'btn btn-primary' %>
   </div>
 <% end %>
 
-<h3>Cancel my account</h3>
-
-<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>
+<p><%= t('.unhappy') %>? <%= link_to t('.cancel_my_account'), registration_path(resource_name), data: { confirm: t('.are_you_sure') }, method: :delete %>.</p>
 
-<%= link_to "Back", :back %>
+<%= link_to t('.back'), :back %>

app/views/users/registrations/new.html.erb

@@ -1,29 +1,30 @@
-<h2>Sign up</h2>
+<h1><%= t('.sign_up') %></h1>
 
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
+  <%= bootstrap_devise_error_messages! %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  <div class="form-group">
+    <%= f.label :email %>
+    <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'form-control' %>
   </div>
 
-  <div class="field">
+  <div class="form-group">
     <%= f.label :password %>
+    <%= f.password_field :password, autocomplete: 'current-password', class: 'form-control' %>
+
     <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
+      <small class="form-text text-muted"><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></small>
+    <% end %>
   </div>
 
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  <div class="form-group">
+    <%= f.label :password_confirmation %>
+    <%= f.password_field :password_confirmation, autocomplete: 'current-password', class: 'form-control' %>
   </div>
 
-  <div class="actions">
-    <%= f.submit "Sign up" %>
+  <div class="form-group">
+    <%= f.submit t('.sign_up'), class: 'btn btn-primary' %>
   </div>
 <% end %>
 
-<%= render "users/shared/links" %>
+<%= render 'devise/shared/links' %>