From 239ee4f5d10aaa30b52cc59a58b2dc33fea5615f Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 13 Jun 2023 22:30:40 +0200
Subject: [PATCH] Fix CAPTCHA page not following design pattern of sign-up flow
 (#25395)

---
 app/controllers/concerns/captcha_concern.rb    | 5 +++++
 app/javascript/styles/mastodon/forms.scss      | 4 +++-
 app/views/auth/confirmations/captcha.html.haml | 8 +++++---
 config/locales/en.yml                          | 5 +++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/controllers/concerns/captcha_concern.rb b/app/controllers/concerns/captcha_concern.rb
index 538c1ffb14..576304d1ca 100644
--- a/app/controllers/concerns/captcha_concern.rb
+++ b/app/controllers/concerns/captcha_concern.rb
@@ -2,6 +2,7 @@
 
 module CaptchaConcern
   extend ActiveSupport::Concern
+
   include Hcaptcha::Adapters::ViewMethods
 
   included do
@@ -35,18 +36,22 @@ module CaptchaConcern
         flash.delete(:hcaptcha_error)
         yield message
       end
+
       false
     end
   end
 
   def extend_csp_for_captcha!
     policy = request.content_security_policy
+
     return unless captcha_required? && policy.present?
 
     %w(script_src frame_src style_src connect_src).each do |directive|
       values = policy.send(directive)
+
       values << 'https://hcaptcha.com' unless values.include?('https://hcaptcha.com') || values.include?('https:')
       values << 'https://*.hcaptcha.com' unless values.include?('https://*.hcaptcha.com') || values.include?('https:')
+
       policy.send(directive, *values)
     end
   end
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index d63a42557f..81a656a602 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -1048,7 +1048,9 @@ code {
 }
 
 .simple_form .h-captcha {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30px;
 }
 
 .permissions-list {
diff --git a/app/views/auth/confirmations/captcha.html.haml b/app/views/auth/confirmations/captcha.html.haml
index 77f4b35b4f..964d0e63e7 100644
--- a/app/views/auth/confirmations/captcha.html.haml
+++ b/app/views/auth/confirmations/captcha.html.haml
@@ -7,10 +7,12 @@
   = hidden_field_tag :confirmation_token, params[:confirmation_token]
   = hidden_field_tag :redirect_to_app, params[:redirect_to_app]
 
+  %h1.title= t('auth.captcha_confirmation.title')
   %p.lead= t('auth.captcha_confirmation.hint_html')
 
-  .field-group
-    = render_captcha
+  = render_captcha
+
+  %p.lead= t('auth.captcha_confirmation.help_html', email: mail_to(Setting.site_contact_email, nil))
 
   .actions
-    %button.button= t('challenge.confirm')
+    = button_tag t('challenge.confirm'), class: 'button', type: :submit
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 10eac9aeac..f4944cca28 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -993,8 +993,9 @@ en:
   auth:
     apply_for_account: Request an account
     captcha_confirmation:
-      hint_html: Just one more step! To confirm your account, this server requires you to solve a CAPTCHA. You can <a href="/about/more">contact the server administrator</a> if you have questions or need assistance with confirming your account.
-      title: User verification
+      help_html: If you have issues solving the CAPTCHA, you can get in touch with us through %{email} and we can assist you.
+      hint_html: Just one more thing! We need to confirm you're a human (this is so we can keep the spam out!). Solve the CAPTCHA below and click "Continue".
+      title: Security check
     change_password: Password
     confirmations:
       wrong_email_hint: If that e-mail address is not correct, you can change it in account settings.