diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx index 2b331b244..56914f7df 100644 --- a/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx +++ b/frontend/src/views/Settings/CreateServiceAccountPage/CreateServiceAccountPage.tsx @@ -4,8 +4,9 @@ import NavHeader from '@app/components/navigation/NavHeader'; import { SAProjectLevelPermissionsTable } from './components/SAProjectLevelPermissionsTable'; import { - CopyServiceAccountIDSection, - ServiceAccountNameChangeSection} from './components'; + CopyServiceAccountPublicKeySection, + ServiceAccountNameChangeSection +} from './components'; export const CreateServiceAccountPage = () => { const router = useRouter(); @@ -29,7 +30,7 @@ export const CreateServiceAccountPage = () => { serviceAccountId={serviceAccountId} />
-
diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/CopyServiceAccountPublicKeySection.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/CopyServiceAccountPublicKeySection.tsx new file mode 100644 index 000000000..e12001985 --- /dev/null +++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/CopyServiceAccountPublicKeySection.tsx @@ -0,0 +1,53 @@ +import { useEffect } from 'react'; +import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { IconButton } from '@app/components/v2'; +import { useToggle } from '@app/hooks'; +import { useGetServiceAccountById } from '@app/hooks/api'; + +type Props = { + serviceAccountId: string; +} + +export const CopyServiceAccountPublicKeySection = ({ serviceAccountId }: Props): JSX.Element => { + const { data: serviceAccount } = useGetServiceAccountById(serviceAccountId); + const [isServiceAccountIdCopied, setIsServiceAccountIdCopied] = useToggle(false); + + useEffect(() => { + let timer: NodeJS.Timeout; + + if (isServiceAccountIdCopied) { + timer = setTimeout(() => setIsServiceAccountIdCopied.off(), 2000); + } + + return () => clearTimeout(timer); + }, [isServiceAccountIdCopied]); + + const copyServiceAccountIdToClipboard = () => { + if (!serviceAccount) return; + + navigator.clipboard.writeText(serviceAccount.publicKey); + setIsServiceAccountIdCopied.on(); + }; + + return serviceAccount ? ( +
+

Public Key

+
+

{serviceAccount.publicKey}

+ copyServiceAccountIdToClipboard()} + > + + + Copy + + +
+
+ ) :
+} \ No newline at end of file diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/index.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/index.tsx new file mode 100644 index 000000000..d9ed7f56f --- /dev/null +++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/CopyServiceAccountPublicKeySection/index.tsx @@ -0,0 +1 @@ +export { CopyServiceAccountPublicKeySection } from './CopyServiceAccountPublicKeySection'; \ No newline at end of file diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx index 3e3da9fd7..170e71e7e 100644 --- a/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx +++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/SAProjectLevelPermissionsTable/SAProjectLevelPermissionsTable.tsx @@ -40,7 +40,8 @@ import { useDeleteServiceAccountProjectLevelPermission, useGetServiceAccountById, useGetServiceAccountProjectLevelPermissions, - useGetUserWorkspaces} from '@app/hooks/api'; + useGetUserWorkspaces +} from '@app/hooks/api'; import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey'; const createProjectLevelPermissionSchema = yup.object({ diff --git a/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx b/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx index 006975544..7bb7d3414 100644 --- a/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx +++ b/frontend/src/views/Settings/CreateServiceAccountPage/components/ServiceAccountNameChangeSection/ServiceAccountNameChangeSection.tsx @@ -58,7 +58,7 @@ export const ServiceAccountNameChangeSection = ({ onSubmit={handleSubmit(onFormSubmit)} className="rounded-md bg-white/5 p-6" > -

Service Account Name

+

Name

{!isServiceAccountLoading && ( { const orgId = currentOrg?._id || ''; const [step, setStep] = useState(0); const [isAccessKeyCopied, setIsAccessKeyCopied] = useToggle(false); + const [isPublicKeyCopied, setIsPublicKeyCopied] = useToggle(false); const [isPrivateKeyCopied, setIsPrivateKeyCopied] = useToggle(false); const [accessKey, setAccessKey] = useState(''); + const [publicKey, setPublicKey] = useState(''); const [privateKey, setPrivateKey] = useState(''); const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState(''); const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([ @@ -85,12 +87,16 @@ export const OrgServiceAccountsTable = () => { timer = setTimeout(() => setIsAccessKeyCopied.off(), 2000); } + if (isPublicKeyCopied) { + timer = setTimeout(() => setIsPublicKeyCopied.off(), 2000); + } + if (isPrivateKeyCopied) { timer = setTimeout(() => setIsPrivateKeyCopied.off(), 2000); } return () => clearTimeout(timer); - }, [isAccessKeyCopied, isPrivateKeyCopied]); + }, [isAccessKeyCopied, isPublicKeyCopied, isPrivateKeyCopied]); const { control, @@ -103,6 +109,7 @@ export const OrgServiceAccountsTable = () => { if (!currentOrg?._id) return; const keyPair = generateKeyPair(); + setPublicKey(keyPair.publicKey); setPrivateKey(keyPair.privateKey); const serviceAccountDetails = await createServiceAccount.mutateAsync({ @@ -216,6 +223,24 @@ export const OrgServiceAccountsTable = () => {
+

Public Key

+
+

{publicKey}

+ { + navigator.clipboard.writeText(publicKey); + setIsPublicKeyCopied.on(); + }} + > + + + Copy + + +

Private Key

{privateKey}

@@ -234,6 +259,7 @@ export const OrgServiceAccountsTable = () => {
+ ); default: