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 + ); };