[FIX] web_unsplash: don't expose client_id in network

Unsplash CEO asked us to stop exposing our key client side (even if it was
only in the browser network and previously allowed by their API team leader).

After multiple exchange, it has been negociated that:
1. Our non saas user won't be able to apply for a production key and should
   prefix they Unsplash application name by 'Odoo:'. Their key will remain in
   test mode.
   Indeed, Unsplash won't be able to review every Odoo application and ensure
   it respects the API terms and it is a real application.
2. Our saas user will query Unsplash with a dedicated enterprise key
3. The documentation should explain it all

Task-1911345

3 files changed, 11 insertions, 40 deletions

diff --git a/addons/web_unsplash/static/src/js/unsplash_image_widget.js b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
index d353694ddea..ab900d6a03c 100644
--- a/addons/web_unsplash/static/src/js/unsplash_image_widget.js
+++ b/addons/web_unsplash/static/src/js/unsplash_image_widget.js
@@ -88,10 +88,6 @@ ImageWidget.include({
                 res_id: self.options.res_id,
             }
         }).then(function (images) {
-            for (var img in self._unsplash.selectedImages) {
-                self.unsplashAPI.notifyDownload(self._unsplash.selectedImages[img].download_url);
-            }
-
             _.each(images, function (image) {
                 image.src = image.url;
                 image.isDocument = !(/gif|jpe|jpg|png/.test(image.mimetype));
@@ -140,7 +136,7 @@ ImageWidget.include({
             self.$('.unsplash_img_container').html(QWeb.render('web_unsplash.dialog.image.content', { rows: rows }));
             self._highlightSelectedImages();
         }).fail(function (err) {
-            self.$('.unsplash_img_container').html(QWeb.render('web_unsplash.dialog.error.content', err));
+            self.$('.unsplash_img_container').html(QWeb.render('web_unsplash.dialog.error.content', { status: err }));
         }).always(function () {
             self._toggleAttachmentContaines(false);
         });
diff --git a/addons/web_unsplash/static/src/js/unsplashapi.js b/addons/web_unsplash/static/src/js/unsplashapi.js
index 0ceb2b8f8a7..a6ec5b75324 100644
--- a/addons/web_unsplash/static/src/js/unsplashapi.js
+++ b/addons/web_unsplash/static/src/js/unsplashapi.js
@@ -38,46 +38,16 @@ var UnsplashCore = Class.extend(Mixins.EventDispatcherMixin, ServicesMixin, {
         if (cachedData && (cachedData.images.length >= to || (cachedData.totalImages !== 0 && cachedData.totalImages < to))) {
             return $.when({ images: cachedData.images.slice(from, to), isMaxed: to > cachedData.totalImages });
         }
-        return this._getAPIKey().then(function (clientID) {
-            if (!clientID) {
-                return $.Deferred().reject({ key_not_found: true });
-            }
-            return self._fetchImages(query).then(function (cachedData) {
-                return { images: cachedData.images.slice(from, to), isMaxed: to > cachedData.totalImages };
-            });
+        return self._fetchImages(query).then(function (cachedData) {
+            return { images: cachedData.images.slice(from, to), isMaxed: to > cachedData.totalImages };
         });
     },
-    /**
-     * Notifies Unsplash from an image download. (API requirement)
-     *
-     * @param {String} url url of the image to notify
-     */
-    notifyDownload: function (url) {
-        $.get(url, { client_id: this.clientId });
-    },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
     /**
-     * Checks and retrieves the unsplash API key
-     *
-     * @private
-     */
-    _getAPIKey: function () {
-        var self = this;
-        if (this.clientId) {
-            return $.Deferred().resolve(self.clientId);
-        }
-        return this._rpc({
-            route: '/web_unsplash/get_client_id',
-        }).then(function (res) {
-            self.clientId = res;
-            return res;
-        });
-    },
-    /**
      * Fetches images from unsplash and stores it in cache
      *
      * @param {String} query search terms
@@ -96,10 +66,15 @@ var UnsplashCore = Class.extend(Mixins.EventDispatcherMixin, ServicesMixin, {
         var payload = {
             query: query,
             page: cachedData.pageCached + 1,
-            client_id: this.clientId,
             per_page: 30, // max size from unsplash API
         };
-        return $.get('https://api.unsplash.com/search/photos/', payload).then(function (result) {
+        return this._rpc({
+            route: '/web_unsplash/fetch_images',
+            params: payload,
+        }).then(function (result) {
+            if (result.error) {
+                return $.Deferred().reject(result.error);
+            }
             cachedData.pageCached++;
             cachedData.images.push.apply(cachedData.images, result.results);
             cachedData.maxPages = result.total_pages;
diff --git a/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml b/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
index 409c435884b..05202e073b2 100644
--- a/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
+++ b/addons/web_unsplash/static/src/xml/unsplash_image_widget.xml
@@ -50,7 +50,7 @@
 <t t-name="web_unsplash.dialog.error.content">
     <div class="row mt16 text-muted unsplash_error">
         <div class="m-auto text-center">
-            <t t-if="key_not_found">
+            <t t-if="status == 'key_not_found'">
                 <t t-call="web_unsplash.dialog.error.credentials">
                     <t t-set="title">
                         Unsplash requires an access key and an application ID