diff --git a/index.html b/index.html
index ea23667..5b058ed 100644
--- a/index.html
+++ b/index.html
@@ -153,18 +153,19 @@
           <div class="col-md-12">
             <h2>Go ahead, test our login</h2>
 
-            <div ng-if="vm.error" ng-bind="vm.error.message" class="alert alert-warning">err</div>
+            <div ng-if="vm.error" class="alert alert-warning"><span ng-bind="vm.error.message"></span><button class="btn btn-danger pull-right" type="button" ng-click="vm.error = null">X</button></div>
             <div ng-if="vm._working" class="alert alert-info">
               <marquee>taking my sweet time to do something in the background...</marquee>
             </div>
+            <div ng-if="vm.validated.provider" class="alert alert-success"><span ng-bind="vm.validated.provider"> is a valid login provider</span></div>
 
             <label>Address:</label>
             <input type="text" placeholder="ex: john@example.com" class="form-control" ng-model="vm.form.id" ng-change="vm.fn.changeUser()">
             <label ng-if="vm.advanced">Identity Issuer:</label>
             <input ng-if="vm.advanced" type="text" class="form-control" ng-model="vm.form.provider" placeholder="ex: sso.example.com" ng-change="vm.fn.changeProvider()">
-            <button class="btn btn-link" ng-if="vm.advanced" ng-click="vm.fn.toggleAdvanced()">hide advanced</button>
-            <button class="btn btn-link" ng-if="!vm.advanced" ng-click="vm.fn.toggleAdvanced()">show advanced</button>
-            <button class="btn btn-primary" ng-click="vm.fn.login()" ng-disabled="!vm.validated.provider">Login</button>
+            <button class="btn btn-link" ng-if="!vm.advanced" ng-click="vm.fn.toggleAdvanced()">open advanced</button>
+            <button class="btn btn-link" ng-if="vm.advanced" ng-click="vm.fn.toggleAdvanced()">close advanced</button>
+            <button class="btn btn-primary" ng-click="vm.api.implicitGrant()" ng-disabled="!vm.validated.provider">Login</button>
           </div>
         </div>
 
@@ -187,9 +188,9 @@
 
             <div class="row">
               <div class="col-md-5">
-                Client URI:
+                Client URI: <span ng-bind="vm.conf.client_uri"></span>
                 <br>
-                <span ng-bind="vm.conf.client_uri"></span>
+                (this is the URL of the application as per window.location.href)
               </div>
               <div class="col-md-7">
                 <pre><code>OAUTH3.clientUri({ host: "<span ng-bind="vm.clientUri"></span>" });</code></pre>
diff --git a/js/playground.js b/js/playground.js
index 903a129..805ebd9 100644
--- a/js/playground.js
+++ b/js/playground.js
@@ -77,7 +77,7 @@
         vm.form.user = parts.join('');
       } else {
         //vm.form.hasUser = false;
-        vm.form.user = null;
+        vm.form.user = '';
         provider = parts.join('');
       }
 
@@ -86,17 +86,24 @@
       }
       vm.form.userProvider = provider;
 
-      vm.fn.debounce('provider', 250).then(function () {
+      parts = vm.form.provider.split('.');
+      return vm.fn.debounce('provider', 250).then(function () {
+        // Careful: don't use state within a debounce function
         // uses vm.form.provider for lookup
-        if (vm.form.provider.length >= 5 && vm.form.provider.split('.').length >= 2) {
-          vm.api.discover();
+        if (parts.length >= 2 && parts[parts.length - 1].length >= 2 && parts.every(function (p) {return p.length})) {
+          return vm.api.discover();
         }
       });
     };
     vm.fn.changeProvider = function () {
       vm.form.providerIndependent = true;
+
+      var parts = vm.form.provider.split('.');
       vm.fn.debounce('provider', 250).then(function () {
-        console.log("[TODO] discover advanced-provider");
+        // Careful: don't use state within a debounce function
+        if (parts.length >= 2 && parts[parts.length - 1].length >= 2 && parts.every(function (p) {return p.length})) {
+          return vm.api.discover();
+        }
       });
     };
     vm.fn.toggleAdvanced = function () {
@@ -170,7 +177,8 @@
         console.log('[DEBUG] directives:');
         console.log(dir);
         vm.validated.provider = provider;
-        vm.directives = JSON.stringify(dir, null, 2);
+        vm.directives = dir;
+        //JSON.stringify(dir, null, 2);
       }, function (err) {
         if (latest !== vm.api._discoverCount) {
           console.warn('[DEBUG] ignoring stale discover error for', provider);
@@ -183,6 +191,19 @@
         vm.fn.unlock();
       });
     };
+    vm.api.implicitGrant = function () {
+      var provider = vm.validated.provider;
+      var opts = {
+        client_uri: vm.conf.client_uri
+      , subject: vm.form.user
+      };
+
+      vm.implicitGrantObj = OAUTH3.urls.implicitGrant(vm.directives, opts);
+      console.log('[DEBUG] vm.implicitGrantObj');
+      console.log(vm.implicitGrantObj);
+      vm.implicitGrantUrl = OAUTH3.url.normalize(provider) + '/' + vm.implicitGrantObj.query._pathname;
+      return OAUTH3.implicitGrant(provider, opts);
+    };
 
 	} ] );
 }());