Implement ArkoseLabs sign-in challenge

What does this MR do and why?

This adds ArkoseLabs' challenge to the sign-in form.

Screenshots or screen recordings

Screen recording
arkose_ux_v4_480p

ArkoseLabs failure	Submitting form without completing the challenge

How to set up and validate locally

1. Set the ARKOSE_LABS_PUBLIC_KEY environment variable:

   export ARKOSE_LABS_PUBLIC_KEY="9F5BDFCD-E895-43B5-8D96-B24E0107B685"

2. Restart the GDK in the same terminal you've set the ARKOSE_LABS_PUBLIC_KEY environment variable:

   gdk restart

3. Enable the :arkose_labs_login_challenge feature flag.

   echo "Feature.enable(:arkose_labs_login_challenge)" | rails c

4. Sign out of your instance (or open an incognito browser window) and navigate to the login form at /users/sign_in.

5. Type a username in the form's top field.

   • If the user is considered safe based on the criteria, or if it doesn't exist, no challenge should appear when the field loses the focus.
   • Otherwise, an Arkose challenge should show up.

Forcing ArkoseLabs challenge's behavior

By following the instructions above, you're relying on ArkoseLabs' decisions on whether or not a challenge should appear. You might want to force it into specific decisions to be able to test all possible outcomes. The setConfig call can be modified to include a data.id property to request specific behaviors:

• 'ML_defence' forces a challenge to appear.
• 'customer_request' results in a suppressed challenge (meaning ArkoseLabs considers your session safe).

Apply the following patch to force a challenge to show up:

diff --git a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
index e9396c26c7d..e6788acbf02 100644
--- a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
+++ b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
@@ -132,6 +132,7 @@ export default {
       const enforcement = await initArkoseLabsScript({ publicKey: this.publicKey });
 
       enforcement.setConfig({
+        data: { id: 'ML_defence' },
         mode: 'inline',
         selector: `.${this.arkoseContainerClass}`,
         onShown: this.onArkoseLabsIframeShown,

Or this patch to simulate a suppressed challenge:

diff --git a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
index e9396c26c7d..88da1bbd3a1 100644
--- a/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
+++ b/ee/app/assets/javascripts/arkose_labs/components/sign_in_arkose_app.vue
@@ -132,6 +132,7 @@ export default {
       const enforcement = await initArkoseLabsScript({ publicKey: this.publicKey });
 
       enforcement.setConfig({
+        data: { id: 'customer_request' },
         mode: 'inline',
         selector: `.${this.arkoseContainerClass}`,
         onShown: this.onArkoseLabsIframeShown,

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Re https://gitlab.com/gitlab-org/gitlab/-/issues/355742

app/views/devise/sessions/_new_base.html.haml

-= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
+= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors js-sign-in-form', aria: { live: 'assertive' }, data: { testid: 'sign-in-form' }}) do |f|
   .form-group
     = f.label _('Username or email'), for: 'user_login', class: 'label-bold'
-    = f.text_field :login, value: @invite_email, class: 'form-control gl-form-input top', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', required: true, title: _('This field is required.'), data: { qa_selector: 'login_field' }
+    = f.text_field :login, value: @invite_email, class: 'form-control gl-form-input top js-username-field', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', required: true, title: _('This field is required.'), data: { qa_selector: 'login_field', testid: 'username-field' }
   .form-group
     = f.label :password, class: 'label-bold'
     = f.password_field :password, class: 'form-control gl-form-input bottom', autocomplete: 'current-password', required: true, title: _('This field is required.'), data: { qa_selector: 'password_field' }
@@ -16,8 +16,10 @@
         - else
           = link_to _('Forgot your password?'), new_password_path(:user)
     %div
-    - if captcha_enabled? || captcha_on_login_required?
+    - if Feature.enabled?(:arkose_labs_login_challenge)
+      = render_if_exists 'devise/sessions/arkose_labs'
+    - elsif captcha_enabled? || captcha_on_login_required?
       = recaptcha_tags nonce: content_security_policy_nonce
 
   .submit-container.move-submit-down
-    = f.submit _('Sign in'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'sign_in_button' }
+    = f.button _('Sign in'), type: :submit, class: "gl-button btn btn-block btn-confirm js-sign-in-button#{' js-no-auto-disable' if Feature.enabled?(:arkose_labs_login_challenge)}", data: { qa_selector: 'sign_in_button', testid: 'sign-in-button' }