From 99a371a02c9b6464c3d26b46fa15172091eff34b Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 26 Sep 2021 14:34:28 +0200
Subject: [PATCH] web/elements: fix token copy button not working on chrome...

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/buttons/TokenCopyButton.ts   | 46 ++++++++++++++-----
 .../pages/outposts/OutpostDeploymentModal.ts  |  1 +
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/web/src/elements/buttons/TokenCopyButton.ts b/web/src/elements/buttons/TokenCopyButton.ts
index 5ef5c62e2..0ddf73641 100644
--- a/web/src/elements/buttons/TokenCopyButton.ts
+++ b/web/src/elements/buttons/TokenCopyButton.ts
@@ -60,19 +60,43 @@ export class TokenCopyButton extends ActionButton {
                     return;
                 }
                 this.setLoading();
-                navigator.clipboard.write([
-                    new ClipboardItem({
-                        "text/plain": (this.callAction() as Promise<string>)
-                            .then((key: string) => {
+                // 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 new Blob([key], {
+                                        type: "text/plain",
+                                    });
+                                })
+                                .catch((err: Error) => {
+                                    this.setDone(ERROR_CLASS);
+                                    throw err;
+                                }),
+                        }),
+                    ]);
+                } else {
+                    (this.callAction() as Promise<string>)
+                        .then((key: string) => {
+                            navigator.clipboard.writeText(key).then(() => {
                                 this.setDone(SUCCESS_CLASS);
-                                return key;
-                            })
-                            .catch((err: Error) => {
+                            });
+                        })
+                        .catch((err: Response | undefined) => {
+                            return err?.json().then((errResp) => {
                                 this.setDone(ERROR_CLASS);
-                                throw err;
-                            }),
-                    }),
-                ]);
+                                throw new Error(errResp["detail"]);
+                            });
+                        });
+                }
             }}
         >
             ${this.isRunning
diff --git a/web/src/pages/outposts/OutpostDeploymentModal.ts b/web/src/pages/outposts/OutpostDeploymentModal.ts
index 4ce14c846..436c3ff14 100644
--- a/web/src/pages/outposts/OutpostDeploymentModal.ts
+++ b/web/src/pages/outposts/OutpostDeploymentModal.ts
@@ -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`}