Add a "Copy" button for API key

[bajiat]

Figure out how make copying the API key to clipboard easier than having to highlight the key and then press Ctrl+C or use other methods for copying (context menu etc.) One option would be adding a "Copy" button next to API key on the Profile page.

[frenchbread]

I did a little research on topic "copying value to clipboard" and it turns out that direct copying (or forcing copying) data to clipboard using JS function may not be supported by all browsers and can cause security vulnerabilities.

Anyhow, the solution I came up with is listed on stackoverflow:

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

So, if for some reason after copying it is not able to get the value, we can ask user to copy ket manually using alert() for instance.

@brylie Have you been suggesting some JS library that would be helpful?

[brylie]

Try Clipboard.js.