From 57370e0c8d317e3db1b5b72040261bf8c8f12be7 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Wed, 3 Jul 2024 13:07:14 +0200
Subject: [PATCH 1/4] Add visibility feature

---
 resources/ts/Components/CopyText.tsx | 35 +++++++++++++++++-----------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/resources/ts/Components/CopyText.tsx b/resources/ts/Components/CopyText.tsx
index e0caf07e7..0f7bf37ba 100644
--- 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>
   );

From 83d2ab72749d4de00eb5d7e139aff44985862384 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Wed, 3 Jul 2024 13:08:15 +0200
Subject: [PATCH 2/4] Implement visibility feature

---
 resources/ts/Components/IntegrationCard.tsx   | 20 +++++++++++++++----
 .../Detail/CredentialsAuthClients.tsx         | 16 +++++++++++++--
 .../Detail/CredentialsLegacyAuthConsumers.tsx |  4 ++--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/resources/ts/Components/IntegrationCard.tsx b/resources/ts/Components/IntegrationCard.tsx
index 64b1328e7..df3b20b2c 100644
--- a/resources/ts/Components/IntegrationCard.tsx
+++ b/resources/ts/Components/IntegrationCard.tsx
@@ -96,6 +96,8 @@ export const IntegrationCard = ({
     },
   ];
 
+  const clientSecretLabel = t("details.credentials.client_secret");
+
   const hasAnyCredentials = Boolean(
     legacyTestConsumer || legacyProdConsumer || testClient || prodClient
   );
@@ -126,7 +128,12 @@ export const IntegrationCard = ({
                     <span className="flex items-center whitespace-nowrap">
                       {t(client.label)}
                     </span>
-                    <CopyText>{client.value}</CopyText>
+                    {client.value && (
+                      <CopyText
+                        secret={t(client.label) === clientSecretLabel}
+                        text={client.value}
+                      />
+                    )}
                   </div>
                 ))}
               </div>
@@ -150,7 +157,7 @@ export const IntegrationCard = ({
             <span className="flex items-center whitespace-nowrap">
               {t("details.credentials.api_key")}
             </span>
-            <CopyText>{legacyTestConsumer.apiKey}</CopyText>
+            <CopyText secret text={legacyTestConsumer.apiKey} />
           </section>
         )}
       {type === IntegrationType.Widgets &&
@@ -190,7 +197,12 @@ export const IntegrationCard = ({
                         <span className="flex items-center whitespace-nowrap">
                           {t(client.label)}
                         </span>
-                        <CopyText>{client.value}</CopyText>
+                        {client.value && (
+                          <CopyText
+                            secret={t(client.label) === clientSecretLabel}
+                            text={client.value}
+                          />
+                        )}
                       </div>
                     ))}
                   </div>
@@ -245,7 +257,7 @@ export const IntegrationCard = ({
                   <span className="flex items-center whitespace-nowrap">
                     {t("details.credentials.api_key")}
                   </span>
-                  <CopyText>{legacyProdConsumer.apiKey}</CopyText>
+                  <CopyText secret text={legacyProdConsumer.apiKey} />
                 </div>
               )}
             </div>
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index d6d078ca8..b6a608ae2 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -60,6 +60,8 @@ export const CredentialsAuthClients = ({
     },
   ];
 
+  const clientSecretLabel = t("details.credentials.client_secret");
+
   const handleKeyVisibilityUpgrade = () =>
     router.post(`/integrations/${id}/upgrade`, {
       keyVisibility: KeyVisibility.v2,
@@ -110,7 +112,12 @@ export const CredentialsAuthClients = ({
                 <span className="flex items-center whitespace-nowrap">
                   {t(client.label)}
                 </span>
-                <CopyText>{client.value}</CopyText>
+                {client.value && (
+                  <CopyText
+                    secret={t(client.label) === clientSecretLabel}
+                    text={client.value}
+                  />
+                )}
               </div>
             ))}
           </div>
@@ -129,7 +136,12 @@ export const CredentialsAuthClients = ({
                     <span className="flex items-center whitespace-nowrap">
                       {t(client.label)}
                     </span>
-                    <CopyText>{client.value}</CopyText>
+                    {client.value && (
+                      <CopyText
+                        secret={t(client.label) === clientSecretLabel}
+                        text={client.value}
+                      />
+                    )}
                   </div>
                 ))}
               </div>
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx b/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
index 7b53a1bb8..5d91a505a 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
@@ -56,7 +56,7 @@ export const CredentialsLegacyAuthConsumers = ({
             {t("details.credentials.api_key")}
           </span>
           {legacyTestConsumer && (
-            <CopyText>{legacyTestConsumer.apiKey}</CopyText>
+            <CopyText secret text={legacyTestConsumer.apiKey} />
           )}
         </div>
         {keyVisibility !== KeyVisibility.v2 && (
@@ -72,7 +72,7 @@ export const CredentialsLegacyAuthConsumers = ({
                     <span className="flex items-center whitespace-nowrap">
                       {t("details.credentials.api_key")}
                     </span>
-                    <CopyText>{legacyProdConsumer.apiKey}</CopyText>
+                    <CopyText secret text={legacyProdConsumer.apiKey} />
                   </div>
                 )}
                 {keyVisibility === KeyVisibility.all &&

From e7662b169579e4e12732d79b392038df18bf63a3 Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Wed, 3 Jul 2024 13:08:57 +0200
Subject: [PATCH 3/4] Update styling

---
 resources/ts/Components/Tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/ts/Components/Tooltip.tsx b/resources/ts/Components/Tooltip.tsx
index 2fb328c8e..561f442e1 100644
--- a/resources/ts/Components/Tooltip.tsx
+++ b/resources/ts/Components/Tooltip.tsx
@@ -12,7 +12,7 @@ export const Tooltip = ({ visible, text, children, className }: Props) => {
   return (
     <div className={twMerge("w-[2.5rem]", className)}>
       <div>
-        <div className="group relative inline-block">
+        <div className="group relative inline-flex gap-2">
           {children}
           <div
             className={classNames(

From ae2bd62716b9bccb0ffd06d38de601fc0e0dc65d Mon Sep 17 00:00:00 2001
From: vhande <hande.vanhove@publiq.be>
Date: Thu, 4 Jul 2024 10:47:09 +0200
Subject: [PATCH 4/4] Change name isSecret

---
 resources/ts/Components/CopyText.tsx                      | 8 ++++----
 resources/ts/Components/IntegrationCard.tsx               | 8 ++++----
 .../Integrations/Detail/CredentialsAuthClients.tsx        | 4 ++--
 .../Detail/CredentialsLegacyAuthConsumers.tsx             | 4 ++--
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/resources/ts/Components/CopyText.tsx b/resources/ts/Components/CopyText.tsx
index 0f7bf37ba..a1e8b3e8a 100644
--- a/resources/ts/Components/CopyText.tsx
+++ b/resources/ts/Components/CopyText.tsx
@@ -5,9 +5,9 @@ import { useTranslation } from "react-i18next";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { ButtonIcon } from "./ButtonIcon";
 
-type Props = { text: string; secret?: boolean };
+type Props = { text: string; isSecret?: boolean };
 
-export const CopyText = ({ text, secret }: Props) => {
+export const CopyText = ({ text, isSecret }: Props) => {
   const { t } = useTranslation();
 
   const codeFieldRef = useRef<HTMLSpanElement>(null);
@@ -30,14 +30,14 @@ export const CopyText = ({ text, secret }: Props) => {
         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}
       >
-        {!secret || isSecretVisible ? text : "*".repeat(text?.length ?? 36)}
+        {!isSecret || isSecretVisible ? text : "*".repeat(text?.length ?? 36)}
       </span>
       <Tooltip visible={isVisible} text={t("tooltip.copy")} className="w-auto">
         <ButtonIconCopy
           onClick={() => handleCopyToClipboard(text)}
           className="text-publiq-orange"
         />
-        {secret && (
+        {isSecret && (
           <ButtonIcon
             icon={isSecretVisible ? faEyeSlash : faEye}
             className="text-publiq-orange p-0 h-auto w-auto"
diff --git a/resources/ts/Components/IntegrationCard.tsx b/resources/ts/Components/IntegrationCard.tsx
index df3b20b2c..38205cf80 100644
--- a/resources/ts/Components/IntegrationCard.tsx
+++ b/resources/ts/Components/IntegrationCard.tsx
@@ -130,7 +130,7 @@ export const IntegrationCard = ({
                     </span>
                     {client.value && (
                       <CopyText
-                        secret={t(client.label) === clientSecretLabel}
+                        isSecret={t(client.label) === clientSecretLabel}
                         text={client.value}
                       />
                     )}
@@ -157,7 +157,7 @@ export const IntegrationCard = ({
             <span className="flex items-center whitespace-nowrap">
               {t("details.credentials.api_key")}
             </span>
-            <CopyText secret text={legacyTestConsumer.apiKey} />
+            <CopyText isSecret text={legacyTestConsumer.apiKey} />
           </section>
         )}
       {type === IntegrationType.Widgets &&
@@ -199,7 +199,7 @@ export const IntegrationCard = ({
                         </span>
                         {client.value && (
                           <CopyText
-                            secret={t(client.label) === clientSecretLabel}
+                            isSecret={t(client.label) === clientSecretLabel}
                             text={client.value}
                           />
                         )}
@@ -257,7 +257,7 @@ export const IntegrationCard = ({
                   <span className="flex items-center whitespace-nowrap">
                     {t("details.credentials.api_key")}
                   </span>
-                  <CopyText secret text={legacyProdConsumer.apiKey} />
+                  <CopyText isSecret text={legacyProdConsumer.apiKey} />
                 </div>
               )}
             </div>
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
index b6a608ae2..1fd4323d1 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsAuthClients.tsx
@@ -114,7 +114,7 @@ export const CredentialsAuthClients = ({
                 </span>
                 {client.value && (
                   <CopyText
-                    secret={t(client.label) === clientSecretLabel}
+                    isSecret={t(client.label) === clientSecretLabel}
                     text={client.value}
                   />
                 )}
@@ -138,7 +138,7 @@ export const CredentialsAuthClients = ({
                     </span>
                     {client.value && (
                       <CopyText
-                        secret={t(client.label) === clientSecretLabel}
+                        isSecret={t(client.label) === clientSecretLabel}
                         text={client.value}
                       />
                     )}
diff --git a/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx b/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
index 5d91a505a..cc460152d 100644
--- a/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
+++ b/resources/ts/Components/Integrations/Detail/CredentialsLegacyAuthConsumers.tsx
@@ -56,7 +56,7 @@ export const CredentialsLegacyAuthConsumers = ({
             {t("details.credentials.api_key")}
           </span>
           {legacyTestConsumer && (
-            <CopyText secret text={legacyTestConsumer.apiKey} />
+            <CopyText isSecret text={legacyTestConsumer.apiKey} />
           )}
         </div>
         {keyVisibility !== KeyVisibility.v2 && (
@@ -72,7 +72,7 @@ export const CredentialsLegacyAuthConsumers = ({
                     <span className="flex items-center whitespace-nowrap">
                       {t("details.credentials.api_key")}
                     </span>
-                    <CopyText secret text={legacyProdConsumer.apiKey} />
+                    <CopyText isSecret text={legacyProdConsumer.apiKey} />
                   </div>
                 )}
                 {keyVisibility === KeyVisibility.all &&