feat: Add global watermark using username

Author: LZS911

webapp/packages/core-app/src/Body.tsx

@@ -9,7 +9,8 @@ import { observer } from 'mobx-react-lite';
 import { useLayoutEffect, useRef } from 'react';
 import styled, { css } from 'reshadow';
 
-import { Loader, useResource, useStyles } from '@cloudbeaver/core-blocks';
+import { AuthInfoService } from '@cloudbeaver/core-authentication';
+import { Loader, useResource, useStyles, Watermark } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { DialogsPortal } from '@cloudbeaver/core-dialogs';
 import { Notifications } from '@cloudbeaver/core-notifications';
@@ -44,6 +45,8 @@ export const Body = observer(function Body() {
   const screenService = useService(ScreenService);
   const Screen = screenService.screen?.component;
   const { backendVersion } = useAppVersion();
+  const authInfoService = useService(AuthInfoService);
+  const userInfo = authInfoService.userInfo;
 
   // TODO: must be loaded in place where it is used
   useResource(Body, ProjectInfoResource, CachedMapAllKey, { silent: true });
@@ -64,6 +67,7 @@ export const Body = observer(function Body() {
           <DialogsPortal />
           <Notifications />
         </theme>
+        {userInfo && <Watermark theme={userInfo?.configurationParameters['app.theme']} text={userInfo?.displayName || userInfo?.userId} />}
       </Loader>
     </DNDProvider>,
   );

webapp/packages/core-blocks/src/Watermark/Watermark.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+
+interface WatermarkProps {
+  text: string;
+  fontSize?: number;
+  fontFamily?: string;
+  textColor?: string;
+  rotate?: number;
+  zIndex?: number;
+  theme?: 'light' | 'dark';
+}
+
+const Watermark: React.FC<WatermarkProps> = ({
+  text,
+  fontSize = 16,
+  fontFamily = 'Arial',
+  textColor = 'rgba(0, 0, 0, 0.1)',
+  rotate = -45,
+  zIndex = 9999,
+  theme = 'light',
+}) => {
+  const [watermarkUrl, setWatermarkUrl] = useState<string>('');
+
+  useEffect(() => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    if (context) {
+      const scale = window.devicePixelRatio;
+      canvas.width = 300 * scale;
+      canvas.height = 150 * scale;
+      context.scale(scale, scale);
+
+      context.font = `${fontSize}px ${fontFamily}`;
+      context.fillStyle = theme === 'light' ? textColor : 'rgba(255, 255, 255, 0.1)';
+      context.rotate((rotate * Math.PI) / 180);
+      context.fillText(text, 0, 100);
+
+      setWatermarkUrl(canvas.toDataURL());
+    }
+  }, [text, fontSize, fontFamily, textColor, rotate, theme]);
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex,
+        pointerEvents: 'none',
+        backgroundImage: `url(${watermarkUrl})`,
+        backgroundRepeat: 'repeat',
+      }}
+    />
+  );
+};
+
+export default Watermark;

webapp/packages/core-blocks/src/index.ts

@@ -120,6 +120,7 @@ export * from './FormControls/BASE_DROPDOWN_STYLES';
 export * from './FormControls/FormBox';
 export * from './FormControls/Filter';
 export * from './Fill';
+export { default as Watermark } from './Watermark/Watermark';
 
 export * from './Containers/Container';
 export * from './Containers/Group';