luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

Redo the tokens page to be a form that validates a token and lists policies

This commit is contained in:
Michael Lange 2017-10-13 15:18:05 -07:00
parent 040e3fec10
commit d177cf90c3
2 changed files with 109 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ui/app/controllers/settings/tokens.js
View File

@ -1,20 +1,53 @@
import Ember from 'ember';
const { Controller, inject } = Ember;
const { Controller, inject, computed } = Ember;
export default Controller.extend({
token: inject.service(),
actions: {
setTokenProperty(property, event) {
this.get('token').set(property, event.currentTarget.value);
},
tokenRecord: null,
secret: computed.reads('token.secret'),
accessor: computed.reads('token.accessor'),
tokenIsValid: false,
tokenIsInvalid: false,
actions: {
clearTokenProperties() {
this.get('token').setProperties({
secret: undefined,
accessor: undefined,
});
this.setProperties({
tokenIsValid: false,
tokenIsInvalid: false,
});
},
verifyToken() {
const { secret, accessor } = this.getProperties('secret', 'accessor');
this.set('token.secret', secret);
this.get('store')
.findRecord('token', accessor)
.then(
token => {
this.set('token.accessor', accessor);
this.setProperties({
tokenIsValid: true,
tokenIsInvalid: false,
tokenRecord: token,
});
},
() => {
this.set('token.secret', null);
this.setProperties({
tokenIsInvalid: true,
tokenIsValid: false,
tokenRecord: null,
});
}
);
},
},
});

83
ui/app/templates/settings/tokens.hbs
View File

@ -16,21 +16,80 @@
</div>
</div>
<div class="field">
<label class="label">Secret ID</label>
<div class="control">
<input class="input token-secret" type="text" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" value={{token.secret}} oninput={{action "setTokenProperty" "secret"}}>
{{#if (not tokenIsValid)}}
<div class="field">
<label class="label">Secret ID</label>
<div class="control">
<input class="input token-secret" type="text" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" value={{token.secret}} oninput={{action (mut secret) value="target.value"}}>
</div>
<p class="help">Sent with every request to determine authorization</p>
</div>
<p class="help">Sent with every request to determine authorization</p>
</div>
<div class="field">
<label class="label">Accessor ID</label>
<div class="control">
<input class="input token-accessor" type="text" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" value={{token.accessor}} oninput={{action "setTokenProperty" "accessor"}}>
<div class="field">
<label class="label">Accessor ID</label>
<div class="control">
<input class="input token-accessor" type="text" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" value={{token.accessor}} oninput={{action (mut accessor) value="target.value"}}>
</div>
<p class="help">Used to look up authorized policies</p>
</div>
<p class="help">Used to look up authorized policies</p>
</div>
<p class="content"><button class="button is-primary" {{action "verifyToken"}}>Set Token</button></p>
{{/if}}
{{#if tokenIsValid}}
<div class="notification is-success">
<div class="columns">
<div class="column">
<h3 class="title is-4">Token Authenticated!</h3>
<p>Your token is valid and authorized for the following policies.</p>
</div>
</div>
</div>
{{/if}}
{{#if tokenIsInvalid}}
<div class="notification is-danger">
<div class="columns">
<div class="column">
<h3 class="title is-4">Token Failed to Authenticate</h3>
<p>The token secret and accessor you have provided do not match.</p>
</div>
</div>
</div>
{{/if}}
{{#if tokenRecord}}
<h3 class="title is-4">Token: {{tokenRecord.name}}</h3>
<div class="content">
<div>AccessorID: <code>{{tokenRecord.accessor}}</code></div>
<div>SecretID: <code>{{tokenRecord.secret}}</code></div>
</div>
<h3 class="title is-4">Policies</h3>
{{#if (eq tokenRecord.type "management")}}
<div class="boxed-section">
<div class="boxed-section-body has-centered-text">
The management token has all permissions
</div>
</div>
{{else}}
{{#each tokenRecord.policies as |policy|}}
<div class="boxed-section">
<div class="boxed-section-head">
{{policy.name}}
</div>
<div class="boxed-section-body">
<p class="content">
{{#if policy.description}}
{{policy.description}}
{{else}}
<em>No description</em>
{{/if}}
</p>
<pre><code>{{policy.rules}}</code></pre>
</div>
</div>
{{/each}}
{{/if}}
{{/if}}
</div>
</div>
</section>