Skip to content

G
gitlab-ce
Commit 72e5bf59 authored by Tom Quirk's avatar Tom Quirk
Browse files
Options

Clean up oauth buttons on sign in/up 

Replicate the UI from the sign in
page on the sign up page.

Changelog: changed
parent 3d1fac55
Show whitespace changes
Inline Side-by-side
Showing with 45 additions and 85 deletions
app/assets/javascripts/pages/sessions/new/oauth_remember_me.js
View file @ 72e5bf59
......@@ -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/page_bundles/signup.scss
View file @ 72e5bf59
......@@ -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 @ 72e5bf59
......@@ -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 @ 72e5bf59
......@@ -264,12 +264,6 @@ fieldset:disabled a.btn {
.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;
}
......@@ -280,9 +274,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 +340,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 +637,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;
......@@ -768,24 +764,18 @@ svg {
.gl-display-block {
display: block;
}
.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,9 +787,6 @@ svg {
margin-top: 0;
}
}
.gl-text-left {
text-align: left;
}
@import "startup/cloaking";
@include cloak-startup-scss(none);
app/views/devise/shared/_omniauth_box.html.haml
View file @ 72e5bf59
......@@ -7,7 +7,7 @@
.d-flex.justify-content-between.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
......
app/views/devise/shared/_signup_omniauth_provider_list.haml
View file @ 72e5bf59
%label.label-bold.d-block
= _("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)
ee/app/assets/stylesheets/startup/startup-signin.scss
View file @ 72e5bf59
......@@ -264,12 +264,6 @@ fieldset:disabled a.btn {
.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;
}
......@@ -280,9 +274,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 +340,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 +637,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;
......@@ -768,24 +764,18 @@ svg {
.gl-display-block {
display: block;
}
.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,9 +787,6 @@ svg {
margin-top: 0;
}
}
.gl-text-left {
text-align: left;
}
@import "startup/cloaking";
@include cloak-startup-scss(none);
spec/frontend/fixtures/static/oauth_remember_me.html
View file @ 72e5bf59
<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
View file @ 72e5bf59
......@@ -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 @ 72e5bf59
......@@ -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