Merge branch 'fix-sign-up-oauth-buttons' into 'master'

Make OAuth buttons full-width on Sign In/Sign Up pages

See merge request gitlab-org/gitlab!71263

app/assets/javascripts/pages/sessions/new/oauth_remember_me.js

@@ -20,7 +20,7 @@ export default class OAuthRememberMe {
   toggleRememberMe(event) {
     const rememberMe = $(event.target).is(':checked');
 
-    $('.oauth-login', this.container).each((i, element) => {
+    $('.js-oauth-login', this.container).each((i, element) => {
       const $form = $(element).parent('form');
       const href = $form.attr('action');
 

app/assets/stylesheets/framework/forms.scss

@@ -196,14 +196,6 @@ label {
   }
 }
 
-@include media-breakpoint-down(xs) {
-  .remember-me {
-    .remember-me-checkbox {
-      margin-top: 0;
-    }
-  }
-}
-
 .input-icon-wrapper,
 .select-wrapper {
   position: relative;

app/assets/stylesheets/page_bundles/signup.scss

@@ -26,14 +26,6 @@
     }
   }
 
-  .omniauth-btn {
-    width: 48%;
-
-    @include media-breakpoint-down(md) {
-      width: 100%;
-    }
-  }
-
   .decline-page {
     width: 350px;
   }

app/assets/stylesheets/pages/login.scss

@@ -99,11 +99,6 @@
       padding: 0;
       border: 0;
       background: none;
-      margin-bottom: $gl-padding;
-    }
-
-    .omniauth-btn {
-      width: 100%;
     }
   }
 

app/assets/stylesheets/startup/startup-signin.scss

@@ -258,21 +258,6 @@ fieldset:disabled a.btn {
   align-items: center;
   justify-content: space-between;
 }
-.d-block {
-  display: block !important;
-}
-.d-flex {
-  display: flex !important;
-}
-.flex-wrap {
-  flex-wrap: wrap !important;
-}
-.justify-content-between {
-  justify-content: space-between !important;
-}
-.align-items-center {
-  align-items: center !important;
-}
 .fixed-top {
   position: fixed;
   top: 0;
@@ -280,9 +265,6 @@ fieldset:disabled a.btn {
   left: 0;
   z-index: 1030;
 }
-.ml-2 {
-  margin-left: 0.5rem !important;
-}
 .mt-3 {
   margin-top: 1rem !important;
 }
@@ -349,6 +331,15 @@ fieldset:disabled a.btn {
   font-size: 0.875rem;
   border-radius: 0.25rem;
 }
+.gl-button.gl-button .gl-button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
 .gl-button.gl-button .gl-button-icon {
   height: 1rem;
   width: 1rem;
@@ -637,10 +628,6 @@ svg {
   padding: 0;
   border: 0;
   background: none;
-  margin-bottom: 16px;
-}
-.login-page .omniauth-container .omniauth-btn {
-  width: 100%;
 }
 .login-page .new-session-tabs {
   display: flex;
@@ -771,21 +758,18 @@ svg {
 .gl-align-items-center {
   align-items: center;
 }
+.gl-flex-wrap {
+  flex-wrap: wrap;
+}
 .gl-w-full {
   width: 100%;
 }
-.gl-p-2 {
-  padding: 0.25rem;
-}
 .gl-p-4 {
   padding: 0.75rem;
 }
 .gl-mt-2 {
   margin-top: 0.25rem;
 }
-.gl-mb-2 {
-  margin-bottom: 0.25rem;
-}
 .gl-mb-3 {
   margin-bottom: 0.5rem;
 }
@@ -797,8 +781,8 @@ svg {
     margin-top: 0;
   }
 }
-.gl-text-left {
-  text-align: left;
+.gl-font-weight-bold {
+  font-weight: 600;
 }
 
 @import "startup/cloaking";

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

@@ -6,10 +6,10 @@
     = f.label :password, class: 'label-bold'
     = f.password_field :password, class: 'form-control gl-form-input bottom', required: true, title: _('This field is required.'), data: { qa_selector: 'password_field' }
   - if devise_mapping.rememberable?
-    .remember-me
+    %div
       %label{ for: 'user_remember_me' }
-        = f.check_box :remember_me, class: 'remember-me-checkbox'
-        %span Remember me
+        = f.check_box :remember_me
+        %span= _('Remember me')
       .float-right
         - if unconfirmed_email?
           = link_to _('Resend confirmation email'), new_user_confirmation_path

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

 - hide_remember_me = local_assigns.fetch(:hide_remember_me, false)
 
 .omniauth-container.gl-mt-5
-  %label.label-bold.d-block
+  %label.gl-font-weight-bold
     = _('Sign in with')
   - providers = enabled_button_based_providers
-  .d-flex.justify-content-between.flex-wrap
+  .gl-display-flex.gl-justify-content-between.gl-flex-wrap
     - providers.each do |provider|
       - has_icon = provider_has_icon?(provider)
-      = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", class: "btn gl-button btn-default omniauth-btn oauth-login #{qa_class_for_provider(provider)}", form: { class: 'gl-w-full' } do
+      = button_to omniauth_authorize_path(:user, provider), id: "oauth-login-#{provider}", class: "btn gl-button btn-default gl-w-full js-oauth-login #{qa_class_for_provider(provider)}", form: { class: 'gl-w-full gl-mb-3' } do
         - if has_icon
           = provider_image_tag(provider)
         %span.gl-button-text
           = label_for_provider(provider)
   - unless hide_remember_me
-    %fieldset.remember-me
+    %fieldset
       %label
-        = check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox'
+        = check_box_tag :remember_me, nil, false
         %span
           = _('Remember me')

app/views/devise/shared/_signup_omniauth_provider_list.haml

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

app/views/devise/shared/_signup_omniauth_providers.haml

-.omniauth-divider.d-flex.align-items-center.text-center
+.omniauth-divider.gl-display-flex.gl-align-items-center
   = _("or")
 = render 'devise/shared/signup_omniauth_provider_list', providers: enabled_button_based_providers

app/views/devise/shared/_signup_omniauth_providers_top.haml

 = render 'devise/shared/signup_omniauth_provider_list', providers: popular_enabled_button_based_providers
-.omniauth-divider.d-flex.align-items-center.text-center
+.omniauth-divider.gl-display-flex.gl-align-items-center
   = _("or")

ee/app/assets/stylesheets/startup/startup-signin.scss

@@ -258,21 +258,6 @@ fieldset:disabled a.btn {
   align-items: center;
   justify-content: space-between;
 }
-.d-block {
-  display: block !important;
-}
-.d-flex {
-  display: flex !important;
-}
-.flex-wrap {
-  flex-wrap: wrap !important;
-}
-.justify-content-between {
-  justify-content: space-between !important;
-}
-.align-items-center {
-  align-items: center !important;
-}
 .fixed-top {
   position: fixed;
   top: 0;
@@ -280,9 +265,6 @@ fieldset:disabled a.btn {
   left: 0;
   z-index: 1030;
 }
-.ml-2 {
-  margin-left: 0.5rem !important;
-}
 .mt-3 {
   margin-top: 1rem !important;
 }
@@ -349,6 +331,15 @@ fieldset:disabled a.btn {
   font-size: 0.875rem;
   border-radius: 0.25rem;
 }
+.gl-button.gl-button .gl-button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
 .gl-button.gl-button .gl-button-icon {
   height: 1rem;
   width: 1rem;
@@ -637,10 +628,6 @@ svg {
   padding: 0;
   border: 0;
   background: none;
-  margin-bottom: 16px;
-}
-.login-page .omniauth-container .omniauth-btn {
-  width: 100%;
 }
 .login-page .new-session-tabs {
   display: flex;
@@ -771,21 +758,18 @@ svg {
 .gl-align-items-center {
   align-items: center;
 }
+.gl-flex-wrap {
+  flex-wrap: wrap;
+}
 .gl-w-full {
   width: 100%;
 }
-.gl-p-2 {
-  padding: 0.25rem;
-}
 .gl-p-4 {
   padding: 0.75rem;
 }
 .gl-mt-2 {
   margin-top: 0.25rem;
 }
-.gl-mb-2 {
-  margin-bottom: 0.25rem;
-}
 .gl-mb-3 {
   margin-bottom: 0.5rem;
 }
@@ -797,8 +781,8 @@ svg {
     margin-top: 0;
   }
 }
-.gl-text-left {
-  text-align: left;
+.gl-font-weight-bold {
+  font-weight: 600;
 }
 
 @import "startup/cloaking";

spec/frontend/fixtures/static/oauth_remember_me.html

 <div id="oauth-container">
-<input id="remember_me" type="checkbox">
+  <input id="remember_me" type="checkbox" />
 
-<form method="post" action="http://example.com/">
-  <button class="oauth-login twitter" type="submit">
+  <form method="post" action="http://example.com/">
+    <button class="js-oauth-login twitter" type="submit">
       <span>Twitter</span>
     </button>
-</form>
+  </form>
 
-<form method="post" action="http://example.com/">
-  <button class="oauth-login github" type="submit">
+  <form method="post" action="http://example.com/">
+    <button class="js-oauth-login github" type="submit">
       <span>GitHub</span>
     </button>
-</form>
+  </form>
 
-<form method="post" action="http://example.com/?redirect_fragment=L1">
-  <button class="oauth-login facebook" type="submit">
+  <form method="post" action="http://example.com/?redirect_fragment=L1">
+    <button class="js-oauth-login facebook" type="submit">
       <span>Facebook</span>
     </button>
-</form>
-
+  </form>
 </div>

spec/frontend/oauth_remember_me_spec.js

@@ -3,7 +3,7 @@ import OAuthRememberMe from '~/pages/sessions/new/oauth_remember_me';
 
 describe('OAuthRememberMe', () => {
   const findFormAction = (selector) => {
-    return $(`#oauth-container .oauth-login${selector}`).parent('form').attr('action');
+    return $(`#oauth-container .js-oauth-login${selector}`).parent('form').attr('action');
   };
 
   beforeEach(() => {

spec/frontend/pages/sessions/new/preserve_url_fragment_spec.js

@@ -44,7 +44,7 @@ describe('preserve_url_fragment', () => {
     });
 
     it('when "remember-me" is present', () => {
-      $('.omniauth-btn')
+      $('.js-oauth-login')
         .parent('form')
         .attr('action', (i, href) => `${href}?remember_me=1`);