Add pages for create/view/revoke API keys

Copying what they’ve done on GOV.UK Pay, we should let users:
- generate as many keys as they want
- only see the key at time of creation
- give keys a name
- revoke any key at any time (this should be a one way operation)

And based on discussions with @minglis and @servingUpAces, the keys should be
used in conjunction with some kind of service ID, which gets encrypted with the
key. In other words the secret itself never gets sent over the wire.

This commit adds the UI (but not the underlying API integration) for doing the
above.
This commit is contained in:
Chris Hill-Scott
2016-01-19 09:55:13 +00:00
committed by Rebecca Law
parent 5924500f3e
commit 9784a9936c
14 changed files with 356 additions and 63 deletions

View File

@@ -1,15 +1,11 @@
(function(Modules) {
"use strict";
if (!document.queryCommandSupported('copy')) return;
Modules.ApiKey = function() {
const states = {
'initial': `
<input type='button' class='api-key-button-show' value='Show API key' />
`,
'keyVisibleBasic': key => `
<span class="api-key-key">${key}</span>
`,
'keyVisible': key => `
<span class="api-key-key">${key}</span>
<input type='button' class='api-key-button-copy' value='Copy API key to clipboard' />
@@ -33,23 +29,22 @@
this.start = function(component) {
const $component = $(component).html(states.initial).attr('aria-live', 'polite'),
const $component = $(component),
key = $component.data('key');
$component
.on(
'click', '.api-key-button-show', () =>
$component.html(
document.queryCommandSupported('copy') ?
states.keyVisible(key) : states.keyVisibleBasic(key)
)
)
.html(states.keyVisible(key))
.attr('aria-live', 'polite')
.on(
'click', '.api-key-button-copy', () =>
this.copyKey(
$('.api-key-key', component)[0], () =>
$component.html(states.keyCopied)
)
)
.on(
'click', '.api-key-button-show', () =>
$component.html(states.keyVisible(key))
);
};