Merge pull request #4820 from Infisical/daniel/cert-auth

feat(app-connections/azure-client-secrets): certificate auth

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -12,12 +12,14 @@ const syntaxHighlight = (
   isVisible?: boolean,
   isImport?: boolean,
   isLoadingValue?: boolean,
-  isErrorLoadingValue?: boolean
+  isErrorLoadingValue?: boolean,
+  placeholder?: string
 ) => {
   if (isLoadingValue) return HIDDEN_SECRET_VALUE;
   if (isErrorLoadingValue)
     return <span className="ph-no-capture text-red/75">Error loading secret value.</span>;
   if (isImport && !content) return "IMPORTED";
+  if (placeholder && (content === "" || !content)) return placeholder;
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
   if (!isVisible) return HIDDEN_SECRET_VALUE;
@@ -79,6 +81,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       canEditButNotView,
       isLoadingValue,
       isErrorLoadingValue,
+      placeholder,
       ...props
     },
     ref
@@ -93,18 +96,25 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         <div className="relative overflow-hidden">
           <pre aria-hidden className="m-0">
             <code className={`inline-block w-full ${commonClassName}`}>
-              <span style={{ whiteSpace: "break-spaces" }}>
+              <span
+                className={twMerge(
+                  "whitespace-break-spaces",
+                  placeholder && !value && "text-gray-500/50"
+                )}
+              >
                 {syntaxHighlight(
                   value,
                   isVisible || (isSecretFocused && !valueAlwaysHidden),
                   isImport,
                   isLoadingValue,
-                  isErrorLoadingValue
+                  isErrorLoadingValue,
+                  placeholder
                 )}
               </span>
             </code>
           </pre>
           <textarea
+            placeholder={placeholder}
             style={{ whiteSpace: "break-spaces" }}
             aria-label="secret value"
             ref={ref}