feat: copying integration token

reearth · May 22, 2024 · 153e675 · 153e675
1 parent 13a8d2a
commit 153e675
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/web/src/components/molecules/MyIntegrations/Settings/Form.tsx b/web/src/components/molecules/MyIntegrations/Settings/Form.tsx
@@ -1,10 +1,11 @@
 import styled from "@emotion/styled";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import Col from "@reearth-cms/components/atoms/Col";
 import Divider from "@reearth-cms/components/atoms/Divider";
 import Form from "@reearth-cms/components/atoms/Form";
+import Icon from "@reearth-cms/components/atoms/Icon";
 import Input from "@reearth-cms/components/atoms/Input";
 import Modal from "@reearth-cms/components/atoms/Modal";
 import Row from "@reearth-cms/components/atoms/Row";
@@ -49,6 +50,13 @@ const MyIntegrationForm: React.FC<Props> = ({
     });
   }, [t, onRegenerateToken]);
 
+  const copyIcon = useMemo(() => {
+    const onClick = () => {
+      if (integration.config.token) navigator.clipboard.writeText(integration.config.token);
+    };
+    return <Icon icon="copy" onClick={onClick} />;
+  }, [integration.config.token]);
+
   return (
     <Form form={form} layout="vertical" initialValues={integration}>
       <Row gutter={32}>
@@ -68,7 +76,11 @@ const MyIntegrationForm: React.FC<Props> = ({
             <TextArea rows={3} showCount maxLength={100} />
           </Form.Item>
           <Form.Item label={t("Integration Token")}>
-            <StyledTokenInput value={integration.config.token} contentEditable={false} />
+            <StyledTokenInput
+              value={integration.config.token}
+              contentEditable={false}
+              prefix={copyIcon}
+            />
             <StyledRegenerateTokenButton type="primary" onClick={handleRegenerateToken}>
               {t("Regenerate")}
             </StyledRegenerateTokenButton>
@@ -124,6 +136,17 @@ const StyledDivider = styled(Divider)`
 
 const StyledTokenInput = styled(Input.Password)`
   width: calc(100% - 120px);
+  .ant-input-prefix {
+    order: 1;
+    margin-left: 4px;
+    color: rgb(0, 0, 0, 0.45);
+    :hover {
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+  .ant-input-suffix {
+    order: 2;
+  }
 `;
 
 const StyledRegenerateTokenButton = styled(Button)`