Merge branch 'eduardosanz/vue-password-tests-2' into 'master'

Convert Admin Mode form to Pajamas

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/124326



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Miranda Fluharty <mfluharty@gitlab.com>
Approved-by: Jarka Košanová <jarka@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Alex Pooley <apooley@gitlab.com>
Co-authored-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Co-authored-by: Aboobacker MK <akarakath@gitlab.com>

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

-= form_tag(admin_session_path, method: :post, class: 'new_user gl-show-field-errors', 'aria-live': 'assertive') do
+= gitlab_ui_form_for(:user, url: admin_session_path, html: { class: 'gl-p-5 gl-show-field-errors', aria: { live: 'assertive' } }) do |f|
   .form-group
-    = label_tag :user_password, _('Password'), class: 'label-bold'
-    = password_field_tag 'user[password]', nil, { class: 'form-control js-password', data: { id: 'user_password', name: 'user[password]', qa_selector: 'password_field', testid: 'password-field' } }
+    = f.label :password, _('Password')
+    = f.password_field :password, class: 'form-control js-password', data: { id: 'user_password', name: 'user[password]', qa_selector: 'password_field', testid: 'password-field' }
 
-  .submit-container
-    = submit_tag _('Enter admin mode'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'enter_admin_mode_button' }
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { data: { qa_selector: 'enter_admin_mode_button' } }) do
+    = _('Enter admin mode')

app/views/admin/sessions/_signin_box.html.haml

@@ -12,6 +12,6 @@
   = render_if_exists 'devise/sessions/new_smartcard'
 
 - if allow_admin_mode_password_authentication_for_web?
-  .login-box.tab-pane.gl-p-5{ id: 'login-pane', role: 'tabpanel', class: active_when(!any_form_based_providers_enabled?) }
+  .login-box.tab-pane{ id: 'login-pane', role: 'tabpanel', class: active_when(!any_form_based_providers_enabled?) }
     .login-body
       = render 'admin/sessions/new_base'

app/views/admin/sessions/new.html.haml

 - page_title _('Enter admin mode')
 - add_page_specific_style 'page_bundles/login'
 
-.row.justify-content-center
+.row.gl-mt-5.justify-content-center
   .col-md-5.new-session-forms-container
     .login-page
       #signin-container{ class: ('borderless' if Feature.enabled?(:restyle_login_page, @project)) }

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

@@ -7,7 +7,7 @@
     = f.text_field :username, name: :username, autocomplete: :username, class: 'form-control gl-form-input', title: _('This field is required.'), autofocus: 'autofocus', required: true
   .form-group
     = f.label :password, _('Password')
-    = f.text_field :vue_password_placeholder, class: 'form-control gl-form-input js-password', data: { id: "#{:crowd}_password", name: 'password' }
+    %input.form-control.gl-form-input.js-password{ data: { id: 'crowd_password', name: 'password' } }
 
   - if render_remember_me
     = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { name: :remember_me, autocomplete: 'off' }

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

@@ -9,7 +9,7 @@
     = f.text_field :username, name: :username, autocomplete: :username, class: 'form-control gl-form-input', title: _('This field is required.'), autofocus: 'autofocus', data: { qa_selector: 'username_field' }, required: true
   .form-group
     = f.label :password, _('Password')
-    = f.text_field :vue_password_placeholder, class: 'form-control gl-form-input js-password', data: { id: "#{provider}_password", name: 'password', qa_selector: 'password_field' }
+    %input.form-control.gl-form-input.js-password{ data: { id: "#{provider}_password", name: 'password', qa_selector: 'password_field' } }
 
   - if render_remember_me
     = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { name: :remember_me, autocomplete: 'off' }