Hide clipboard button when is not possible to copy to clipboard

morpheus65535 · Nov 3, 2023 · 452f8c1 · 452f8c1
1 parent 6d79e6f
commit 452f8c1
Showing 1 changed file with 22 additions and 14 deletions.
diff --git 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"