Merge branch 'main' into bugfix/PPF-524

cultuurnet · Jul 4, 2024 · ac5f37a · ac5f37a
2 parents e00376a + a1f1bea
commit ac5f37a
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 24 deletions.
diff --git a/resources/ts/Components/ActivationRequest.tsx b/resources/ts/Components/ActivationRequest.tsx
@@ -19,7 +19,7 @@ export const ActivationRequest = ({ id, type }: Props) => {
     );
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col gap-2">
       <div>
         {type === IntegrationType.EntryApi && (
           <Trans

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; isSecret?: boolean };
 
-export const CopyText = ({ children }: Props) => {
+export const CopyText = ({ text, isSecret }: 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}
+        {!isSecret || 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"
         />
+        {isSecret && (
+          <ButtonIcon
+            icon={isSecretVisible ? faEyeSlash : faEye}
+            className="text-publiq-orange p-0 h-auto w-auto"
+            onClick={() => {
+              setIsSecretVisible((prev) => !prev);
+            }}
+          />
+        )}
       </Tooltip>
     </div>
   );

diff --git 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
+                        isSecret={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 isSecret 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
+                            isSecret={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 isSecret text={legacyProdConsumer.apiKey} />
                 </div>
               )}
             </div>

diff --git 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
+                    isSecret={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
+                        isSecret={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
@@ -56,7 +56,7 @@ export const CredentialsLegacyAuthConsumers = ({
             {t("details.credentials.api_key")}
           </span>
           {legacyTestConsumer && (
-            <CopyText>{legacyTestConsumer.apiKey}</CopyText>
+            <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>{legacyProdConsumer.apiKey}</CopyText>
+                    <CopyText isSecret text={legacyProdConsumer.apiKey} />
                   </div>
                 )}
                 {keyVisibility === KeyVisibility.all &&

diff --git 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(