Allow easy setting of accessToken in explorer UI.

index.js

@@ -23,7 +23,7 @@ module.exports = explorer;
 
 function explorer(loopbackApplication, options) {
   options = _defaults({}, options, {
-    basePath: loopbackApplication.get('restApiRoot') || '/',
+    basePath: loopbackApplication.get('restApiRoot') || '',
     name: 'swagger',
     resourcePath: 'resources',
     apiInfo: loopbackApplication.get('apiInfo') || {}
@@ -37,7 +37,7 @@ function explorer(loopbackApplication, options) {
 
   app.get('/config.json', function(req, res) {
     res.send({
-      url: path.join(options.basePath, options.name, options.resourcePath)
+      url: path.join(options.basePath || '/', options.name, options.resourcePath)
     });
   });
   // Allow specifying a static file root for swagger files. Any files in that folder

public/css/loopbackStyles.css

@@ -0,0 +1,21 @@
+/* Styles used for loopback explorer customizations */
+.accessTokenDisplay {
+  color: white;
+  margin-right: 10px;
+}
+.accessTokenDisplay.set {
+  border-bottom: 1px dotted #333; position: relative; cursor: pointer;
+}
+.accessTokenDisplay.set:hover:after {
+  content: attr(data-tooltip);
+  position: absolute;
+  white-space: nowrap;
+  background: rgba(0, 0, 0, 0.85);
+  padding: 3px 7px;
+  color: #FFF;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  right: 0;
+  bottom: -30px;
+}

public/index.html

@@ -7,6 +7,7 @@
   <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
   <link href='css/reset.css' media='print' rel='stylesheet' type='text/css'/>
   <link href='css/screen.css' media='print' rel='stylesheet' type='text/css'/>
+  <link href='css/loopbackStyles.css' rel='stylesheet' type='text/css'/>
   <script type="text/javascript" src="lib/shred.bundle.js"></script>
   <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
   <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
@@ -31,10 +32,11 @@
   <div class="swagger-ui-wrap">
     <a id="logo">StrongLoop API Explorer</a>
     <form id='api_selector'>
-      <!-- Uncomment to enable url switching -->
-      <!-- <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div> -->
-      <div class='input'><input placeholder="accessToken" id="input_accessToken" name="accessToken" type="text"/></div>
-      <div class='input'><a id="explore" href="#">Explore</a></div>
+      <div class='input'>
+        <span class='accessTokenDisplay'>Access Token Not Set</span>
+        <input placeholder="accessToken" id="input_accessToken" name="accessToken" type="text"/>
+      </div>
+      <div class='input'><a id="explore" type="submit">Set Access Token</a></div>
     </form>
   </div>
 </div>

public/lib/loadSwaggerUI.js

@@ -1,42 +1,65 @@
 'use strict';
 
 // Refactoring of inline script from index.html.
-/*global SwaggerUi, log, ApiKeyAuthorization, hljs */
+/*global SwaggerUi, log, ApiKeyAuthorization, hljs, window, $ */
 $(function() {
   $.getJSON('config.json', function(config) {
       log(config);
       loadSwaggerUi(config);
   });
-});
 
+  var accessToken;
   function loadSwaggerUi(config) {
     window.swaggerUi = new SwaggerUi({
-      url: config.url || "/swagger/resources",
-      apiKey: "",
-      dom_id: "swagger-ui-container",
+      url: config.url || '/swagger/resources',
+      apiKey: '',
+      dom_id: 'swagger-ui-container',
       supportHeaderParams: true,
       supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
       onComplete: function(swaggerApi, swaggerUi) {
-        log("Loaded SwaggerUI");
+        log('Loaded SwaggerUI');
         log(swaggerApi);
         log(swaggerUi);
         $('pre code').each(function(i, e) {hljs.highlightBlock(e); });
       },
       onFailure: function(data) {
-        log("Unable to Load SwaggerUI");
+        log('Unable to Load SwaggerUI');
         log(data);
       },
-      docExpansion: "none"
+      docExpansion: 'none'
     });
 
-    $('#input_accessToken').change(function() {
-      var key = $('#input_accessToken')[0].value;
-      log("key: " + key);
-      if(key && key.trim() !== "") {
-        log("added accessToken " + key);
-        window.authorizations.add("key", new ApiKeyAuthorization("accessToken", key, "query"));
-      }
-    });
+    $('#explore').click(setAccessToken);
+    $('#api_selector').submit(setAccessToken);
+    $('#input_accessToken').keyup(onInputChange);
 
     window.swaggerUi.load();
   }
+
+  function setAccessToken(e) {
+    e.stopPropagation(); // Don't let the default #explore handler fire
+    e.preventDefault();
+    var key = $('#input_accessToken')[0].value;
+    log('key: ' + key);
+    if(key && key.trim() !== '') {
+      log('added accessToken ' + key);
+      window.authorizations.add('key', new ApiKeyAuthorization('accessToken', key, 'query'));
+      accessToken = key;
+      $('.accessTokenDisplay').text('Access Token Set.').addClass('set');
+      $('.accessTokenDisplay').attr('data-tooltip', 'Current Token: ' + key);
+    }
+  }
+
+  function onInputChange(e) {
+    var el = e.currentTarget;
+    var key = $(e.currentTarget)[0].value;
+    if (!key || key.trim === '') return;
+    if (accessToken !== key) {
+      $('.accessTokenDisplay').text('Access Token changed; submit to confirm.');
+    } else {
+      $('.accessTokenDisplay').text('Access Token Set.');
+    }
+  }
+});
+
+