e34c16a90c
* ui: Logout button This commit adds an easier way to logout of the UI using a logout button Notes: - Added a Logout button to the main navigation when you are logged in, meaning you have easy access to a way to log out of the UI. - Changed all wording to use 'Log in/out' vocabulary instad of 'stop using'. - The logout button opens a panel to show you your current ACL token and a logout button in order to logout. - When using legacy ACLs we don't show the current ACL token as legacy ACLs tokens only have secret values, whereas the new ACLs use a non-secret ID plus a secret ID (that we don't show). - We also added a new `<EmptyState />` component to use for all our empty states. We currently only use this for the ACLs disabled screen to provide more outgoing links to more readind material/documentation to help you to understand and enable ACLs. - The `<DataSink />` component is the sibling to our `<DataSource />` component and whilst is much simpler (as it doesn't require polling support), its tries to use the same code patterns for consistencies sake. - We had a fun problem with ember-data's `store.unloadAll` here, and in the end went with `store.init` to empty the ember-data store instead due to timing issues. - We've tried to use already existing patterns in the Consul UI here such as our preexisting `feedback` service, although these are likely to change in the future. The thinking here is to add this feature with as little change as possible. Overall this is a precursor to a much larger piece of work centered on auth in the UI. We figured this was a feature complete piece of work as it is and thought it was worthwhile to PR as a feature on its own, which also means the larger piece of work will be a smaller scoped PR also.
106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import Component from '@ember/component';
|
|
import { inject as service } from '@ember/service';
|
|
import { set, get, computed } from '@ember/object';
|
|
|
|
import { once } from 'consul-ui/utils/dom/event-source';
|
|
|
|
export default Component.extend({
|
|
tagName: '',
|
|
|
|
service: service('data-sink/service'),
|
|
dom: service('dom'),
|
|
logger: service('logger'),
|
|
|
|
onchange: function(e) {},
|
|
onerror: function(e) {},
|
|
|
|
state: computed('instance', 'instance.{dirtyType,isSaving}', function() {
|
|
let id;
|
|
const isSaving = get(this, 'instance.isSaving');
|
|
const dirtyType = get(this, 'instance.dirtyType');
|
|
if (typeof isSaving === 'undefined' && typeof dirtyType === 'undefined') {
|
|
id = 'idle';
|
|
} else {
|
|
switch (dirtyType) {
|
|
case 'created':
|
|
id = isSaving ? 'creating' : 'create';
|
|
break;
|
|
case 'updated':
|
|
id = isSaving ? 'updating' : 'update';
|
|
break;
|
|
case 'deleted':
|
|
case undefined:
|
|
id = isSaving ? 'removing' : 'remove';
|
|
break;
|
|
}
|
|
id = `active.${id}`;
|
|
}
|
|
return {
|
|
matches: name => id.indexOf(name) !== -1,
|
|
};
|
|
}),
|
|
|
|
init: function() {
|
|
this._super(...arguments);
|
|
this._listeners = this.dom.listeners();
|
|
},
|
|
willDestroy: function() {
|
|
this._super(...arguments);
|
|
this._listeners.remove();
|
|
},
|
|
source: function(cb) {
|
|
const source = once(cb);
|
|
const error = err => {
|
|
set(this, 'instance', undefined);
|
|
try {
|
|
this.onerror(err);
|
|
this.logger.execute(err);
|
|
} catch (err) {
|
|
this.logger.execute(err);
|
|
}
|
|
};
|
|
this._listeners.add(source, {
|
|
message: e => {
|
|
try {
|
|
set(this, 'instance', undefined);
|
|
this.onchange(e);
|
|
} catch (err) {
|
|
error(err);
|
|
}
|
|
},
|
|
error: e => error(e),
|
|
});
|
|
return source;
|
|
},
|
|
didInsertElement: function() {
|
|
this._super(...arguments);
|
|
if (typeof this.data !== 'undefined') {
|
|
this.actions.open.apply(this, [this.data]);
|
|
}
|
|
},
|
|
persist: function(data, instance) {
|
|
set(this, 'instance', this.service.prepare(this.sink, data, instance));
|
|
this.source(() => this.service.persist(this.sink, this.instance));
|
|
},
|
|
remove: function(instance) {
|
|
set(this, 'instance', this.service.prepare(this.sink, null, instance));
|
|
this.source(() => this.service.remove(this.sink, this.instance));
|
|
},
|
|
actions: {
|
|
open: function(data, instance) {
|
|
if (instance instanceof Event) {
|
|
instance = undefined;
|
|
}
|
|
if (typeof data === 'undefined') {
|
|
throw new Error('You must specify data to save, or null to remove');
|
|
}
|
|
// potentially allow {} and "" as 'remove' flags
|
|
if (data === null || data === '') {
|
|
this.remove(instance);
|
|
} else {
|
|
this.persist(data, instance);
|
|
}
|
|
},
|
|
},
|
|
});
|