Hide clipboard button when is not possible to copy to clipboard

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"
+                // Clipboard API is only available in secure contexts See: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#interfaces
-                variant="light"
+                window.isSecureContext && (
-                settingKey={settingApiKey}
+                  <Action
-                color={copied ? "green" : undefined}
+                    label="Copy API Key"
-                icon={copied ? faCheck : faClipboard}
+                    variant="light"
-                onClick={(update, value) => {
+                    settingKey={settingApiKey}
-                  if (value) {
+                    color={copied ? "green" : undefined}
-                    clipboard.copy(value);
+                    icon={copied ? faCheck : faClipboard}
-                    toggleState(setCopy, 1500);
+                    onClick={(update, value) => {
-                  }
+                      if (value) {
-                }}
+                        clipboard.copy(value);
-              ></Action>
+                        toggleState(setCopy, 1500);
+                      }
+                    }}
+                  />
+                )
+              }
               <Action
                 label="Regenerate"
                 variant="light"