copy token to clipboard

packages/core/admin/admin/src/pages/SettingsPage/pages/ApiTokens/CreateView/index.js

@@ -25,6 +25,7 @@ import { Select, Option } from '@strapi/parts/Select';
 import get from 'lodash/get';
 import { IconButton } from '@strapi/parts/IconButton';
 import Duplicate from '@strapi/icons/Duplicate';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { formatAPIErrors } from '../../../../../utils';
 import { axiosInstance } from '../../../../../core/utils';
 import schema from './utils/schema';
@@ -119,14 +120,24 @@ const ApiTokenCreateView = () => {
                   {!!accessToken && (
                     <ContentBox
                       endAction={
-                        <IconButton
-                          label={formatMessage({
-                            id: 'app.component.CopyToClipboard.label',
-                            default: 'Copy to clipboard',
-                          })}
-                          noBorder
-                          icon={<Duplicate />}
-                        />
+                        <CopyToClipboard
+                          onCopy={() => {
+                            toggleNotification({
+                              type: 'success',
+                              message: { id: 'Settings.apiTokens.notification.copied' },
+                            });
+                          }}
+                          text={accessToken}
+                        >
+                          <IconButton
+                            label={formatMessage({
+                              id: 'app.component.CopyToClipboard.label',
+                              default: 'Copy to clipboard',
+                            })}
+                            noBorder
+                            icon={<Duplicate />}
+                          />
+                        </CopyToClipboard>
                       }
                       title={accessToken}
                       subtitle={formatMessage({

packages/core/admin/admin/src/translations/en.json

@@ -89,6 +89,7 @@
   "Settings.apiTokens.addFirstToken": "Add your first API Token",
   "Settings.apiTokens.addNewToken": "Add new API Token",
   "Settings.apiTokens.types.read-only": "Read-only",
+  "Settings.apiTokens.notification.copied": "Token copied to clipboard.",
   "Settings.apiTokens.types.full-access": "Full access",
   "Settings.apiTokens.copy.lastWarning": "Make sure to copy this token, you won’t be able to see it again!",
   "Settings.application.description":"See your project's details",

packages/core/helper-plugin/lib/src/components/ContentBox/index.js

@@ -28,7 +28,7 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
       </IconWrapper>
       <Stack size={endAction ? 0 : 1}>
         <Flex>
-          <Text small bold style={{ 'word-break': 'break-all' }}>
+          <Text small bold style={{ wordBreak: 'break-all' }}>
             {title}
           </Text>
           {endAction}