made playground form decent

index.html

@@ -153,22 +153,35 @@
           <div class="col-md-12">
             <h2>Go ahead, test our login</h2>
 
-            <label>Address:</label>
+            <div ng-if="vm.error" ng-bind="vm.error.message" class="alert alert-warning">err</div>
-            <input type="text" placeholder="ex: john@example.com" class="form-control" ng-model="vm.form.user" ng-change="vm.fn.changeProvider()">
+            <div ng-if="vm._working" class="alert alert-info">
-            <label ng-if="vm.advanced">Identity Issuer:</label>
+              <marquee>taking my sweet time to do something in the background...</marquee>
-            <input ng-if="vm.advanced" type="text" class="form-control" ng-model="vm.form.provider" placeholder="ex: sso.example.com">
-            <button class="btn btn-link" ng-if="vm.advanced" ng-click="vm.advanced = !vm.advanced">hide advanced</button>
-            <button class="btn btn-link" ng-if="!vm.advanced" ng-click="vm.advanced = !vm.advanced">show advanced</button>
-            <button class="btn btn-primary" ng-click="vm.fn.login()">Login</button>
-          </div>
             </div>
 
-        <div class="row">
+            <label>Address:</label>
-          <div class="col-md-6">
+            <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>
+          </div>
+        </div>
 
         <div class="row">
           <div class="col-md-12">
-                <h2>Status</h2>
+            <br/>
+            <br/>
+            <br/>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-md-12">
+
+            <div class="row">
+              <div class="col-md-12">
+                <h2>Debug & Status Info:</h2>
               </div>
             </div>
 
@@ -232,7 +245,18 @@
             </div>
 
           </div>
-          <div class="col-md-6">
+        </div>
+
+        <div class="row">
+          <div class="col-md-12">
+            <br/>
+            <br/>
+            <br/>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-md-12">
             <h2>Docs</h2>
 
             <p>0. Include the Library

js/issuer.js

@@ -400,7 +400,7 @@ $(function () {
     } else {
       console.log('[DEBUG] not an auth window');
       $('.js-playground').addClass('in');
-      window.PLAYGROUND();
+      //window.PLAYGROUND();
     }
   });
 });

js/playground.js

@@ -21,7 +21,7 @@
 		$stateProvider.state(aboutState);
 	});
 */
-	.controller('PlaygroundCtrl', [ 'azp@oauth3.org', function (OAUTH3) {
+	.controller('PlaygroundCtrl', [ '$timeout', 'azp@oauth3.org', function ($timeout, OAUTH3) {
     // NOTE: This OAUTH3 is the same as window.OAUTH3, but with angular's promise injected
     // TODO: how to load more than one version of oauth3 on the page (i.e. a vanilla version without angular entaglement)
 		var vm = this;
@@ -29,11 +29,85 @@
     vm.clientUri = OAUTH3.clientUri(window.location);
     vm.conf = { client_id: vm.clientUri, client_uri: vm.clientUri, provider_uri: vm.clientUri };
     vm.providerUri = vm.conf.client_uri;
+    // map of things being debounced presently
+    vm.debouncing = {};
+
+    vm.form = {};
+    vm.form.id = '';
+    vm.form.user = '';
+    vm.form.userProvider = '';
+    vm.form.provider = '';
+
+    vm.locks = {};
+    vm.validated = {};
 
     //
     // Convenience for our app
     //
     vm.fn = {};
+    vm.fn._debounce = {};
+    vm.fn.debounceUi = function () {
+      if (vm.debouncing.user || vm.debouncing.provider) {
+        vm.locks['login'] = true;
+      } else {
+        vm.locks['login'] = false;
+      }
+    };
+    vm.fn.debounce = function (name, time) {
+      vm.debouncing[name] = true;
+      vm.fn.debounceUi();
+      $timeout.cancel(vm.fn._debounce[name]);
+      vm.fn._debounce[name] = $timeout(function () {
+        vm.debouncing[name] = false;
+        vm.fn.debounceUi();
+        // do nothing, just use promise
+        return;
+      }, time || 250);
+      return vm.fn._debounce[name];
+    }
+    vm.fn.changeUser = function () {
+      var parts = vm.form.id.split('@');
+      var user;
+      var provider;
+
+      if (/@/.test(vm.form.id)) {
+        // The username may have a single @, the provider may not
+        // user@thing.com@whatever.com -> user@thing.com, whatever.com
+        provider = parts.pop();
+        vm.form.user = parts.join('');
+      } else {
+        //vm.form.hasUser = false;
+        vm.form.user = null;
+        provider = parts.join('');
+      }
+
+      if (!vm.form.providerIndependent) {
+        vm.form.provider = provider;
+      }
+      vm.form.userProvider = provider;
+
+      vm.fn.debounce('provider', 250).then(function () {
+        // uses vm.form.provider for lookup
+        if (vm.form.provider.length >= 5 && vm.form.provider.split('.').length >= 2) {
+          vm.api.discover();
+        }
+      });
+    };
+    vm.fn.changeProvider = function () {
+      vm.form.providerIndependent = true;
+      vm.fn.debounce('provider', 250).then(function () {
+        console.log("[TODO] discover advanced-provider");
+      });
+    };
+    vm.fn.toggleAdvanced = function () {
+      vm.advanced = !vm.advanced;
+      vm.form.provider = vm.form.userProvider;
+      if (!vm.advanced) {
+        vm.form.providerIndependent = false;
+        vm.fn.changeUser();
+      }
+    };
+
     vm.fn.lock = function () {
       vm._working = true;
     };
@@ -73,17 +147,37 @@
         vm.error = e;
       }
     };
+    vm.api._discoverCount = 0;
     vm.api.discover = function () {
+      vm.validated.provider = '';
+      vm.api._discoverCount += 1;
+      var latest = vm.api._discoverCount;
+      var provider = vm.form.provider; // shouldn't be mutable during this time but...
+
       vm.fn.lock();
 
-      vm.discoveryObj = OAUTH3.urls.discover(vm.conf.provider_uri, vm.conf);
+      vm.discoveryObj = OAUTH3.urls.discover(provider, vm.conf);
-      vm.directivesUrl = OAUTH3.url.normalize(vm.conf.provider_uri) + '/' + vm.discoveryObj.query._pathname;
+      vm.directivesUrl = OAUTH3.url.normalize(provider) + '/' + vm.discoveryObj.query._pathname;
       vm.discoveryUrl = vm.discoveryObj.method + ' ' + vm.discoveryObj.url;
-      return OAUTH3.discover(vm.conf.provider_uri, vm.conf).then(function (dir) {
+
+      console.log('about to discover');
+
+      return OAUTH3.discover(provider, vm.conf).then(function (dir) {
+        if (latest !== vm.api._discoverCount) {
+          console.log('[DEBUG] ignoring stale discover response for', provider);
+          return;
+        }
         console.log('[DEBUG] directives:');
         console.log(dir);
+        vm.validated.provider = provider;
         vm.directives = JSON.stringify(dir, null, 2);
       }, function (err) {
+        if (latest !== vm.api._discoverCount) {
+          console.warn('[DEBUG] ignoring stale discover error for', provider);
+          console.warn(err);
+          return;
+        }
+        console.log('error on discover');
         vm.error = err;
       }).then(function () {
         vm.fn.unlock();
@@ -92,36 +186,3 @@
 
 	} ] );
 }());
-
-window.PLAYGROUND = function () {
-  /*
-  'use strict';
-
-  console.log("Welcome to the Playground!");
-  var clientUri = OAUTH3.clientUri(window.location);
-
-  $('input.js-provider-uri').val(window.location.host);
-  $('span.js-provider-uri').text(window.location.host);
-
-  $('body').on('keyup', '.js-provider-uri', function () {
-    $('span.js-provider-uri').text($('input.js-provider-uri').val())
-  });
-
-  $('body').on('click', '.js-discover', function () {
-    $('.js-discover').attr('disabled', 'disabled');
-    console.log('discover clicked!');
-    var providerUri = $('input.js-provider-uri').val();
-
-    return OAUTH3.discover(providerUri, { client_uri: clientUri }).then(function (dir) {
-      console.log('[DEBUG] directives:');
-      console.log(dir);
-      $('.js-directives').val(JSON.stringify(dir, null, 2));
-    }, function (err) {
-      console.error('[DEBUG] error:');
-      console.error(err);
-    }).then(function () {
-      $('.js-discover').removeAttr('disabled');
-    });
-  });
-  */
-};