improve profile layout after omniauth changes

6 files changed, 67 insertions, 47 deletions

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index ed71a42e24c..ab3d44d88ae 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -689,3 +689,17 @@ li.note {
   text-align:center;
   margin-bottom:10px;
 }
+
+.oauth_select_holder {
+  padding:20px;
+  img {
+    padding:5px;
+    margin-right:10px;
+  }
+  .active {
+    img {
+      border:1px solid #ccc;
+      @include border-radius(5px);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/gitlab_bootstrap/blocks.scss b/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
index e0ae8db799f..ae66bd201f8 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
@@ -65,6 +65,10 @@
   border-color: #CCC;
   @include solid_shade;
 
+  &.white {
+    background:#fff;
+  }
+
   ul {
     margin:0;
   }
diff --git a/app/helpers/profile_helper.rb b/app/helpers/profile_helper.rb
new file mode 100644
index 00000000000..80d67009f59
--- /dev/null
+++ b/app/helpers/profile_helper.rb
@@ -0,0 +1,7 @@
+module ProfileHelper
+  def oauth_active_class provider
+    if current_user.provider == provider.to_s
+      'active'
+    end
+  end
+end
diff --git a/app/views/profile/password.html.haml b/app/views/profile/password.html.haml
index bf58e2aec52..805429e3629 100644
--- a/app/views/profile/password.html.haml
+++ b/app/views/profile/password.html.haml
@@ -1,31 +1,29 @@
+- if Gitlab.config.omniauth_enabled?
+  %h3.page_title Accounts
+  %hr
+  %p.hint Tip: Click on icon to activate sigin with one of the following services
+  .oauth_select_holder
+    - User.omniauth_providers.each do |provider|
+      %span{class: oauth_active_class(provider) }
+        = link_to authbutton(provider, 32), omniauth_authorize_path(User, provider)
+
+.clearfix.prepend-top-20
 %h3.page_title Password
 %hr
 
 = form_for @user, url: profile_password_path, method: :put do |f|
-  .row
-    .span7
-      .data
-        %p.slead After successful password update you will be redirected to login page where you should login with new password
-        -if @user.errors.any?
-          .alert-message.block-message.error
-            %ul
-              - @user.errors.full_messages.each do |msg|
-                %li= msg
-
-        .clearfix
-          = f.label :password
-          .input= f.password_field :password
-        .clearfix
-          = f.label :password_confirmation
-          .input= f.password_field :password_confirmation
+  %p.slead After successful password update you will be redirected to login page where you should login with new password
+  -if @user.errors.any?
+    .alert-message.block-message.error
+      %ul
+        - @user.errors.full_messages.each do |msg|
+          %li= msg
 
-    - if Gitlab.config.omniauth_enabled?
-      .span5.right
-        .alert.alert-info
-          %strong Tip: Use one of the following sites to login
-          %ul.unstyled
-            - User.omniauth_providers.each do |provider|
-              %li= link_to authbutton(provider), |
-                   omniauth_authorize_path(User, provider) |
+  .clearfix
+    = f.label :password
+    .input= f.password_field :password
+  .clearfix
+    = f.label :password_confirmation
+    .input= f.password_field :password_confirmation
   .actions
     = f.submit 'Save', class: "btn save-btn"
diff --git a/app/views/profile/show.html.haml b/app/views/profile/show.html.haml
index 8369da4ccc0..5ac84122aa2 100644
--- a/app/views/profile/show.html.haml
+++ b/app/views/profile/show.html.haml
@@ -6,7 +6,6 @@
   %small
     = @user.email
 
-
 %hr
 
 = form_for @user, url: profile_update_path, method: :put, html: { class: "edit_user form-horizontal" }  do |f|
@@ -28,7 +27,23 @@
           = f.text_field :email, class: "input-xlarge"
           %span.help-block We also use email for avatar detection.
 
-      %hr
+    .span5.right
+      %div.tips
+        %h6 Tips:
+        %ul
+          -unless Gitlab.config.disable_gravatar?
+            %li
+              %p.hint You can change your avatar at gravatar.com
+
+          - if Gitlab.config.omniauth_enabled? && @user.provider?
+            %li
+              %p.hint
+                You can login through #{@user.provider.titleize}!
+                = link_to "click here to change", profile_password_path
+
+  %hr
+  .row
+    .span7
       .control-group
         = f.label :skype, class: "control-label"
         .controls= f.text_field :skype, class: "input-xlarge"
@@ -44,23 +59,7 @@
           = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
           %span.help-block Tell us about yourself in fewer than 250 characters.
     .span5.right
-
-      -unless Gitlab.config.disable_gravatar?
-        %p.alert.alert-info
-          %strong Tip:
-          You can change your avatar at gravatar.com
-
-      - @user.provider = 'twitter'
-      - if Gitlab.config.omniauth_enabled? && @user.provider?
-        .ui-box
-          .ui-box-body
-            %h4
-              Omniauth Providers:
-            = link_to "Change", profile_password_path, class: "btn small right"
-            You can login through #{@user.provider.titleize}!
-            = authbutton(@user.provider, 32)
-
-      .ui-box
+      .ui-box.white
         .ui-box-body
           %h4
             Personal projects:
@@ -71,7 +70,7 @@
           .progress
             .bar{style: "width: #{current_user.projects_limit_percent}%;"}
 
-      .ui-box
+      .ui-box.white
         .ui-box-body
           %h4
             SSH public keys:
diff --git a/config/gitlab.yml.example b/config/gitlab.yml.example
index 80d95b2602c..28323484a37 100644
--- a/config/gitlab.yml.example
+++ b/config/gitlab.yml.example
@@ -26,8 +26,6 @@ app:
   # disable_gravatar: true        # default: false - Disable user avatars from Gravatar.com
 
 
-
-
 #
 # 2. Auth settings
 # ==========================
@@ -44,7 +42,7 @@ ldap:
 omniauth:
   # Enable ability for users
   # to login via twitter, google ..
-  enabled: true
+  enabled: false
 
   # IMPORTANT! 
   # It allows user to login without having user account