mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-03 07:58:59 -04:00
e049e691fd
When we show an identifier, like an ID or a key, we have a pattern which adds a ‘copy to clipboard’ button. We weren’t using this pattern for service ID. This commit also moves it under the table, so hopefully people will be less likely to confuse the service ID for an API key when scanning down the page.
57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
if (!document.queryCommandSupported('copy')) return;
|
|
|
|
Modules.ApiKey = function() {
|
|
|
|
const states = {
|
|
'keyVisible': (key, thing) => `
|
|
<span class="api-key-key">${key}</span>
|
|
<input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' />
|
|
`,
|
|
'keyCopied': thing => `
|
|
<span class="api-key-key">Copied to clipboard</span>
|
|
<input type='button' class='api-key-button-show' value='Show ${thing}' />
|
|
`
|
|
};
|
|
|
|
this.copyKey = function(keyElement, callback) {
|
|
var selection = window.getSelection ? window.getSelection() : document.selection,
|
|
range = document.createRange();
|
|
selection.removeAllRanges();
|
|
range.selectNodeContents(keyElement);
|
|
selection.addRange(range);
|
|
document.execCommand('copy');
|
|
selection.removeAllRanges();
|
|
callback();
|
|
};
|
|
|
|
this.start = function(component) {
|
|
|
|
const $component = $(component),
|
|
key = $component.data('key'),
|
|
thing = $component.data('thing');
|
|
|
|
console.log(thing)
|
|
|
|
$component
|
|
.html(states.keyVisible(key, thing))
|
|
.attr('aria-live', 'polite')
|
|
.on(
|
|
'click', '.api-key-button-copy', () =>
|
|
this.copyKey(
|
|
$('.api-key-key', component)[0], () =>
|
|
$component.html(states.keyCopied(thing))
|
|
)
|
|
)
|
|
.on(
|
|
'click', '.api-key-button-show', () =>
|
|
$component.html(states.keyVisible(key, thing))
|
|
);
|
|
|
|
};
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|