Add social sign up on new sign up flow

We removed them in this experiment so far. Adding them now with
slight design changes and removing the "remember me" checkbox.

It also prioritizes google and github sign in since these are
the most used OAuth logins.

app/assets/stylesheets/pages/experimental_separate_sign_up.scss

@@ -12,6 +12,7 @@
     max-width: 900px;
 
     &.navless-container {
+      padding: 35px $gl-padding;
       // overriding .devise-layout-html.navless-container to support the sticky footer
       // without having a header on size xs
       @include media-breakpoint-down(xs) {
@@ -24,6 +25,7 @@
   .signup-heading h2 {
     font-weight: $gl-font-weight-bold;
     padding: 0 $gl-padding;
+    font-size: $gl-font-size-28;
 
     @include media-breakpoint-down(md) {
       font-size: $gl-font-size-large;
@@ -49,4 +51,35 @@
       color: $red-700;
     }
   }
+
+  .omniauth-divider {
+    &::before,
+    &::after {
+      content: '';
+      flex: 1;
+      border-bottom: 1px solid $gray-dark;
+      margin: $gl-padding-24 0;
+    }
+
+    &::before {
+      margin-right: $gl-padding;
+    }
+
+    &::after {
+      margin-left: $gl-padding;
+    }
+  }
+
+  .omniauth-btn {
+    width: 48%;
+
+    @include media-breakpoint-down(md) {
+      width: 100%;
+    }
+
+    img {
+      width: $default-icon-size;
+      height: $default-icon-size;
+    }
+  }
 }

app/helpers/auth_helper.rb

@@ -89,7 +89,17 @@ module AuthHelper
   def enabled_button_based_providers
     disabled_providers = Gitlab::CurrentSettings.disabled_oauth_sign_in_sources || []
 
-    button_based_providers.map(&:to_s) - disabled_providers
+    providers = button_based_providers.map(&:to_s) - disabled_providers
+    providers.sort_by do |provider|
+      case provider
+      when 'google_oauth2'
+        0
+      when 'github'
+        1
+      else
+        2
+      end
+    end
   end
 
   def button_based_providers_enabled?

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

@@ -41,3 +41,5 @@
         = recaptcha_tags
       .submit-container.mt-3
         = f.submit _("Register"), class: "btn-register btn btn-block btn-success mb-0 p-2", data: { qa_selector: 'new_user_register_button' }
+      - if omniauth_enabled? && button_based_providers_enabled?
+        = render 'devise/shared/experimental_separate_sign_up_flow_omniauth_box'

app/views/devise/shared/_experimental_separate_sign_up_flow_omniauth_box.haml

+.omniauth-divider.d-flex.align-items-center.text-center
+  = _("or")
+%label.label-bold.d-block
+  = _("Create an account using:")
+- providers = enabled_button_based_providers
+.d-flex.justify-content-between.flex-wrap
+  - providers.each do |provider|
+    - has_icon = provider_has_icon?(provider)
+    = link_to omniauth_authorize_path(:user, provider), method: :post, class: "btn d-flex align-items-center omniauth-btn text-left oauth-login mb-2 p-2 #{qa_class_for_provider(provider)}", id: "oauth-login-#{provider}" do
+      - if has_icon
+        = provider_image_tag(provider)
+      %span.ml-2
+        = label_for_provider(provider)

app/views/layouts/devise_experimental_separate_sign_up_flow.html.haml

@@ -9,10 +9,10 @@
         = render "layouts/broadcast"
         .content
           = render "layouts/flash"
-          .row.mb-3
+          .row.mb-6
             .col-sm-8.offset-sm-2.col-md-6.offset-md-3.new-session-forms-container
               = render_if_exists 'layouts/devise_help_text'
-              .text-center.signup-heading.mt-3.mb-3
+              .text-center.signup-heading.mb-3
                 = image_tag(image_url('logo.svg'), class: 'gitlab-logo', alt: 'GitLab Logo')
                 - if content_for?(:page_title)
                   %h2= yield :page_title

changelogs/unreleased/reorder-signup-omniauth-options.yml

+---
+title: Reorder signup omniauth options
+merge_request: 23082
+author:
+type: changed

locale/gitlab.pot

@@ -5344,6 +5344,9 @@ msgstr ""
 msgid "Create a personal access token on your account to pull or push via %{protocol}."
 msgstr ""
 
+msgid "Create an account using:"
+msgstr ""
+
 msgid "Create an issue"
 msgstr ""
 
@@ -22644,6 +22647,9 @@ msgstr ""
 msgid "opened %{timeAgo}"
 msgstr ""
 
+msgid "or"
+msgstr ""
+
 msgid "out of %d total test"
 msgid_plural "out of %d total tests"
 msgstr[0] ""

spec/helpers/auth_helper_spec.rb

@@ -73,12 +73,17 @@ describe AuthHelper do
 
   describe 'enabled_button_based_providers' do
     before do
-      allow(helper).to receive(:auth_providers) { [:twitter, :github] }
+      allow(helper).to receive(:auth_providers) { [:twitter, :github, :google_oauth2] }
     end
 
     context 'all providers are enabled to sign in' do
       it 'returns all the enabled providers from settings' do
-        expect(helper.enabled_button_based_providers).to include('twitter', 'github')
+        expect(helper.enabled_button_based_providers).to include('twitter', 'github', 'google_oauth2')
+      end
+
+      it 'puts google and github in the beginning' do
+        expect(helper.enabled_button_based_providers.first).to eq('google_oauth2')
+        expect(helper.enabled_button_based_providers.second).to eq('github')
       end
     end