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

app/components/components/on_off_status_component.html.erb

@@ -29,20 +29,12 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%# The javscript for this cell is included in `settings.js.erb`. %>
 
-<div class="on-off-status-cell">
-  <% if enabled? %>
-  <span class="on-off-status -enabled">
-    <%= helpers.op_icon "icon-yes" %>
-    <%= model[:on_text] %>
-  </span>
-      <p>
-        <%= model[:on_description] %>
-      </p>
-  <% else %>
-  <span class="on-off-status -disabled">
-    <%= helpers.op_icon "icon-not-supported" %>
-    <%= model[:off_text] %>
-  </span>
-      <p><%= model[:off_description] %></p>
+<%= render Primer::OpenProject::InlineMessage.new(scheme:, classes:) do %>
+  <%= render(Primer::Beta::Text.new(tag: :span)) do %>
+    <%= enabled? ? model[:on_text] : model[:off_text] %>
   <% end %>
-</div>
+<% end %>
+
+<span>
+  <%= enabled? ? model[:on_description] : model[:off_description] %>
+</span>

app/components/components/on_off_status_component.rb

@@ -34,13 +34,31 @@ module Components
   class OnOffStatusComponent < ::ApplicationComponent
     options :on_text
     options :on_description
+    options :on_scheme
     options :off_text
     options :off_description
+    options :off_scheme
 
     options :is_on
 
     def enabled?
       !!model[:is_on]
     end
+
+    def scheme
+      if enabled?
+        model[:on_scheme] || :success
+      else
+        model[:off_scheme] || :critical
+      end
+    end
+
+    def classes
+      [].tap do |classes|
+        classes << "on-off-status"
+        classes << "-enabled" if enabled?
+        classes << "-disabled" unless enabled?
+      end
+    end
   end
 end

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
 
@@ -146,6 +152,11 @@ def non_working_times
 
   private
 
+  def render_password_change(_user, message, show_user_name: false) # rubocop:disable Lint/UnusedMethodArgument
+    flash[:error] = message unless message.nil?
+    redirect_to action: "security"
+  end
+
   def redirect_if_password_change_not_allowed_for(user)
     unless user.change_password_allowed?
       flash[:error] = I18n.t(:notice_can_t_change_password)

app/forms/my/password_form.rb

@@ -0,0 +1,76 @@
+# 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, submit_button_scheme: :primary)
+    super()
+    @user = user
+    @back_url = back_url
+    @submit_button_scheme = submit_button_scheme
+  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_change_password), scheme: @submit_button_scheme)
+    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" %>
+  <%=
+    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], submit_button_scheme: local_assigns.fetch(:submit_button_scheme, :primary)))
+    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 partial: "my/password", locals: { submit_button_scheme: :secondary } %>
+
+<%= call_hook(:view_my_security_2fa_section, user: @user, cookies:) %>