Merge branch 'nicolasdular/new-signup-omniauth' into 'master'

Add social sign up on new sign up flow

See merge request gitlab-org/gitlab!23082

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

@@ -5361,6 +5361,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 ""
 
@@ -22721,6 +22724,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