[FIX] website: deal with unauthorized users

Show an appropriate message if the user does not have access to the analytics views.

3 files changed, 159 insertions, 125 deletions

diff --git a/addons/website/static/src/js/website.backendDashboard.js b/addons/website/static/src/js/website.backendDashboard.js
index a6b16af212e..ed241fd2215 100644
--- a/addons/website/static/src/js/website.backendDashboard.js
+++ b/addons/website/static/src/js/website.backendDashboard.js
@@ -178,129 +178,11 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
             });
             $analytics_auth.appendTo($analytics_components);
 
-            // 2. ActiveUsers component
-            var $analytics_users = $('<div>');
-            var activeUsers = new gapi.analytics.ext.ActiveUsers({
-                container: $analytics_users[0],
-                pollingInterval: 10,
+            self.handle_analytics_auth($analytics_components);
+            gapi.analytics.auth.on('signIn', function() {
+                self.handle_analytics_auth($analytics_components);
             });
-            $analytics_users.appendTo($analytics_components);
 
-            // 3. View Selector
-            var $analytics_view_selector = $('<div>').addClass('col-md-12 o_properties_selection');
-            var viewSelector = new gapi.analytics.ViewSelector({
-                container: $analytics_view_selector[0],
-            });
-            viewSelector.execute();
-            $analytics_view_selector.appendTo($analytics_components);
-
-            // 4. Chart graph
-            var start_date = '7daysAgo';
-            if (self.date_range === 'month') {
-                start_date = '30daysAgo';
-            } else if (self.date_range === 'year') {
-                start_date = '365daysAgo';
-            }
-            var $analytics_chart_2 = $('<div>').addClass('col-md-6');
-            var breakdownChart = new gapi.analytics.googleCharts.DataChart({
-                query: {
-                    'dimensions': 'ga:date',
-                    'metrics': 'ga:sessions',
-                    'start-date': start_date,
-                    'end-date': 'yesterday'
-                },
-                chart: {
-                    type: 'LINE',
-                    container: $analytics_chart_2[0],
-                    options: {
-                        title: 'All',
-                        width: '100%'
-                    }
-                }
-            });
-            $analytics_chart_2.appendTo($analytics_components);
-
-            // 5. Chart table
-            var $analytics_chart_1 = $('<div>').addClass('col-md-6');
-            var mainChart = new gapi.analytics.googleCharts.DataChart({
-                query: {
-                    'dimensions': 'ga:medium',
-                    'metrics': 'ga:sessions',
-                    'sort': '-ga:sessions',
-                    'max-results': '6'
-                },
-                chart: {
-                    type: 'TABLE',
-                    container: $analytics_chart_1[0],
-                    options: {
-                        width: '100%'
-                    }
-                }
-            });
-            $analytics_chart_1.appendTo($analytics_components);
-
-            // Events handling & animations
-
-            var table_row_listener;
-
-            viewSelector.on('change', function(ids) {
-                var options = {query: {ids: ids}};
-                activeUsers.set({ids: ids}).execute();
-                mainChart.set(options).execute();
-                breakdownChart.set(options).execute();
-
-                if (table_row_listener) { google.visualization.events.removeListener(table_row_listener); }
-            });
-
-            mainChart.on('success', function(response) {
-                var chart = response.chart;
-                var dataTable = response.dataTable;
-
-                table_row_listener = google.visualization.events.addListener(chart, 'select', function() {
-                    var options;
-                    if (chart.getSelection().length) {
-                        var row =  chart.getSelection()[0].row;
-                        var medium =  dataTable.getValue(row, 0);
-                        options = {
-                            query: {
-                                filters: 'ga:medium==' + medium,
-                            },
-                            chart: {
-                                options: {
-                                    title: medium,
-                                }
-                            }
-                        };
-                    } else {
-                        options = {
-                            chart: {
-                                options: {
-                                    title: 'All',
-                                }
-                            }
-                        };
-                        delete breakdownChart.get().query.filters;
-                    }
-                    breakdownChart.set(options).execute();
-                });
-            });
-
-            // Add CSS animation to visually show the when users come and go.
-            activeUsers.once('success', function() {
-                var element = this.container.firstChild;
-                var timeout;
-
-                this.on('change', function(data) {
-                    element = this.container.firstChild;
-                    var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing';
-                    element.className += (' ' + animationClass);
-
-                    clearTimeout(timeout);
-                    timeout = setTimeout(function() {
-                        element.className = element.className.replace(/ is-(increasing|decreasing)/g, '');
-                    }, 3000);
-                });
-            });
         });
     },
 
@@ -369,6 +251,149 @@ var Dashboard = Widget.extend(ControlPanelMixin, {
         }
     },
 
+    handle_analytics_auth: function($analytics_components) {
+        $analytics_components.find('.js_unauthorized_message').remove();
+
+        // Check if the user is authenticated and has the right to make API calls
+        if (!gapi.analytics.auth.getAuthResponse()) {
+            this.display_unauthorized_message($analytics_components, 'not_connected');
+        } else if (gapi.analytics.auth.getAuthResponse() && gapi.analytics.auth.getAuthResponse().scope.indexOf('https://www.googleapis.com/auth/analytics ') === -1) {
+            this.display_unauthorized_message($analytics_components, 'no_right');
+        } else {
+            this.make_analytics_calls($analytics_components);
+        }
+    },
+
+    display_unauthorized_message: function($analytics_components, reason) {
+        $analytics_components.prepend($(QWeb.render('website.unauthorized_analytics', {reason: reason})));
+    },
+
+    make_analytics_calls: function($analytics_components) {
+        // 2. ActiveUsers component
+        var $analytics_users = $('<div>');
+        var activeUsers = new gapi.analytics.ext.ActiveUsers({
+            container: $analytics_users[0],
+            pollingInterval: 10,
+        });
+        $analytics_users.appendTo($analytics_components);
+
+        // 3. View Selector
+        var $analytics_view_selector = $('<div>').addClass('col-md-12 o_properties_selection');
+        var viewSelector = new gapi.analytics.ViewSelector({
+            container: $analytics_view_selector[0],
+        });
+        viewSelector.execute();
+        $analytics_view_selector.appendTo($analytics_components);
+
+        // 4. Chart graph
+        var start_date = '7daysAgo';
+        if (this.date_range === 'month') {
+            start_date = '30daysAgo';
+        } else if (this.date_range === 'year') {
+            start_date = '365daysAgo';
+        }
+        var $analytics_chart_2 = $('<div>').addClass('col-md-6');
+        var breakdownChart = new gapi.analytics.googleCharts.DataChart({
+            query: {
+                'dimensions': 'ga:date',
+                'metrics': 'ga:sessions',
+                'start-date': start_date,
+                'end-date': 'yesterday'
+            },
+            chart: {
+                type: 'LINE',
+                container: $analytics_chart_2[0],
+                options: {
+                    title: 'All',
+                    width: '100%'
+                }
+            }
+        });
+        $analytics_chart_2.appendTo($analytics_components);
+
+        // 5. Chart table
+        var $analytics_chart_1 = $('<div>').addClass('col-md-6');
+        var mainChart = new gapi.analytics.googleCharts.DataChart({
+            query: {
+                'dimensions': 'ga:medium',
+                'metrics': 'ga:sessions',
+                'sort': '-ga:sessions',
+                'max-results': '6'
+            },
+            chart: {
+                type: 'TABLE',
+                container: $analytics_chart_1[0],
+                options: {
+                    width: '100%'
+                }
+            }
+        });
+        $analytics_chart_1.appendTo($analytics_components);
+
+        // Events handling & animations
+
+        var table_row_listener;
+
+        viewSelector.on('change', function(ids) {
+            var options = {query: {ids: ids}};
+            activeUsers.set({ids: ids}).execute();
+            mainChart.set(options).execute();
+            breakdownChart.set(options).execute();
+
+            if (table_row_listener) { google.visualization.events.removeListener(table_row_listener); }
+        });
+
+        mainChart.on('success', function(response) {
+            var chart = response.chart;
+            var dataTable = response.dataTable;
+
+            table_row_listener = google.visualization.events.addListener(chart, 'select', function() {
+                var options;
+                if (chart.getSelection().length) {
+                    var row =  chart.getSelection()[0].row;
+                    var medium =  dataTable.getValue(row, 0);
+                    options = {
+                        query: {
+                            filters: 'ga:medium==' + medium,
+                        },
+                        chart: {
+                            options: {
+                                title: medium,
+                            }
+                        }
+                    };
+                } else {
+                    options = {
+                        chart: {
+                            options: {
+                                title: 'All',
+                            }
+                        }
+                    };
+                    delete breakdownChart.get().query.filters;
+                }
+                breakdownChart.set(options).execute();
+            });
+        });
+
+        // Add CSS animation to visually show the when users come and go.
+        activeUsers.once('success', function() {
+            var element = this.container.firstChild;
+            var timeout;
+
+            this.on('change', function(data) {
+                element = this.container.firstChild;
+                var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing';
+                element.className += (' ' + animationClass);
+
+                clearTimeout(timeout);
+                timeout = setTimeout(function() {
+                    element.className = element.className.replace(/ is-(increasing|decreasing)/g, '');
+                }, 3000);
+            });
+        });
+    },
+
     /*
      * Credits to https://github.com/googleanalytics/ga-dev-tools
      * This is the Active Users component that polls
diff --git a/addons/website/static/src/less/website.backendDashboard.less b/addons/website/static/src/less/website.backendDashboard.less
index 7002118d739..fe4680e2d8e 100644
--- a/addons/website/static/src/less/website.backendDashboard.less
+++ b/addons/website/static/src/less/website.backendDashboard.less
@@ -49,6 +49,10 @@
             margin-bottom: 10px;
         }
 
+        .gapi-analytics-auth-styles-signinbutton {
+            cursor: pointer;
+        }
+
         .ActiveUsers {
             position: absolute;
             top: 0;
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index a9a4fc3488a..39e181865c2 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -15,25 +15,30 @@
             <div class="col-xs-12 o_box">
                 <h2>Visits</h2>
 
-                <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id" id="analytics_dashboard" class="row js_analytics_components">
+                <div t-if="widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id" class="row js_analytics_components">
                 </div>
 
                 <div t-if="!(widget.dashboards_data.visits &amp;&amp; widget.dashboards_data.visits.ga_client_id)">
                     <div class="o_demo_background">
                         <div class="o_layer">
                         </div>
-                        <button class="btn btn-sm btn-primary js_link_analytics_settings">Link your Analytics Account</button>
+                        <button class="btn btn-sm btn-primary js_link_analytics_settings">Link my Analytics Account</button>
                     </div>
                 </div>
 
-                <a href="#" class="js_link_analytics_settings">Edit my Analytics Account</a>
+                <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a>
 
             </div>
         </div>
     </t>
 
+    <div t-name="website.unauthorized_analytics" class="col-xs-12 js_unauthorized_message">
+        <span t-if="reason === 'not_connected'">You need to log in to your Google Account before: </span>
+        <span t-if="reason === 'no_right'">You do not seem to have access to this Analytics Account.</span>
+    </div>
+
     <div t-name="website.ga_dialog_content">
-        Your Google Analytic Client ID: <input type="text" name="ga_client_id" t-att-value="ga_key"></input>
+        Your Google Analytic Client ID: <input type="text" name="ga_client_id" t-att-value="ga_key" style="width: 100%"></input>
         <br/>Go to our <a href="https://www.odoo.com/documentation/user/9.0/website/google_analytics.html" target="_blank">User Documentation</a> to get more information.
     </div>