Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42

20 files changed, 137 insertions, 126 deletions

diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index bc0d615bb64..0505a205333 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -1,5 +1,5 @@
 - page_title _('Account')
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 - if current_user.ldap_user?
   = render Pajamas::AlertComponent.new(alert_options: { class: 'gl-my-5' },
diff --git a/app/views/profiles/active_sessions/index.html.haml b/app/views/profiles/active_sessions/index.html.haml
index e9e6ca3ecce..54736153223 100644
--- a/app/views/profiles/active_sessions/index.html.haml
+++ b/app/views/profiles/active_sessions/index.html.haml
@@ -1,5 +1,5 @@
 - page_title _('Active Sessions')
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 .row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
diff --git a/app/views/profiles/audit_log.html.haml b/app/views/profiles/audit_log.html.haml
index 9997c8c4b4c..44cfbc1f74f 100644
--- a/app/views/profiles/audit_log.html.haml
+++ b/app/views/profiles/audit_log.html.haml
@@ -1,5 +1,5 @@
 - page_title _('Authentication log')
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 .row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
diff --git a/app/views/profiles/chat_names/_chat_name.html.haml b/app/views/profiles/chat_names/_chat_name.html.haml
index ce2fc2098c5..afc3894c23b 100644
--- a/app/views/profiles/chat_names/_chat_name.html.haml
+++ b/app/views/profiles/chat_names/_chat_name.html.haml
@@ -1,21 +1,5 @@
-- integration = chat_name.integration
-- project = integration&.project
 %tr
   %td
-    %strong
-      - if project.present? && can?(current_user, :read_project, project)
-        = link_to project.full_name, project_path(project)
-      - else
-        .light= _('Not applicable.')
-  %td
-    %strong
-      - if integration.present? && can?(current_user, :admin_project, project)
-        = link_to integration.title, edit_project_settings_integration_path(project, integration)
-      - elsif integration.present?
-        = integration.title
-      - else
-        .light= _('Not applicable.')
-  %td
     = chat_name.team_domain
   %td
     = chat_name.chat_name
diff --git a/app/views/profiles/chat_names/index.html.haml b/app/views/profiles/chat_names/index.html.haml
index 41bd81d0250..264ee040d7d 100644
--- a/app/views/profiles/chat_names/index.html.haml
+++ b/app/views/profiles/chat_names/index.html.haml
@@ -1,7 +1,8 @@
 - page_title _('Chat')
-- @content_class = "limit-container-width" unless fluid_layout
+- @hide_search_settings = true
+- @force_desktop_expanded_sidebar = true
 
-.row.gl-mt-3.js-search-settings-section
+.row.gl-mt-5.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
     %h4.gl-mt-0
       = page_title
@@ -14,11 +15,9 @@
 
     - if @chat_names.present?
       .table-responsive
-        %table.table.chat-names
+        %table.table
           %thead
             %tr
-              %th= _('Project')
-              %th= _('Service')
               %th= _('Team domain')
               %th= _('Nickname')
               %th= _('Last used')
diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml
index 303b8b10027..bc30ccc5821 100644
--- a/app/views/profiles/chat_names/new.html.haml
+++ b/app/views/profiles/chat_names/new.html.haml
@@ -1,14 +1,28 @@
-%h1.page-title.gl-font-size-h-display
-  = _("Authorization required")
-%main{ :role => "main" }
-  %p.h4
-    = html_escape(_("Authorize %{user} to use your account?")) % { user: tag.strong(@chat_name_params[:chat_name]) }
+- @hide_search_settings = true
 
-  %hr
-  .actions
-    = form_tag profile_chat_names_path, method: :post do
-      = hidden_field_tag :token, @chat_name_token.token
-      = submit_tag _("Authorize"), class: "gl-button btn btn-confirm wide float-left"
-    = form_tag deny_profile_chat_names_path, method: :delete do
-      = hidden_field_tag :token, @chat_name_token.token
-      = submit_tag _("Deny"), class: "gl-button btn btn-danger gl-ml-3"
+%main{ role: 'main' }
+  .gl-max-w-80.gl-mx-auto.gl-mt-6
+    = render Pajamas::CardComponent.new do |c|
+      - c.header do
+        %h4.gl-m-0= sprintf(s_('Integrations|Authorize %{integration_name} (%{user}) to use your account?'), { user: @chat_name_params[:chat_name], integration_name: @integration_name })
+      - c.body do
+        %p
+          = sprintf(s_('Integrations|An application called %{integration_name} is requesting access to your GitLab account. This application was created by GitLab Inc.'), { integration_name: @integration_name })
+        %p
+          = _('This application will be able to:')
+          %ul
+            %li= s_('SlackIntegration|Create and read issue data and comments.')
+            %li= s_('SlackIntegration|Perform deployments.')
+            %li= s_('SlackIntegration|Run ChatOps jobs.')
+        %p.gl-mb-0
+          = s_("SlackIntegration|You don't have to reauthorize this application if the permission scope changes in future releases.")
+      - c.footer do
+        .gl-display-flex
+          = form_tag profile_chat_names_path, method: :post do
+            = hidden_field_tag :token, @chat_name_token.token
+            = render Pajamas::ButtonComponent.new(type: :submit, variant: :danger) do
+              = _('Authorize')
+          = form_tag deny_profile_chat_names_path, method: :delete do
+            = hidden_field_tag :token, @chat_name_token.token
+            = render Pajamas::ButtonComponent.new(type: :submit, button_options: { class: 'gl-ml-3' }) do
+              = _('Deny')
diff --git a/app/views/profiles/comment_templates/index.html.haml b/app/views/profiles/comment_templates/index.html.haml
new file mode 100644
index 00000000000..dd5b43aa802
--- /dev/null
+++ b/app/views/profiles/comment_templates/index.html.haml
@@ -0,0 +1,10 @@
+- page_title _('Comment Templates')
+
+#js-comment-templates-root.row.gl-mt-5{ data: { base_path: profile_comment_templates_path } }
+  .col-lg-4
+    %h4.gl-mt-0
+      = page_title
+    %p
+      = _('Comment templates can be used when creating comments inside issues, merge requests, and epics.')
+  .col-lg-8
+    = gl_loading_icon(size: 'lg')
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index f4513d15a30..c16f3c3b12b 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -1,5 +1,5 @@
 - page_title _('Emails')
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 .row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
@@ -56,7 +56,7 @@
                   %li= s_('Profiles|Public email')
                 - if email.email == current_user.notification_email_or_default
                   %li= s_('Profiles|Notification email')
-            .gl-display-flex.gl-justify-content-end.gl-align-items-flex-end.gl-flex-grow-1.gl-flex-wrap-wrap-reverse.gl-gap-3
+            .gl-display-flex.gl-justify-content-end.gl-align-items-flex-end.gl-flex-grow-1.gl-flex-wrap-reverse.gl-gap-3
               - unless email.confirmed?
                 - confirm_title = "#{email.confirmation_sent_at ? _('Resend confirmation email') : _('Send confirmation email')}"
                 = link_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, class: 'gl-button btn btn-sm btn-default'
diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml
index ec48a611377..d52b16814c0 100644
--- a/app/views/profiles/gpg_keys/_key.html.haml
+++ b/app/views/profiles/gpg_keys/_key.html.haml
@@ -18,7 +18,7 @@
               %code= subkey.fingerprint
   .float-right
     %span.key-created-at
-      = s_('Profiles|Created %{time_ago}'.html_safe) % { time_ago: time_ago_with_tooltip(key.created_at) }
+      = html_escape(s_('Profiles|Created %{time_ago}')) % { time_ago: time_ago_with_tooltip(key.created_at) }
     = link_to profile_gpg_key_path(key), data: { confirm: _('Are you sure? Removing this GPG key does not affect already signed commits.') }, method: :delete, class: "gl-button btn btn-icon btn-danger gl-ml-3" do
       %span.sr-only= _('Remove')
       = sprite_icon('remove')
diff --git a/app/views/profiles/gpg_keys/index.html.haml b/app/views/profiles/gpg_keys/index.html.haml
index 539a0cd1f0e..b21a4da16b9 100644
--- a/app/views/profiles/gpg_keys/index.html.haml
+++ b/app/views/profiles/gpg_keys/index.html.haml
@@ -1,6 +1,6 @@
 - page_title _('GPG Keys')
 - add_page_specific_style 'page_bundles/profile'
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 .row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 825fb98782a..288007ec806 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -35,7 +35,7 @@
           = ssh_key_usage_types.invert[key.usage_type]
       .gl-display-flex.gl-float-right
         - if key.can_delete?
-          - if key.signing? && !is_admin && Feature.enabled?(:revoke_ssh_signatures)
+          - if key.signing? && !is_admin
             = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-confirm-modal-button', data: ssh_key_revoke_modal_data(key, revoke_profile_key_path(key)) }) do
               = _('Revoke')
           .gl-pl-3
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 69e92b9e508..e7c0cf813b5 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -1,6 +1,6 @@
 - page_title _('SSH Keys')
 - add_page_specific_style 'page_bundles/profile'
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 .row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
diff --git a/app/views/profiles/keys/show.html.haml b/app/views/profiles/keys/show.html.haml
index 09c16b0c038..f5fed281e20 100644
--- a/app/views/profiles/keys/show.html.haml
+++ b/app/views/profiles/keys/show.html.haml
@@ -1,5 +1,4 @@
 - add_to_breadcrumbs _('SSH Keys'), profile_keys_path
 - breadcrumb_title @key.title
 - page_title @key.title, _('SSH Keys')
-- @content_class = "limit-container-width" unless fluid_layout
 = render "key_details"
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index efc1e23d9b4..a632c450eda 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -1,6 +1,6 @@
 - add_page_specific_style 'page_bundles/notifications'
 - page_title _('Notifications')
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 %div
   - if @user.errors.any?
diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml
index 99c89dcebb4..4fdf80c1eb1 100644
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -1,6 +1,6 @@
 - breadcrumb_title _('Edit Password')
 - page_title _('Password')
-- @content_class = "limit-container-width" unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 .row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 82df6b1b2c7..57c0badd033 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -2,7 +2,7 @@
 - page_title s_('AccessTokens|Personal Access Tokens')
 - type = _('personal access token')
 - type_plural = _('personal access tokens')
-- @content_class = 'limit-container-width' unless fluid_layout
+- @force_desktop_expanded_sidebar = true
 
 .row.gl-mt-3.js-search-settings-section
   .col-lg-4.profile-settings-sidebar
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index b10d05efc4f..7f8858411ca 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -1,11 +1,11 @@
 - page_title _('Preferences')
 - add_page_specific_style 'page_bundles/profiles/preferences'
-- @content_class = "limit-container-width" unless fluid_layout
 - user_theme_id = Gitlab::Themes.for_user(@user).id
 - user_color_schema_id = Gitlab::ColorSchemes.for_user(@user).id
 - user_fields = { theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }.to_json
 - @themes = Gitlab::Themes::available_themes.to_json
 - data_attributes = { themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }
+- @force_desktop_expanded_sidebar = true
 
 - Gitlab::Themes.each do |theme|
   = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
@@ -17,6 +17,9 @@
         = s_('Preferences|Color theme')
       %p
         = s_('Preferences|Customize the color of GitLab.')
+      - if show_super_sidebar?
+        %p
+          = s_('Preferences|Note: You have the new navigation enabled, so only Dark Mode theme significantly changes GitLab\'s appearance.')
     .col-lg-8.application-theme
       .row
         - Gitlab::Themes.each do |theme|
@@ -34,7 +37,7 @@
       %h4.gl-mt-0
         = s_('Preferences|Syntax highlighting theme')
       %p
-        = s_('Preferences|This setting allows you to customize the appearance of the syntax.')
+        = s_('Preferences|Customize the appearance of the syntax.')
         = succeed '.' do
           = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'syntax-highlighting-theme'), target: '_blank', rel: 'noopener noreferrer'
     .col-lg-8.syntax-theme
@@ -66,7 +69,7 @@
       %h4.gl-mt-0
         = s_('Preferences|Behavior')
       %p
-        = s_('Preferences|This setting allows you to customize the behavior of the system layout and default views.')
+        = s_('Preferences|Customize the behavior of the system layout and default views.')
         = succeed '.' do
           = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'behavior'), target: '_blank', rel: 'noopener noreferrer'
     .col-lg-8
@@ -76,7 +79,7 @@
         = f.select :layout, layout_choices, {}, class: 'gl-form-select custom-select'
         .form-text.text-muted
           = s_('Preferences|Choose between fixed (max. 1280px) and fluid (%{percentage}) application layout.').html_safe % { percentage: '100%' }
-      .js-listbox-input{ data: { label: s_('Preferences|Dashboard'), description: s_('Preferences|Choose what content you want to see by default on your dashboard.'), name: 'user[dashboard]', items: dashboard_choices.to_json, value: current_user.dashboard } }
+      .js-listbox-input{ data: { label: s_('Preferences|Homepage'), description: s_('Preferences|Choose what content you want to see by default on your homepage.'), name: 'user[dashboard]', items: dashboard_choices.to_json, value: current_user.dashboard } }
 
       = render_if_exists 'profiles/preferences/group_overview_selector', f: f # EE-specific
 
@@ -137,21 +140,6 @@
         = f.select :first_day_of_week, first_day_of_week_choices_with_default, {}, class: 'gl-form-select custom-select'
     .col-sm-12
       %hr
-  - if Feature.enabled?(:vscode_web_ide, current_user)
-    .row.js-preferences-form.js-search-settings-section
-      .col-lg-4.profile-settings-sidebar#web-ide
-        %h4.gl-mt-0
-          = s_('Preferences|Web IDE')
-        %p
-          = s_('Preferences|The Web IDE Beta is the default Web IDE experience.')
-          = link_to _('Learn more'), help_page_path('user/project/web_ide_beta/index.md'), target: '_blank', rel: 'noopener noreferrer'
-      .col-lg-8
-        .form-group
-          = f.gitlab_ui_checkbox_component :use_legacy_web_ide,
-            s_('Preferences|Opt out of the Web IDE Beta'),
-            help_text: s_('Preferences|The Web IDE remains available alongside the Beta.')
-      .col-sm-12
-        %hr
   .row.js-preferences-form.js-search-settings-section
     .col-lg-4.profile-settings-sidebar#time-preferences
       %h4.gl-mt-0
@@ -165,8 +153,21 @@
         = f.gitlab_ui_checkbox_component :time_display_relative,
           s_('Preferences|Use relative times'),
           help_text: s_('Preferences|For example: 30 minutes ago.')
-      - if Feature.enabled?(:user_time_settings)
+  - if Feature.enabled?(:disable_follow_users, @user)
+    .row.js-preferences-form.js-search-settings-section
+      .col-sm-12
+        %hr
+      .col-lg-4.profile-settings-sidebar#enabled_following
+        %h4.gl-mt-0
+          = s_('Preferences|Enable follow users feature')
+        %p
+          = s_('Preferences|Turns on or off the ability to follow or be followed by other users.')
+          = succeed '.' do
+            = link_to _('Learn more'), help_page_path('user/profile/index', anchor: 'follow-users'), target: '_blank', rel: 'noopener noreferrer'
+      .col-lg-8
         .form-group
-          = f.gitlab_ui_checkbox_component :time_format_in_24h, s_('Preferences|Display time in 24-hour format')
+          = f.gitlab_ui_checkbox_component :enabled_following,
+          s_('Preferences|Enable follow users')
+
 
   #js-profile-preferences-app{ data: data_attributes }
diff --git a/app/views/profiles/saved_replies/index.html.haml b/app/views/profiles/saved_replies/index.html.haml
deleted file mode 100644
index 2ae7a092249..00000000000
--- a/app/views/profiles/saved_replies/index.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-- page_title _('Saved Replies')
-
-#js-saved-replies-root.row.gl-mt-5{ data: { base_path: profile_saved_replies_path } }
-  .col-lg-4
-    %h4.gl-mt-0
-      = page_title
-    %p
-      = _('Saved replies can be used when creating comments inside issues, merge requests, and epics.')
-  .col-lg-8
-    = gl_loading_icon(size: 'lg')
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 5ffffb80d97..930f4f5c397 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -1,8 +1,8 @@
 - breadcrumb_title s_("Profiles|Edit Profile")
 - page_title s_("Profiles|Edit Profile")
 - add_page_specific_style 'page_bundles/profile'
-- @content_class = "limit-container-width" unless fluid_layout
 - gravatar_link = link_to Gitlab.config.gravatar.host, 'https://' + Gitlab.config.gravatar.host
+- @force_desktop_expanded_sidebar = true
 
 = gitlab_ui_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user js-edit-user gl-mt-3 js-quick-submit gl-show-field-errors js-password-prompt-form', remote: true }, authenticity_token: true do |f|
   .row.js-search-settings-section
@@ -53,7 +53,9 @@
           = status_form.hidden_field :emoji, data: { js_name: 'emoji' }
           = status_form.hidden_field :message, data: { js_name: 'message' }
           = status_form.hidden_field :availability, data: { js_name: 'availability' }
-          = status_form.hidden_field :clear_status_after, value: @user.status&.clear_status_at&.to_s(:iso8601), data: { js_name: 'clearStatusAfter' }
+          = status_form.hidden_field :clear_status_after,
+            value: user_clear_status_at(@user),
+            data: { js_name: 'clearStatusAfter' }
     .col-lg-12
       %hr
   .row.user-time-preferences.js-search-settings-section
@@ -106,9 +108,18 @@
       .form-group.gl-form-group
         - external_accounts_help_url = help_page_path('user/profile/index', anchor: 'add-external-accounts-to-your-user-profile-page')
         - external_accounts_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: external_accounts_help_url }
-        - external_accounts_docs_link = s_('Profiles|Your Discord user ID. Should be between %{min} and %{max} digits long. %{external_accounts_link_start}Learn more.%{external_accounts_link_end}').html_safe % { min: '17', max: '20', external_accounts_link_start: external_accounts_link_start, external_accounts_link_end: '</a>'.html_safe }
+        - external_accounts_docs_link = s_('Profiles|Your Discord user ID. %{external_accounts_link_start}Learn more.%{external_accounts_link_end}').html_safe % { external_accounts_link_start: external_accounts_link_start, external_accounts_link_end: '</a>'.html_safe }
+        - min_discord_length = 17
+        - max_discord_length = 20
         = f.label :discord
-        = f.text_field :discord, class: 'gl-form-input form-control gl-md-form-input-lg', placeholder: s_("Profiles|User ID")
+        = f.text_field :discord,
+          class: 'gl-form-input form-control gl-md-form-input-lg js-validate-length',
+          placeholder: s_("Profiles|User ID"),
+          data: { min_length: min_discord_length,
+          min_length_message: s_('Profiles|Discord ID is too short (minimum is %{min_length} characters).') % { min_length: min_discord_length },
+          max_length: max_discord_length,
+          max_length_message: s_('Profiles|Discord ID is too long (maximum is %{max_length} characters).') % { max_length: max_discord_length },
+          allow_empty: true}
         %small.form-text.text-gl-muted
           = external_accounts_docs_link
 
@@ -147,8 +158,13 @@
         %legend.col-form-label.col-form-label
           = s_("Profiles|Private contributions")
         = f.gitlab_ui_checkbox_component :include_private_contributions,
-          s_('Profiles|Include private contributions on my profile'),
+          s_('Profiles|Include private contributions on your profile'),
           help_text: s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information.")
+      %fieldset.form-group.gl-form-group
+        %legend.col-form-label.col-form-label
+          = s_("Profiles|Achievements")
+        = f.gitlab_ui_checkbox_component :achievements_enabled,
+          s_('Profiles|Display achievements on your profile')
   .row.js-hide-when-nothing-matches-search
     .col-lg-12
       %hr
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 3add3af3c65..9cc7f6bdd49 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -1,31 +1,18 @@
 - breadcrumb_title _('Two-Factor Authentication')
 - page_title _('Two-Factor Authentication'), _('Account')
 - add_to_breadcrumbs _('Account'), profile_account_path
-- @content_class = "limit-container-width" unless fluid_layout
-- webauthn_enabled = Feature.enabled?(:webauthn)
 
 .js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path }
   .row.gl-mt-3
     .col-lg-4
       %h4.gl-mt-0
-        = _('Register Two-Factor Authenticator')
+        = _('Register a one-time password authenticator')
       %p
         = _('Use a one-time password authenticator on your mobile device or computer to enable two-factor authentication (2FA).')
     .col-lg-8
       - if current_user.two_factor_otp_enabled?
         %p
           = _("You've already enabled two-factor authentication using one time password authenticators. In order to register a different device, you must first disable two-factor authentication.")
-        %p
-          = _('If you lose your recovery codes you can generate new ones, invalidating all previous codes.')
-        - if @error
-          = render Pajamas::AlertComponent.new(title: @error[:message],
-            variant: :danger,
-            alert_options: { class: 'gl-mb-3' },
-            dismissible: false) do |c|
-            = c.body do
-              = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
-        .js-manage-two-factor-form{ data: { webauthn_enabled: webauthn_enabled, current_password_required: current_password_required?.to_s, profile_two_factor_auth_path: profile_two_factor_auth_path, profile_two_factor_auth_method: 'delete', codes_profile_two_factor_auth_path: codes_profile_two_factor_auth_path, codes_profile_two_factor_auth_method: 'post' } }
-
       - else
         %p
           - register_2fa_token = _('We recommend using cloud-based authenticator applications that can restore access if you lose your hardware device.')
@@ -36,8 +23,8 @@
             .gl-p-2.gl-mb-3{ style: 'background: #fff' }
               = raw @qr_code
           .col-md-8
-            .gl-card
-              .gl-card-body
+            = render Pajamas::CardComponent.new do |c|
+              - c.body do
                 %p.gl-mt-0.gl-mb-3.gl-font-weight-bold
                   = _("Can't scan the code?")
                 %p.gl-mt-0.gl-mb-3
@@ -58,15 +45,15 @@
               = c.body do
                 = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
 
-          .form-group
-            = label_tag :pin_code, _('Pin code'), class: "label-bold"
-            = text_field_tag :pin_code, nil, class: "form-control gl-form-input", required: true, data: { qa_selector: 'pin_code_field' }
           - if current_password_required?
             .form-group
               = label_tag :current_password, _('Current password'), class: 'label-bold'
               = password_field_tag :current_password, nil, autocomplete: 'current-password', required: true, class: 'form-control gl-form-input', data: { qa_selector: 'current_password_field' }
               %p.form-text.text-muted
                 = _('Your current password is required to register a two-factor authenticator app.')
+          .form-group
+            = label_tag :pin_code, _('Enter verification code'), class: "label-bold"
+            = text_field_tag :pin_code, nil, autocomplete: 'off', inputmode: 'numeric', class: "form-control gl-form-input", required: true, data: { qa_selector: 'pin_code_field' }
           .gl-mt-3
             = submit_tag _('Register with two-factor app'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'register_2fa_app_button' }
 
@@ -75,37 +62,27 @@
   .row.gl-mt-3
     .col-lg-4
       %h4.gl-mt-0
-        - if webauthn_enabled
-          = _('Register WebAuthn Device')
-        - else
-          = _('Register Universal Two-Factor (U2F) Device')
+        = _('Register a WebAuthn device')
       %p
-        = _('Set up a hardware device as a second factor to sign in.')
+        = _('Set up a hardware device to enable two-factor authentication (2FA).')
       %p
-        - if webauthn_enabled
-          = _("Not all browsers support WebAuthn. Therefore, we require that you set up a two-factor authentication app first. That way you'll always be able to sign in - even from an unsupported browser.")
+        - if Feature.enabled?(:webauthn_without_totp)
+          = _("Not all browsers support WebAuthn. You must save your recovery codes after you first register a two-factor authenticator to be able to sign in, even from an unsupported browser.")
         - else
-          = _("Not all browsers support U2F devices. Therefore, we require that you set up a two-factor authentication app first. That way you'll always be able to sign in - even when you're using an unsupported browser.")
+          = _("Not all browsers support WebAuthn. Therefore, we require that you set up a two-factor authentication app first. That way you'll always be able to sign in, even from an unsupported browser.")
     .col-lg-8
-      - registration = webauthn_enabled ? @webauthn_registration : @u2f_registration
-      - if registration.errors.present?
-        = form_errors(registration)
-      - if webauthn_enabled
-        = render "authentication/register", target_path: create_webauthn_profile_two_factor_auth_path
-      - else
-        = render "authentication/register", target_path: create_u2f_profile_two_factor_auth_path
+      - if @webauthn_registration.errors.present?
+        = form_errors(@webauthn_registration)
+      = render "authentication/register", target_path: create_webauthn_profile_two_factor_auth_path
 
       %hr
 
       %h5
-        - if webauthn_enabled
-          = _('WebAuthn Devices (%{length})') % { length: @registrations.length }
-        - else
-          = _('U2F Devices (%{length})') % { length: @registrations.length }
+        = _('WebAuthn Devices (%{length})') % { length: @registrations.length }
 
       - if @registrations.present?
         .table-responsive
-          %table.table.table-bordered.u2f-registrations
+          %table.table
             %colgroup
               %col{ width: "50%" }
               %col{ width: "30%" }
@@ -134,7 +111,28 @@
 
       - else
         .settings-message.text-center
-          - if webauthn_enabled
-            = _("You don't have any WebAuthn devices registered yet.")
-          - else
-            = _("You don't have any U2F devices registered yet.")
+          = _("You don't have any WebAuthn devices registered yet.")
+
+  %hr
+
+  .row.gl-mt-3
+    .col-lg-4
+      %h4.gl-mt-0
+        = _('Disable two-factor authentication')
+      %p
+        = _('Use this section to disable your one-time password authenticator and WebAuthn devices. You can also generate new recovery codes.')
+    .col-lg-8
+      - if current_user.two_factor_enabled?
+        %p
+          = _('If you lose your recovery codes you can generate new ones, invalidating all previous codes.')
+        - if @error
+          = render Pajamas::AlertComponent.new(title: @error[:message],
+            variant: :danger,
+            alert_options: { class: 'gl-mb-3' },
+            dismissible: false) do |c|
+            = c.body do
+              = link_to _('Try the troubleshooting steps here.'), help_page_path('user/profile/account/two_factor_authentication.md', anchor: 'troubleshooting'), target: '_blank', rel: 'noopener noreferrer'
+        .js-manage-two-factor-form{ data: { current_password_required: current_password_required?.to_s, profile_two_factor_auth_path: profile_two_factor_auth_path, profile_two_factor_auth_method: 'delete', codes_profile_two_factor_auth_path: codes_profile_two_factor_auth_path, codes_profile_two_factor_auth_method: 'post' } }
+      - else
+        %p
+          = _("Register a one-time password authenticator or a WebAuthn device first.")