From 452f8c12c9cbacd98eabc1f04750a0282903847f Mon Sep 17 00:00:00 2001
From: Matheus Horstmann <11761333+horstmannmat@users.noreply.github.com>
Date: Fri, 3 Nov 2023 07:46:04 -0300
Subject: [PATCH] Hide clipboard button when is not possible to copy to
 clipboard

---
 frontend/src/pages/Settings/General/index.tsx | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx
index 306dce56d..6af0151d5 100644
--- a/frontend/src/pages/Settings/General/index.tsx
+++ b/frontend/src/pages/Settings/General/index.tsx
@@ -83,24 +83,32 @@ const SettingsGeneralView: FunctionComponent = () => {
         </CollapseBox>
         <Text
           label="API Key"
-          disabled
+          // User can copy through the clipboard button
+          disabled={window.isSecureContext}
+          // Enable user to at least copy when not in secure context
+          readOnly={!window.isSecureContext}
           rightSectionWidth={95}
           rightSectionProps={{ style: { justifyContent: "flex-end" } }}
           rightSection={
             <MantineGroup spacing="xs" mx="xs" position="right">
-              <Action
-                label="Copy API Key"
-                variant="light"
-                settingKey={settingApiKey}
-                color={copied ? "green" : undefined}
-                icon={copied ? faCheck : faClipboard}
-                onClick={(update, value) => {
-                  if (value) {
-                    clipboard.copy(value);
-                    toggleState(setCopy, 1500);
-                  }
-                }}
-              ></Action>
+              {
+                // Clipboard API is only available in secure contexts See: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#interfaces
+                window.isSecureContext && (
+                  <Action
+                    label="Copy API Key"
+                    variant="light"
+                    settingKey={settingApiKey}
+                    color={copied ? "green" : undefined}
+                    icon={copied ? faCheck : faClipboard}
+                    onClick={(update, value) => {
+                      if (value) {
+                        clipboard.copy(value);
+                        toggleState(setCopy, 1500);
+                      }
+                    }}
+                  />
+                )
+              }
               <Action
                 label="Regenerate"
                 variant="light"