Merge "Add avatar image to settings"

polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.html

@@ -17,6 +17,7 @@ limitations under the License.
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 
+<link rel="import" href="../../shared/gr-avatar/gr-avatar.html">
 <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
@@ -26,9 +27,34 @@ limitations under the License.
 
 <dom-module id="gr-account-info">
   <template>
-    <style include="shared-styles"></style>
+    <style include="shared-styles">
+      gr-avatar {
+        height: 10em;
+        width: 10em;
+        margin-right: .15em;
+        vertical-align: -.25em;
+      }
+      .hide {
+        display: none;
+      }
+    </style>
     <style include="gr-form-styles"></style>
     <div class="gr-form-styles">
+      <section>
+        <span class="title"></span>
+        <span class="value">
+          <gr-avatar account="[[_account]]"
+              image-size="32"></gr-avatar>
+        </span>
+      </section>
+      <section class$="[[_hideAvatarChangeUrl(_avatarChangeUrl)]]">
+        <span class="title"></span>
+        <span class="value">
+          <a href$="[[_avatarChangeUrl]]">
+            Change avatar
+          </a>
+        </span>
+      </section>
       <section>
         <span class="title">ID</span>
         <span class="value">[[_account._account_id]]</span>
@@ -59,6 +85,7 @@ limitations under the License.
               disabled="[[_saving]]"
               on-keydown="_handleKeydown"
               bind-value="{{_username}}">
+        </span>
       </section>
       <section id="nameSection">
         <span class="title">Full name</span>

polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.js

@@ -62,6 +62,10 @@
         type: String,
         observer: '_usernameChanged',
       },
+      _avatarChangeUrl: {
+        type: String,
+        value: '',
+      },
     },
 
     observers: [
@@ -89,6 +93,10 @@
         this._username = account.username;
       }));
 
+      promises.push(this.$.restAPI.getAvatarChangeUrl().then(url => {
+        this._avatarChangeUrl = url;
+      }));
+
       return Promise.all(promises).then(() => {
         this._loading = false;
       });
@@ -167,5 +175,13 @@
         this.save();
       }
     },
+
+    _hideAvatarChangeUrl(avatarChangeUrl) {
+      if (!avatarChangeUrl) {
+        return 'hide';
+      }
+
+      return '';
+    },
   });
 })();

polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info_test.html

@@ -330,5 +330,11 @@ limitations under the License.
 
       assert.isTrue(element._hasUsernameChange);
     });
+
+    test('_hideAvatarChangeUrl', () => {
+      assert.equal(element._hideAvatarChangeUrl(''), 'hide');
+
+      assert.equal(element._hideAvatarChangeUrl('https://example.com'), '');
+    });
   });
 </script>

polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js

@@ -822,6 +822,18 @@
       });
     },
 
+    getAvatarChangeUrl() {
+      return this._fetchSharedCacheURL({
+        url: '/accounts/self/avatar.change.url',
+        reportUrlAsIs: true,
+        errFn: resp => {
+          if (!resp || resp.status === 403) {
+            this._cache['/accounts/self/avatar.change.url'] = null;
+          }
+        },
+      });
+    },
+
     getExternalIds() {
       return this._fetchJSON({
         url: '/accounts/self/external.ids',