Hide clipboard button when is not possible to copy to clipboard

frontend/src/pages/Settings/General/index.tsx

@@ -83,11 +83,17 @@ 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">
+              {
+                // 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"
@@ -100,7 +106,9 @@ const SettingsGeneralView: FunctionComponent = () => {
                         toggleState(setCopy, 1500);
                       }
                     }}
-              ></Action>
+                  />
+                )
+              }
               <Action
                 label="Regenerate"
                 variant="light"