Merge pull request #2107 from Infisical/feat/add-share-secret-hide-unhide

feat: add share-secret hide and unhide

frontend/src/views/ShareSecretPublicPage/components/SecretTable.tsx

@@ -1,7 +1,8 @@
-import { faCheck, faCopy, faKey } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy, faEye, faEyeSlash, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { EmptyState, IconButton, Td, Tr } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
 
 type Props = {
   isLoading: boolean;
@@ -10,12 +11,24 @@ type Props = {
   copyUrlToClipboard: () => void;
 };
 
+const replaceContentWithDot = (str: string) => {
+  let finalStr = "";
+  for (let i = 0; i < str.length; i += 1) {
+    const char = str.at(i);
+    finalStr += char === "\n" ? "\n" : "*";
+  }
+  return finalStr;
+};
+
 export const SecretTable = ({
   isLoading,
   decryptedSecret,
   isUrlCopied,
   copyUrlToClipboard
-}: Props) => (
+}: Props) => {
+  const [isVisible, setIsVisible] = useToggle(false);
+
+  return (
     <div className="flex w-full items-center justify-center rounded-md border border-solid border-mineshaft-700 bg-mineshaft-800 p-2">
       {isLoading && <div className="bg-mineshaft-800 text-center text-bunker-400">Loading...</div>}
       {!isLoading && !decryptedSecret && (
@@ -26,23 +39,40 @@ export const SecretTable = ({
         </Tr>
       )}
       {!isLoading && decryptedSecret && (
-      <div className="dark relative flex h-full w-full items-center overflow-y-auto border border-mineshaft-700 bg-mineshaft-900 rounded-md p-2 md:p-3 pr-2">
+        <div className="dark relative flex h-full w-full items-center overflow-y-auto rounded-md border border-mineshaft-700 bg-mineshaft-900 p-2 pr-2 md:p-3">
-        <div className="thin-scrollbar flex h-full max-h-44 w-full flex-1 overflow-y-scroll break-words pr-4 dark:[color-scheme:dark]">
+          <div
+            className={`thin-scrollbar flex h-full max-h-44 w-full flex-1 overflow-y-scroll ${
+              isVisible ? "break-words" : "break-all"
+            } pr-4 dark:[color-scheme:dark]`}
+          >
             <div className="align-center flex w-full min-w-full whitespace-pre-line">
-            {decryptedSecret}
+              {isVisible ? decryptedSecret : replaceContentWithDot(decryptedSecret)}
             </div>
           </div>
+          <div className="absolute top-1 right-0 mx-1 flex max-h-8 sm:top-2 sm:right-5">
             <IconButton
               variant="outline_bg"
               colorSchema="primary"
               ariaLabel="copy to clipboard"
               onClick={copyUrlToClipboard}
-          className="mx-1 flex max-h-8 items-center rounded absolute top-1 sm:top-2 right-0 sm:right-5"
+              className="mr-1 flex max-h-8 items-center rounded"
               size="xs"
             >
               <FontAwesomeIcon className="pr-2" icon={isUrlCopied ? faCheck : faCopy} /> Copy
             </IconButton>
+            <IconButton
+              variant="outline_bg"
+              colorSchema="primary"
+              ariaLabel="toggle visibility"
+              onClick={() => setIsVisible.toggle()}
+              className="flex max-h-8 items-center rounded"
+              size="xs"
+            >
+              <FontAwesomeIcon icon={isVisible ? faEyeSlash : faEye} />
+            </IconButton>
+          </div>
         </div>
       )}
     </div>
   );
+};