Redesign signin/singup pages

10 files changed, 148 insertions, 107 deletions

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;
   }
 
-  .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 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
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
-      .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