diff --git a/frontend/src/common.styles.js b/frontend/src/common.styles.js
index 5feab5bd2c..541a9037ff 100644
--- a/frontend/src/common.styles.js
+++ b/frontend/src/common.styles.js
@@ -90,7 +90,7 @@ export const useCommonStyles = makeStyles(theme => ({
right: '40px',
bottom: '40px',
transform: 'translateY(400px)',
- zIndex: 300,
+ zIndex: 1400,
position: 'fixed',
},
fadeInBottomEnter: {
diff --git a/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx b/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx
new file mode 100644
index 0000000000..56414c698b
--- /dev/null
+++ b/frontend/src/component/admin/api-token/ConfirmToken/ConfirmToken.tsx
@@ -0,0 +1,35 @@
+import { Typography } from '@material-ui/core';
+import { useCommonStyles } from '../../../../common.styles';
+import Dialogue from '../../../common/Dialogue';
+import UserToken from './UserToken/UserToken';
+
+interface IConfirmUserLink {
+ open: boolean;
+ closeConfirm: () => void;
+ token: string;
+}
+
+const ConfirmToken = ({
+ open,
+ closeConfirm,
+ token,
+}: IConfirmUserLink) => {
+ const commonStyles = useCommonStyles();
+ return (
+
+
+
+ Your new token has been created successfully.
+
+
+
+
+ );
+};
+
+export default ConfirmToken;
diff --git a/frontend/src/component/admin/api-token/ConfirmToken/UserToken/UserToken.tsx b/frontend/src/component/admin/api-token/ConfirmToken/UserToken/UserToken.tsx
new file mode 100644
index 0000000000..d818dc136c
--- /dev/null
+++ b/frontend/src/component/admin/api-token/ConfirmToken/UserToken/UserToken.tsx
@@ -0,0 +1,58 @@
+import { IconButton } from '@material-ui/core';
+import CopyIcon from '@material-ui/icons/FileCopy';
+import useToast from '../../../../../hooks/useToast';
+
+interface IUserTokenProps {
+ token: string;
+}
+
+const UserToken = ({ token }: IUserTokenProps) => {
+ const { setToastData } = useToast();
+
+ const handleCopy = () => {
+ try {
+ return navigator.clipboard
+ .writeText(token)
+ .then(() => {
+ setToastData({
+ type: 'success',
+ title: 'Token copied',
+ text: `Token is copied to clipboard`,
+ });
+ })
+ .catch(() => {
+ setError();
+ });
+ } catch (e) {
+ setError();
+ }
+ };
+
+ const setError = () =>
+ setToastData({
+ type: 'error',
+ title: 'Could not copy token',
+ });
+
+ return (
+
+ {token}
+
+
+
+
+ );
+};
+
+export default UserToken;
diff --git a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx
index 94af85b499..5373e4b8b1 100644
--- a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx
+++ b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx
@@ -7,12 +7,18 @@ import useToast from '../../../../hooks/useToast';
import useApiTokensApi from '../../../../hooks/api/actions/useApiTokensApi/useApiTokensApi';
import PermissionButton from '../../../common/PermissionButton/PermissionButton';
import { ADMIN } from '../../../providers/AccessProvider/permissions';
+import ConfirmToken from '../ConfirmToken/ConfirmToken';
+import { useState } from 'react';
+import { scrollToTop } from '../../../common/util';
const CreateApiToken = () => {
/* @ts-ignore */
- const { setToastData, setToastApiError } = useToast();
+ const { setToastApiError } = useToast();
const { uiConfig } = useUiConfig();
const history = useHistory();
+ const [showConfirm, setShowConfirm] = useState(false);
+ const [token, setToken] = useState('');
+
const {
getApiTokenPayload,
username,
@@ -36,19 +42,24 @@ const CreateApiToken = () => {
return;
}
try {
- await createToken(getApiTokenPayload());
- history.push('/admin/api');
- setToastData({
- type: 'success',
- title: 'Created token',
- text: 'Successfully created API token',
- confetti: true,
- });
+ const payload = getApiTokenPayload();
+ await createToken(payload)
+ .then(res => res.json())
+ .then(api => {
+ scrollToTop();
+ setToken(api.secret);
+ setShowConfirm(true);
+ });
} catch (e: any) {
setToastApiError(e.toString());
}
};
+ const closeConfirm = () => {
+ setShowConfirm(false);
+ history.push('/admin/api');
+ };
+
const formatApiCode = () => {
return `curl --location --request POST '${
uiConfig.unleashUrl
@@ -93,6 +104,11 @@ const CreateApiToken = () => {
Create token
+
);
};