feat: show token after creation (#614)

* feat: show token after creation

* feat: replace snackbar with toast

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: {

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 (
+        <Dialogue
+            open={open}
+            onClick={closeConfirm}
+            primaryButtonText="Close"
+            title="New token created"
+        >
+            <div className={commonStyles.contentSpacingYLarge}>
+                <Typography variant="body1">
+                    Your new token has been created successfully.
+                </Typography>
+                <UserToken token={token} />
+            </div>
+        </Dialogue>
+    );
+};
+
+export default ConfirmToken;

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 (
+        <div
+            style={{
+                backgroundColor: '#efefef',
+                padding: '2rem',
+                borderRadius: '3px',
+                margin: '1rem 0',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                wordBreak: 'break-all',
+            }}
+        >
+            {token}
+            <IconButton onClick={handleCopy}>
+                <CopyIcon />
+            </IconButton>
+        </div>
+    );
+};
+
+export default UserToken;

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());
+            const payload = getApiTokenPayload();
-            history.push('/admin/api');
+            await createToken(payload)
-            setToastData({
+                .then(res => res.json())
-                type: 'success',
+                .then(api => {
-                title: 'Created token',
+                    scrollToTop();
-                text: 'Successfully created API token',
+                    setToken(api.secret);
-                confetti: true,
+                    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
                 </PermissionButton>
             </ApiTokenForm>
+            <ConfirmToken
+                open={showConfirm}
+                closeConfirm={closeConfirm}
+                token={token}
+            />
         </FormTemplate>
     );
 };