From 416f11030f6057eec01a6a6078377eaae3e3ec5c Mon Sep 17 00:00:00 2001
From: Rhea Parekh <rheaparekh12@gmail.com>
Date: Fri, 2 Mar 2018 23:03:20 +0530
Subject: [PATCH] user settings: Display avatar source.

This makes it easier for users to tell how Zulip ended up with an
avatar for them without them uploading one: through the Gravatar
service used across many Wordpress blogs.

Fixes #8225.
---
 static/js/avatar.js                           |  5 ++++
 static/js/settings_account.js                 |  8 +++++++
 static/styles/settings.css                    | 23 +++++++++++++++++--
 .../settings/account-settings.handlebars      |  7 +++++-
 4 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/static/js/avatar.js b/static/js/avatar.js
index c326090de7..79be8fbb97 100644
--- a/static/js/avatar.js
+++ b/static/js/avatar.js
@@ -51,7 +51,11 @@ exports.build_user_avatar_widget = function (upload_function) {
 
     if (page_params.avatar_source === 'G') {
         $("#user_avatar_delete_button").hide();
+        $("#user-avatar-source").show();
+    } else {
+        $("#user-avatar-source").hide();
     }
+
     $("#user_avatar_delete_button").on('click', function (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -60,6 +64,7 @@ exports.build_user_avatar_widget = function (upload_function) {
             success: function (data) {
               $("#user-settings-avatar").expectOne().attr("src", data.avatar_url);
               $("#user_avatar_delete_button").hide();
+              $("#user-avatar-source").show();
               // Need to clear input because of a small edge case
               // where you try to upload the same image you just deleted.
               get_file_input().val('');
diff --git a/static/js/settings_account.js b/static/js/settings_account.js
index 2136b3d9e5..7298654d45 100644
--- a/static/js/settings_account.js
+++ b/static/js/settings_account.js
@@ -311,6 +311,8 @@ exports.set_up = function () {
             form_data.append('file-'+i, file);
         });
 
+        $("#user-avatar-source").hide();
+
         var spinner = $("#upload_avatar_spinner").expectOne();
         loading.make_indicator(spinner, {text: 'Uploading avatar.'});
 
@@ -324,6 +326,12 @@ exports.set_up = function () {
                 loading.destroy_indicator($("#upload_avatar_spinner"));
                 $("#user-settings-avatar").expectOne().attr("src", data.avatar_url);
                 $("#user_avatar_delete_button").show();
+                $("#user-avatar-source").hide();
+            },
+            error: function () {
+                if (page_params.avatar_source === 'G') {
+                    $("#user-avatar-source").show();
+                }
             },
         });
 
diff --git a/static/styles/settings.css b/static/styles/settings.css
index 7de86d34d7..07293d68c3 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -864,8 +864,27 @@ input[type=checkbox].inline-block {
     transition: all 0.3s ease;
 }
 
-#user-settings-avatar:hover {
-    -webkit-filter: brightness(0.5);
+#user-settings-avatar:hover #user-avatar-block {
+    -webkit-filter: brightness(0.4);
+}
+
+#user-settings-avatar:hover #user-avatar-source {
+    visibility: visible;
+}
+
+#user-avatar-source {
+    margin-left: 10px;
+    width: 200px;
+    height: 20px;
+    position: absolute;
+    bottom: 19%;
+    left: 0%;
+    font-size: 0.9em;
+    visibility: hidden;
+}
+
+.white-color {
+    color: white;
 }
 
 #realm-settings-icon {
diff --git a/static/templates/settings/account-settings.handlebars b/static/templates/settings/account-settings.handlebars
index bdcde5b8f0..6beb365176 100644
--- a/static/templates/settings/account-settings.handlebars
+++ b/static/templates/settings/account-settings.handlebars
@@ -131,7 +131,12 @@
             <h3>{{t "User avatar" }}</h3>
 
             <div class="inline-block">
-                <img id="user-settings-avatar" src="{{ page_params.avatar_url_medium }}" />
+                <div id="user-settings-avatar">
+                    <img id="user-avatar-block" src="{{ page_params.avatar_url_medium }}" />
+                    <div id="user-avatar-source">
+                        <a href="https://en.gravatar.com/" target="_blank" class="white-color">{{t "Avatar from Gravatar" }}</a>
+                    </div>
+                </div>
                 <div id="user_avatar_file_input_error" class="text-error"></div>
                 <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload avatar' }}" />
                 <div id="upload_avatar_spinner"></div>