web/elements: fix token copy button not working on chrome...

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-09-26 14:34:28 +02:00
parent c7e6eb8896
commit 99a371a02c
2 changed files with 36 additions and 11 deletions

View File

@ -60,12 +60,22 @@ export class TokenCopyButton extends ActionButton {
return;
}
this.setLoading();
// Because safari is stupid, it only allows navigator.clipboard.write directly
// in the @click handler.
// And also chrome is stupid, because it doesn't accept Promises as values for
// ClipboardItem, so now there's two implementations
if (
navigator.userAgent.includes("Safari") &&
!navigator.userAgent.includes("Chrome")
) {
navigator.clipboard.write([
new ClipboardItem({
"text/plain": (this.callAction() as Promise<string>)
.then((key: string) => {
this.setDone(SUCCESS_CLASS);
return key;
return new Blob([key], {
type: "text/plain",
});
})
.catch((err: Error) => {
this.setDone(ERROR_CLASS);
@ -73,6 +83,20 @@ export class TokenCopyButton extends ActionButton {
}),
}),
]);
} else {
(this.callAction() as Promise<string>)
.then((key: string) => {
navigator.clipboard.writeText(key).then(() => {
this.setDone(SUCCESS_CLASS);
});
})
.catch((err: Response | undefined) => {
return err?.json().then((errResp) => {
this.setDone(ERROR_CLASS);
throw new Error(errResp["detail"]);
});
});
}
}}
>
${this.isRunning

View File

@ -42,6 +42,7 @@ export class OutpostDeploymentModal extends ModalButton {
</label>
<div>
<ak-token-copy-button
class="pf-m-primary"
identifier="${ifDefined(this.outpost?.tokenIdentifier)}"
>
${t`Click to copy token`}