show token_auth only on click

5 files changed, 64 insertions, 2 deletions

diff --git a/plugins/API/templates/listAllAPI.twig b/plugins/API/templates/listAllAPI.twig
index 258b74c49d..9aa2685881 100644
--- a/plugins/API/templates/listAllAPI.twig
+++ b/plugins/API/templates/listAllAPI.twig
@@ -20,7 +20,7 @@
     <div piwik-content-block content-title="{{ 'API_UserAuthentication'|translate|e('html_attr') }}">
         <p>
             {{ 'API_UsingTokenAuth'|translate('','',"")|raw }}<br/>
-            <pre piwik-select-on-focus id='token_auth'>&amp;token_auth=<strong>{{ token_auth }}</strong></pre><br/>
+            <pre piwik-select-on-focus id='token_auth'>&amp;token_auth=<strong piwik-show-sensitive-data="{{ token_auth }}" data-click-element-selector="#token_auth"></strong></pre><br/>
             {{ 'API_KeepTokenSecret'|translate('<b>','</b>')|raw }}<br />
             {{ 'API_ChangeTokenHint'|translate('<a href="' ~ linkTo({
                 'module': 'UsersManager',
diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index f5a1a594bc..7a221bc7db 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -155,6 +155,7 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/directive.module.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/attributes.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/field-condition.js";
+        $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/autocomplete-matched.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/common/directives/ignore-click.js";
@@ -255,6 +256,7 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'General_MultiSitesSummary';
         $translationKeys[] = 'General_SearchNoResults';
         $translationKeys[] = 'CoreHome_ChooseX';
+        $translationKeys[] = 'CoreHome_ClickToSeeFullInformation';
         $translationKeys[] = 'CoreHome_YouAreUsingTheLatestVersion';
         $translationKeys[] = 'CoreHome_IncludeRowsWithLowPopulation';
         $translationKeys[] = 'CoreHome_ExcludeRowsWithLowPopulation';
diff --git a/plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js b/plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js
new file mode 100644
index 0000000000..1744f9e622
--- /dev/null
+++ b/plugins/CoreHome/angularjs/common/directives/show-sensitive-data.js
@@ -0,0 +1,59 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Handles visibility of sensitive data. By default data will be shown replaced with stars (*)
+ * On click on the element the full data will be shown
+ *
+ * Configuration attributes:
+ * data-show-characters          number of characters to show in clear text (defaults to 6)
+ * data-click-element-selector   selector for element that will show the full data on click (defaults to element)
+ *
+ * Example:
+ * <div piwik-show-sensitive-date="some text"></div>
+ */
+(function () {
+    angular.module('piwikApp.directive').directive('piwikShowSensitiveData', piwikShowSensitiveData);
+
+    function piwikShowSensitiveData(){
+        return {
+            restrict: 'A',
+            link: function(scope, element, attr) {
+
+                var sensitiveData = attr.piwikShowSensitiveData || attr.text();
+                var showCharacters = attr.showCharacters || 6;
+                var clickElement = attr.clickElementSelector || element;
+
+                var protectedData = '';
+                if (showCharacters > 0) {
+                    protectedData += sensitiveData.substr(0, showCharacters);
+                }
+                protectedData += sensitiveData.substr(showCharacters).replace(/./g, '*');
+                element.html(protectedData);
+
+                function onClickHandler(event) {
+                    element.html(sensitiveData);
+                    $(clickElement).css({
+                        cursor: ''
+                    });
+                    $(clickElement).tooltip("destroy");
+                }
+
+                $(clickElement).tooltip({
+                    content: _pk_translate('CoreHome_ClickToSeeFullInformation'),
+                    items: '*',
+                    track: true
+                });
+
+                $(clickElement).one('click', onClickHandler);
+                $(clickElement).css({
+                    cursor: 'pointer'
+                })
+            }
+        };
+    }
+})();
diff --git a/plugins/CoreHome/lang/en.json b/plugins/CoreHome/lang/en.json
index 808250348e..57c5071c4a 100644
--- a/plugins/CoreHome/lang/en.json
+++ b/plugins/CoreHome/lang/en.json
@@ -5,6 +5,7 @@
         "CheckForUpdates": "Check for updates",
         "CheckPiwikOut": "Check Piwik out!",
         "ClickToEditX": "Click to edit %s",
+        "ClickToSeeFullInformation": "Click to see the full information",
         "CloseSearch": "Close search",
         "CloseWidgetDirections": "You can close this widget by clicking on the 'X' icon at the top of the widget.",
         "ChooseX": "Choose %1$s",
diff --git a/plugins/UsersManager/templates/userSettings.twig b/plugins/UsersManager/templates/userSettings.twig
index 2824262acd..34a2b5a75a 100644
--- a/plugins/UsersManager/templates/userSettings.twig
+++ b/plugins/UsersManager/templates/userSettings.twig
@@ -109,7 +109,7 @@
 
 <div piwik-content-block
      content-title="{{ 'UsersManager_TokenAuth'|translate|e('html_attr') }}">
-    <pre piwik-select-on-focus id="token_auth_user">{{ userTokenAuth }}</pre>
+    <pre piwik-select-on-focus id="token_auth_user" piwik-show-sensitive-data="{{ userTokenAuth }}"></pre>
 
     <p>{{ 'UsersManager_TokenRegenerateLogoutWarning'|translate }}</p>
     <button class="btn btn-link"