coolaj86/issuer.html
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

made playground form decent

Browse Source
This commit is contained in:
AJ ONeal 2017-11-13 20:35:23 +00:00
parent 23765a97ef
commit a16fbdd764
3 changed files with 131 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -153,22 +153,35 @@
<div class="col-md-12">
<h2>Go ahead, test our login</h2>
<label>Address:</label>
<input type="text" placeholder="ex: john@example.com" class="form-control" ng-model="vm.form.user" ng-change="vm.fn.changeProvider()">
<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">
<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 ng-if="vm.error" ng-bind="vm.error.message" class="alert alert-warning">err</div>
<div ng-if="vm._working" class="alert alert-info">
<marquee>taking my sweet time to do something in the background...</marquee>
</div>
<div class="row">
<div class="col-md-6">
<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>
</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

2
js/issuer.js
View File

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

135
js/playground.js
View File

@ -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');
});
});
*/
};