Commit 857067bb authored by Phil Hughes's avatar Phil Hughes

Merge branch '44943-update-presentation-for-sso-providers-on-log-in-page' into 'master'

Resolve "Update presentation for SSO providers on log in page"

Closes #44943

See merge request gitlab-org/gitlab-ce!21233
parents f965bc9e 379c3133
app/assets/images/auth_buttons/azure_64.png

695 Bytes | W: | H:

app/assets/images/auth_buttons/azure_64.png

199 Bytes | W: | H:

app/assets/images/auth_buttons/azure_64.png
app/assets/images/auth_buttons/azure_64.png
app/assets/images/auth_buttons/azure_64.png
app/assets/images/auth_buttons/azure_64.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -229,8 +229,8 @@ ...@@ -229,8 +229,8 @@
svg { svg {
margin-bottom: 1px; margin-bottom: 1px;
height: 18px; height: $default-icon-size;
width: 18px; width: $default-icon-size;
border-radius: 50%; border-radius: 50%;
path { path {
......
...@@ -149,7 +149,8 @@ ...@@ -149,7 +149,8 @@
&.btn-success, &.btn-success,
&.btn-new, &.btn-new,
&.btn-create, &.btn-create,
&.btn-save { &.btn-save,
&.btn-register {
@include btn-green; @include btn-green;
} }
...@@ -172,8 +173,7 @@ ...@@ -172,8 +173,7 @@
} }
&.btn-info, &.btn-info,
&.btn-primary, &.btn-primary {
&.btn-register {
@include btn-blue; @include btn-blue;
} }
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
.btn-terminal { .btn-terminal {
svg { svg {
height: 14px; height: 14px;
width: 18px; width: $default-icon-size;
} }
} }
......
...@@ -216,8 +216,8 @@ ...@@ -216,8 +216,8 @@
vertical-align: inherit; vertical-align: inherit;
img { img {
height: 18px; height: $default-icon-size;
width: 18px; width: $default-icon-size;
} }
} }
......
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
&, &,
.toggle-icon-svg { .toggle-icon-svg {
width: 18px; width: $default-icon-size;
height: 18px; height: $default-icon-size;
} }
.toggle-icon-svg { .toggle-icon-svg {
......
...@@ -250,7 +250,7 @@ $container-text-max-width: 540px; ...@@ -250,7 +250,7 @@ $container-text-max-width: 540px;
$gl-avatar-size: 40px; $gl-avatar-size: 40px;
$border-radius-default: 4px; $border-radius-default: 4px;
$border-radius-small: 2px; $border-radius-small: 2px;
$settings-icon-size: 18px; $default-icon-size: 18px;
$layout-link-gray: #7e7c7c; $layout-link-gray: #7e7c7c;
$btn-side-margin: 10px; $btn-side-margin: 10px;
$btn-sm-side-margin: 7px; $btn-sm-side-margin: 7px;
......
...@@ -100,6 +100,22 @@ ...@@ -100,6 +100,22 @@
p { p {
margin: 0; margin: 0;
} }
.omniauth-btn {
margin-bottom: $gl-padding;
width: 48%;
padding: $gl-padding-8;
@include media-breakpoint-down(md) {
width: 100%;
}
img {
width: $default-icon-size;
height: $default-icon-size;
margin-right: $gl-padding;
}
}
} }
.new-session-tabs { .new-session-tabs {
...@@ -169,10 +185,6 @@ ...@@ -169,10 +185,6 @@
} }
} }
label {
font-weight: $gl-font-weight-normal;
}
.submit-container { .submit-container {
margin-top: 16px; margin-top: 16px;
} }
...@@ -200,15 +212,6 @@ ...@@ -200,15 +212,6 @@
} }
} }
.oauth-image-link {
margin-right: 10px;
img {
width: 32px;
height: 32px;
}
}
.devise-layout-html { .devise-layout-html {
margin: 0; margin: 0;
padding: 0; padding: 0;
......
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
.settings-list-icon { .settings-list-icon {
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
font-size: $settings-icon-size; font-size: $default-icon-size;
line-height: 42px; line-height: 42px;
} }
......
= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f| = form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
.form-group .form-group
= f.label "Username or email", for: "user_login" = f.label "Username or email", for: "user_login", class: 'label-bold'
= f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required." = f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
.form-group .form-group
= f.label :password = f.label :password, class: 'label-bold'
= f.password_field :password, class: "form-control bottom", required: true, title: "This field is required." = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required."
- if devise_mapping.rememberable? - if devise_mapping.rememberable?
.remember-me .remember-me
......
.omniauth-container .omniauth-container.prepend-top-15
%p %label.label-bold.d-block
%span.light Sign in with
Sign in with   - providers = enabled_button_based_providers
- providers = enabled_button_based_providers .d-flex.justify-content-between.flex-wrap
- providers.each do |provider| - providers.each do |provider|
%span.light - has_icon = provider_has_icon?(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', id: "oauth-login-#{provider}" do
= link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: 'oauth-login' + (has_icon ? ' oauth-image-link' : ' btn'), id: "oauth-login-#{provider}" - if has_icon
%fieldset.prepend-top-10.remember-me = provider_image_tag(provider)
%label
= check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox'
%span %span
Remember me = label_for_provider(provider)
%fieldset.remember-me
%label
= check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox'
%span
Remember me
...@@ -4,24 +4,24 @@ ...@@ -4,24 +4,24 @@
.devise-errors .devise-errors
= devise_error_messages! = devise_error_messages!
.form-group .form-group
= f.label :name, 'Full name' = f.label :name, 'Full name', class: 'label-bold'
= f.text_field :name, class: "form-control top", required: true, title: "This field is required." = f.text_field :name, class: "form-control top", required: true, title: "This field is required."
.username.form-group .username.form-group
= f.label :username = f.label :username, class: 'label-bold'
= f.text_field :username, class: "form-control middle", pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: 'Please create a username with only alphanumeric characters.' = f.text_field :username, class: "form-control middle", pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: 'Please create a username with only alphanumeric characters.'
%p.validation-error.hide Username is already taken. %p.validation-error.hide Username is already taken.
%p.validation-success.hide Username is available. %p.validation-success.hide Username is available.
%p.validation-pending.hide Checking username availability... %p.validation-pending.hide Checking username availability...
.form-group .form-group
= f.label :email = f.label :email, class: 'label-bold'
= f.email_field :email, class: "form-control middle", required: true, title: "Please provide a valid email address." = f.email_field :email, class: "form-control middle", required: true, title: "Please provide a valid email address."
.form-group .form-group
= f.label :email_confirmation = f.label :email_confirmation, class: 'label-bold'
= f.email_field :email_confirmation, class: "form-control middle", required: true, title: "Please retype the email address." = f.email_field :email_confirmation, class: "form-control middle", required: true, title: "Please retype the email address."
.form-group.append-bottom-20#password-strength .form-group.append-bottom-20#password-strength
= f.label :password = f.label :password, class: 'label-bold'
= f.password_field :password, class: "form-control bottom", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters." = f.password_field :password, class: "form-control bottom", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters."
%p.gl-field-hint Minimum length is #{@minimum_password_length} characters %p.gl-field-hint.text-secondary Minimum length is #{@minimum_password_length} characters
- if Gitlab::CurrentSettings.current_application_settings.enforce_terms? - if Gitlab::CurrentSettings.current_application_settings.enforce_terms?
.form-group .form-group
= check_box_tag :terms_opt_in, '1', false, required: true = check_box_tag :terms_opt_in, '1', false, required: true
...@@ -34,8 +34,3 @@ ...@@ -34,8 +34,3 @@
= recaptcha_tags = recaptcha_tags
.submit-container .submit-container
= f.submit "Register", class: "btn-register btn" = f.submit "Register", class: "btn-register btn"
.clearfix.submit-container
%p
%span.light Didn't receive a confirmation email?
= succeed '.' do
= link_to "Request a new one", new_confirmation_path(:user)
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
= f.text_field :name, required: true, readonly: true, wrapper: { class: 'col-md-9' }, = f.text_field :name, required: true, readonly: true, wrapper: { class: 'col-md-9' },
help: "Your name was automatically set based on your #{ attribute_provider_label(:name) } account, so people you know can recognize you." help: "Your name was automatically set based on your #{ attribute_provider_label(:name) } account, so people you know can recognize you."
- else - else
= f.text_field :name, required: true, wrapper: { class: 'col-md-9' }, help: "Enter your name, so people you know can recognize you." = f.text_field :name, label: 'Full name', required: true, wrapper: { class: 'col-md-9' }, help: "Enter your name, so people you know can recognize you."
= f.text_field :id, readonly: true, label: 'User ID', wrapper: { class: 'col-md-3' } = f.text_field :id, readonly: true, label: 'User ID', wrapper: { class: 'col-md-3' }
- if @user.read_only_attribute?(:email) - if @user.read_only_attribute?(:email)
......
---
title: Update presentation for SSO providers on log in page
merge_request: 21233
author:
type: other
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