Skip to content

G
gitlab-ce
Commit 53b54f00 authored by Andrew Fontaine's avatar Andrew Fontaine
Browse files
Options

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
parents 2ce7fe66 41bc9498
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 115 deletions
app/assets/javascripts/pages/sessions/new/oauth_remember_me.js
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
- 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
View file @ 53b54f00
%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
View file @ 53b54f00
.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
View file @ 53b54f00
= 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
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
<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">
<span>Twitter</span>
</button>
</form>
<form method="post" action="http://example.com/">
<button class="js-oauth-login twitter" type="submit">
<span>Twitter</span>
</button>
</form>
<form method="post" action="http://example.com/">
<button class="oauth-login github" type="submit">
<span>GitHub</span>
</button>
</form>
<form method="post" action="http://example.com/?redirect_fragment=L1">
<button class="oauth-login facebook" type="submit">
<span>Facebook</span>
</button>
</form>
<form method="post" action="http://example.com/">
<button class="js-oauth-login github" type="submit">
<span>GitHub</span>
</button>
</form>
<form method="post" action="http://example.com/?redirect_fragment=L1">
<button class="js-oauth-login facebook" type="submit">
<span>Facebook</span>
</button>
</form>
</div>
spec/frontend/oauth_remember_me_spec.js
View file @ 53b54f00
......@@ -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
View file @ 53b54f00
......@@ -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`);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7