Fixed status, added screenshot

src/config_ctrl.ts

@@ -22,18 +22,20 @@ function getAccessToken(input: string): string {
 export default class PocketConfigCtrl {
   static templateUrl = 'partials/config.html';
   backendSrv: any;
-  datasourceSrv: any;
+  $rootScope: any;
   current: any;
   status: string;
+  hasToken: boolean;
 
   /** @ngInject */
-  constructor(backendSrv, datasourceSrv) {
+  constructor(backendSrv, $rootScope) {
     this.backendSrv = backendSrv;
-    this.datasourceSrv = datasourceSrv;
+    this.$rootScope = $rootScope;
     this.current.jsonData = this.current.jsonData || {};
     this.current.secureJsonFields = this.current.secureJsonFields || {};
     this.current.url = POCKET_URL;
     this.status = this.getStatus();
+    this.hasToken = this.current.jsonData.accessToken !== undefined;
 
     // Land back here to acquire access token (Step 4)
     if (getRequestToken()) {
@@ -129,6 +131,8 @@ export default class PocketConfigCtrl {
     this.current.jsonData.accessToken = accessToken;
     this.current = await this.updateDatasource();
     this.status = this.getStatus();
+    this.hasToken = true;
+    this.$rootScope.$apply();
   }
 
   async updateDatasource() {

src/partials/config.html

@@ -1,22 +1,38 @@
 <div class="grafana-info-box">
-	<h5>How it works</h5>
-	<p>
-		This datasource returns a timeseries showing the number of items saved to Pocket.
-		In order to produce the timeseries, this datasource needs to connect to your Pocket account.
-	</p>
-	<p>
-			Click the "Connect to Pocket" button below. This will open Pocket to let you log in and authenticate the datasource.
-			<div class="gf-form-button-row">
-					<button type="button" class="btn btn-success" ng-click="ctrl.connect()">
-					Connect to Pocket
-				</button>	
-			</div>
-
-
-	</p>
-	<p>Note: This will allow the datasource to retrieve your list of Pocket items, including the item URLs and titles.</p>
-	<div class="gf-form">
-			<span class="gf-form-label width-10">Status</span>
-			<input class="gf-form-input width-20" disabled type="text" ng-model="ctrl.status" />
-		</div>
+  <h5>How it works</h5>
+  <p>
+    This datasource returns a timeseries showing the number of items saved to Pocket. In
+    order to produce the timeseries, this datasource needs to connect to your Pocket
+    account.
+  </p>
+  <div ng-if="!ctrl.hasToken">
+    Click the "Connect to Pocket" button below. This will open Pocket to let you log in
+    and authenticate the datasource.
+    <div class="gf-form-button-row">
+      <button type="button" class="btn btn-success" ng-click="ctrl.connect()">
+        Connect to Pocket
+      </button>
+    </div>
+    <p class="m-t-2">
+      Note: This will allow the datasource to retrieve your list of Pocket items,
+      including the item URLs and titles. It will not allow the datasource to see your
+      password or to modify your items.
+    </p>
+  </div>
+  <div ng-if="ctrl.hasToken">
+    The datasource has received an access token from Pocket. If you experience any
+    authentication issues, you can refresh it here.
+    <div class="gf-form-button-row">
+      <button type="button" class="btn btn-secondary" ng-click="ctrl.connect()">
+        Refresh connection to Pocket
+      </button>
+    </div>
+    <p class="m-t-2">
+      If you have not done so, create a dashboard with a panel to see your Pocket usage.
+    </p>
+  </div>
+  <div class="gf-form m-t-2">
+    <span class="gf-form-label width-10">Status</span>
+    <input class="gf-form-input width-20" disabled type="text" ng-model="ctrl.status" />
+  </div>
 </div>