API Key to clipboard extension

Author: FalkWolsky

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -2266,6 +2266,7 @@ export const de: typeof en = {
       "createApiKey": "API-Schlüssel erstellen",
       "apiKeyName": "Name",
       "apiKeyDescription": "Beschreibung",
+      "apiKeyCopy": "Klicke auf den API Schlüssel um den Key in die Zwischenablage zu kopieren",
       "apiKey": "API-Schlüssel",
       "deleteApiKey": "API-Schlüssel löschen",
       "deleteApiKeyContent": "Sind Sie sicher, dass Sie diesen API-Schlüssel löschen möchten?",
@@ -2791,7 +2792,7 @@ export const de: typeof en = {
       "none": "Keine",
       "formPlaceholder": "Bitte {label} eingeben",
       "formSelectPlaceholder": "Bitte wähle das {label}",
-      "saveSuccess": "Erfolgreich gerettet",
+      "saveSuccess": "Erfolgreich gespeichert",
       "dangerLabel": "Gefahrenzone",
       "dangerTip": "Die Deaktivierung dieses ID-Anbieters kann dazu führen, dass sich einige Nutzer nicht mehr anmelden können. Gehe mit Vorsicht vor.",
       "disable": "Deaktivieren",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2319,6 +2319,7 @@ export const en = {
     "createApiKey": "Create API Key",
     "apiKeyName": "Name",
     "apiKeyDescription": "Description",
+    "apiKeyCopy": "Click the Api Key to get the value in your clipboard",
     "apiKey": "API Key",
     "deleteApiKey": "Delete API Key",
     "deleteApiKeyContent": "Are you sure you want to delete this API key?",

client/packages/lowcoder/src/pages/ApplicationV2/UserProfileLayout.tsx

@@ -315,6 +315,8 @@ export function UserProfileLayout(props: UserProfileLayoutProps) {
             </Space>
           </Card>
 
+          <UserApiKeysCard />
+
           <Card style={{ marginBottom: "20px" }}>
             <Title level={4}>{trans("profile.info")}</Title>
             <Space direction="horizontal" size={10}>
@@ -395,7 +397,7 @@ export function UserProfileLayout(props: UserProfileLayoutProps) {
             </Space>
           </Card>
 
-          <UserApiKeysCard />
+          
 
         </ProfileView>
       </ContentWrapper>

client/packages/lowcoder/src/pages/ApplicationV2/components/UserApiKeysCard.tsx

@@ -3,6 +3,7 @@ import Card from "antd/es/card";
 import Flex from "antd/es/flex";
 import Title from "antd/es/typography/Title";
 import Table from "antd/es/table";
+import Tooltip from "antd/es/tooltip";
 import { useDispatch, useSelector } from "react-redux";
 import { useState } from "react";
 import { styled } from "styled-components";
@@ -41,6 +42,14 @@ export default function UserApiKeysCard() {
   const apiKeys = useSelector(getApiKeys);
   const [modalVisible, setModalVisible] = useState(false);
 
+  const handleCopy = (value: string) => {
+    navigator.clipboard.writeText(value).then(() => {
+      messageInstance.success('Copied to clipboard!');
+    }).catch(err => {
+      messageInstance.error('Failed to copy!');
+    });
+  };
+
   return (
     <>
       <Card style={{ marginBottom: "20px" }}>
@@ -89,9 +98,11 @@ export default function UserApiKeysCard() {
                 const startToken = value.substring(0, 6);
                 const endToken = value.substring(value.length - 6);
                 return (
-                  <>
-                    { `${startToken}********************${endToken}`}
-                  </>
+                  <Tooltip placement="topLeft" title={ trans("profile.apiKeyCopy")}>
+                    <div onClick={() => handleCopy(value)} style={{ cursor: 'pointer' }}>
+                      {`${startToken}********************${endToken}`}
+                    </div>
+                  </Tooltip>
                 )
               }
             },