Add visibility feature

cultuurnet · Jul 3, 2024 · 57370e0 · 57370e0
1 parent 2f5d514
commit 57370e0
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/resources/ts/Components/CopyText.tsx b/resources/ts/Components/CopyText.tsx
@@ -1,20 +1,22 @@
-import type { ReactNode } from "react";
 import React, { useRef, useState } from "react";
 import { Tooltip } from "./Tooltip";
 import { ButtonIconCopy } from "./ButtonIconCopy";
 import { useTranslation } from "react-i18next";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { ButtonIcon } from "./ButtonIcon";
 
-type Props = { children: ReactNode };
+type Props = { text: string; secret?: boolean };
 
-export const CopyText = ({ children }: Props) => {
+export const CopyText = ({ text, secret }: Props) => {
   const { t } = useTranslation();
 
   const codeFieldRef = useRef<HTMLSpanElement>(null);
 
   const [isVisible, setIsVisible] = useState(false);
+  const [isSecretVisible, setIsSecretVisible] = useState(false);
 
-  const handleCopyToClipboard = () => {
-    navigator.clipboard.writeText(codeFieldRef.current?.innerText ?? "");
+  const handleCopyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text ?? "");
     setIsVisible(true);
     const timeoutId = setTimeout(() => {
       setIsVisible(false);
@@ -25,20 +27,25 @@ export const CopyText = ({ children }: Props) => {
   return (
     <div className="inline-flex self-start gap-2 items-center bg-[#fdf3ef] rounded px-3 p-1">
       <span
-        className=" text-ellipsis overflow-hidden whitespace-nowrap text-publiq-orange max-md:max-w-[15rem] max-xl:max-w-[30rem]"
+        className="font-mono whitespace-pre	text-ellipsis overflow-hidden text-sm text-publiq-orange max-md:max-w-[15rem] max-xl:max-w-[30rem]"
         ref={codeFieldRef}
       >
-        {children}
+        {!secret || isSecretVisible ? text : "*".repeat(text?.length ?? 36)}
       </span>
-      <Tooltip
-        visible={isVisible}
-        text={t("tooltip.copy")}
-        className={"w-auto"}
-      >
+      <Tooltip visible={isVisible} text={t("tooltip.copy")} className="w-auto">
         <ButtonIconCopy
-          onClick={handleCopyToClipboard}
-          className={"text-publiq-orange"}
+          onClick={() => handleCopyToClipboard(text)}
+          className="text-publiq-orange"
         />
+        {secret && (
+          <ButtonIcon
+            icon={isSecretVisible ? faEyeSlash : faEye}
+            className="text-publiq-orange p-0 h-auto w-auto"
+            onClick={() => {
+              setIsSecretVisible((prev) => !prev);
+            }}
+          />
+        )}
       </Tooltip>
     </div>
   );