Split sign in and sign up for trial flow

Instead of showing tabs defaulting to
sign_in, show sign_up page with a link
to sign in.

app/views/devise/registrations/new.html.haml

@@ -2,5 +2,5 @@
 - add_page_specific_style 'page_bundles/signup'
 
 .signup-page
-  = render 'devise/shared/signup_box'
+  = render 'devise/shared/signup_box', url: registration_path(resource_name), button_text: _('Register'), show_omniauth_providers: omniauth_enabled? && button_based_providers_enabled?
   = render 'devise/shared/sign_in_link'

app/views/devise/shared/_signup_box.html.haml

@@ -2,37 +2,36 @@
 - max_username_length = 255
 - min_username_length = 2
 .gl-mb-3.gl-p-4.gl-border-gray-100.gl-border-1.gl-border-solid.gl-rounded-base
-  = form_for(resource, as: "new_#{resource_name}", url: registration_path(resource_name), html: { class: "new_new_user gl-show-field-errors", "aria-live" => "assertive" }) do |f|
+  = form_for(resource, as: "new_#{resource_name}", url: url, html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive' }) do |f|
     .devise-errors
-      = render "devise/shared/error_messages", resource: resource
+      = render 'devise/shared/error_messages', resource: resource
     - if Feature.enabled?(:invisible_captcha)
       = invisible_captcha
     .name.form-row
       .col.form-group
         = f.label :first_name, _('First name'), for: 'new_user_first_name', class: 'label-bold'
-        = f.text_field :first_name, class: 'form-control top js-block-emoji js-validate-length', :data => { :max_length => max_first_name_length, :max_length_message => _("First name is too long (maximum is %{max_length} characters).") % { max_length: max_first_name_length }, :qa_selector => 'new_user_first_name_field' }, required: true, title: _("This field is required.")
+        = f.text_field :first_name, class: 'form-control top js-block-emoji js-validate-length', :data => { :max_length => max_first_name_length, :max_length_message => s_('SignUp|First name is too long (maximum is %{max_length} characters).') % { max_length: max_first_name_length }, :qa_selector => 'new_user_first_name_field' }, required: true, title: _('This field is required.')
       .col.form-group
         = f.label :last_name, _('Last name'), for: 'new_user_last_name', class: 'label-bold'
-        = f.text_field :last_name, class: "form-control top js-block-emoji js-validate-length", :data => { :max_length => max_last_name_length, :max_length_message => _("Last name is too long (maximum is %{max_length} characters).") % { max_length: max_last_name_length }, :qa_selector => 'new_user_last_name_field' }, required: true, title: _("This field is required.")
+        = f.text_field :last_name, class: 'form-control top js-block-emoji js-validate-length', :data => { :max_length => max_last_name_length, :max_length_message => s_('SignUp|Last name is too long (maximum is %{max_length} characters).') % { max_length: max_last_name_length }, :qa_selector => 'new_user_last_name_field' }, required: true, title: _('This field is required.')
     .username.form-group
       = f.label :username, class: 'label-bold'
-      = f.text_field :username, class: "form-control middle js-block-emoji js-validate-length js-validate-username", :data => { :min_length => min_username_length, :min_length_message => s_("SignUp|Username is too short (minimum is %{min_length} characters).") % { min_length: min_username_length }, :max_length => max_username_length, :max_length_message => s_("SignUp|Username is too long (maximum is %{max_length} characters).") % { max_length: max_username_length }, :qa_selector => 'new_user_username_field' }, pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: _("Please create a username with only alphanumeric characters.")
+      = f.text_field :username, class: 'form-control middle js-block-emoji js-validate-length js-validate-username', :data => { :api_path => suggestion_path, :min_length => min_username_length, :min_length_message => s_('SignUp|Username is too short (minimum is %{min_length} characters).') % { min_length: min_username_length }, :max_length => max_username_length, :max_length_message => s_('SignUp|Username is too long (maximum is %{max_length} characters).') % { max_length: max_username_length }, :qa_selector => 'new_user_username_field' }, pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: _('Please create a username with only alphanumeric characters.')
       %p.validation-error.gl-text-red-500.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is already taken.')
       %p.validation-success.gl-text-green-600.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Username is available.')
       %p.validation-pending.gl-field-error-ignore.gl-mt-2.field-validation.hide= _('Checking username availability...')
     .form-group
       = f.label :email, class: 'label-bold'
-      = f.email_field :email, value: @invite_email, class: "form-control middle", data: { qa_selector: 'new_user_email_field' }, required: true, title: _("Please provide a valid email address.")
+      = f.email_field :email, value: @invite_email, class: 'form-control middle', data: { qa_selector: 'new_user_email_field' }, required: true, title: _('Please provide a valid email address.')
     .form-group.append-bottom-20#password-strength
       = f.label :password, class: 'label-bold'
-      = f.password_field :password, class: "form-control bottom", data: { qa_selector: 'new_user_password_field' }, required: true, pattern: ".{#{@minimum_password_length},}", title: _("Minimum length is %{minimum_password_length} characters.") % { minimum_password_length: @minimum_password_length }
-      %p.gl-field-hint.text-secondary= _('Minimum length is %{minimum_password_length} characters') % { minimum_password_length: @minimum_password_length }
+      = f.password_field :password, class: 'form-control bottom', data: { qa_selector: 'new_user_password_field' }, required: true, pattern: ".{#{@minimum_password_length},}", title: s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length }
+      %p.gl-field-hint.text-secondary= s_('SignUp|Minimum length is %{minimum_password_length} characters.') % { minimum_password_length: @minimum_password_length }
     %div
     - if show_recaptcha_sign_up?
       = recaptcha_tags
     .submit-container
-      = f.submit _("Register"), class: "btn gl-button btn-success", data: { qa_selector: 'new_user_register_button' }
+      = f.submit button_text, class: 'btn gl-button btn-success', data: { qa_selector: 'new_user_register_button' }
     = render 'devise/shared/terms_of_service_notice'
-    - if omniauth_enabled? && button_based_providers_enabled?
+    - if show_omniauth_providers
       = render 'devise/shared/signup_omniauth_providers'
-

ee/app/views/trial_registrations/_signin_box.html.haml

-- if any_form_based_providers_enabled?
-  - if crowd_enabled?
-    .login-box.tab-pane{ id: "crowd", role: 'tabpanel', class: active_when(form_based_auth_provider_has_active_class?(:crowd)) }
-      .login-body
-        = render 'devise/sessions/new_crowd'
-
-  = render_if_exists 'devise/sessions/new_kerberos_tab'
-
-  - ldap_servers.each_with_index do |server, i|
-    .login-box.tab-pane{ id: "#{server['provider_name']}", role: 'tabpanel', class: active_when(i == 0 && form_based_auth_provider_has_active_class?(:ldapmain)) }
-      .login-body
-        = render 'devise/sessions/new_ldap', server: server
-
-  = render_if_exists 'devise/sessions/new_smartcard'
-
-  - if password_authentication_enabled_for_web?
-    .login-box.tab-pane{ id: 'login-pane', role: 'tabpanel' }
-      .login-body
-        = render 'signin_form'
-
-- elsif password_authentication_enabled_for_web?
-  .login-box.tab-pane.active{ id: 'login-pane', role: 'tabpanel' }
-    .login-body
-      = render 'signin_form'

ee/app/views/trial_registrations/_signin_form.html.haml

-= form_for(User.new, url: session_path(:user), html: { id: 'user', class: 'gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
-  .form-group
-    = f.label _('Username or email'), for: 'user_login', class: 'label-bold'
-    = f.text_field :login, class: 'form-control top', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', required: true, title: _('This field is required.'), data: { qa_selector: 'login_field' }
-  .form-group
-    = f.label :password, for: 'user_password', class: 'label-bold'
-    = f.password_field :password, class: 'form-control bottom', required: true, title: _('This field is required.'), data: { qa_selector: 'password_field' }
-  .remember-me
-    %label{ for: 'user_remember_me' }
-      = f.check_box :remember_me, class: 'remember-me-checkbox'
-      %span
-        = _('Remember me')
-    .float-right
-      - if unconfirmed_email?
-        = link_to _('Resend confirmation email'), new_user_confirmation_path
-      - else
-        = link_to _('Forgot your password?'), new_password_path(:user)
-
-  .submit-container.move-submit-down
-    = f.submit _('Continue'), class: 'btn btn-success', data: { qa_selector: 'sign_in_button' }

ee/app/views/trial_registrations/_signup_box.html.haml

-- max_first_name_length = max_last_name_length = 127
-- max_username_length = 255
-#register-pane.tab-pane.login-box{ role: 'tabpanel' }
-  .login-body
-    = form_for(user, as: :new_user, url: trial_registrations_path, html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive' }) do |f|
-      .devise-errors
-        = render 'devise/shared/error_messages', resource: user
-      - if Feature.enabled?(:invisible_captcha)
-        = invisible_captcha
-      .name.form-row
-        .col.form-group
-          = f.label :first_name, _('First name'), for: 'new_user_first_name', class: 'label-bold'
-          = f.text_field :first_name, class: 'form-control top js-block-emoji js-validate-length', :data => { :max_length => max_first_name_length, :max_length_message => s_("SignUp|First Name is too long (maximum is %{max_length} characters).") % { max_length: max_first_name_length }, :qa_selector => 'new_user_firstname_field' }, required: true, title: _("This field is required.")
-        .col.form-group
-          = f.label :last_name, _('Last name'), for: 'new_user_last_name', class: 'label-bold'
-          = f.text_field :last_name, class: "form-control top js-block-emoji js-validate-length", :data => { :max_length => max_last_name_length, :max_length_message => s_("SignUp|Last Name is too long (maximum is %{max_length} characters).") % { max_length: max_last_name_length }, :qa_selector => 'new_user_lastname_field' }, required: true, title: _("This field is required.")
-      .username.form-group
-        = f.label :username, for: 'new_user_username', class: 'label-bold'
-        = f.text_field :username, class: 'form-control middle js-block-emoji js-validate-length js-validate-username', :data => { :max_length => max_username_length, :api_path => suggestion_path, :max_length_message => s_("SignUp|Username is too long (maximum is %{max_length} characters).") % { max_last_name_length: max_username_length }, :qa_selector => 'new_user_username_field' }, pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: _("Please create a username with only alphanumeric characters.")
-        %p.validation-error.gl-field-error-ignore.field-validation.hide= _('Username is already taken.')
-        %p.validation-success.gl-field-error-ignore.field-validation.hide= _('Username is available.')
-        %p.validation-pending.gl-field-error-ignore.field-validation.hide= _('Checking username availability...')
-      .form-group
-        = f.label :email, for: 'new_user_email', class: 'label-bold'
-        = f.email_field :email, class: 'form-control middle', data: { qa_selector: 'new_user_email_field' }, required: true, title: _("Please provide a valid email address.")
-      .form-group.append-bottom-20#password-strength
-        = f.label :password, for: 'new_user_password', class: 'label-bold'
-        = f.password_field :password, class: 'form-control bottom', data: { qa_selector: 'new_user_password_field' }, required: true, pattern: ".{#{@minimum_password_length},}", title: _("Minimum length is %{minimum_password_length} characters.") % { minimum_password_length: @minimum_password_length }
-        %p.gl-field-hint.text-secondary= _('Minimum length is %{minimum_password_length} characters') % { minimum_password_length: @minimum_password_length }
-      %div
-      - if show_recaptcha_sign_up?
-        = recaptcha_tags
-      .submit-container
-        = f.submit _("Continue"), class: "btn-register btn", data: { qa_selector: 'new_user_register_button' }
-      = render 'devise/shared/terms_of_service_notice'

ee/app/views/trial_registrations/new.html.haml

 - page_title _('Start a Free Gold Trial')
+- add_page_specific_style 'page_bundles/signup'
 
-%h2.center.py-6
+%h2.center.pt-6.pb-4.gl-mb-0
   = _('Start a Free Gold Trial')
 
-%div
-  - if any_form_based_providers_enabled?
-    = render 'devise/shared/tabs_ldap'
-  - else
-    = render 'devise/shared/tabs_normal'
-  .tab-content
-    - if password_authentication_enabled_for_web? || ldap_sign_in_enabled? || crowd_enabled?
-      = render 'signin_box'
-
-    -# Signup only makes sense if you can also sign-in
-    - if allow_signup?
-      = render 'signup_box', user: resource
-
-  -# Show a message if none of the mechanisms above are enabled
-  - if !password_authentication_enabled_for_web? && !ldap_sign_in_enabled? && !(omniauth_enabled? && devise_mapping.omniauthable?)
-    %div
-      = _('No authentication methods configured.')
+.signup-page
+  = render 'devise/shared/signup_box', url: trial_registrations_path, button_text: _('Continue'), show_omniauth_providers: false
+  = render 'devise/shared/sign_in_link'

ee/changelogs/unreleased/split-sign-in-sign-up-for-trial-flow.yml

+---
+title: Split sign in and sign up for Trial flow
+merge_request: 47179
+author:
+type: changed

ee/spec/features/trial_registrations/signin_spec.rb

@@ -14,11 +14,13 @@ RSpec.describe 'Trial Sign In' do
       url_params = { glm_source: 'any-source', glm_content: 'any-content' }
       visit(new_trial_registration_path(url_params))
 
+      click_on 'Sign in'
+
       within('div#login-pane') do
         fill_in 'user_login', with: user.email
         fill_in 'user_password', with: '12345678'
 
-        click_button 'Continue'
+        click_button 'Sign in'
       end
 
       expect(current_url).to eq(new_trial_url(url_params))

ee/spec/features/trial_registrations/signup_spec.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Trial Sign Up', :js do
+RSpec.describe 'Trial Sign Up' do
   let(:user_attrs) { attributes_for(:user, first_name: 'GitLab', last_name: 'GitLab') }
 
   describe 'on GitLab.com' do
@@ -15,11 +15,9 @@ RSpec.describe 'Trial Sign Up', :js do
 
       it 'shows the error about existing username' do
         visit new_trial_registration_path
-        click_on 'Register'
+        click_on 'Continue'
 
-        within('div#register-pane') do
-          fill_in 'new_user_username', with: existing_user[:username]
-        end
+        fill_in 'new_user_username', with: existing_user[:username]
 
         expect(page).to have_content('Username is already taken.')
       end
@@ -28,17 +26,15 @@ RSpec.describe 'Trial Sign Up', :js do
     context 'with the available username' do
       it 'registers the user and proceeds to the next step' do
         visit new_trial_registration_path
-        click_on 'Register'
+        click_on 'Continue'
 
-        within('div#register-pane') do
-          fill_in 'new_user_first_name', with: user_attrs[:first_name]
-          fill_in 'new_user_last_name',  with: user_attrs[:last_name]
-          fill_in 'new_user_username',   with: user_attrs[:username]
-          fill_in 'new_user_email',      with: user_attrs[:email]
-          fill_in 'new_user_password',   with: user_attrs[:password]
+        fill_in 'new_user_first_name', with: user_attrs[:first_name]
+        fill_in 'new_user_last_name',  with: user_attrs[:last_name]
+        fill_in 'new_user_username',   with: user_attrs[:username]
+        fill_in 'new_user_email',      with: user_attrs[:email]
+        fill_in 'new_user_password',   with: user_attrs[:password]
 
-          click_button 'Continue'
-        end
+        click_button 'Continue'
 
         wait_for_requests
 
@@ -51,32 +47,7 @@ RSpec.describe 'Trial Sign Up', :js do
       end
     end
 
-    context 'entering' do
-      using RSpec::Parameterized::TableSyntax
-
-      where(:case_name, :first_name, :last_name, :suggested_username) do
-        'first name'               | 'foobar'  | nil      | 'foobar'
-        'last name'                | nil       | 'foobar' | 'foobar'
-        'first name and last name' | 'foo'     | 'bar'    | 'foo_bar'
-      end
-
-      with_them do
-        it 'suggests the username' do
-          visit new_trial_registration_path
-          click_on 'Register'
-
-          within('div#register-pane') do
-            fill_in 'new_user_first_name', with: first_name if first_name
-            fill_in 'new_user_last_name', with: last_name if last_name
-          end
-          find('body').click
-
-          expect(page).to have_field('new_user_username', with: suggested_username)
-        end
-      end
-    end
-
-    context 'entering' do
+    context 'entering', :js do
       using RSpec::Parameterized::TableSyntax
 
       where(:case_name, :first_name, :last_name, :suggested_username) do
@@ -88,12 +59,10 @@ RSpec.describe 'Trial Sign Up', :js do
       with_them do
         it 'suggests the username' do
           visit new_trial_registration_path
-          click_on 'Register'
+          click_on 'Continue'
 
-          within('div#register-pane') do
-            fill_in 'new_user_first_name', with: first_name if first_name
-            fill_in 'new_user_last_name', with: last_name if last_name
-          end
+          fill_in 'new_user_first_name', with: first_name if first_name
+          fill_in 'new_user_last_name', with: last_name if last_name
           find('body').click
 
           expect(page).to have_field('new_user_username', with: suggested_username)

locale/gitlab.pot

@@ -11915,9 +11915,6 @@ msgstr ""
 msgid "First name"
 msgstr ""
 
-msgid "First name is too long (maximum is %{max_length} characters)."
-msgstr ""
-
 msgid "First seen"
 msgstr ""
 
@@ -15653,9 +15650,6 @@ msgstr ""
 msgid "Last name"
 msgstr ""
 
-msgid "Last name is too long (maximum is %{max_length} characters)."
-msgstr ""
-
 msgid "Last reply by"
 msgstr ""
 
@@ -17528,12 +17522,6 @@ msgstr ""
 msgid "Minimum interval in days"
 msgstr ""
 
-msgid "Minimum length is %{minimum_password_length} characters"
-msgstr ""
-
-msgid "Minimum length is %{minimum_password_length} characters."
-msgstr ""
-
 msgid "Minimum password length (number of characters)"
 msgstr ""
 
@@ -22367,9 +22355,6 @@ msgstr ""
 msgid "Remediations"
 msgstr ""
 
-msgid "Remember me"
-msgstr ""
-
 msgid "Remind later"
 msgstr ""
 
@@ -24931,10 +24916,13 @@ msgstr ""
 msgid "Sign-up restrictions"
 msgstr ""
 
-msgid "SignUp|First Name is too long (maximum is %{max_length} characters)."
+msgid "SignUp|First name is too long (maximum is %{max_length} characters)."
+msgstr ""
+
+msgid "SignUp|Last name is too long (maximum is %{max_length} characters)."
 msgstr ""
 
-msgid "SignUp|Last Name is too long (maximum is %{max_length} characters)."
+msgid "SignUp|Minimum length is %{minimum_password_length} characters."
 msgstr ""
 
 msgid "SignUp|Username is too long (maximum is %{max_length} characters)."