Restyle oauth accounts at profile page and add ability to unlink accountimprove-profile

11 files changed, 59 insertions, 54 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 6e40fa9aef8..cf00780d332 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -21,6 +21,8 @@ v 7.10.0 (unreleased)
   - Improve GitLab performance when working with git repositories
   - Add tag message and last commit to tag hook (Kamil Trzciński)
   - Restrict permissions on backup files
+  - Improve oauth accounts UI in profile page
+  - Add ability to unlink connected accounts
 
 v 7.9.0 (unreleased)
   - Add HipChat integration documentation (Stan Hu)
diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss
index 31fe5a03f37..266041403e0 100644
--- a/app/assets/stylesheets/generic/forms.scss
+++ b/app/assets/stylesheets/generic/forms.scss
@@ -15,10 +15,6 @@ input[type='text'].danger {
   text-shadow: 0 1px 1px #fff
 }
 
-fieldset legend {
-  font-size: 16px;
-}
-
 .datetime-controls {
   select {
     width: 100px;
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index d366300511e..83b866c3a64 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -113,3 +113,12 @@
     }
   }
 }
+
+.oauth-image-link {
+  margin-right: 10px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index fbe71a5b5ad..65655d4bfa3 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -1,31 +1,7 @@
 .account-page {
   fieldset {
     margin-bottom: 15px;
-    border-bottom: 1px dashed #ddd;
     padding-bottom: 15px;
-
-    &:last-child {
-      border: none;
-    }
-
-    legend {
-      border: none;
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.oauth_select_holder {
-  img {
-    padding: 2px;
-    margin-right: 10px;
-  }
-  .active {
-    img {
-      border: 1px solid #4BD;
-      background: $hover;
-      @include border-radius(5px);
-    }
   }
 }
 
@@ -101,3 +77,19 @@
     }
   }
 }
+
+.oauth-buttons {
+  .btn-group {
+    margin-right: 10px;
+  }
+
+  .btn {
+    line-height: 36px;
+    height: 56px;
+
+    img {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
diff --git a/app/controllers/profiles/accounts_controller.rb b/app/controllers/profiles/accounts_controller.rb
index fe121691a10..9bd34fe2261 100644
--- a/app/controllers/profiles/accounts_controller.rb
+++ b/app/controllers/profiles/accounts_controller.rb
@@ -4,4 +4,10 @@ class Profiles::AccountsController < ApplicationController
   def show
     @user = current_user
   end
+
+  def unlink
+    provider = params[:provider]
+    current_user.identities.find_by(provider: provider).destroy
+    redirect_to profile_account_path
+  end
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 8ed6d59c20d..38b5fc4a011 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -174,16 +174,10 @@ module ApplicationHelper
     Digest::SHA1.hexdigest string
   end
 
-  def authbutton(provider, size = 64)
-    file_name = "#{provider.to_s.split('_').first}_#{size}.png"
-    image_tag(image_path("authbuttons/#{file_name}"), alt: "Sign in with #{provider.to_s.titleize}")
-  end
-
   def simple_sanitize(str)
     sanitize(str, tags: %w(a span))
   end
 
-
   def body_data_page
     path = controller.controller_path.split('/')
     namespace = path.first if path.second
diff --git a/app/helpers/oauth_helper.rb b/app/helpers/oauth_helper.rb
index 1a0ad17b607..997b91de077 100644
--- a/app/helpers/oauth_helper.rb
+++ b/app/helpers/oauth_helper.rb
@@ -20,6 +20,15 @@ module OauthHelper
   def additional_providers
     enabled_oauth_providers.reject{|provider| provider.to_s.starts_with?('ldap')}
   end
-  
+
+  def oauth_image_tag(provider, size = 64)
+    file_name = "#{provider.to_s.split('_').first}_#{size}.png"
+    image_tag(image_path("authbuttons/#{file_name}"), alt: "Sign in with #{provider.to_s.titleize}")
+  end
+
+  def oauth_active?(provider)
+    current_user.identities.exists?(provider: provider.to_s)
+  end
+
   extend self
 end
diff --git a/app/helpers/profile_helper.rb b/app/helpers/profile_helper.rb
index 9e37e44732a..780c7cd5133 100644
--- a/app/helpers/profile_helper.rb
+++ b/app/helpers/profile_helper.rb
@@ -1,10 +1,4 @@
 module ProfileHelper
-  def oauth_active_class(provider)
-    if current_user.identities.exists?(provider: provider.to_s)
-      'active'
-    end
-  end
-
   def show_profile_username_tab?
     current_user.can_change_username?
   end
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 4cd1c303b22..b647b906b71 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -5,6 +5,6 @@
   - providers.each do |provider|
     %span.light
       - if default_providers.include?(provider)
-        = link_to authbutton(provider, 32), omniauth_authorize_path(resource_name, provider)
+        = link_to oauth_image_tag(provider), omniauth_authorize_path(resource_name, provider), class: 'oauth-image-link'
       - else
         = link_to provider.to_s.titleize, omniauth_authorize_path(resource_name, provider), class: "btn"
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 6bafcb56551..5bffb4acc1d 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -1,11 +1,6 @@
-%h3.page-title
-  Account Settings
-%p.light
-  You can change your username and private token here.
-  - if current_user.ldap_user?
+- if current_user.ldap_user?
+  .alert.alert-info
     Some options are unavailable for LDAP accounts
-%hr
-
 
 .account-page
   %fieldset.update-token
@@ -33,12 +28,16 @@
 
   - if show_profile_social_tab?
     %fieldset
-      %legend Social Accounts
-      .oauth_select_holder.append-bottom-10
+      %legend Connected Accounts
+      .oauth-buttons.append-bottom-10
         %p Click on icon to activate signin with one of the following services
         - enabled_social_providers.each do |provider|
-          %span{class: oauth_active_class(provider) }
-            = link_to authbutton(provider, 32), omniauth_authorize_path(User, provider)
+          .btn-group
+            = link_to oauth_image_tag(provider), omniauth_authorize_path(User, provider),
+              class: "btn btn-lg #{'active' if oauth_active?(provider)}"
+            - if oauth_active?(provider)
+              = link_to unlink_profile_account_path(provider: provider), method: :delete, class: 'btn btn-lg' do
+                %i.fa.fa-close
 
   - if show_profile_username_tab?
     %fieldset.update-username
diff --git a/config/routes.rb b/config/routes.rb
index 03b4a32a9dd..c30cd768572 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -184,7 +184,11 @@ Gitlab::Application.routes.draw do
     end
 
     scope module: :profiles do
-      resource :account, only: [:show, :update]
+      resource :account, only: [:show, :update] do
+        member do
+          delete :unlink
+        end
+      end
       resource :notifications, only: [:show, :update]
       resource :password, only: [:new, :create, :edit, :update] do
         member do