Change edit profile page (#25413)

app/controllers/settings/verifications_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class Settings::VerificationsController < Settings::BaseController
+  before_action :set_account
+
+  def show
+    @verified_links = @account.fields.select(&:verified?)
+  end
+
+  private
+
+  def set_account
+    @account = current_account
+  end
+end

app/views/settings/featured_tags/index.html.haml

@@ -1,13 +1,15 @@
 - content_for :page_title do
   = t('settings.featured_tags')
 
-%p= t('featured_tags.hint_html')
-
-%hr.spacer/
+- content_for :heading do
+  %h2= t('settings.profile')
+  = render partial: 'settings/shared/profile_navigation'
 
 = simple_form_for @featured_tag, url: settings_featured_tags_path do |f|
   = render 'shared/error_messages', object: @featured_tag
 
+  %p.lead= t('featured_tags.hint_html')
+
   .fields-group
     = f.input :name, wrapper: :with_block_label, hint: safe_join([t('simple_form.hints.featured_tag.name'), safe_join(@recently_used_tags.map { |tag| link_to("##{tag.display_name}", settings_featured_tags_path(featured_tag: { name: tag.name }), method: :post) }, ', ')], ' ')
 

app/views/settings/profiles/show.html.haml

@@ -1,76 +1,76 @@
 - content_for :page_title do
   = t('settings.edit_profile')
 
-- content_for :heading_actions do
-  = button_tag t('generic.save_changes'), class: 'button', form: 'edit_profile'
+- content_for :heading do
+  %h2= t('settings.profile')
+  = render partial: 'settings/shared/profile_navigation'
 
 = simple_form_for @account, url: settings_profile_path, html: { method: :put, id: 'edit_profile' } do |f|
   = render 'shared/error_messages', object: @account
 
-  .fields-row
-    .fields-row__column.fields-group.fields-row__column-6
-      = f.input :display_name, wrapper: :with_label, input_html: { maxlength: 30, data: { default: @account.username } }, hint: false
-      = f.input :note, wrapper: :with_label, input_html: { maxlength: 500 }, hint: false
+  %p.lead= t('edit_profile.hint_html')
+
+  %h4= t('edit_profile.basic_information')
 
   .fields-row
     .fields-row__column.fields-row__column-6
-      = render 'application/card', account: @account
-
-    .fields-row__column.fields-group.fields-row__column-6
-      = f.input :header, wrapper: :with_label, input_html: { accept: AccountHeader::IMAGE_MIME_TYPES.join(',') }, hint: picture_hint(t('simple_form.hints.defaults.header', dimensions: '1500x500', size: number_to_human_size(AccountHeader::LIMIT)), @account.header)
-
-      = f.input :avatar, wrapper: :with_label, input_html: { accept: AccountAvatar::IMAGE_MIME_TYPES.join(',') }, hint: picture_hint(t('simple_form.hints.defaults.avatar', dimensions: '400x400', size: number_to_human_size(AccountAvatar::LIMIT)), @account.avatar)
-
-  %hr.spacer/
-
-  .fields-group
-    = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
+      .fields-group
+        = f.input :display_name, wrapper: :with_block_label, input_html: { maxlength: 30, data: { default: @account.username } }
 
-  .fields-group
-    = f.input :bot, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.bot')
-
-  .fields-group
-    = f.input :discoverable, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.discoverable'), recommended: true
+      .fields-group
+        = f.input :note, wrapper: :with_block_label, input_html: { maxlength: 500 }
 
-  .fields-group
-    = f.input :hide_collections, as: :boolean, wrapper: :with_label, label: t('simple_form.labels.defaults.setting_hide_network'), hint: t('simple_form.hints.defaults.setting_hide_network')
-
-  %hr.spacer/
-
-  .fields-row
     .fields-row__column.fields-group.fields-row__column-6
       .input.with_block_label
         %label= t('simple_form.labels.defaults.fields')
-        %span.hint= t('simple_form.hints.defaults.fields')
+        %span.hint= t('simple_form.hints.account.fields')
 
         = f.simple_fields_for :fields do |fields_f|
           .row
             = fields_f.input :name, placeholder: t('simple_form.labels.account.fields.name'), input_html: { maxlength: 255 }
             = fields_f.input :value, placeholder: t('simple_form.labels.account.fields.value'), input_html: { maxlength: 255 }
 
-    .fields-row__column.fields-group.fields-row__column-6
-      %h6= t('verification.verification')
-      %p.hint= t('verification.explanation_html')
+  .fields-row
+    .fields-row__column.fields-row__column-6
+      .fields-group
+        = f.input :avatar, wrapper: :with_block_label, input_html: { accept: AccountAvatar::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.avatar', dimensions: '400x400', size: number_to_human_size(AccountAvatar::LIMIT))
 
-      .input-copy
-        .input-copy__wrapper
-          %input{ type: :text, maxlength: '999', spellcheck: 'false', readonly: 'true', value: link_to('Mastodon', ActivityPub::TagManager.instance.url_for(@account), rel: 'me').to_str }
-        %button{ type: :button }= t('generic.copy')
+    - if @account.avatar.present?
+      .fields-row__column.fields-row__column-6
+        .fields-group
+          = image_tag @account.avatar.url, class: 'fields-group__thumbnail', width: 90, height: 90
+          = link_to settings_profile_picture_path('avatar'), data: { method: :delete }, class: 'link-button link-button--destructive' do
+            = fa_icon 'trash fw'
+            = t('generic.delete')
 
-  .actions
-    = f.button :button, t('generic.save_changes'), type: :submit
+  .fields-row
+    .fields-row__column.fields-row__column-6
+      .fields-group
+        = f.input :header, wrapper: :with_block_label, input_html: { accept: AccountHeader::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.header', dimensions: '1500x500', size: number_to_human_size(AccountHeader::LIMIT))
 
-%hr/
+    - if @account.header.present?
+      .fields-row__column.fields-row__column-6
+        .fields-group
+          = image_tag @account.header.url, class: 'fields-group__thumbnail'
+          = link_to settings_profile_picture_path('header'), data: { method: :delete }, class: 'link-button link-button--destructive' do
+            = fa_icon 'trash fw'
+            = t('generic.delete')
 
-%h6= t('auth.migrate_account')
-%p.muted-hint= t('auth.migrate_account_html', path: settings_migration_path)
+  %h4= t('edit_profile.safety_and_privacy')
 
-%hr.spacer/
+  .fields-group
+    = f.input :discoverable, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.discoverable'), recommended: true
 
-%h6= t 'migrations.incoming_migrations'
-%p.muted-hint= t('migrations.incoming_migrations_html', path: settings_aliases_path)
+  .fields-group
+    = f.input :locked, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.locked')
 
-%hr.spacer/
+  .fields-group
+    = f.input :hide_collections, as: :boolean, wrapper: :with_label, label: t('simple_form.labels.defaults.setting_hide_network'), hint: t('simple_form.hints.defaults.setting_hide_network')
 
-%h6= t('auth.delete_account')
-%p.muted-hint= t('auth.delete_account_html', path: settings_delete_path)
+  %h4= t('edit_profile.other')
+
+  .fields-group
+    = f.input :bot, as: :boolean, wrapper: :with_label, hint: t('simple_form.hints.defaults.bot')
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit

app/views/settings/shared/_profile_navigation.html.haml

@@ -0,0 +1,6 @@
+.content__heading__tabs
+  = render_navigation renderer: :links do |primary|
+    :ruby
+      primary.item :profile, safe_join([fa_icon('user fw'), t('settings.edit_profile')]), settings_profile_path
+      primary.item :verification, safe_join([fa_icon('check fw'), t('verification.verification')]), settings_verification_path
+      primary.item :featured_tags, safe_join([fa_icon('hashtag fw'), t('settings.featured_tags')]), settings_featured_tags_path

app/views/settings/verifications/show.html.haml

@@ -0,0 +1,30 @@
+- content_for :page_title do
+  = t('verification.verification')
+
+- content_for :heading do
+  %h2= t('settings.profile')
+  = render partial: 'settings/shared/profile_navigation'
+
+.simple_form
+  %p.lead= t('verification.hint_html')
+
+  %h4= t('verification.here_is_how')
+
+  %p.lead= t('verification.instructions_html')
+
+  .input-copy.lead
+    .input-copy__wrapper
+      %input{ type: :text, maxlength: '999', spellcheck: 'false', readonly: 'true', value: link_to('Mastodon', ActivityPub::TagManager.instance.url_for(@account), rel: 'me').to_str }
+    %button{ type: :button }= t('generic.copy')
+
+  %p.lead= t('verification.extra_instructions_html')
+
+  - if @verified_links.any?
+    %h4= t('verification.verified_links')
+
+    %ul.lead
+      - @verified_links.each do |field|
+        %li
+          %span.verified-badge
+            = fa_icon 'check', class: 'verified-badge__mark'
+            %span= field.value

config/locales/an.yml

@@ -940,7 +940,6 @@ an:
     your_token: Lo tuyo token d'acceso
   auth:
     apply_for_account: Solicitar una cuenta
-    change_password: Clau
     delete_account: Borrar cuenta
     delete_account_html: Si deseya eliminar la suya cuenta, puede <a href="%{path}">proceder aquí</a>. Será pediu d'una confirmación.
     description:

config/locales/ar.yml

@@ -990,7 +990,6 @@ ar:
     your_token: رمز نفاذك
   auth:
     apply_for_account: اطلُب حسابًا
-    change_password: الكلمة السرية
     confirmations:
       wrong_email_hint: إذا كان عنوان البريد الإلكتروني هذا غير صحيح، يمكنك تغييره في إعدادات الحساب.
     delete_account: حذف الحساب

config/locales/ast.yml

@@ -449,7 +449,6 @@ ast:
     warning: Ten munchu curiáu con estos datos, ¡enxamás nun los compartas con naide!
     your_token: El pase d'accesu
   auth:
-    change_password: Contraseña
     confirmations:
       wrong_email_hint: Si la direición de corréu electrónicu nun ye correuta, pues camudala na configuración de la cuenta.
     delete_account: Desaniciu de la cuenta

config/locales/be.yml

@@ -1015,7 +1015,6 @@ be:
     your_token: Ваш токен доступу
   auth:
     apply_for_account: Пакінуць заяўку
-    change_password: Пароль
     confirmations:
       wrong_email_hint: Калі гэты адрас электроннай пошты памылковы, вы можаце змяніць яго ў наладах уліковага запісу.
     delete_account: Выдаліць уліковы запіс
@@ -1768,7 +1767,6 @@ be:
     seamless_external_login: Вы ўвайшлі праз знешні сэрвіс, таму налады пароля і эл. пошты недаступныя.
     signed_in_as: 'Увайшлі як:'
   verification:
-    explanation_html: 'Вы можаце <strong>пацвердзіць сябе як уладальніка спасылак у метададзеных вашага профілю</strong>. Для гэтага спасылка на вэб-сайт павінна ўтрымліваць спасылку на ваш профіль Mastodon. Пасля дадавання спасылка, вам спатрэбіцца вярнуцца і перазахаваць свой профіль, каб усё адбыдося. Зваротная спасылка <strong>павінна</strong> мець атрыбут <code>rel="me"</code>. Тэкставы змест спасылкі не мае значэння. Вось прыклад:'
     verification: Верыфікацыя
   webauthn_credentials:
     add: Дадаць новы ключ бяспекі

config/locales/bg.yml

@@ -979,7 +979,6 @@ bg:
     your_token: Вашият код за достъп
   auth:
     apply_for_account: Заявка за акаунт
-    change_password: Парола
     confirmations:
       wrong_email_hint: Ако този адрес на е-поща не е правилен, то може да го промените в настройки на акаунта.
     delete_account: Изтриване на акаунта
@@ -1704,7 +1703,6 @@ bg:
     seamless_external_login: Влезли сте чрез външна услуга, така че настройките за парола и имейл не са налични.
     signed_in_as: 'Влезли като:'
   verification:
-    explanation_html: 'Може да <strong>потвърдите себе си като собственик на връзките в метаданните на профила си</strong>. За целта свързаният уебсайт трябва да съдържа обратна връзка към профилa ви в Mastodon. След добавянето на връзката, може да се наложи да се върнете тук и да запазите пак профила си, за да влезе в сила потвърждаването. Връзката обратно <strong>трябва</strong> да има атрибут <code>rel="me"</code>. Текстовото съдържание на връзката няма значение. Ето пример:'
     verification: Проверка
   webauthn_credentials:
     add: Добавяне на нов ключ за сигурност

config/locales/br.yml

@@ -288,7 +288,6 @@ br:
     view: 'Sellet :'
     view_status: Gwelet ar c'hannad
   auth:
-    change_password: Ger-tremen
     delete_account: Dilemel ar gont
     login: Mont tre
     logout: Digennaskañ

config/locales/ca.yml

@@ -979,7 +979,6 @@ ca:
     your_token: El teu identificador d'accés
   auth:
     apply_for_account: Sol·licitar un compte
-    change_password: Contrasenya
     confirmations:
       wrong_email_hint: Si aquesta adreça de correu electrònic no és correcte, pots canviar-la en els ajustos del compte.
     delete_account: Elimina el compte
@@ -1704,7 +1703,6 @@ ca:
     seamless_external_login: Has iniciat sessió via un servei extern per tant els ajustos de contrasenya i correu electrònic no estan disponibles.
     signed_in_as: 'Sessió iniciada com a:'
   verification:
-    explanation_html: 'Pots <strong>verificar-te com a propietari dels enllaços a les metadades del teu perfil</strong>. Per això, el lloc web enllaçat ha de contenir un enllaç al teu perfil de Mastodon. Després d''afegir l''enllaç, podries necessitar tornar aquí a desar el teu perfil per a fer efectiva la verificació. El vincle <strong>ha de</strong> tenir l''atribut <code>rel="me"</code>. El contingut del text de l''enllaç no importa. Aquí tens un exemple:'
     verification: Verificació
   webauthn_credentials:
     add: Afegir nova clau de seguretat

config/locales/ckb.yml

@@ -587,7 +587,6 @@ ckb:
     warning: زۆر ئاگاداربە لەم داتایە. هەرگیز لەگەڵ کەس دا هاوبەشی مەکە!
     your_token: کۆدی دەستپێگەیشتنی ئێوە
   auth:
-    change_password: تێپەڕوشە
     delete_account: سڕینەوەی هەژمارە
     delete_account_html: گەر هەرەکتە هەژمارەکەت بسڕیتەوە، لە <a href="%{path}">لەم قوناغانە</a> بڕۆیتە پێشەوە. داوای پەسەند کردنتان لێدەگیرێت.
     description:

config/locales/co.yml

@@ -553,7 +553,6 @@ co:
     warning: Abbadate à quessi dati. Ùn i date à nisunu!
     your_token: Rigenerà a fiscia d’accessu
   auth:
-    change_password: Chjave d’accessu
     delete_account: Sguassà u contu
     delete_account_html: S’è voi vulete toglie u vostru contu <a href="%{path}">ghjè quì</a>. Duverete cunfirmà a vostra scelta.
     description:

config/locales/cs.yml

@@ -1015,7 +1015,6 @@ cs:
     your_token: Váš přístupový token
   auth:
     apply_for_account: Požádat o účet
-    change_password: Heslo
     confirmations:
       wrong_email_hint: Pokud není e-mail správný, můžete si ho změnit v nastavení účtu.
     delete_account: Odstranit účet
@@ -1768,7 +1767,6 @@ cs:
     seamless_external_login: Jste přihlášeni přes externí službu, nastavení hesla a e-mailu proto nejsou dostupná.
     signed_in_as: 'Přihlášeni jako:'
   verification:
-    explanation_html: 'Můžete se <strong>ověřit jako vlastník odkazů v metadatech profilu</strong>. Pro tento účel musí stránka v odkazu obsahovat odkaz zpět na váš profil na Mastodonu. Po přidání odkazu budete potřebovat vrátit se sem a znovu uložit profil, aby se ověření provedlo. Odkaz zpět <strong>musí</strong> mít atribut <code>rel="me"</code>. Na textu odkazu nezáleží. Zde je příklad:'
     verification: Ověření
   webauthn_credentials:
     add: Přidat nový bezpečnostní klíč

config/locales/cy.yml

@@ -1051,7 +1051,6 @@ cy:
     your_token: Eich tocyn mynediad
   auth:
     apply_for_account: Gofyn am gyfrif
-    change_password: Cyfrinair
     confirmations:
       wrong_email_hint: Os nad yw'r cyfeiriad e-bost hwnnw'n gywir, gallwch ei newid yng ngosodiadau'r cyfrif.
     delete_account: Dileu cyfrif
@@ -1832,7 +1831,6 @@ cy:
     seamless_external_login: Yr ydych wedi'ch mewngofnodi drwy wasanaeth allanol, felly nid yw gosodiadau cyfrinair ac e-bost ar gael.
     signed_in_as: 'Wedi mewngofnodi fel:'
   verification:
-    explanation_html: 'Gallwch <strong>wirio eich hun fel perchennog y dolenni ym metadata eich proffil</strong> . Ar gyfer gwneud hynny, rhaid i''r wefan gysylltiedig gynnwys dolen yn ôl i''ch proffil Mastodon. Ar ôl ychwanegu''r ddolen efallai y bydd angen i chi ddod yn ôl yma ac ail-gadw''ch proffil er mwyn i''r dilysiad ddod i rym. <strong>Rhaid</strong> i''r ddolen yn ôl gael priodoledd <code>rêl="me"</code>. Nid yw cynnwys testun y ddolen o bwys. Dyma enghraifft:'
     verification: Dilysu
   webauthn_credentials:
     add: Ychwanegu allwedd ddiogelwch newydd

config/locales/da.yml

@@ -979,7 +979,6 @@ da:
     your_token: Dit adgangstoken
   auth:
     apply_for_account: Anmod om en konto
-    change_password: Adgangskode
     confirmations:
       wrong_email_hint: Er denne e-mailadresse ikke korrekt, kan den ændres i kontoindstillinger.
     delete_account: Slet konto
@@ -1704,7 +1703,6 @@ da:
     seamless_external_login: Du er logget ind via en ekstern tjeneste, så adgangskode- og e-mailindstillinger er utilgængelige.
     signed_in_as: 'Logget ind som:'
   verification:
-    explanation_html: 'Man kan <strong>bekræfte sig selv som ejer af linkene i profilmetadataene</strong>. For at gøre dette, skal det linkede websted indeholde et link tilbage til Mastodon-profilen. Efter tilføjelse af linket, skal man muligvis returnere hertil og gemme sin profil igen, før bekræftelsen effektueres. Returlinket <strong>skal</strong> have en <code>rel="me"</code>-attribut. Linkets tekstindhold er ligegyldigt. Her er et eksempel:'
     verification: Bekræftelse
   webauthn_credentials:
     add: Tilføj ny sikkerhedsnøgle

config/locales/de.yml

@@ -979,7 +979,6 @@ de:
     your_token: Dein Zugangs-Token
   auth:
     apply_for_account: Konto beantragen
-    change_password: Passwort
     confirmations:
       wrong_email_hint: Sollte diese E-Mail-Adresse nicht korrekt sein, kannst du sie in den Kontoeinstellungen ändern.
     delete_account: Konto löschen
@@ -1704,7 +1703,6 @@ de:
     seamless_external_login: Du bist über einen externen Dienst angemeldet, daher sind Passwort- und E-Mail-Einstellungen nicht verfügbar.
     signed_in_as: 'Angemeldet als:'
   verification:
-    explanation_html: "Du kannst <strong>bestätigen, dass die Links in deinen Profil-Metadaten dir gehören</strong>. Dafür muss die verlinkte Website einen Link zurück auf dein Mastodon-Profil enthalten. \nNach dem Hinzufügen des Links musst du möglicherweise hierhin zurückkommen und dein Profil erneut speichern, um dass die Verifikation wirksam wird. Der Link zurück <strong>muss</strong> ein <code>rel=\"me\"</code>-Attribut enthalten. Der Linktext ist dabei egal. Hier ist ein Beispiel:"
     verification: Verifizierung
   webauthn_credentials:
     add: Sicherheitsschlüssel hinzufügen