mirror of
https://github.com/status-im/consul.git
synced 2025-03-03 14:50:50 +00:00
ed6918c6c2
This commit tries to make the development experience of working on our OIDC support a little more realistic, essentially by creating our own OIDC provider in our application (only during development builds). You can still provide a real OIDC provider to work with via our dev time environment/cookie variables as before, just now we default to the behaviour in this commit. Overall this makes it much easier to verify our OIDC support in the UI, and also opens up avenues for us to be able to test more scenarios that we couldn't before (for example not only successful logins, but also erroneous, potentially with multiple error reasons).
110 lines
2.7 KiB
JavaScript
110 lines
2.7 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { action } from '@ember/object';
|
|
import { inject as service } from '@ember/service';
|
|
|
|
class State {
|
|
constructor(name) {
|
|
this.name = name;
|
|
}
|
|
matches(match) {
|
|
return this.name === match;
|
|
}
|
|
}
|
|
|
|
export default class Outlet extends Component {
|
|
@service('routlet') routlet;
|
|
@service('router') router;
|
|
|
|
@tracked element;
|
|
@tracked routeName;
|
|
@tracked state;
|
|
@tracked previousState;
|
|
@tracked endTransition;
|
|
|
|
get model() {
|
|
return this.args.model || {};
|
|
}
|
|
|
|
setAppRoute(name) {
|
|
if (name !== 'loading' || name === 'oidc-provider-debug') {
|
|
const doc = this.element.ownerDocument.documentElement;
|
|
if (doc.classList.contains('ember-loading')) {
|
|
doc.classList.remove('ember-loading');
|
|
}
|
|
doc.dataset.route = name;
|
|
this.setAppState('idle');
|
|
}
|
|
}
|
|
|
|
setAppState(state) {
|
|
const doc = this.element.ownerDocument.documentElement;
|
|
doc.dataset.state = state;
|
|
}
|
|
|
|
@action
|
|
attributeChanged(prop, value) {
|
|
switch (prop) {
|
|
case 'element':
|
|
this.element = value;
|
|
if (this.args.name === 'application') {
|
|
this.setAppState('loading');
|
|
this.setAppRoute(this.router.currentRouteName);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
@action transitionEnd($el) {
|
|
if (typeof this.endTransition === 'function') {
|
|
this.endTransition();
|
|
}
|
|
}
|
|
|
|
@action
|
|
startLoad(transition) {
|
|
const outlet = this.routlet.findOutlet(transition.to.name) || 'application';
|
|
if (this.args.name === outlet) {
|
|
this.previousState = this.state;
|
|
this.state = new State('loading');
|
|
this.endTransition = this.routlet.transition();
|
|
// if we have no transition-duration set immediately end the transition
|
|
const duration = window
|
|
.getComputedStyle(this.element)
|
|
.getPropertyValue('transition-duration');
|
|
if (parseFloat(duration) === 0) {
|
|
this.endTransition();
|
|
}
|
|
}
|
|
if (this.args.name === 'application') {
|
|
this.setAppState('loading');
|
|
}
|
|
}
|
|
|
|
@action
|
|
endLoad(transition) {
|
|
if (this.state.matches('loading')) {
|
|
this.previousState = this.state;
|
|
this.state = new State('idle');
|
|
}
|
|
if (this.args.name === 'application') {
|
|
this.setAppRoute(this.router.currentRouteName);
|
|
}
|
|
}
|
|
|
|
@action
|
|
connect() {
|
|
this.routlet.addOutlet(this.args.name, this);
|
|
this.previousState = this.state = new State('idle');
|
|
this.router.on('routeWillChange', this.startLoad);
|
|
this.router.on('routeDidChange', this.endLoad);
|
|
}
|
|
|
|
@action
|
|
disconnect() {
|
|
this.routlet.removeOutlet(this.args.name);
|
|
this.router.off('routeWillChange', this.startLoad);
|
|
this.router.off('routeDidChange', this.endLoad);
|
|
}
|
|
}
|