CT-248: Hide the API key on subsequent visits to the configuration page (#62)

* Hide the API key on subsequent visits to the configuration page

* Changelog

Author: yanscalyr

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.3.0
+
+Obscure the API key on the configuration page on subsequent visits (#62) (Yan Shnayder)
+Releases will now also be made in `.zip` format for use with `grafana-cli`
+
 ## 2.2.0
 
 Support variable substitution in Power Queries (#54) (Yan Shnayder)

dist/README.md

@@ -50,7 +50,7 @@ from GitHub.
     Stable version:
 
     ```bash
-    tar -xvf scalyr_grafana_plugin_44eb7da.tar.gz
+    tar -xvf scalyr_grafana_plugin_fcf8a75.tar.gz
     cp -rf dist/ /var/lib/grafana/plugins/scalyr/
     ```
 

dist/module.js

@@ -1,18 +1,35 @@
 <div class="gf-form-group">
   <div class="gf-form-inline">
-    <div class="gf-form">
+    <div class="gf-form" ng-if="ctrl.showKey">
       <span class="gf-form-label width-10">Scalyr API Key</span>
       <input
         type="text"
         class="gf-form-input width-30 gf-form-input--has-help-icon"
-        ng-model="ctrl.current.jsonData.scalyrApiKey"
+        ng-model="ctrl.current.jsonData.scalyrApiKeyView"
         spellcheck='false'
         placeholder="Scalyr API Key"
+        ng-change="ctrl.onChangeKey()"
       ></input>
       <info-popover mode="right-absolute">
         Set this to your read Log Access Key
       </info-popover>
     </div>
+    <div class="gf-form" ng-if="!ctrl.showKey">
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Scalyr API Key</span>
+        <input
+          type="text"
+          class="gf-form-input width-30 gf-form-input--has-help-icon"
+          spellcheck='false'
+          placeholder="Scalyr API Key"
+          disabled
+        ></input>
+        <info-popover mode="right-absolute">
+          Set this to your read Log Access Key
+        </info-popover>
+      </div>
+      <button class="btn navbar-button gf-timepicker-nav-btn width-5" ng-click="ctrl.resetKey()">Reset</button>
+    </div>
   </div>
   <div class="gf-form-inline">
     <div class="gf-form">

dist/partials/config.html

@@ -1,10 +1,24 @@
 
 export class GenericConfigCtrl {
   constructor($scope)  {
+    this.showKey = true;
     this.scope = $scope;
     if (!this.current.jsonData.scalyrUrl) {
       this.current.jsonData.scalyrUrl = 'https://www.scalyr.com';
     }
+    if (this.current.jsonData.scalyrApiKey) {
+      this.showKey = false;
+    }
+  }
+
+  onChangeKey() {
+    this.current.jsonData.scalyrApiKey = this.current.jsonData.scalyrApiKeyView
+  }
+
+  resetKey() {
+    this.current.jsonData.scalyrApiKey = "";
+    this.current.jsonData.scalyrApiKeyView = "";
+    this.showKey = true;
   }
 }
 

src/config_ctrl.js

@@ -1,18 +1,35 @@
 <div class="gf-form-group">
   <div class="gf-form-inline">
-    <div class="gf-form">
+    <div class="gf-form" ng-if="ctrl.showKey">
       <span class="gf-form-label width-10">Scalyr API Key</span>
       <input
         type="text"
         class="gf-form-input width-30 gf-form-input--has-help-icon"
-        ng-model="ctrl.current.jsonData.scalyrApiKey"
+        ng-model="ctrl.current.jsonData.scalyrApiKeyView"
         spellcheck='false'
         placeholder="Scalyr API Key"
+        ng-change="ctrl.onChangeKey()"
       ></input>
       <info-popover mode="right-absolute">
         Set this to your read Log Access Key
       </info-popover>
     </div>
+    <div class="gf-form" ng-if="!ctrl.showKey">
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Scalyr API Key</span>
+        <input
+          type="text"
+          class="gf-form-input width-30 gf-form-input--has-help-icon"
+          spellcheck='false'
+          placeholder="Scalyr API Key"
+          disabled
+        ></input>
+        <info-popover mode="right-absolute">
+          Set this to your read Log Access Key
+        </info-popover>
+      </div>
+      <button class="btn navbar-button gf-timepicker-nav-btn width-5" ng-click="ctrl.resetKey()">Reset</button>
+    </div>
   </div>
   <div class="gf-form-inline">
     <div class="gf-form">