token key popup

deriv-com · May 17, 2024 · fbff6e0 · fbff6e0
1 parent bc78b4c
commit fbff6e0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
@@ -36,14 +36,18 @@ const CreateTokenField = ({
 }: TCreateTokenField) => {
   const { tokens } = useApiToken();
   const [input_value, setInputValue] = useState('');
+  const [lastInputValue, setLastInputValue] = useState('');
   const numberOfTokens = tokens.length;
 
   useEffect(() => {
     if (form_is_cleared) {
+      setLastInputValue(input_value);
       setInputValue('');
       setFormIsCleared(false);
     }
-  }, [form_is_cleared]);
+  }, [form_is_cleared, input_value, setFormIsCleared]);
+
+  const inputToPass = form_is_cleared ? lastInputValue : input_value;
   const getTokenNames = useMemo(() => {
     const token_names = [];
     for (const token_object of tokens) {
@@ -87,7 +91,12 @@ const CreateTokenField = ({
             {...register}
             placeholder=''
           />
-          {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
+          {is_toggle && (
+            <TokenCreationDialogSuccess
+              setToggleModal={setToggleModal}
+              inputTokenName={inputToPass}
+            />
+          )}
           <label
             htmlFor='playground-request'
             className={styles.inlineLabel}

diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
@@ -1,14 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Button, Modal } from '@deriv/ui';
 import styles from './token-creation-dialog-sucess.module.scss';
+import useApiToken from '@site/src/hooks/useApiToken';
 
 type ITokenCreationDialogSuccessProps = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
+  inputTokenName: string;
 };
 
 export const TokenCreationDialogSuccess = ({
   setToggleModal,
 }: ITokenCreationDialogSuccessProps) => {
+  const { tokens } = useApiToken();
+
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
@@ -17,24 +21,34 @@ export const TokenCreationDialogSuccess = ({
     },
     [setToggleModal],
   );
+
   const handleToggle = () => {
     setToggleModal(false);
   };
 
+  const latestToken = tokens && tokens.length > 0 ? tokens[0] : null;
+
   return (
     <Modal defaultOpen onOpenChange={onOpenChange}>
       <Modal.Portal>
         <div className='modal-overlay'>
           <Modal.Overlay />
           <Modal.PageContent
-            title={'Token created successfully'}
+            title={'Token created successfully!'}
             has_close_button
             className={styles.wrapper}
           >
             <div className={styles.modal}>
-              <p>Your API token is ready to be used.</p>
+              <p>
+                Please save this token key. For security reasons, it can&apos;t be viewed or copied
+                again. If you lose this key, you&apos;ll need to generate a new token.
+              </p>
             </div>
 
+            <span className={styles.textField}>
+              {latestToken && latestToken?.scopes?.includes('admin') && latestToken.token}
+            </span>
+
             <div className={styles.buttonWrapper}>
               <Button color='primary' onClick={handleToggle} className={styles.btn}>
                 OK

diff --git a/...rd/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/...rd/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
@@ -1,7 +1,8 @@
 @use 'src/styles/utility' as *;
 
 .wrapper {
-  width: rem(44);
+  width: rem(44.8);
+  text-align: center;
 }
 
 .modal {
@@ -11,11 +12,28 @@
   padding: rem(0.8) rem(2.4) 0;
   font-size: rem(1.4);
   line-height: rem(2);
+  text-align: left;
   @media (max-width: 992px) {
     padding: 0 0 0 rem(1.6);
   }
 }
 
+.textField {
+  display: flex;
+  height: 56px;
+  width: 400px;
+  padding: 0px 16px;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 16px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid var(--core-color-opacity-black-100, rgba(0, 0, 0, 0.08));
+  background: var(--core-color-solid-slate-50, #fff);
+}
+
 .buttonWrapper {
   display: flex;
   justify-content: flex-end;
@@ -25,5 +43,7 @@
   .btn {
     padding: rem(1) rem(1.6);
     border-radius: rem(1.5);
+    align-items: center;
+    margin-right: 170px;
   }
 }