feat(pass-desktop): add optional screen privacy setting

applications/pass-desktop/src/lib/content-protection.ts

@@ -0,0 +1,30 @@
+import type { BrowserWindow } from 'electron';
+
+import type { MaybeNull } from '@proton/pass/types';
+
+import { store } from '../store';
+import { setupIpcHandler } from './ipc';
+
+declare module 'proton-pass-desktop/lib/ipc' {
+    interface IPCChannels {
+        'contentProtection:get': IPCChannel<[], boolean>;
+        'contentProtection:set': IPCChannel<[enabled: boolean], void>;
+    }
+}
+
+export const getContentProtection = () => store.get('contentProtection') === true;
+
+export const applyContentProtection = (browserWindow: MaybeNull<BrowserWindow>, enabled = getContentProtection()) => {
+    browserWindow?.setContentProtection(Boolean(enabled && !process.env.PASS_DEBUG));
+};
+
+export const setContentProtection = (getWindow: () => MaybeNull<BrowserWindow>, enabled: boolean) => {
+    const value = enabled === true;
+    store.set('contentProtection', value);
+    applyContentProtection(getWindow(), value);
+};
+
+export const setupIpcHandlers = (getWindow: () => MaybeNull<BrowserWindow>) => {
+    setupIpcHandler('contentProtection:get', getContentProtection);
+    setupIpcHandler('contentProtection:set', (enabled) => setContentProtection(getWindow, enabled));
+};

applications/pass-desktop/src/main.ts

@@ -20,6 +20,7 @@ import noop from '@proton/utils/noop';
 
 import config from './app/config';
 import { WINDOWS_APP_ID } from './constants';
+import { applyContentProtection } from './lib/content-protection';
 import { migrateSameSiteCookies, upgradeSameSiteCookies } from './lib/cookies';
 import { fixSSOUrl } from './lib/sso';
 import { getTheme } from './lib/theming';
@@ -156,6 +157,7 @@ const createWindow = async (session: Session): Promise<BrowserWindow> => {
 
     setApplicationMenu(ctx.window);
     registerWindowManagementHandlers(ctx.window);
+    applyContentProtection(ctx.window);
 
     ctx.window.on('show', () => {
         if (isMac()) void app.dock?.show();

applications/pass-desktop/src/preload.ts

@@ -39,6 +39,10 @@ const contextBridgeApi: ContextBridgeApi = {
     getTheme: () => invoke('theming:getTheme'),
     setTheme: (theme) => invoke('theming:setTheme', theme),
 
+    /* content protection */
+    getContentProtection: () => invoke('contentProtection:get'),
+    setContentProtection: (enabled) => invoke('contentProtection:set', enabled),
+
     /* routing */
     navigate: (href) => invoke('router:navigate', href),
 

applications/pass-desktop/src/startup.ts

@@ -1,6 +1,7 @@
 import { setupIpcHandlers as autotype } from './lib/autotype';
 import biometrics from './lib/biometrics';
 import { setupIpcHandlers as clipboard } from './lib/clipboard/clipboard.ipc';
+import { setupIpcHandlers as contentProtection } from './lib/content-protection';
 import contextMenu from './lib/context-menu';
 import { setupIpcHandlers as info } from './lib/install-info';
 import { nativeMessaging } from './lib/native-messaging/startup';
@@ -24,6 +25,7 @@ export const startup = async (app: Electron.App, ctx: PassElectronContext) => {
     navigation(() => ctx.window);
     sessionStorage(() => ctx.session);
     clipboard();
+    contentProtection(() => ctx.window);
     info();
     theming();
     autotype(() => ctx.window);

applications/pass-desktop/src/store.ts

@@ -8,6 +8,7 @@ import { calculateUpdateDistribution } from './lib/updater/helpers';
 import type { WindowConfigStoreProperties } from './lib/window-management';
 
 type RootStore = {
+    contentProtection?: boolean;
     installInfo?: StoreInstallProperties;
     update?: UpdateStore;
     theme?: DesktopTheme;

packages/pass/components/Settings/ContentProtection.tsx

@@ -0,0 +1,69 @@
+import { type FC, useEffect, useState } from 'react';
+
+import { c } from 'ttag';
+
+import Checkbox from '@proton/components/components/input/Checkbox';
+import { PASS_APP_NAME } from '@proton/shared/lib/constants';
+import noop from '@proton/utils/noop';
+
+import { SettingsPanel } from './SettingsPanel';
+
+export const ContentProtection: FC = () => {
+    const [enabled, setEnabled] = useState(false);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const bridge = window.ctxBridge;
+        let active = true;
+
+        if (!bridge) {
+            setLoading(false);
+            return;
+        }
+
+        void bridge
+            .getContentProtection()
+            .then((value) => {
+                if (active) setEnabled(value);
+            })
+            .catch(noop)
+            .finally(() => {
+                if (active) setLoading(false);
+            });
+
+        return () => {
+            active = false;
+        };
+    }, []);
+
+    const handleToggle = async () => {
+        const bridge = window.ctxBridge;
+        if (!bridge) return;
+
+        const nextEnabled = !enabled;
+        setEnabled(nextEnabled);
+        setLoading(true);
+
+        try {
+            await bridge.setContentProtection(nextEnabled);
+        } catch {
+            setEnabled(enabled);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <SettingsPanel title={c('Label').t`Screen privacy`}>
+            <Checkbox checked={enabled} disabled={loading} onChange={handleToggle} loading={loading}>
+                <span>
+                    {c('Label').t`Hide ${PASS_APP_NAME} from screen captures`}
+                    <span className="block color-weak text-sm">
+                        {c('Info')
+                            .t`When enabled, ${PASS_APP_NAME} hides its window from screenshots, screen recordings, and screen sharing when supported by your operating system.`}
+                    </span>
+                </span>
+            </Checkbox>
+        </SettingsPanel>
+    );
+};

packages/pass/components/Settings/Views/Tabs/Security.tsx

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
 
 import { Clipboard } from '@proton/pass/components/Settings/Clipboard';
+import { ContentProtection } from '@proton/pass/components/Settings/ContentProtection';
 import { ExtraPassword } from '@proton/pass/components/Settings/ExtraPassword';
 import { LockSettings } from '@proton/pass/components/Settings/LockSettings';
 
 export const Security: FC = () => [
     <LockSettings key="lock" />,
     <ExtraPassword key="extra-pwd" />,
-    ...(DESKTOP_BUILD ? [<Clipboard key="clipboard" />] : []),
+    ...(DESKTOP_BUILD ? [<Clipboard key="clipboard" />, <ContentProtection key="content-protection" />] : []),
 ];

packages/pass/types/desktop/index.ts

@@ -40,6 +40,9 @@ export type ContextBridgeApi = {
     getTheme: () => Promise<Maybe<DesktopTheme>>;
     setTheme: (theme: DesktopTheme) => Promise<void>;
 
+    getContentProtection: () => Promise<boolean>;
+    setContentProtection: (enabled: boolean) => Promise<void>;
+
     autotype: ({ fields, enterAtTheEnd }: AutotypeProperties) => Promise<void>;
 
     openContextMenu: (items: ContextMenuItemSerializable[]) => Promise<number>;