[DREAM-388] Add a 'Security' page in Account settings

app/controllers/my_controller.rb

@@ -55,6 +55,7 @@ class MyController < ApplicationController
                              :password,
                              :change_password,
                              :password_confirmation_dialog,
+                             :security,
                              :notifications,
                              :non_working_times,
                              :working_hours,
@@ -68,6 +69,7 @@ class MyController < ApplicationController
   menu_item :locale, only: [:locale]
   menu_item :interface, only: [:interface]
   menu_item :password, only: [:password]
+  menu_item :security, only: [:security]
   menu_item :notifications, only: [:notifications]
   menu_item :working_hours, only: %i[working_hours non_working_times]
 
@@ -101,6 +103,10 @@ def update_date_alerts
 
   def interface; end
 
+  def security
+    @username = @user.login
+  end
+
   # Manage user's password
   def password
     @username = @user.login
@@ -110,7 +116,7 @@ def password
   # When making changes here, also check AccountController.change_password
   def change_password
     change_password_flow(user: @user, params:, update_legacy: false) do
-      redirect_to action: "password"
+      redirect_to action: "security"
     end
   end
 

app/forms/my/password_form.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+class My::PasswordForm < ApplicationForm
+  def initialize(user:, back_url: nil)
+    super()
+    @user = user
+    @back_url = back_url
+  end
+
+  form do |f|
+    f.fieldset_group(title: helpers.t(:label_change_password),
+                     mt: 2) do |fg|
+      fg.hidden(name: :back_url, value: @back_url) if @back_url.present?
+      fg.hidden(name: :password_change_user, value: @user.login)
+
+      fg.text_field(
+        name: :password,
+        type: :password,
+        input_width: :medium,
+        label: User.human_attribute_name(:current_password),
+        required: true,
+        autocomplete: "current-password"
+      )
+
+      fg.text_field(
+        name: :new_password,
+        type: :password,
+        input_width: :medium,
+        label: User.human_attribute_name(:new_password),
+        required: true,
+        autocomplete: "new-password",
+        data: { "password-requirements-target": "passwordInput" }
+      )
+
+      fg.text_field(
+        name: :new_password_confirmation,
+        type: :password,
+        input_width: :medium,
+        label: User.human_attribute_name(:password_confirmation),
+        required: true,
+        autocomplete: "new-password"
+      )
+
+      fg.submit(name: :submit, label: helpers.t(:button_save), scheme: :primary)
+    end
+  end
+end

app/forms/my/password_form/new_password_caption.html.erb

@@ -0,0 +1 @@
+<%= helpers.render_password_complexity_hint %>

app/helpers/password_helper.rb

@@ -44,18 +44,6 @@ def password_confirmation_form_for(record, options = {}, &)
     form_for(record, options, &)
   end
 
-  ##
-  # Decorate the form_tag helper with the request-for-confirmation directive
-  # when the user is internally authenticated.
-  def password_confirmation_form_tag(url_for_options = {}, options = {}, &)
-    if password_confirmation_required?
-      options[:data] ||= {}
-      options[:data] = password_confirmation_data_attribute(options[:data])
-    end
-
-    form_tag(url_for_options, options, &)
-  end
-
   def password_confirmation_data_attribute(with_data = {})
     controller = with_data.fetch(:controller, "")
 

app/views/my/_password.html.erb

@@ -0,0 +1,16 @@
+<% if @user.change_password_allowed? %>
+  <%= error_messages_for "user" %>
+  <%=
+    settings_primer_form_with(
+      url: { action: :change_password },
+      method: :post,
+      autocomplete: "off",
+      data: {
+        turbo: false,
+        controller: "password-requirements"
+      }
+    ) do |form|
+      render(My::PasswordForm.new(form, user: @user, back_url: params[:back_url]))
+    end
+  %>
+<% end %>

app/views/my/password.html.erb

@@ -30,25 +30,13 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   render(Primer::OpenProject::PageHeader.new) do |header|
-    header.with_title(test_selector: "change_password_header_title") { t(:button_change_password) }
+    header.with_title(test_selector: "change_password_header_title") { t(:label_change_password) }
     header.with_breadcrumbs(
       [{ href: my_account_path, text: t(:label_my_account) },
-       t(:button_change_password)]
+       { href: my_security_path, text: t(:label_my_security) },
+       t(:label_change_password)]
     )
   end
 %>
 
-<%= error_messages_for "user" %>
-<%= styled_form_tag(
-      { action: :change_password },
-      { autocomplete: "off", class: "form -wide-labels" }
-    ) do %>
-  <%= back_url_hidden_field_tag %>
-  <%= hidden_field_tag :password_change_user, @user.login %>
-  <section class="form--section">
-    <%= render partial: "my/password_form_fields",
-               locals: { show_user_name: !!(defined? show_user_name) ? show_user_name : nil,
-                         input_size: :middle } %>
-  </section>
-  <%= styled_button_tag t(:button_save), class: "-primary -with-icon icon-checkmark" %>
-<% end %>
+<%= render "my/password" %>

app/views/my/security.html.erb

@@ -0,0 +1,43 @@
+<%#-- copyright
+OpenProject is an open source project management software.
+Copyright (C) the OpenProject GmbH
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License version 3.
+
+OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+Copyright (C) 2006-2013 Jean-Philippe Lang
+Copyright (C) 2010-2013 the ChiliProject Team
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+See COPYRIGHT and LICENSE files for more details.
+
+++#%>
+<% html_title t(:label_my_account), t(:label_my_security) %>
+
+<%=
+  render(Primer::OpenProject::PageHeader.new) do |header|
+    header.with_title { t(:label_my_security) }
+    header.with_breadcrumbs(
+      [{ href: my_account_path, text: t(:label_my_account) },
+       t(:label_my_security)]
+    )
+  end
+%>
+
+<%= render "my/password" %>
+
+<%= call_hook(:view_my_security_2fa_section, user: @user, cookies:) %>

config/initializers/menus.rb

@@ -287,11 +287,10 @@
             { controller: "/my", action: "interface" },
             caption: :label_interface,
             icon: "device-desktop"
-  menu.push :password,
-            { controller: "/my", action: "password" },
-            caption: :button_change_password,
-            if: ->(_) { User.current.change_password_allowed? },
-            icon: "lock"
+  menu.push :security,
+            { controller: "/my", action: "security" },
+            caption: :label_my_security,
+            icon: "shield-lock"
   menu.push :access_tokens,
             { controller: "/my/access_tokens", action: "index" },
             caption: I18n.t("my_account.access_tokens.access_tokens"),

config/locales/en.yml

@@ -4043,6 +4043,7 @@
   label_send_invitation: Send invitation
   label_calculated_value: "Calculated value"
   label_change_parent: "Change parent"
+  label_change_password: "Change password"
   label_change_plural: "Changes"
   label_change_properties: "Change properties"
   label_change_status: "Change status"
@@ -4330,6 +4331,7 @@
   label_my_account_data: "My account data"
   label_my_avatar: "My avatar"
   label_my_queries: "My custom queries"
+  label_my_security: "Security"
   label_name: "Name"
   label_never: "Never"
   label_new: "New"

config/routes.rb

@@ -1126,6 +1126,7 @@
   end
 
   scope controller: "my" do
+    get "/my/security", action: "security", as: "my_security"
     get "/my/password", action: "password"
     get "/my/password_confirmation_dialog", action: "password_confirmation_dialog"
     post "/my/change_password", action: "change_password"

frontend/src/global_styles/content/modules/_2fa.sass

@@ -68,17 +68,6 @@
   margin-bottom: 10px
 
 
-// Add some paddings to action links
-.mobile-otp--two-factor-device-row td.buttons
-  form:not(:last-child):after
-    content: ","
-    padding: 0 1px
-
-.mobile-otp--two-factor-device-row.-default
-  .mobile-otp--device-text
-    font-weight: var(--base-text-weight-bold)
-
-
 // Backup codes display
 .two-factor-authentication--backup-codes
   // Avoid stretching the columns too much