Copy API-Key button not working

[PhilippKammann]

Steps to reproduce

1. Generate new API Key
2. Click the "Copy to clipboard" button

Expected behavior

Key gets copied to clipboard

Actual behavior

Nothing happens and the browser console throws an error:

TypeError: navigator.clipboard is undefined copyApiKeyToClipboard ApiKeyAddDialog.vue:90 VueJS 4 click VBtn.js:134 VueJS 3 vue.runtime.esm.js:3049:16

Logs

No response

Komga version

v1.12.0-master

Operating system

Firefox on Windows 11

Installation method

Docker

Other details

No response

Acknowledgements

• I have searched the existing issues (open AND closed) and this is a new ticket, NOT a duplicate or related to another open issue.
• I have written a short but informative title.
• I have checked the FAQ.
• I have updated the app to the latest version.
• I will fill out all of the requested information in this form.

[gotson]

Can you try another browser ?

[gotson]

Looks like you need to be on https website to use the clipboard API. Can you confirm whether you were using local http site, and can you try in https ?

[PhilippKammann]

I am on http and can't easily change to https

This is the error on Edge

[gotson]

It seems this API is only available for https, and i suppose localhost. Not sure how to take this forward.

It seems there's hacks to use a hidden textarea to copy text, or i could just remove the copy button if the clipboard API is not available.

WDYT?

[PhilippKammann]

I would just remove the button if the API is not supported. A user can just copy it by hand; not like they have to do that often

[Bart274]

@gotson I use this code to copy values from a webpage to the clipboard:

function copyToClipboard() {
  /* Get the text field */
  var copyText = document.getElementById("coords");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  //alert("Copied the text: " + copyText.value);
}

It's independent of the OS, browser & it works on both http and https.

[gotson]

@gotson I use this code to copy values from a webpage to the clipboard:

function copyToClipboard() {
  /* Get the text field */
  var copyText = document.getElementById("coords");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  //alert("Copied the text: " + copyText.value);
}

It's independent of the OS, browser & it works on both http and https.

i don't really want to add that kind of workaround code if possible

[github-actions]

🎉 This issue has been resolved in 1.12.1 (Release Notes)