From d02a22ba21f91d2aa4f9cf716dc3aefcf7e7495e Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
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 | 47 +++++-----
10 files changed, 148 insertions(+), 107 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 1bcb1f6d68e35..901733ef9ff00 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;
}
- .login-box{
- padding: 0 15px;
+ .navbar-gitlab .container {
+ max-width: none;
+ }
- .login-heading h3 {
- font-weight: 300;
- line-height: 2;
- }
+ .brand-holder {
+ font-size: 18px;
+ line-height: 1.5;
- .login-footer {
- margin-top: 10px;
+ p {
+ color: #888;
}
- .btn {
- padding: 12px !important;
- @extend .btn-block;
+ h1:first-child {
+ font-weight: normal;
+ margin-bottom: 30px;
}
- }
- .brand-image {
img {
max-width: 100%;
- margin-bottom: 20px;
+ margin-bottom: 30px;
}
- &.default-brand-image {
- margin: 0 80px;
+ a {
+ font-weight: bold;
}
}
- .login-logo {
- margin: 10px 0 30px 0;
- display: block;
+ .login-box{
+ background: #fafafa;
+ border-radius: 10px;
+ box-shadow: 0 0px 2px #CCC;
+ padding: 15px;
+
+ .login-heading h3 {
+ font-weight: 300;
+ line-height: 1.5;
+ margin: 0;
+ display: none;
+ }
+
+ .login-footer {
+ margin-top: 10px;
+ }
+
+ a.forgot {
+ float: right;
+ padding-top: 6px
+ }
+
+ .nav .active a {
+ background: transparent;
+ }
}
.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 092a1ba9229e4..f21b0bd1f502b 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -305,4 +305,9 @@ def path_to_key(key, admin = false)
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 e819847e5eaba..ab9085f0ba729 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 bf8a593c254e6..e986989a72880 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 ca7e9570b4327..5e31d8e818a87 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 8d6aaefb9fffe..c2e1373de3022 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 0000000000000..3f2161ff6a4e3
--- /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 0000000000000..5709c66128848
--- /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 02a5e4868d1c4..1d5bbb2aaded9 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 6539a24119c5e..8b3872e535d06 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
- .content
- .login-title
- %h1= brand_title
- = render 'shared/outdated_browser'
- %hr
- .container
+ %body.ui_mars.login-page.application
+ = render "layouts/broadcast"
+ = render "layouts/public_head_panel", title: ''
+ .container.navless-container
.content
- = render "layouts/flash"
- .row
- .col-md-7.brand-holder
+ - 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_image
- .brand_text
- = brand_text
+ = brand_image
+ = 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
+ %h3 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.
+ %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)
- .col-md-5
- = yield
%hr
.container
.footer-links
--
GitLab