From a16fbdd7640093464b1e2b30a3279441e9cfc00e Mon Sep 17 00:00:00 2001 From: AJ ONeal Date: Mon, 13 Nov 2017 20:35:23 +0000 Subject: [PATCH] made playground form decent --- index.html | 40 +++++++++++--- js/issuer.js | 2 +- js/playground.js | 135 ++++++++++++++++++++++++++++++++++------------- 3 files changed, 131 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index b2f0a49..ea23667 100644 --- a/index.html +++ b/index.html @@ -153,22 +153,35 @@

Go ahead, test our login

+
err
+
+ taking my sweet time to do something in the background... +
+ - + - - - - + + + +
-
+
+
+
+
+
+
+ +
+
-

Status

+

Debug & Status Info:

@@ -232,7 +245,18 @@
-
+
+ +
+
+
+
+
+
+
+ +
+

Docs

0. Include the Library diff --git a/js/issuer.js b/js/issuer.js index 4b640b1..dd87d29 100644 --- a/js/issuer.js +++ b/js/issuer.js @@ -400,7 +400,7 @@ $(function () { } else { console.log('[DEBUG] not an auth window'); $('.js-playground').addClass('in'); - window.PLAYGROUND(); + //window.PLAYGROUND(); } }); }); diff --git a/js/playground.js b/js/playground.js index cd7e58a..903a129 100644 --- a/js/playground.js +++ b/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.directivesUrl = OAUTH3.url.normalize(vm.conf.provider_uri) + '/' + vm.discoveryObj.query._pathname; + vm.discoveryObj = OAUTH3.urls.discover(provider, vm.conf); + 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'); - }); - }); - */ -};