Feat: enhance recaptcha user experience

What does this MR do and why?

• Related to #4538
• Auto trigger the captcha for user when visiting /users/sign_up page.
• Trigger the captcha for the other tab automatically when user tries to use other registration type.

To enable auto filling reCaptcha, we need to change settings at the vendor website for enabling "interact-less reCaptcha"

Feat: enhance recaptcha user experience

• Trigger user captcha verification when loaded.
• Trigger user captcha verfication when changing tab.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Default

CleanShot_2024-10-12_at_09.50.32

When registration link is opened with specific registration type

CleanShot_2024-10-12_at_09.55.09

When registration with cellphone number has been disabled

CleanShot_2024-10-12_at_09.56.45

How to set up and validate locally

1. Setup shell events

export TC_ID=<TC_ID>
export TC_KEY=<TC_KEY>
export TC_CAPTCHA_ID=<TC_CAPTCHA_ID>
export TC_CAPTCHA_KEY=<TC_CAPTCHA_KEY>
export TC_CAPTCHA_APP_ID=<TC_CAPTCHA_APP_ID>
export TC_CAPTCHA_APP_SECRET_KEY=<GC_CAPTCHA_APP_SECRET>

Boot your GDK

2. After GDK successfully booted, in the terminal

$ rails c

After the rails console booted up, type the following

settings = ::Gitlab::CurrentSettings.current_application_settings
settings.phone_verification_code_enabled = true
settings.save!

# enable tencent_captcha feature flag
::Feature.enabled?(:tencent_captcha)

3. login as admin

go to /admin find Reporting tab as screenshot shows below, then check the Enable reCaptcha checkbox, fill in the secret and app id with any value, then click Save.

Logout or start a new session to sign up page.

Numbered steps to set up and validate the change are strongly suggested.