#3186 : Wikibase login form shows Wikibase instance logo (#3702)

* #3186 : Wikibase login form shows Wikibase instance logo

* Logos shown in the UI during selection of instance to work against

* CSS for list of instances, error handling

* Cache wikibase logo urls.

* Replacing logo alt text as translation string and removing the duplicate property

* Replacing logo alt text as translation string and removing the duplicate property

Co-authored-by: Antonin Delpeuch <antonin@delpeuch.eu>

extensions/wikidata/module/langs/translation-en.json

@@ -106,6 +106,7 @@
     "wikibase-account/logged-in-as": "You are logged in as:",
     "wikibase-account/log-out": "Log out",
     "wikibase-account/connecting-to-wikibase": "Connecting to Wikibase…",
+    "wikibase-account/logo-alt-text": "$1 Logo",
     "perform-wikibase-edits/dialog-header": "Upload edits to $1",
     "perform-wikibase-edits/review-your-edits": "You are about to upload $1 edits to <a href=\"$2\" target=\"_blank\">$3</a>. Please check them carefully. Large edit batches should be submitted for <a href=\"https://www.wikidata.org/wiki/Wikidata:Requests_for_permissions/Bot\" target=\"_blank\">bot review</a> first.",
     "perform-wikibase-edits/logged-in-as": "You are logged in as",

extensions/wikidata/module/langs/translation-en_GB.json

@@ -120,6 +120,7 @@
     "wikibase-account/log-in": "Log in",
     "wikibase-account/logged-in-as": "You are logged in as:",
     "wikibase-account/log-out": "Log out",
+    "wikibase-account/logo-alt-text": "$1 Logo",
     "wikibase-preview/new-id": "new item",
     "wikibase-schema/unsaved-warning": "You have made unsaved changes to your Wikidata schema. Close anyway?",
     "wikibase-schema/incomplete-schema-could-not-be-saved": "Your schema is incomplete so it cannot be saved yet.",

extensions/wikidata/module/scripts/dialogs/manage-account-dialog.js

@@ -79,6 +79,11 @@ ManageAccountDialog.displayPasswordLogin = function (onSuccess) {
   const frame = $(DOM.loadHTML("wikidata", "scripts/dialogs/password-login-dialog.html"));
   const elmts = DOM.bind(frame);
   ManageAccountDialog.initCommon(elmts);
+  WikibaseManager.getSelectedWikibaseLogoURL(function(data) {
+	elmts.wikibaseLogoImg.attr("src", data);
+  });
+  elmts.wikibaseMainPage.attr("href", WikibaseManager.getSelectedWikibaseMainPage());
+  elmts.wikibaseLogoImg.attr("alt", $.i18n('wikibase-account/logo-alt-text', WikibaseManager.getSelectedWikibaseName()));
   elmts.explainBotPasswords.html($.i18n('wikibase-account/explain-bot-passwords', WikibaseManager.getSelectedWikibaseRoot() + 'Special:BotPasswords'));
   elmts.explainOwnerOnlyConsumerLogin.html($.i18n('wikibase-account/explain-owner-only-consumer-login'));
   elmts.invalidCredentials.text($.i18n('wikibase-account/invalid-credentials'));

extensions/wikidata/module/scripts/dialogs/password-login-dialog.html

@@ -2,8 +2,8 @@
   <div class="dialog-header" bind="dialogHeader"></div>
   <div class="dialog-body" bind="dialogBody" style="position: relative; height: 140px">
     <div class="wikidata-logo">
-      <a href="https://www.wikidata.org/" target="_blank">
+      <a bind="wikibaseMainPage" target="_blank">
-        <img src="extension/wikidata/images/Wikibase_logo.png" alt="Wikidata logo"/>
+        <img bind="wikibaseLogoImg" alt="Wikibase logo"/>
       </a>
     </div>
     <div class="right-of-logo">

extensions/wikidata/module/scripts/dialogs/wikibase-dialog.js

@@ -28,17 +28,20 @@ WikibaseDialog.populateDialog = function () {
 
   WikibaseDialog.elmts.wikibaseList.empty();
   for (let wikibaseName in wikibases) {
-    if (wikibases.hasOwnProperty(wikibaseName)) {
+    WikibaseManager.getSelectedWikibaseLogoURL(function(data) {
-      let item = "<tr onclick=\"WikibaseDialog.selectWikibase('" + wikibaseName + "')\">";
+      if (wikibases.hasOwnProperty(wikibaseName)) {
-      item += "<td>" + wikibaseName + "</td>";
+        let item = "<tr onclick=\"WikibaseDialog.selectWikibase('" + wikibaseName + "')\">";
-      if (wikibaseName.toLowerCase() === WikibaseManager.getSelectedWikibaseName().toLowerCase()) {
+        item += "<td class=\"wikibase-dialog-wikibase-logo\">" + "<img src=\""+ data + "\" alt=\"" + $.i18n('wikibase-account/logo-alt-text', wikibaseName) + "\"/>" + "</td>";
-        item += "<td><a class=\"wikibase-dialog-selector-remove wikibase-selected\" onclick=\"void(0)\"></a></td>";
+        item += "<td>" + wikibaseName + "</td>";
-      } else {
+        if (wikibaseName.toLowerCase() === WikibaseManager.getSelectedWikibaseName().toLowerCase()) {
-        item += "<td><a class=\"wikibase-dialog-selector-remove\" onclick=\"WikibaseDialog.removeWikibase(event, '" + wikibaseName + "')\"></a></td>";
+          item += "<td><a class=\"wikibase-dialog-selector-remove wikibase-selected\" onclick=\"void(0)\"></a></td>";
+        } else {
+	      item += "<td><a class=\"wikibase-dialog-selector-remove\" onclick=\"WikibaseDialog.removeWikibase(event, '" + wikibaseName + "')\"></a></td>";
+        }
+        item += "</tr>";
+        WikibaseDialog.elmts.wikibaseList.append(item);
       }
-      item += "</tr>";
+	}, wikibaseName);
-      WikibaseDialog.elmts.wikibaseList.append(item);
-    }
   }
 };
 

extensions/wikidata/module/scripts/wikibase-manager.js

@@ -188,3 +188,60 @@ WikibaseManager.fetchManifestFromURL = function (manifestURL, onSuccess, onError
   });
 };
 
+var wikibaseLogoURLCache = {
+  data: {},
+  exist: function (url) {
+    return wikibaseLogoURLCache.data.hasOwnProperty(url);
+  },
+  get: function (url) {
+    return wikibaseLogoURLCache.data[url];
+  },
+  set: function (url, cachedData) {
+    wikibaseLogoURLCache.data[url] = cachedData.responseJSON.query.general.logo;
+  }
+};
+
+
+// Retrives the wikibaseName instance site info, if wikibaseName is empty returns the selected wikibase site info
+WikibaseManager.retrieveLogoUrlFromSiteInfo = function(onSuccess, onError, wikibaseName) {
+  var params = {
+    action: 'query',
+    meta: 'siteinfo',
+    format: 'json'
+  };
+  let wikibase = (wikibaseName) ? WikibaseManager.wikibases[wikibaseName] : WikibaseManager.getSelectedWikibase();
+  const url = wikibase.mediawiki.api;
+  return $.ajax({
+    url: url,
+    data: params,
+    dataType: "jsonp",
+    timeout: 1000,
+    cache: true,
+    beforeSend: function () {
+      if (wikibaseLogoURLCache.exist(url)) {
+        onSuccess(wikibaseLogoURLCache.get(url));
+        return false;
+      }
+      return true;
+    },
+    complete: function (jqXHR, textStatus) {
+      wikibaseLogoURLCache.set(url, jqXHR);
+    },
+    success: function(response) {
+      onSuccess(response.query.general.logo);
+    },
+    error: function(xhr, status, error) {
+      onError(xhr, status, error);
+	},
+  });
+};
+
+// Retrives the logo url of wikibaseName, if wikibaseName is empty returns the selected wikibase logo url
+WikibaseManager.getSelectedWikibaseLogoURL = function(onDone, wikibaseName) {
+  WikibaseManager.retrieveLogoUrlFromSiteInfo(function(data) {
+    onDone(data);
+  }, function(xhr, status, error) {
+    onDone("extension/wikidata/images/Wikibase_logo.png");
+  }, wikibaseName);
+};
+

extensions/wikidata/module/styles/dialogs/wikibase-dialog.less

@@ -42,3 +42,12 @@
 .wikibase-dialog-selector-remove.wikibase-selected:hover {
   cursor: not-allowed;
 }
+
+.wikibase-dialog-wikibase-logo {
+  width: 12%;
+}
+
+.wikibase-dialog-wikibase-logo img{
+  max-height: 60px;
+  max-width: 60px;
+}