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. |
||
---|---|---|
.. | ||
index.hbs | ||
index.js | ||
README.mdx |
## DataSink ```handlebars <DataSink @sink="/dc/nspace/intentions/{{intentions.uid}}" @onchange={{action (mut items) value="data"}} @onerror={{action (mut error) value="error"}} as |api| ></DataSink> ``` ### Arguments | Argument | Type | Default | Description | | --- | --- | --- | --- | | `sink` | `String` | | The location of the sink, this should map to a string based URI | | `data` | `Object` | | The data to be saved to the current instance, null or an empty string means remove | | `onchange` | `Function` | | The action to fire when the data has arrived to the sink. Emits an Event-like object with a `data` property containing the data, if the data was deleted this is `undefined`. | | `onerror` | `Function` | | The action to fire when an error occurs. Emits ErrorEvent object with an `error` property containing the Error. | ### Methods/Actions/api | Method/Action | Description | | --- | --- | | `open` | Manually add or remove fom the data sink | The component takes a `sink` or an identifier (a uri) for the location of a sink and then emits `onchange` events whenever that data has been arrived to the sink (whether persisted or removed). If an error occurs whilst listening for data changes, an `onerror` event is emitted. Behind the scenes in the Consul UI we map URIs back to our `ember-data` backed `Repositories` meaning we can essentially redesign the URIs used for our data to more closely fit our needs. For example we currently require that **all** HTTP API URIs begin with `/dc/nspace/` values whether they require them or not. `DataSink` is not just restricted to HTTP API data, and can be configured to listen for data changes using a variety of methods and sources. For example we have also configured `DataSink` to send data to `LocalStorage` using the `settings://` pseudo-protocol in the URI (See examples below). ### Examples ```handlebars <DataSink @src="/dc/nspace/intentions/{{intention.uid}}" @onchange={{action (mut item) value="data"}} @onerror={{action (mut error) value="error"}} as |api| > <button type="button" onclick={{action api.open (hash Name="New Name")}}>Create/Update</button> <button type="button" onclick={{action api.open null}}>Delete</button> </DataSink> {{item.Name}} ``` ```handlebars <DataSink @src="/dc/nspace/intentions/{{intention.uid}}" @data=(hash Name="New Name") @onchange={{action (mut item) value="data"}} @onerror={{action (mut error) value="error"}} ></DataSink> {{item.Name}} ``` ### See - [Component Source Code](./index.js) - [Template Source Code](./index.hbs) ---