From d02a22ba21f91d2aa4f9cf716dc3aefcf7e7495e Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 7 Jan 2015 17:07:36 -0800 Subject: [PATCH] Redesign signin/singup pages --- app/assets/stylesheets/sections/login.scss | 89 ++++++++++++------- app/helpers/application_helper.rb | 5 ++ app/views/devise/sessions/_new_base.html.haml | 2 +- app/views/devise/sessions/_new_ldap.html.haml | 1 - app/views/devise/sessions/new.html.haml | 52 +++-------- .../_oauth_box.html.haml} | 4 +- app/views/devise/shared/_signin_box.html.haml | 25 ++++++ app/views/devise/shared/_signup_box.html.haml | 17 ++++ .../layouts/_public_head_panel.html.haml | 13 +-- app/views/layouts/devise.html.haml | 53 ++++++----- 10 files changed, 151 insertions(+), 110 deletions(-) rename app/views/devise/{sessions/_oauth_providers.html.haml => shared/_oauth_box.html.haml} (77%) create mode 100644 app/views/devise/shared/_signin_box.html.haml create mode 100644 app/views/devise/shared/_signup_box.html.haml diff --git a/app/assets/stylesheets/sections/login.scss b/app/assets/stylesheets/sections/login.scss index 1bcb1f6d68e..901733ef9ff 100644 --- a/app/assets/stylesheets/sections/login.scss +++ b/app/assets/stylesheets/sections/login.scss @@ -1,48 +1,66 @@ /* Login Page */ .login-page { - h1 { - font-size: 3em; - font-weight: 200; + .container { + max-width: 960px; + } + + .navbar-gitlab .container { + max-width: none; + } + + .brand-holder { + font-size: 18px; + line-height: 1.5; + + p { + color: #888; + } + + h1:first-child { + font-weight: normal; + margin-bottom: 30px; + } + + img { + max-width: 100%; + margin-bottom: 30px; + } + + a { + font-weight: bold; + } } .login-box{ - padding: 0 15px; + background: #fafafa; + border-radius: 10px; + box-shadow: 0 0px 2px #CCC; + padding: 15px; .login-heading h3 { font-weight: 300; - line-height: 2; + line-height: 1.5; + margin: 0; + display: none; } .login-footer { margin-top: 10px; } - .btn { - padding: 12px !important; - @extend .btn-block; - } - } - - .brand-image { - img { - max-width: 100%; - margin-bottom: 20px; + a.forgot { + float: right; + padding-top: 6px } - &.default-brand-image { - margin: 0 80px; + .nav .active a { + background: transparent; } } - .login-logo { - margin: 10px 0 30px 0; - display: block; - } - .form-control { - background-color: #F5F5F5; - font-size: 16px; - padding: 14px 10px; + font-size: 14px; + padding: 10px 8px; width: 100%; height: auto; @@ -68,11 +86,6 @@ } } - .login-box a.forgot { - float: right; - padding-top: 6px - } - .devise-errors { h2 { font-size: 14px; @@ -80,7 +93,19 @@ } } - .brand-holder { - border-right: 1px solid #EEE; + .remember-me { + margin-top: -10px; + + label { + font-weight: normal; + } + } +} + +@media (max-width: $screen-xs-max) { + .login-page { + .col-sm-5.pull-right { + float: none !important; + } } } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 092a1ba9229..f21b0bd1f50 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -305,4 +305,9 @@ module ApplicationHelper profile_key_path(key) end end + + def redirect_from_root? + request.env['rack.session']['user_return_to'] == + '/' + end end diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml index e819847e5ea..ab9085f0ba7 100644 --- a/app/views/devise/sessions/_new_base.html.haml +++ b/app/views/devise/sessions/_new_base.html.haml @@ -2,7 +2,7 @@ = f.text_field :login, class: "form-control top", placeholder: "Username or Email", autofocus: "autofocus" = f.password_field :password, class: "form-control bottom", placeholder: "Password" - if devise_mapping.rememberable? - .clearfix.append-bottom-10 + .remember-me %label.checkbox.remember_me{for: "user_remember_me"} = f.check_box :remember_me %span Remember me diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml index bf8a593c254..e986989a728 100644 --- a/app/views/devise/sessions/_new_ldap.html.haml +++ b/app/views/devise/sessions/_new_ldap.html.haml @@ -1,5 +1,4 @@ = form_tag(user_omniauth_callback_path(provider), id: 'new_ldap_user' ) do = text_field_tag :username, nil, {class: "form-control top", placeholder: "LDAP Login", autofocus: "autofocus"} = password_field_tag :password, nil, {class: "form-control bottom", placeholder: "Password"} - %br/ = button_tag "LDAP Sign in", class: "btn-save btn" diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml index ca7e9570b43..5e31d8e818a 100644 --- a/app/views/devise/sessions/new.html.haml +++ b/app/views/devise/sessions/new.html.haml @@ -1,43 +1,15 @@ -.login-box - .login-heading - %h3 Sign in - .login-body - - if ldap_enabled? - %ul.nav.nav-tabs - - @ldap_servers.each_with_index do |server, i| - %li{class: (:active if i.zero?)} - = link_to server['label'], "#tab-#{server['provider_name']}", 'data-toggle' => 'tab' - - if gitlab_config.signin_enabled - %li - = link_to 'Standard', '#tab-signin', 'data-toggle' => 'tab' - .tab-content - - @ldap_servers.each_with_index do |server, i| - %div.tab-pane{id: "tab-#{server['provider_name']}", class: (:active if i.zero?)} - = render 'devise/sessions/new_ldap', provider: server['provider_name'] - - if gitlab_config.signin_enabled - %div#tab-signin.tab-pane - = render 'devise/sessions/new_base' +%div + = render 'devise/shared/signin_box' - - elsif gitlab_config.signin_enabled - = render 'devise/sessions/new_base' - - else - %div - No authentication methods configured. + - if Gitlab.config.omniauth.enabled && devise_mapping.omniauthable? + .prepend-top-20 + = render 'devise/shared/oauth_box' - = render 'devise/sessions/oauth_providers' if Gitlab.config.omniauth.enabled && devise_mapping.omniauthable? + - if gitlab_config.signup_enabled + .prepend-top-20 + = render 'devise/shared/signup_box' - .login-footer - - if gitlab_config.signup_enabled - %p - %span.light - Don't have an account? - %strong - = link_to "Sign up", new_registration_path(resource_name) - - %p - %span.light Did not receive confirmation email? - = link_to "Send again", new_confirmation_path(resource_name) - - - if extra_config.has_key?('sign_in_text') - %hr - = markdown(extra_config.sign_in_text) +.clearfix.prepend-top-20 + %p + %span.light Did not receive confirmation email? + = link_to "Send again", new_confirmation_path(resource_name) diff --git a/app/views/devise/sessions/_oauth_providers.html.haml b/app/views/devise/shared/_oauth_box.html.haml similarity index 77% rename from app/views/devise/sessions/_oauth_providers.html.haml rename to app/views/devise/shared/_oauth_box.html.haml index 8d6aaefb9ff..c2e1373de30 100644 --- a/app/views/devise/sessions/_oauth_providers.html.haml +++ b/app/views/devise/shared/_oauth_box.html.haml @@ -1,7 +1,7 @@ - providers = additional_providers - if providers.present? - .bs-callout.bs-callout-info{:'data-no-turbolink' => 'data-no-turbolink'} - %span Sign in with:   + .login-box{:'data-no-turbolink' => 'data-no-turbolink'} + %span Sign in with   - providers.each do |provider| %span - if default_providers.include?(provider) diff --git a/app/views/devise/shared/_signin_box.html.haml b/app/views/devise/shared/_signin_box.html.haml new file mode 100644 index 00000000000..3f2161ff6a4 --- /dev/null +++ b/app/views/devise/shared/_signin_box.html.haml @@ -0,0 +1,25 @@ +.login-box + .login-heading + %h3 Sign in + .login-body + - if ldap_enabled? + %ul.nav.nav-tabs + - @ldap_servers.each_with_index do |server, i| + %li{class: (:active if i.zero?)} + = link_to server['label'], "#tab-#{server['provider_name']}", 'data-toggle' => 'tab' + - if gitlab_config.signin_enabled + %li + = link_to 'Standard', '#tab-signin', 'data-toggle' => 'tab' + .tab-content + - @ldap_servers.each_with_index do |server, i| + %div.tab-pane{id: "tab-#{server['provider_name']}", class: (:active if i.zero?)} + = render 'devise/sessions/new_ldap', provider: server['provider_name'] + - if gitlab_config.signin_enabled + %div#tab-signin.tab-pane + = render 'devise/sessions/new_base' + + - elsif gitlab_config.signin_enabled + = render 'devise/sessions/new_base' + - else + %div + No authentication methods configured. diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml new file mode 100644 index 00000000000..5709c661288 --- /dev/null +++ b/app/views/devise/shared/_signup_box.html.haml @@ -0,0 +1,17 @@ +.login-box + .login-heading + %h3 Sign up + .login-body + = form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| + .devise-errors + = devise_error_messages! + %div + = f.text_field :name, class: "form-control top", placeholder: "Name", required: true + %div + = f.text_field :username, class: "form-control middle", placeholder: "Username", required: true + %div + = f.email_field :email, class: "form-control middle", placeholder: "Email", required: true + .form-group#password-strength + = f.password_field :password, class: "form-control bottom", id: "user_password_sign_up", placeholder: "Password", required: true + %div + = f.submit "Sign up", class: "btn-create btn" diff --git a/app/views/layouts/_public_head_panel.html.haml b/app/views/layouts/_public_head_panel.html.haml index 02a5e4868d1..1d5bbb2aade 100644 --- a/app/views/layouts/_public_head_panel.html.haml +++ b/app/views/layouts/_public_head_panel.html.haml @@ -12,12 +12,13 @@ %span.sr-only Toggle navigation %i.fa.fa-bars - .pull-right.hidden-xs - = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-new' + - unless current_controller?('sessions') + .pull-right.hidden-xs + = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-new' - .navbar-collapse.collapse - %ul.nav.navbar-nav - %li.visible-xs - = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes') + .navbar-collapse.collapse + %ul.nav.navbar-nav + %li.visible-xs + = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes') = render 'shared/outdated_browser' diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml index 6539a24119c..8b3872e535d 100644 --- a/app/views/layouts/devise.html.haml +++ b/app/views/layouts/devise.html.haml @@ -1,36 +1,33 @@ !!! 5 %html{ lang: "en"} = render "layouts/head" - %body.ui_basic.login-page - .container + %body.ui_mars.login-page.application + = render "layouts/broadcast" + = render "layouts/public_head_panel", title: '' + .container.navless-container .content - .login-title - %h1= brand_title - = render 'shared/outdated_browser' - %hr - .container - .content - = render "layouts/flash" - .row - .col-md-7.brand-holder - - if brand_item - .brand-image - = brand_image - .brand_text - = brand_text - - else - .brand-image.default-brand-image.hidden-sm.hidden-xs - = image_tag 'brand_logo.png' - .brand_text.hidden-xs - %h2 Open source software to collaborate on code - - %p.lead - Manage git repositories with fine grained access controls that keep your code secure. - Perform code reviews and enhance collaboration with merge requests. - Each project can also have an issue tracker and a wiki. - - .col-md-5 + - unless redirect_from_root? + = render "layouts/flash" + .row.prepend-top-20 + .col-sm-5.pull-right = yield + .col-sm-7.brand-holder.pull-left + %h1 + = brand_title + - if brand_item + = brand_image + = brand_text + - else + %h3 Open source software to collaborate on code + + %p + Manage git repositories with fine grained access controls that keep your code secure. + Perform code reviews and enhance collaboration with merge requests. + Each project can also have an issue tracker and a wiki. + + - if extra_config.has_key?('sign_in_text') + = markdown(extra_config.sign_in_text) + %hr .container .footer-links