From f1102a24b7140bb79560525e5782281062e1c67a Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Sun, 21 Jun 2026 15:05:25 +0200
Subject: [PATCH] CopyButton: Portal-Benutzername + E-Mail-Postfach-Selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ContractForm: neben dem "Portal Benutzername"-Label sitzt jetzt
ein CopyButton, der je nach Modus den manuellen Eingabewert oder
die ausgewählte Stressfrei-Adresse in die Zwischenablage kopiert.
Erscheint nur wenn der jeweilige Wert nicht leer ist.

EmailClientTab + ContractEmailsSection: rechts neben dem Account-
Selector liegt jetzt ein CopyButton, der die Postfach-Adresse des
aktuell gewählten Mailbox-Kontos kopiert. Funktioniert in beiden
UI-Varianten (Single-Account-Span und Multi-Account-Dropdown).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../email/ContractEmailsSection.tsx           | 13 ++++++++++++
 .../src/components/email/EmailClientTab.tsx   | 15 ++++++++++++++
 frontend/src/pages/contracts/ContractForm.tsx | 20 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/email/ContractEmailsSection.tsx b/frontend/src/components/email/ContractEmailsSection.tsx
index 796f7ba6..583e499f 100644
--- a/frontend/src/components/email/ContractEmailsSection.tsx
+++ b/frontend/src/components/email/ContractEmailsSection.tsx
@@ -6,6 +6,7 @@ import { cachedEmailApi, stressfreiEmailApi, CachedEmail } from '../../services/
 import { useAuth } from '../../context/AuthContext';
 import Button from '../ui/Button';
 import Card from '../ui/Card';
+import CopyButton from '../ui/CopyButton';
 import EmailDetail from './EmailDetail';
 import ComposeEmailModal from './ComposeEmailModal';
 import TrashEmailList from './TrashEmailList';
@@ -364,11 +365,23 @@ export default function ContractEmailsSection({
                 </option>
               ))}
             </select>
+            {selectedAccount?.email && (
+              <CopyButton
+                value={selectedAccount.email}
+                title={`Postfach-Adresse "${selectedAccount.email}" in Zwischenablage kopieren`}
+              />
+            )}
           </div>
         ) : (
           <div className="flex items-center gap-2 text-sm text-gray-600">
             <Inbox className="w-4 h-4 text-gray-500" />
             <span>{selectedAccount?.email}</span>
+            {selectedAccount?.email && (
+              <CopyButton
+                value={selectedAccount.email}
+                title={`Postfach-Adresse "${selectedAccount.email}" in Zwischenablage kopieren`}
+              />
+            )}
           </div>
         )}
 
diff --git a/frontend/src/components/email/EmailClientTab.tsx b/frontend/src/components/email/EmailClientTab.tsx
index 3214e839..c9f7135f 100644
--- a/frontend/src/components/email/EmailClientTab.tsx
+++ b/frontend/src/components/email/EmailClientTab.tsx
@@ -6,6 +6,7 @@ import { cachedEmailApi, stressfreiEmailApi, CachedEmail, EmailFilterParams } fr
 import { useAuth } from '../../context/AuthContext';
 import { useProviderSettings } from '../../hooks/useProviderSettings';
 import Button from '../ui/Button';
+import CopyButton from '../ui/CopyButton';
 import EmailList from './EmailList';
 import EmailDetail from './EmailDetail';
 import ComposeEmailModal from './ComposeEmailModal';
@@ -315,11 +316,25 @@ export default function EmailClientTab({ customerId }: EmailClientTabProps) {
                 </option>
               ))}
             </select>
+            {selectedAccount?.email && (
+              <CopyButton
+                value={selectedAccount.email}
+                size="md"
+                title={`Postfach-Adresse "${selectedAccount.email}" in Zwischenablage kopieren`}
+              />
+            )}
           </div>
         ) : (
           <div className="flex items-center gap-3 text-sm text-gray-600">
             <Inbox className="w-5 h-5 text-gray-500" />
             <span>{selectedAccount?.email}</span>
+            {selectedAccount?.email && (
+              <CopyButton
+                value={selectedAccount.email}
+                size="md"
+                title={`Postfach-Adresse "${selectedAccount.email}" in Zwischenablage kopieren`}
+              />
+            )}
           </div>
         )}
 
diff --git a/frontend/src/pages/contracts/ContractForm.tsx b/frontend/src/pages/contracts/ContractForm.tsx
index 02c8ccc5..ef1b2d9d 100644
--- a/frontend/src/pages/contracts/ContractForm.tsx
+++ b/frontend/src/pages/contracts/ContractForm.tsx
@@ -9,6 +9,7 @@ import Card from '../../components/ui/Card';
 import Button from '../../components/ui/Button';
 import Input from '../../components/ui/Input';
 import Select from '../../components/ui/Select';
+import CopyButton from '../../components/ui/CopyButton';
 import type { ContractType } from '../../types';
 import { formatDate } from '../../utils/dateFormat';
 import { useProviderSettings } from '../../hooks/useProviderSettings';
@@ -1017,7 +1018,24 @@ export default function ContractForm() {
         <Card className="mb-6" title="Zugangsdaten (verschlüsselt gespeichert)">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Portal Benutzername</label>
+              {(() => {
+                // Aktiv kopierbaren Wert je nach Modus ermitteln:
+                // - Manuell: aktueller Eingabewert von portalUsername
+                // - Stressfrei: E-Mail der ausgewählten Stressfrei-Adresse
+                const manualUsername = (watch('portalUsername') as string) || '';
+                const selectedStressfreiEmail = selectedStressfreiEmailId
+                  ? stressfreiEmails.find((e: { id: number; email: string }) => e.id.toString() === selectedStressfreiEmailId)?.email
+                  : '';
+                const copyValue = usernameType === 'manual'
+                  ? manualUsername.trim()
+                  : (selectedStressfreiEmail || '');
+                return (
+                  <label className="flex items-center gap-2 mb-2 text-sm font-medium text-gray-700">
+                    <span>Portal Benutzername</span>
+                    {copyValue && <CopyButton value={copyValue} title={`Benutzername "${copyValue}" in Zwischenablage kopieren`} />}
+                  </label>
+                );
+              })()}
               <div className="space-y-2">
                 <label className="flex items-center gap-2 cursor-pointer">
                   <input