From b90597cc662af8cb461f023d405230f66a30d62f Mon Sep 17 00:00:00 2001
From: PAX-1-2 <gmlprpruebas@gmail.com>
Date: Sun, 16 Aug 2026 12:26:11 -0400
Subject: [PATCH] feat(pass): allow copying multiple login fields at once

Add a multi-copy mode to the login item detail view: a toolbar lets the
user enable field selection, pick fields through checkboxes (email,
username, password, TOTP token, websites, note and custom fields) and
copy them together as "Label: value" entries, separated either by
comma and space or by line breaks.
---
 .../Form/Field/Control/ExtraFieldsControl.tsx |  17 +-
 .../Form/Field/Control/OTPValueControl.tsx    |   3 +-
 .../Form/Field/Control/UpgradeControl.tsx     |   4 +-
 .../components/Item/Login/Login.content.tsx   | 171 ++++++++++++++----
 .../components/Item/MultiCopy/MultiCopy.tsx   | 158 ++++++++++++++++
 5 files changed, 312 insertions(+), 41 deletions(-)
 create mode 100644 packages/pass/components/Item/MultiCopy/MultiCopy.tsx

diff --git a/packages/pass/components/Form/Field/Control/ExtraFieldsControl.tsx b/packages/pass/components/Form/Field/Control/ExtraFieldsControl.tsx
index ba81ff98bd4..9c25d57a5b5 100644
--- a/packages/pass/components/Form/Field/Control/ExtraFieldsControl.tsx
+++ b/packages/pass/components/Form/Field/Control/ExtraFieldsControl.tsx
@@ -1,7 +1,8 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 import { type FC, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
+import type { IconName } from '@proton/icons/types';
 import { getExtraFieldOption } from '@proton/pass/components/Form/Field/ExtraFieldGroup/ExtraField.utils';
 import { FieldsetCluster } from '@proton/pass/components/Form/Field/Layout/FieldsetCluster';
 import { TextAreaReadonly } from '@proton/pass/components/Form/legacy/TextAreaReadonly';
@@ -21,6 +22,10 @@ type ExtraFieldsControlProps = {
     shareId: string;
     hideIcons?: boolean;
     onCopy?: () => void;
+    /** disables per-field click-to-copy (eg: while multi-copy selection is enabled) */
+    copyable?: boolean;
+    /** overrides the field icon - used to render the multi-copy selection checkbox */
+    renderIcon?: (key: string) => IconName | ReactElement | undefined;
 };
 
 export const ExtraFieldsControl: FC<PropsWithChildren<ExtraFieldsControlProps>> = ({
@@ -30,13 +35,15 @@ export const ExtraFieldsControl: FC<PropsWithChildren<ExtraFieldsControlProps>>
     itemId,
     shareId,
     onCopy,
+    copyable = true,
+    renderIcon,
 }) => {
     const { needsUpgrade } = useSelector(selectExtraFieldLimits);
 
     const getControlByType = useCallback(
         ({ fieldName, type, data }: DeobfuscatedItemExtraField, index: number) => {
-            const icon = hideIcons ? undefined : getExtraFieldOption(type).icon;
             const key = `${index}-${fieldName}`;
+            const icon = renderIcon?.(key) ?? (hideIcons ? undefined : getExtraFieldOption(type).icon);
 
             if (needsUpgrade) {
                 return (
@@ -62,7 +69,7 @@ export const ExtraFieldsControl: FC<PropsWithChildren<ExtraFieldsControlProps>>
                         <ValueControl icon={icon} key={key} label={fieldName} />
                     ) : (
                         <ValueControl
-                            clickToCopy
+                            clickToCopy={copyable}
                             key={key}
                             icon={icon}
                             label={fieldName}
@@ -77,7 +84,7 @@ export const ExtraFieldsControl: FC<PropsWithChildren<ExtraFieldsControlProps>>
                         <ValueControl icon={icon} key={key} label={fieldName} />
                     ) : (
                         <ValueControl
-                            clickToCopy
+                            clickToCopy={copyable}
                             as={TextAreaReadonly}
                             key={key}
                             hidden={type === 'hidden'}
@@ -89,7 +96,7 @@ export const ExtraFieldsControl: FC<PropsWithChildren<ExtraFieldsControlProps>>
                     );
             }
         },
-        [itemId, shareId]
+        [copyable, hideIcons, itemId, renderIcon, shareId]
     );
 
     return (
diff --git a/packages/pass/components/Form/Field/Control/OTPValueControl.tsx b/packages/pass/components/Form/Field/Control/OTPValueControl.tsx
index abeab2c94bc..c510bc79e24 100644
--- a/packages/pass/components/Form/Field/Control/OTPValueControl.tsx
+++ b/packages/pass/components/Form/Field/Control/OTPValueControl.tsx
@@ -1,4 +1,5 @@
 import { type FC, useRef } from 'react';
+import type { ReactElement } from 'react';
 
 import { c } from 'ttag';
 
@@ -11,7 +12,7 @@ import type { MaybeNull, OtpRequest } from '@proton/pass/types';
 
 import { ValueControl } from './ValueControl';
 
-type Props = { label?: string; payload: OtpRequest; onCopy?: () => void; icon?: IconName };
+type Props = { label?: string; payload: OtpRequest; onCopy?: () => void; icon?: IconName | ReactElement };
 
 export const OTPValueControl: FC<Props> = ({ label, icon, payload, onCopy }) => {
     const otpRenderer = useRef<MaybeNull<IOtpRenderer>>(null);
diff --git a/packages/pass/components/Form/Field/Control/UpgradeControl.tsx b/packages/pass/components/Form/Field/Control/UpgradeControl.tsx
index c6bb41d392c..eca9a0f2c91 100644
--- a/packages/pass/components/Form/Field/Control/UpgradeControl.tsx
+++ b/packages/pass/components/Form/Field/Control/UpgradeControl.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, ReactElement } from 'react';
 
 import type { IconName } from '@proton/icons/types';
 import { UpgradeButton } from '@proton/pass/components/Upsell/UpgradeButton';
@@ -7,7 +7,7 @@ import type { UpsellRef } from '@proton/pass/constants';
 import { ValueControl } from './ValueControl';
 
 type UpgradeControlProps = {
-    icon?: IconName;
+    icon?: IconName | ReactElement;
     label: string;
     upsellRef: UpsellRef;
 };
diff --git a/packages/pass/components/Item/Login/Login.content.tsx b/packages/pass/components/Item/Login/Login.content.tsx
index bfe173c1e7d..839e51e0606 100644
--- a/packages/pass/components/Item/Login/Login.content.tsx
+++ b/packages/pass/components/Item/Login/Login.content.tsx
@@ -1,4 +1,4 @@
-import { type FC, useMemo, useState } from 'react';
+import { type FC, type ReactElement, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { c } from 'ttag';
@@ -6,11 +6,19 @@ import { c } from 'ttag';
 import { Banner } from '@proton/atoms/Banner/Banner';
 import { Href } from '@proton/atoms/Href/Href';
 import { IcChevronRight } from '@proton/icons/icons/IcChevronRight';
+import type { IconName } from '@proton/icons/types';
+import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
 import { ExtraFieldsControl } from '@proton/pass/components/Form/Field/Control/ExtraFieldsControl';
 import { OTPValueControl } from '@proton/pass/components/Form/Field/Control/OTPValueControl';
 import { ValueControl } from '@proton/pass/components/Form/Field/Control/ValueControl';
 import { FieldsetCluster } from '@proton/pass/components/Form/Field/Layout/FieldsetCluster';
 import { TextAreaReadonly } from '@proton/pass/components/Form/legacy/TextAreaReadonly';
+import {
+    MultiCopyCheckbox,
+    type MultiCopyField,
+    MultiCopyToolbar,
+    useMultiCopy,
+} from '@proton/pass/components/Item/MultiCopy/MultiCopy';
 import { PasskeyContentModal } from '@proton/pass/components/Item/Passkey/Passkey.modal';
 import { PasswordStrength } from '@proton/pass/components/Password/PasswordStrength';
 import { UpgradeButton } from '@proton/pass/components/Upsell/UpgradeButton';
@@ -27,6 +35,9 @@ import { selectAliasByAliasEmail, selectTOTPLimits } from '@proton/pass/store/se
 import type { MaybeNull } from '@proton/pass/types';
 import { TelemetryFieldType } from '@proton/pass/types/data/telemetry';
 import { AutofillMode } from '@proton/pass/types/protobuf';
+import { isEmptyString } from '@proton/pass/utils/string/is-empty-string';
+import { formatYYYYMMDD } from '@proton/pass/utils/time/format';
+import clsx from '@proton/utils/clsx';
 
 export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLinkItem = false }) => {
     const { data: item, shareId, itemId } = revision;
@@ -57,9 +68,79 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
     );
 
     const sendClipboardTelemetry = useLoginClipboardTelemetry(item);
+    const core = usePassCore();
+
+    const multiCopyFields = useMemo<MultiCopyField[]>(() => {
+        const fields: MultiCopyField[] = [];
+        const totpGetter = (uri: string) => async () =>
+            (await core.generateOTP({ totpUri: uri, type: 'uri' }))?.token ?? '';
+
+        if (itemEmail) {
+            fields.push({
+                key: 'email',
+                label: relatedAlias ? c('Label').t`Email (alias)` : c('Label').t`Email`,
+                value: itemEmail,
+            });
+        }
+
+        if (itemUsername) fields.push({ key: 'username', label: c('Label').t`Username`, value: itemUsername });
+        if (password) fields.push({ key: 'password', label: c('Label').t`Password`, value: password });
+        if (totpUri && totpAllowed) {
+            fields.push({ key: 'totp', label: c('Label').t`2FA token (TOTP)`, value: totpGetter(totpUri) });
+        }
+
+        sanitizedUrls.forEach((url, index) =>
+            fields.push({ key: `url-${index}`, label: c('Label').t`Website`, value: url.url })
+        );
+
+        if (note) fields.push({ key: 'note', label: c('Label').t`Note`, value: note });
+
+        extraFields.forEach((extraField, index) => {
+            const key = `${index}-${extraField.fieldName}`;
+            const { fieldName } = extraField;
+
+            if (extraField.type === 'text' || extraField.type === 'hidden') {
+                const { content } = extraField.data;
+                if (!isEmptyString(content)) fields.push({ key, label: fieldName, value: content });
+            } else if (extraField.type === 'totp') {
+                const { totpUri } = extraField.data;
+                if (!isEmptyString(totpUri)) fields.push({ key, label: fieldName, value: totpGetter(totpUri) });
+            } else if (extraField.type === 'timestamp') {
+                const { timestamp } = extraField.data;
+                if (!isEmptyString(timestamp)) {
+                    fields.push({ key, label: fieldName, value: formatYYYYMMDD(timestamp) ?? timestamp });
+                }
+            }
+        });
+
+        return fields;
+    }, [core, extraFields, itemEmail, itemUsername, note, password, relatedAlias, sanitizedUrls, totpAllowed, totpUri]);
+
+    const multicopy = useMultiCopy(multiCopyFields);
+
+    /** while multi-copy selection is enabled, replace the field icon with a selection checkbox */
+    const selectionIcon = (key: string, icon: IconName | ReactElement) =>
+        multicopy.enabled ? (
+            <MultiCopyCheckbox checked={multicopy.isSelected(key)} onChange={() => multicopy.toggleField(key)} />
+        ) : (
+            icon
+        );
 
     return (
         <>
+            {multiCopyFields.length > 0 && (
+                <MultiCopyToolbar
+                    commaSeparator={multicopy.separator === 'comma'}
+                    enabled={multicopy.enabled}
+                    selectedCount={multicopy.selectedCount}
+                    totalCount={multiCopyFields.length}
+                    onCopy={multicopy.copySelected}
+                    onToggleEnabled={multicopy.toggleEnabled}
+                    onToggleSelectAll={multicopy.toggleSelectAll}
+                    onToggleSeparator={multicopy.setCommaSeparator}
+                />
+            )}
+
             {!secureLinkItem &&
                 (passkeys ?? []).map((passkey) => (
                     <FieldsetCluster mode="read" key={passkey.keyId}>
@@ -83,8 +164,8 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
 
                 {itemEmail && (
                     <ValueControl
-                        clickToCopy
-                        icon={relatedAlias ? 'alias' : 'envelope'}
+                        clickToCopy={!multicopy.enabled}
+                        icon={selectionIcon('email', relatedAlias ? 'alias' : 'envelope')}
                         label={relatedAlias ? c('Label').t`Email (alias)` : c('Label').t`Email`}
                         value={itemEmail}
                         onCopy={() => sendClipboardTelemetry?.(TelemetryFieldType.email)}
@@ -93,8 +174,8 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
 
                 {itemUsername && (
                     <ValueControl
-                        clickToCopy
-                        icon="user"
+                        clickToCopy={!multicopy.enabled}
+                        icon={selectionIcon('username', 'user')}
                         label={c('Label').t`Username`}
                         value={itemUsername}
                         onCopy={() => sendClipboardTelemetry?.(TelemetryFieldType.username)}
@@ -102,9 +183,9 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
                 )}
 
                 <ValueControl
-                    clickToCopy
+                    clickToCopy={!multicopy.enabled}
                     hidden
-                    icon="key"
+                    icon={selectionIcon('password', 'key')}
                     label={c('Label').t`Password`}
                     value={password}
                     ellipsis={false}
@@ -122,7 +203,7 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
 
                 {totpUri && totpAllowed && (
                     <OTPValueControl
-                        icon="lock"
+                        icon={selectionIcon('totp', 'lock')}
                         payload={{ totpUri, type: 'uri' }}
                         onCopy={() => sendClipboardTelemetry?.(TelemetryFieldType.totp)}
                     />
@@ -153,30 +234,45 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
                                 }
                             </Banner>
                         )}
-                        {sanitizedUrls.map((url, index) => (
-                            <li
-                                key={index}
-                                className="w-full flex flex-column border border-weak bg-weak rounded-lg px-2 py-1 gap-1"
-                            >
-                                <p className="w-full text-ellipsis">
-                                    {isAutofillModeDataOfTypeUrl(url.mode) ? (
-                                        <Href
-                                            className="block text-ellipsis"
-                                            href={url.url}
-                                            key={url.url}
-                                            title={url.url}
-                                        >
-                                            {url.url}
-                                        </Href>
-                                    ) : (
-                                        <span title={url.url}>{url.url}</span>
+                        {sanitizedUrls.map((url, index) => {
+                            const urlKey = `url-${index}`;
+
+                            return (
+                                <li
+                                    key={index}
+                                    className={clsx(
+                                        'w-full flex border border-weak bg-weak rounded-lg px-2 py-1 gap-1',
+                                        multicopy.enabled ? 'flex-row items-center' : 'flex-column'
                                     )}
-                                </p>
-                                {url.mode === AutofillMode.Default ? null : (
-                                    <p className="color-weak text-ellipsis">{getModeDescription(url.mode)}</p>
-                                )}
-                            </li>
-                        ))}
+                                >
+                                    {multicopy.enabled && (
+                                        <MultiCopyCheckbox
+                                            checked={multicopy.isSelected(urlKey)}
+                                            onChange={() => multicopy.toggleField(urlKey)}
+                                        />
+                                    )}
+                                    <div className={clsx('flex flex-column gap-1', multicopy.enabled && 'w-full')}>
+                                        <p className="w-full text-ellipsis">
+                                            {isAutofillModeDataOfTypeUrl(url.mode) ? (
+                                                <Href
+                                                    className="block text-ellipsis"
+                                                    href={url.url}
+                                                    key={url.url}
+                                                    title={url.url}
+                                                >
+                                                    {url.url}
+                                                </Href>
+                                            ) : (
+                                                <span title={url.url}>{url.url}</span>
+                                            )}
+                                        </p>
+                                        {url.mode === AutofillMode.Default ? null : (
+                                            <p className="color-weak text-ellipsis">{getModeDescription(url.mode)}</p>
+                                        )}
+                                    </div>
+                                </li>
+                            );
+                        })}
                     </ValueControl>
                 </FieldsetCluster>
             )}
@@ -184,9 +280,9 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
             {note && (
                 <FieldsetCluster mode="read" as="div">
                     <ValueControl
-                        clickToCopy
+                        clickToCopy={!multicopy.enabled}
                         as={TextAreaReadonly}
-                        icon="note"
+                        icon={selectionIcon('note', 'note')}
                         label={c('Label').t`Note`}
                         value={note}
                         onCopy={() => sendClipboardTelemetry?.(TelemetryFieldType.note)}
@@ -199,6 +295,15 @@ export const LoginContent: FC<ItemContentProps<'login'>> = ({ revision, secureLi
                     extraFields={extraFields}
                     itemId={itemId}
                     shareId={shareId}
+                    copyable={!multicopy.enabled}
+                    renderIcon={(key) =>
+                        multicopy.enabled ? (
+                            <MultiCopyCheckbox
+                                checked={multicopy.isSelected(key)}
+                                onChange={() => multicopy.toggleField(key)}
+                            />
+                        ) : undefined
+                    }
                     onCopy={() => sendClipboardTelemetry?.(TelemetryFieldType.customField)}
                 />
             )}
diff --git a/packages/pass/components/Item/MultiCopy/MultiCopy.tsx b/packages/pass/components/Item/MultiCopy/MultiCopy.tsx
new file mode 100644
index 00000000000..c08b7e3fc31
--- /dev/null
+++ b/packages/pass/components/Item/MultiCopy/MultiCopy.tsx
@@ -0,0 +1,158 @@
+import { type FC, useCallback, useState } from 'react';
+
+import { c } from 'ttag';
+
+import { Button } from '@proton/atoms/Button/Button';
+import Checkbox from '@proton/components/components/input/Checkbox';
+import { IcCross } from '@proton/icons/icons/IcCross';
+import { FieldsetCluster } from '@proton/pass/components/Form/Field/Layout/FieldsetCluster';
+import { useCopyToClipboard } from '@proton/pass/components/Settings/Clipboard/ClipboardProvider';
+import clsx from '@proton/utils/clsx';
+
+/** A field eligible for multi-copy selection. `value` may be a getter for
+ * lazily-resolved values (eg: OTP tokens which are computed on demand). */
+export type MultiCopyField = {
+    key: string;
+    label: string;
+    value: string | (() => string | Promise<string>);
+};
+
+export type MultiCopySeparator = 'comma' | 'newline';
+
+export const MULTICOPY_SEPARATORS: Record<MultiCopySeparator, string> = {
+    comma: ', ',
+    newline: '\n',
+};
+
+export const useMultiCopy = (fields: MultiCopyField[]) => {
+    const copyToClipboard = useCopyToClipboard();
+
+    const [enabled, setEnabled] = useState(false);
+    const [separator, setSeparator] = useState<MultiCopySeparator>('comma');
+    const [selected, setSelected] = useState<Set<string>>(new Set());
+
+    const toggleEnabled = useCallback(() => {
+        setEnabled((prev) => {
+            if (prev) setSelected(new Set());
+            return !prev;
+        });
+    }, []);
+
+    const toggleField = useCallback((key: string) => {
+        setSelected((prev) => {
+            const next = new Set(prev);
+            if (next.has(key)) next.delete(key);
+            else next.add(key);
+            return next;
+        });
+    }, []);
+
+    const toggleSelectAll = useCallback(() => {
+        setSelected((prev) => (prev.size === fields.length ? new Set() : new Set(fields.map(({ key }) => key))));
+    }, [fields]);
+
+    const setCommaSeparator = useCallback((comma: boolean) => setSeparator(comma ? 'comma' : 'newline'), []);
+
+    const copySelected = useCallback(async () => {
+        const parts = await Promise.all(
+            fields
+                .filter((field) => selected.has(field.key))
+                .map(async (field) => {
+                    const value = field.value instanceof Function ? await field.value() : field.value;
+                    return value.length > 0 ? `${field.label}: ${value}` : null;
+                })
+        );
+
+        const entries = parts.filter((part): part is string => part !== null);
+        if (entries.length > 0) await copyToClipboard(entries.join(MULTICOPY_SEPARATORS[separator]));
+    }, [copyToClipboard, fields, selected, separator]);
+
+    return {
+        copySelected,
+        enabled,
+        isSelected: (key: string) => selected.has(key),
+        selectedCount: selected.size,
+        separator,
+        setCommaSeparator,
+        toggleEnabled,
+        toggleField,
+        toggleSelectAll,
+    };
+};
+
+type MultiCopyCheckboxProps = { checked: boolean; className?: string; onChange: () => void };
+
+/** Selection checkbox rendered in place of the field icon. Clicks are
+ * stopped from propagating so they don't trigger the row's click-to-copy. */
+export const MultiCopyCheckbox: FC<MultiCopyCheckboxProps> = ({ checked, className, onChange }) => (
+    <span
+        className={clsx('flex justify-center items-center shrink-0', className)}
+        onClick={(evt) => evt.stopPropagation()}
+    >
+        <Checkbox checked={checked} onChange={() => onChange()} />
+    </span>
+);
+
+type MultiCopyToolbarProps = {
+    commaSeparator: boolean;
+    enabled: boolean;
+    selectedCount: number;
+    totalCount: number;
+    onCopy: () => void;
+    onToggleEnabled: () => void;
+    onToggleSelectAll: () => void;
+    onToggleSeparator: (comma: boolean) => void;
+};
+
+export const MultiCopyToolbar: FC<MultiCopyToolbarProps> = ({
+    commaSeparator,
+    enabled,
+    selectedCount,
+    totalCount,
+    onCopy,
+    onToggleEnabled,
+    onToggleSelectAll,
+    onToggleSeparator,
+}) => {
+    if (!enabled) {
+        return (
+            <FieldsetCluster mode="read" as="div">
+                <div className="flex items-center px-4 py-2">
+                    <Button shape="outline" size="small" className="w-full" onClick={onToggleEnabled}>
+                        {c('Action').t`Select fields to copy`}
+                    </Button>
+                </div>
+            </FieldsetCluster>
+        );
+    }
+
+    return (
+        <FieldsetCluster mode="read" as="div">
+            <div className="flex flex-wrap items-center gap-2 px-4 py-2">
+                <Checkbox checked={commaSeparator} onChange={(evt) => onToggleSeparator(evt.target.checked)}>
+                    {
+                        // translator: when unchecked, selected fields will be separated by line breaks instead
+                        c('Label').t`Separate with comma and space`
+                    }
+                </Checkbox>
+                <span className="ml-auto" />
+                <Button shape="ghost" size="small" onClick={onToggleSelectAll}>
+                    {selectedCount === totalCount ? c('Action').t`Deselect all` : c('Action').t`Select all`}
+                </Button>
+                <Button size="small" disabled={selectedCount === 0} onClick={onCopy}>
+                    {c('Action').t`Copy`}
+                </Button>
+                <Button
+                    icon
+                    shape="ghost"
+                    size="small"
+                    title={c('Action').t`Cancel`}
+                    aria-label={c('Action').t`Cancel`}
+                    onClick={onToggleEnabled}
+                >
+                    <IcCross size={4} />
+                </Button>
+            </div>
+        </FieldsetCluster>
+    );
+};