Show account cards for external accounts on "linked accounts" screen and "link new account"

Summary: Ref T1536. These can probably use some design tweaking and there's a bit of a bug with profile images for some providers, but generally seems to be in the right ballpark.

Test Plan:
{F46604}

{F46605}

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Maniphest Tasks: T1536

Differential Revision: https://secure.phabricator.com/D6210

src/__celerity_resource_map__.php

@@ -923,7 +923,7 @@ celerity_register_resource_map(array(
   ),
   'auth-css' =>
   array(
-    'uri' => '/res/81f72bfa/rsrc/css/application/auth/auth.css',
+    'uri' => '/res/2ed0846e/rsrc/css/application/auth/auth.css',
     'type' => 'css',
     'requires' =>
     array(

src/__phutil_library_map__.php

@@ -814,6 +814,7 @@ phutil_register_library_map(array(
     'PhabricatorAuditQuery' => 'applications/audit/query/PhabricatorAuditQuery.php',
     'PhabricatorAuditReplyHandler' => 'applications/audit/mail/PhabricatorAuditReplyHandler.php',
     'PhabricatorAuditStatusConstants' => 'applications/audit/constants/PhabricatorAuditStatusConstants.php',
+    'PhabricatorAuthAccountView' => 'applications/auth/view/PhabricatorAuthAccountView.php',
     'PhabricatorAuthConfirmLinkController' => 'applications/auth/controller/PhabricatorAuthConfirmLinkController.php',
     'PhabricatorAuthController' => 'applications/auth/controller/PhabricatorAuthController.php',
     'PhabricatorAuthLinkController' => 'applications/auth/controller/PhabricatorAuthLinkController.php',
@@ -2678,6 +2679,7 @@ phutil_register_library_map(array(
     'PhabricatorAuditMailReceiver' => 'PhabricatorObjectMailReceiver',
     'PhabricatorAuditPreviewController' => 'PhabricatorAuditController',
     'PhabricatorAuditReplyHandler' => 'PhabricatorMailReplyHandler',
+    'PhabricatorAuthAccountView' => 'AphrontView',
     'PhabricatorAuthConfirmLinkController' => 'PhabricatorAuthController',
     'PhabricatorAuthController' => 'PhabricatorController',
     'PhabricatorAuthLinkController' => 'PhabricatorAuthController',

src/applications/auth/controller/PhabricatorAuthConfirmLinkController.php

@@ -60,7 +60,12 @@ final class PhabricatorAuthConfirmLinkController
           pht(
             "Confirm the link with this %s account. This account will be ".
             "able to log in to your Phabricator account.",
-            $provider->getProviderName())));
+            $provider->getProviderName())))
+      ->appendChild(
+        id(new PhabricatorAuthAccountView())
+          ->setUser($viewer)
+          ->setExternalAccount($account)
+          ->setAuthProvider($provider));
 
     $dialog->appendChild($form);
 

src/applications/auth/view/PhabricatorAuthAccountView.php

@@ -0,0 +1,115 @@
+<?php
+
+final class PhabricatorAuthAccountView extends AphrontView {
+
+  private $externalAccount;
+  private $provider;
+
+  public function setExternalAccount(
+    PhabricatorExternalAccount $external_account) {
+    $this->externalAccount = $external_account;
+    return $this;
+  }
+
+  public function setAuthProvider(PhabricatorAuthProvider $provider) {
+    $this->provider = $provider;
+    return $this;
+  }
+
+  public function render() {
+    $account = $this->externalAccount;
+    $provider = $this->provider;
+
+    require_celerity_resource('auth-css');
+
+    $content = array();
+
+    $dispname = $account->getDisplayName();
+    $username = $account->getUsername();
+    $realname = $account->getRealName();
+
+    $use_name = null;
+    if (strlen($dispname)) {
+      $use_name = $dispname;
+    } else if (strlen($username) && strlen($realname)) {
+      $use_name = $username.' ('.$realname.')';
+    } else if (strlen($username)) {
+      $use_name = $username;
+    } else if (strlen($realname)) {
+      $use_name = $realname;
+    } else {
+      $use_name = $account->getAccountID();
+    }
+
+    $content[] = phutil_tag(
+      'div',
+      array(
+        'class' => 'auth-account-view-name',
+      ),
+      $use_name);
+
+    if ($provider) {
+      $prov_name = pht('%s Account', $provider->getProviderName());
+    } else {
+      $prov_name = pht('"%s" Account', $account->getProviderType());
+    }
+
+    $content[] = phutil_tag(
+      'div',
+      array(
+        'class' => 'auth-account-view-provider-name',
+      ),
+      array(
+        $prov_name,
+        " \xC2\xB7 ",
+        $account->getAccountID(),
+      ));
+
+    $account_uri = $account->getAccountURI();
+    if (strlen($account_uri)) {
+
+      // Make sure we don't link a "javascript:" URI if a user somehow
+      // managed to get one here.
+
+      if (PhabricatorEnv::isValidRemoteWebResource($account_uri)) {
+        $account_uri = phutil_tag(
+          'a',
+          array(
+            'href' => $account_uri,
+            'target' => '_blank',
+          ),
+          $account_uri);
+      }
+
+      $content[] = phutil_tag(
+        'div',
+        array(
+          'class' => 'auth-account-view-account-uri',
+        ),
+        $account_uri);
+    }
+
+    // TODO: This fetch is sketchy. We should probably build
+    // ExternalAccountQuery and move the logic there.
+
+    $image_uri = PhabricatorUser::getDefaultProfileImageURI();
+    if ($account->getProfileImagePHID()) {
+      $image = id(new PhabricatorFileQuery())
+        ->setUser(PhabricatorUser::getOmnipotentUser())
+        ->withPHIDs(array($account->getProfileImagePHID()))
+        ->executeOne();
+      if ($image) {
+        $image_uri = $image->getProfileThumbURI();
+      }
+    }
+
+    return phutil_tag(
+      'div',
+      array(
+        'class' => 'auth-account-view',
+        'style' => 'background-image: url('.$image_uri.')',
+      ),
+      $content);
+  }
+
+}

src/applications/files/controller/PhabricatorFileTransformController.php

@@ -49,6 +49,9 @@ final class PhabricatorFileTransformController
     $unguarded = AphrontWriteGuard::beginScopedUnguardedWrites();
 
     switch ($this->transform) {
+      case 'thumb-profile':
+        $xformed_file = $this->executeThumbTransform($file, 50, 50);
+        break;
       case 'thumb-280x210':
         $xformed_file = $this->executeThumbTransform($file, 280, 210);
         break;

src/applications/files/storage/PhabricatorFile.php

@@ -491,6 +491,12 @@ final class PhabricatorFile extends PhabricatorFileDAO
     return (string) $uri;
   }
 
+  public function getProfileThumbURI() {
+    $path = '/file/xform/thumb-profile/'.$this->getPHID().'/'
+      .$this->getSecretKey().'/';
+    return PhabricatorEnv::getCDNURI($path);
+  }
+
   public function getThumb60x45URI() {
     $path = '/file/xform/thumb-60x45/'.$this->getPHID().'/'
       .$this->getSecretKey().'/';

src/applications/settings/panel/PhabricatorSettingsPanelExternalAccounts.php

@@ -74,6 +74,21 @@ final class PhabricatorSettingsPanelExternalAccounts
           ->setDisabled(!$can_unlink)
           ->setHref('/auth/unlink/'.$account->getProviderKey().'/'));
 
+      $account_view = id(new PhabricatorAuthAccountView())
+        ->setExternalAccount($account);
+
+      if ($provider) {
+        $account_view->setAuthProvider($provider);
+      }
+
+      $item->appendChild(
+        phutil_tag(
+          'div',
+          array(
+            'class' => 'mmr mml mst mmb',
+          ),
+          $account_view));
+
       $linked->addItem($item);
     }
 

webroot/rsrc/css/application/auth/auth.css

@@ -22,3 +22,21 @@
 .phabricator-link-button {
   text-align: center;
 }
+
+.auth-account-view {
+  border: 1px solid #aaaaaa;
+  background-repeat: no-repeat;
+  background-position: 4px 4px;
+  padding: 4px 4px 4px 62px;
+  min-height: 50px;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.auth-account-view-name {
+  font-weight: bold;
+}
+
+.auth-account-view-provider-name {
+  color: #888888;
+}