Custom provider header input improvement

frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/AuditLogStreamForm/CustomProviderAuditLogStreamForm.tsx

@@ -99,6 +99,26 @@ export const CustomProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: P
                     type="password"
                     placeholder="Bearer <token>"
                     autoComplete="new-password"
+                    onFocus={(e) => {
+                      if (
+                        auditLogStream &&
+                        auditLogStream.credentials.headers[i].value === "******" &&
+                        field.value === "******"
+                      ) {
+                        field.onChange("");
+                      }
+                      e.target.type = "text";
+                    }}
+                    onBlur={(e) => {
+                      if (
+                        auditLogStream &&
+                        auditLogStream.credentials.headers[i].value === "******" &&
+                        field.value === ""
+                      ) {
+                        field.onChange("******");
+                      }
+                      e.target.type = "password";
+                    }}
                   />
                 </FormControl>
               )}

frontend/src/pages/organization/SettingsPage/components/AuditLogStreamTab/components/AuditLogStreamHeader.tsx

@@ -1,8 +1,8 @@
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { AUDIT_LOG_STREAM_PROVIDER_MAP } from "@app/helpers/auditLogStreams";
 import { LogProvider } from "@app/hooks/api/auditLogStreams/enums";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   provider: LogProvider;