open-nomad/ui/app/templates/settings/tokens.hbs
Buck Doyle 7bed453de3
Add acceptance test accessibility auditing and fixes (#8455)
This introduces ember-a11y-testing to acceptance tests via a helper
wrapper that allows us to globally ignore rules that we can address
separately. It also adds fixes for the aXe rules that were failing.
2020-07-28 12:59:14 -05:00

99 lines
4.1 KiB
Handlebars

{{title "Tokens"}}
<section class="section">
<h1 class="title">Access Control Tokens</h1>
<div class="columns">
<div class="column is-two-thirds">
<p class="message">Clusters that use Access Control Lists require tokens to perform certain tasks. By providing a token <strong>Secret ID</strong>, each future request will be authenticated, potentially authorizing read access to additional information. By providing a token <strong>Accessor ID</strong>, the policies and rules for the token will be listed.</p>
<div class="notification is-info">
<div class="columns">
<div class="column">
<h3 class="title is-4">Token Storage</h3>
<p>Tokens are stored client-side in <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">local storage</a>. This will persist your token across sessions. You can manually clear your token here.</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-token-clear class="button is-info" {{action "clearTokenProperties"}} type="button">Clear Token</button>
</div>
</div>
</div>
{{#unless this.tokenIsValid}}
<div class="field">
<label class="label" for="token-input">Secret ID</label>
<div class="control">
<input
id="token-input"
class="input"
type="text"
placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
{{!-- FIXME this placeholder gets read out by VoiceOver sans dashes 😵 --}}
value={{this.token.secret}}
oninput={{action (mut this.secret) value="target.value"}}
data-test-token-secret>
</div>
<p class="help">Sent with every request to determine authorization</p>
</div>
<p class="content"><button data-test-token-submit class="button is-primary" {{action "verifyToken"}} type="button">Set Token</button></p>
{{/unless}}
{{#if this.tokenIsValid}}
<div data-test-token-success 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 this.tokenIsInvalid}}
<div data-test-token-error class="notification is-danger">
<div class="columns">
<div class="column">
<h3 class="title is-4">Token Failed to Authenticate</h3>
<p>The token secret you have provided does not match an existing token.</p>
</div>
</div>
</div>
{{/if}}
{{#if this.tokenRecord}}
<h3 class="title is-4">Token: {{this.tokenRecord.name}}</h3>
<div class="content">
<div>AccessorID: <code>{{this.tokenRecord.accessor}}</code></div>
<div>SecretID: <code>{{this.tokenRecord.secret}}</code></div>
</div>
<h3 class="title is-4">Policies</h3>
{{#if (eq this.tokenRecord.type "management")}}
<div data-test-token-management-message class="boxed-section">
<div class="boxed-section-body has-centered-text">
The management token has all permissions
</div>
</div>
{{else}}
{{#each this.tokenRecord.policies as |policy|}}
<div data-test-token-policy class="boxed-section">
<div data-test-policy-name class="boxed-section-head">
{{policy.name}}
</div>
<div class="boxed-section-body">
<p data-test-policy-description class="content">
{{#if policy.description}}
{{policy.description}}
{{else}}
<em>No description</em>
{{/if}}
</p>
<pre><code data-test-policy-rules>{{policy.rules}}</code></pre>
</div>
</div>
{{/each}}
{{/if}}
{{/if}}
</div>
</div>
</section>