diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 743c26260e46ca40c5c7f76e579bdab2e199aaaf..e78c6c12c6227024847ff6ac7f93c02a7e6eb093 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -1,66 +1,84 @@
- page_title _('Emails')
+- profile_message = _('Used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}.') % { openingTag: "".html_safe, closingTag: ''.html_safe}
+- notification_message = _('Used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set.') % { openingTag: "".html_safe, closingTag: ''.html_safe}
+- public_email_message = _('Your public email will be displayed on your public profile.')
+- commit_email_message = _('Used for web based operations, such as edits and merges.')
- @force_desktop_expanded_sidebar = true
+
.settings-section.js-search-settings-section
.settings-sticky-header
.settings-sticky-header-inner
%h4.gl-my-0
- = _('Add email address')
+ = s_('Profiles|Email addresses')
%p.gl-text-secondary
- = _('Control emails linked to your account')
- %div
- = gitlab_ui_form_for 'email', url: profile_emails_path do |f|
- .form-group
- = f.label :email, _('Email'), class: 'label-bold'
- = f.text_field :email, class: 'form-control gl-form-input', data: { qa_selector: 'email_address_field' }
- .gl-mt-3
- = f.submit _('Add email address'), data: { qa_selector: 'add_email_address_button' }, pajamas_button: true
+ = s_('Profiles|Control emails linked to your account')
-.settings-section.js-search-settings-section
- .settings-sticky-header
- .settings-sticky-header-inner
- %h4.gl-my-0
- = _('Linked emails (%{email_count})') % { email_count: @emails.load.size }
- .account-well.gl-mb-3
- %ul
- %li
- - profile_message = _('Your primary email is used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}.') % { openingTag: "".html_safe, closingTag: ''.html_safe}
- = profile_message.html_safe
- %li
- = _('Your commit email is used for web based operations, such as edits and merges.')
- %li
- - notification_message = _('Your default notification email is used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set.') % { openingTag: "".html_safe, closingTag: ''.html_safe}
- = notification_message.html_safe
- %li
- = _('Your public email will be displayed on your public profile.')
- %li
- = _('All email addresses will be used to identify your commits.')
- %ul.content-list
- %li
- = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? }
- %ul
- %li= s_('Profiles|Primary email')
- - if @primary_email == current_user.commit_email_or_default
- %li= s_('Profiles|Commit email')
- - if @primary_email == current_user.public_email
- %li= s_('Profiles|Public email')
- - if @primary_email == current_user.notification_email_or_default
- %li= s_('Profiles|Default notification email')
- - @emails.reject(&:user_primary_email?).each do |email|
- %li{ data: { qa_selector: 'email_row_content' } }
- .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-gap-3
- %div
- = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
+ .settings-section.js-search-settings-section
+ = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+ - c.with_header do
+ .gl-new-card-title-wrapper
+ %h3.gl-new-card-title
+ = s_('Profiles|Linked emails')
+ .gl-new-card-count
+ = sprite_icon('mail', css_class: 'gl-mr-2')
+ = @emails.load.size
+ .gl-new-card-actions
+ = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do
+ = s_('Profiles|Add new email')
+ - c.with_body do
+ .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+ %h4.gl-mt-0
+ = s_('Profiles|Add new email')
+ = gitlab_ui_form_for 'email', url: profile_emails_path do |f|
+ .form-group
+ = f.label :email, _('Profiles|Email'), class: 'label-bold'
+ = f.text_field :email, class: 'form-control gl-form-input', data: { qa_selector: 'email_address_field' }
+ .gl-mt-3
+ = f.submit s_('Profiles|Add email address'), data: { qa_selector: 'add_email_address_button' }, pajamas_button: true
+ = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+ = _('Cancel')
+ - if @emails.any?
+ %ul.content-list
+ %li{ class: 'gl-px-5!' }
+ = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? }
%ul
- - if email.email == current_user.commit_email_or_default
- %li= s_('Profiles|Commit email')
- - if email.email == current_user.public_email
- %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-reverse.gl-gap-3
- - unless email.confirmed?
- - confirm_title = "#{email.confirmation_sent_at ? _('Resend confirmation email') : _('Send confirmation email')}"
- = link_button_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, size: :small
+ %li.gl-mt-2
+ = s_('Profiles|Primary email')
+ .gl-text-secondary.gl-font-sm= profile_message.html_safe
+ - if @primary_email == current_user.commit_email_or_default
+ %li.gl-mt-2
+ = s_('Profiles|Commit email')
+ .gl-text-secondary.gl-font-sm= commit_email_message
+ - if @primary_email == current_user.public_email
+ %li.gl-mt-2
+ = s_('Profiles|Public email')
+ .gl-text-secondary.gl-font-sm= public_email_message
+ - if @primary_email == current_user.notification_email_or_default
+ %li.gl-mt-2
+ = s_('Profiles|Default notification email')
+ .gl-text-secondary.gl-font-sm= notification_message.html_safe
+ - @emails.reject(&:user_primary_email?).each do |email|
+ %li{ class: 'gl-px-5!', data: { qa_selector: 'email_row_content' } }
+ .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-gap-3
+ %div
+ = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
+ %ul
+ - if email.email == current_user.commit_email_or_default
+ %li.gl-mt-2
+ = s_('Profiles|Commit email')
+ .gl-text-secondary.gl-font-sm= commit_email_message
+ - if email.email == current_user.public_email
+ %li.gl-mt-2
+ = s_('Profiles|Public email')
+ .gl-text-secondary.gl-font-sm= public_email_message
+ - if email.email == current_user.notification_email_or_default
+ %li.gl-mt-2
+ = s_('Profiles|Default notification email')
+ .gl-text-secondary.gl-font-sm= notification_message.html_safe
+ .gl-display-flex.gl-sm-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 ? s_('Profiles|Resend confirmation email') : s_('Profiles|Send confirmation email')}"
+ = link_button_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, size: :small
- = link_button_to nil, profile_email_path(email), data: { confirm: _('Are you sure?'), qa_selector: 'delete_email_link'}, method: :delete, variant: :danger, size: :small, icon: 'remove', 'aria-label': _('Remove')
+ = link_button_to nil, profile_email_path(email), data: { confirm: _('Are you sure?'), confirm_btn_variant: 'danger', qa_selector: 'delete_email_link'}, method: :delete, size: :small, icon: 'remove', 'aria-label': _('Remove')
diff --git a/app/views/shared/_email_with_badge.html.haml b/app/views/shared/_email_with_badge.html.haml
index 5013d8e439a3490fe87c44faf2cc21cdc671ee53..a1398f85513d9db75232ea3b5dc507d291893d7c 100644
--- a/app/views/shared/_email_with_badge.html.haml
+++ b/app/views/shared/_email_with_badge.html.haml
@@ -3,4 +3,4 @@
%span.gl-mr-3
= email
-= gl_badge_tag text, { variant: variant }
+= gl_badge_tag text, { variant: variant, size: :sm }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b48336cde1e4dc85084db8b8f43ce5aa5dfa14c0..c2ced9a23b9c7c468d0e1e761314cb5375890cfd 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2822,9 +2822,6 @@ msgstr ""
msgid "Add deploy keys to grant read/write access to this repository. %{link_start}What are deploy keys?%{link_end}"
msgstr ""
-msgid "Add email address"
-msgstr ""
-
msgid "Add email participant(s)"
msgstr ""
@@ -4625,9 +4622,6 @@ msgstr ""
msgid "All eligible users"
msgstr ""
-msgid "All email addresses will be used to identify your commits."
-msgstr ""
-
msgid "All environments"
msgstr ""
@@ -12739,9 +12733,6 @@ msgstr ""
msgid "Contributor statistics"
msgstr ""
-msgid "Control emails linked to your account"
-msgstr ""
-
msgid "Control how the CI_JOB_TOKEN CI/CD variable is used for API access between projects."
msgstr ""
@@ -27496,9 +27487,6 @@ msgstr ""
msgid "Link to your Grafana instance."
msgstr ""
-msgid "Linked emails (%{email_count})"
-msgstr ""
-
msgid "Linked epics"
msgstr ""
@@ -35237,9 +35225,15 @@ msgstr ""
msgid "Profiles|Active"
msgstr ""
+msgid "Profiles|Add email address"
+msgstr ""
+
msgid "Profiles|Add key"
msgstr ""
+msgid "Profiles|Add new email"
+msgstr ""
+
msgid "Profiles|An error occurred while updating your username, please try again."
msgstr ""
@@ -35282,6 +35276,9 @@ msgstr ""
msgid "Profiles|Connected Accounts"
msgstr ""
+msgid "Profiles|Control emails linked to your account"
+msgstr ""
+
msgid "Profiles|Created %{time_ago}"
msgstr ""
@@ -35327,6 +35324,12 @@ msgstr ""
msgid "Profiles|Edit Profile"
msgstr ""
+msgid "Profiles|Email"
+msgstr ""
+
+msgid "Profiles|Email addresses"
+msgstr ""
+
msgid "Profiles|Ensure you have two-factor authentication recovery codes stored in a safe place."
msgstr ""
@@ -35396,6 +35399,9 @@ msgstr ""
msgid "Profiles|Last used:"
msgstr ""
+msgid "Profiles|Linked emails"
+msgstr ""
+
msgid "Profiles|Location"
msgstr ""
@@ -35411,9 +35417,6 @@ msgstr ""
msgid "Profiles|No file chosen."
msgstr ""
-msgid "Profiles|Notification email"
-msgstr ""
-
msgid "Profiles|Optional but recommended. If set, key becomes invalid on the specified date."
msgstr ""
@@ -35453,9 +35456,15 @@ msgstr ""
msgid "Profiles|Remove avatar"
msgstr ""
+msgid "Profiles|Resend confirmation email"
+msgstr ""
+
msgid "Profiles|Select a service to sign in with."
msgstr ""
+msgid "Profiles|Send confirmation email"
+msgstr ""
+
msgid "Profiles|Service sign-in"
msgstr ""
@@ -42453,9 +42462,6 @@ msgstr ""
msgid "Send a single email notification to Owners and Maintainers for new alerts."
msgstr ""
-msgid "Send confirmation email"
-msgstr ""
-
msgid "Send email"
msgstr ""
@@ -49843,6 +49849,15 @@ msgstr ""
msgid "Used by more than 100,000 organizations, GitLab is the most popular solution to manage git repositories on-premises."
msgstr ""
+msgid "Used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set."
+msgstr ""
+
+msgid "Used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}."
+msgstr ""
+
+msgid "Used for web based operations, such as edits and merges."
+msgstr ""
+
msgid "Used programming language"
msgstr ""
@@ -53491,9 +53506,6 @@ msgstr ""
msgid "Your comment will be discarded."
msgstr ""
-msgid "Your commit email is used for web based operations, such as edits and merges."
-msgstr ""
-
msgid "Your current password is required to register a new device."
msgstr ""
@@ -53506,9 +53518,6 @@ msgstr ""
msgid "Your dashboard has been updated. You can %{web_ide_link_start}edit it here%{web_ide_link_end}."
msgstr ""
-msgid "Your default notification email is used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set."
-msgstr ""
-
msgid "Your deployment services will be broken, you will need to manually fix the services after renaming."
msgstr ""
@@ -53583,9 +53592,6 @@ msgstr ""
msgid "Your personal access tokens will expire in %{days_to_expire} days or less"
msgstr ""
-msgid "Your primary email is used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}."
-msgstr ""
-
msgid "Your profile"
msgstr ""
diff --git a/spec/features/profiles/user_manages_emails_spec.rb b/spec/features/profiles/user_manages_emails_spec.rb
index b875dfec217f25a8cc216811e3207d2b1001c77d..35f2ccf0f34aa20b1f6e899ce079891aaced47c3 100644
--- a/spec/features/profiles/user_manages_emails_spec.rb
+++ b/spec/features/profiles/user_manages_emails_spec.rb
@@ -22,7 +22,7 @@
it 'adds an email', :aggregate_failures do
fill_in('email_email', with: 'my@email.com')
- click_button('Add')
+ click_button('Add email address')
email = user.emails.find_by(email: 'my@email.com')
@@ -37,7 +37,7 @@
it 'does not add an email that is the primary email of another user', :aggregate_failures do
fill_in('email_email', with: other_user.email)
- click_button('Add')
+ click_button('Add email address')
email = user.emails.find_by(email: other_user.email)
@@ -51,7 +51,7 @@
it 'removes an email', :aggregate_failures do
fill_in('email_email', with: 'my@email.com')
- click_button('Add')
+ click_button('Add email address')
email = user.emails.find_by(email: 'my@email.com')