[*] mask password in the source connection string, fixes #610

Author: tvecerakb

internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.consts.tsx

@@ -5,6 +5,7 @@ import { Source } from "types/Source/Source";
 import { CustomTagsPopUp } from "./components/CustomTagsPopUp/CustomTagsPopUp";
 import { EnabledSourceSwitch } from "./components/EnabledSourceSwitch";
 import { HostConfigPopUp } from "./components/HostConfigPopUp/HostConfigPopUp";
+import { MaskConnectionString } from "./components/MaskConnectionString";
 import { SourcesGridActions } from "./components/SourcesGridActions";
 
 const getIcon = (value: boolean) => {
@@ -33,6 +34,7 @@ export const useSourcesGridColumns = (): GridColDef<Source>[] => ([
     minWidth: 300,
     align: "center",
     headerAlign: "center",
+    renderCell: ({ row }) => <MaskConnectionString source={row} />,
   },
   {
     field: "Metrics",

internal/webui/src/pages/SourcesPage/components/SourcesGrid/components/MaskConnectionString.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import { IconButton } from "@mui/material";
+import { Source } from "types/Source/Source";
+
+type MaskedTextProps = {
+  source: Source;
+};
+
+const mask = (connStr: string) => {
+  if (connStr.includes("://")) {
+    return connStr.replace(
+      /(postgresql:\/\/[^:]+:)([^@]+)(@.*)/,
+      (_, start, pass, end) => `${start}${"•".repeat(8)}${end}`
+    );
+  } else {
+    return connStr.replace(
+      /(Password=)[^;]+(;|$)/i, (_, start, end) => `${start}${"•".repeat(8)}${end}`
+    );
+  }
+};
+
+export const MaskConnectionString = ({ source }: MaskedTextProps) => {
+  const [unmask, setUnmask] = useState(false);
+
+  const handleUnmask = () => setUnmask(!unmask);
+
+  return (
+    <>
+      <span>{unmask ? source.ConnStr : mask(source.ConnStr)}</span>
+      <IconButton title={unmask ? "Hide password" : "Show password"} onClick={handleUnmask}>
+        {
+          unmask ? <VisibilityOff /> : <Visibility />
+        }
+      </IconButton>
+    </>
+  );
+};