Restyle oauth accounts at profile page and add ability to unlink account

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)

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;

app/assets/stylesheets/pages/login.scss

@@ -113,3 +113,12 @@
     }
   }
 }
+
+.oauth-image-link {
+  margin-right: 10px;
+
+  img {
+    width: 32px;
+    height: 32px;
+  }
+}

app/assets/stylesheets/pages/profile.scss

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

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

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

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

app/helpers/profile_helper.rb

 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

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"

app/views/profiles/accounts/show.html.haml

-%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

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