made playground form decent
This commit is contained in:
parent
23765a97ef
commit
a16fbdd764
40
index.html
40
index.html
@ -153,22 +153,35 @@
|
||||
<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._working" class="alert alert-info">
|
||||
<marquee>taking my sweet time to do something in the background...</marquee>
|
||||
</div>
|
||||
|
||||
<label>Address:</label>
|
||||
<input type="text" placeholder="ex: john@example.com" class="form-control" ng-model="vm.form.user" ng-change="vm.fn.changeProvider()">
|
||||
<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">
|
||||
<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>
|
||||
<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-6">
|
||||
<div class="col-md-12">
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>Status</h2>
|
||||
<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
|
||||
|
||||
@ -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
135
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');
|
||||
});
|
||||
});
|
||||
*/
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user