feat: restructure profile page with new layout, contact fields, and 2FA relocation

- Add phone, mobile, street, postalCode, city fields to User model (Prisma + migration)
- Extend UpdateUserDto with validated contact/address fields
- Update UsersService (findById, update, updateProfile) for new fields
- Rename tab "Persönliche Informationen" to "Profil"
- New layout: avatar left column, form right column with fieldset groups
- Move 2FA section from always-visible into "Passwort ändern" tab
- Add orange 2FA warning badge next to page title (clickable → password tab)
- Add responsive CSS for mobile breakpoint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/core-service/prisma/core.schema.prisma

@@ -24,6 +24,16 @@ model User {
   firstName String   @map("first_name") @db.VarChar(100)
   lastName  String   @map("last_name") @db.VarChar(100)
   avatar    String?  @db.Text  // Profilbild als Base64 Data-URL
+
+  // Kontaktdaten
+  phone      String?  @map("phone") @db.VarChar(30)
+  mobile     String?  @map("mobile") @db.VarChar(30)
+
+  // Adresse
+  street     String?  @map("street") @db.VarChar(200)
+  postalCode String?  @map("postal_code") @db.VarChar(10)
+  city       String?  @map("city") @db.VarChar(100)
+
   role      String   @default("USER") @db.VarChar(50) // PLATFORM_ADMIN, TENANT_ADMIN, USER
   isActive  Boolean  @default(true) @map("is_active")
 

packages/core-service/prisma/migrations/20260309000000_add_user_contact_fields/migration.sql

@@ -0,0 +1,6 @@
+-- AlterTable: Kontakt- und Adressfelder für Benutzerprofil
+ALTER TABLE "users" ADD COLUMN "phone" VARCHAR(30);
+ALTER TABLE "users" ADD COLUMN "mobile" VARCHAR(30);
+ALTER TABLE "users" ADD COLUMN "street" VARCHAR(200);
+ALTER TABLE "users" ADD COLUMN "postal_code" VARCHAR(10);
+ALTER TABLE "users" ADD COLUMN "city" VARCHAR(100);

packages/core-service/src/core/users/dto/update-user.dto.ts

@@ -40,4 +40,41 @@ export class UpdateUserDto {
     message: 'Profilbild muss ein gültiges Base64-Bild sein (JPEG, PNG, GIF oder WebP)',
   })
   avatar?: string | null;
+
+  // --- Kontaktdaten ---
+  @ApiProperty({ example: '+49 123 456789', required: false, nullable: true })
+  @IsOptional()
+  @ValidateIf((o: UpdateUserDto) => o.phone !== null)
+  @IsString()
+  @MaxLength(30)
+  phone?: string | null;
+
+  @ApiProperty({ example: '+49 170 1234567', required: false, nullable: true })
+  @IsOptional()
+  @ValidateIf((o: UpdateUserDto) => o.mobile !== null)
+  @IsString()
+  @MaxLength(30)
+  mobile?: string | null;
+
+  // --- Adresse ---
+  @ApiProperty({ example: 'Musterstraße 42', required: false, nullable: true })
+  @IsOptional()
+  @ValidateIf((o: UpdateUserDto) => o.street !== null)
+  @IsString()
+  @MaxLength(200)
+  street?: string | null;
+
+  @ApiProperty({ example: '12345', required: false, nullable: true })
+  @IsOptional()
+  @ValidateIf((o: UpdateUserDto) => o.postalCode !== null)
+  @IsString()
+  @MaxLength(10)
+  postalCode?: string | null;
+
+  @ApiProperty({ example: 'Berlin', required: false, nullable: true })
+  @IsOptional()
+  @ValidateIf((o: UpdateUserDto) => o.city !== null)
+  @IsString()
+  @MaxLength(100)
+  city?: string | null;
 }

packages/core-service/src/core/users/users.service.ts

@@ -96,6 +96,11 @@ export class UsersService {
       firstName: user.firstName,
       lastName: user.lastName,
       avatar: user.avatar,
+      phone: user.phone,
+      mobile: user.mobile,
+      street: user.street,
+      postalCode: user.postalCode,
+      city: user.city,
       role: user.role,
       isActive: user.isActive,
       twoFactorEnabled: user.twoFactorEnabled,
@@ -126,6 +131,11 @@ export class UsersService {
         lastName: dto.lastName,
         isActive: dto.isActive,
         ...(dto.avatar !== undefined && { avatar: dto.avatar }),
+        ...(dto.phone !== undefined && { phone: dto.phone }),
+        ...(dto.mobile !== undefined && { mobile: dto.mobile }),
+        ...(dto.street !== undefined && { street: dto.street }),
+        ...(dto.postalCode !== undefined && { postalCode: dto.postalCode }),
+        ...(dto.city !== undefined && { city: dto.city }),
       },
     });
 
@@ -135,6 +145,11 @@ export class UsersService {
       firstName: updated.firstName,
       lastName: updated.lastName,
       avatar: updated.avatar,
+      phone: updated.phone,
+      mobile: updated.mobile,
+      street: updated.street,
+      postalCode: updated.postalCode,
+      city: updated.city,
       role: updated.role,
       isActive: updated.isActive,
     };
@@ -155,6 +170,11 @@ export class UsersService {
         ...(dto.firstName !== undefined && { firstName: dto.firstName }),
         ...(dto.lastName !== undefined && { lastName: dto.lastName }),
         ...(dto.avatar !== undefined && { avatar: dto.avatar }),
+        ...(dto.phone !== undefined && { phone: dto.phone }),
+        ...(dto.mobile !== undefined && { mobile: dto.mobile }),
+        ...(dto.street !== undefined && { street: dto.street }),
+        ...(dto.postalCode !== undefined && { postalCode: dto.postalCode }),
+        ...(dto.city !== undefined && { city: dto.city }),
       },
     });
 
@@ -164,6 +184,11 @@ export class UsersService {
       firstName: updated.firstName,
       lastName: updated.lastName,
       avatar: updated.avatar,
+      phone: updated.phone,
+      mobile: updated.mobile,
+      street: updated.street,
+      postalCode: updated.postalCode,
+      city: updated.city,
       role: updated.role,
       isActive: updated.isActive,
       twoFactorEnabled: updated.twoFactorEnabled,

packages/frontend/src/auth/AuthContext.tsx

@@ -14,6 +14,11 @@ interface User {
   firstName: string;
   lastName: string;
   avatar?: string | null;
+  phone?: string | null;
+  mobile?: string | null;
+  street?: string | null;
+  postalCode?: string | null;
+  city?: string | null;
   role: string;
   twoFactorEnabled: boolean;
 }

packages/frontend/src/profile/ProfilePage.module.css

@@ -54,6 +54,29 @@
   border-bottom: 1px solid var(--color-border);
 }
 
+/* === Profil-Layout (Avatar links, Formular rechts) === */
+.profileLayout {
+  display: flex;
+  gap: 2rem;
+  align-items: flex-start;
+}
+
+.avatarColumn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 140px;
+  flex-shrink: 0;
+  padding-top: 0.25rem;
+}
+
+.formColumn {
+  flex: 1;
+  min-width: 0;
+}
+
+/* === Formular === */
 .form {
   display: flex;
   flex-direction: column;
@@ -64,6 +87,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
+  flex: 1;
 }
 
 .field label {
@@ -105,6 +129,31 @@
   flex: 1;
 }
 
+.fieldSmall {
+  flex: 0 0 120px !important;
+}
+
+/* === Fieldset-Gruppen === */
+.fieldGroup {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.fieldGroupLegend {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  padding: 0;
+  margin-bottom: 0.125rem;
+}
+
+/* === Buttons === */
 .button {
   padding: 0.625rem 1.25rem;
   background: var(--color-primary);
@@ -128,12 +177,12 @@
 }
 
 .buttonSecondary {
-  padding: 0.625rem 1.25rem;
+  padding: 0.5rem 1rem;
   background: transparent;
   color: var(--color-text-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s;
@@ -144,12 +193,12 @@
 }
 
 .buttonDanger {
-  padding: 0.625rem 1.25rem;
+  padding: 0.5rem 1rem;
   background: var(--color-error);
   color: white;
   border: none;
   border-radius: var(--radius-sm);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s;
@@ -171,6 +220,7 @@
   align-items: center;
 }
 
+/* === Meldungen === */
 .success {
   background: #f0fdf4;
   color: var(--color-success);
@@ -189,6 +239,7 @@
   border: 1px solid #fecaca;
 }
 
+/* === 2FA === */
 .tfaStatus {
   display: flex;
   align-items: center;
@@ -244,17 +295,34 @@
   border: 1px solid var(--color-border);
 }
 
-/* === Avatar === */
+/* === 2FA Warn-Badge === */
-.avatarSection {
+.tfaWarning {
-  display: flex;
+  display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.375rem;
-  padding-bottom: 1.25rem;
+  padding: 0.25rem 0.75rem;
-  margin-bottom: 1.25rem;
+  background: #fff7ed;
-  border-bottom: 1px solid var(--color-border);
+  color: #c2410c;
+  border: 1px solid #fed7aa;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
 }
 
+.tfaWarning::before {
+  content: '\26A0';
+  font-size: 0.875rem;
+}
+
+.tfaWarning:hover {
+  background: #ffedd5;
+  border-color: #fdba74;
+}
+
+/* === Avatar === */
 .avatarPreview {
   position: relative;
   cursor: pointer;
@@ -288,9 +356,45 @@
 
 .avatarHint {
   color: var(--color-text-muted);
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
+  text-align: center;
 }
 
 .hiddenInput {
   display: none;
 }
+
+/* === Responsive === */
+@media (max-width: 640px) {
+  .profileLayout {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .avatarColumn {
+    min-width: unset;
+    padding-bottom: 1.25rem;
+    border-bottom: 1px solid var(--color-border);
+    width: 100%;
+  }
+
+  .fieldRow {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .fieldSmall {
+    flex: 1 !important;
+  }
+
+  .tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .tab {
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    white-space: nowrap;
+  }
+}

packages/frontend/src/profile/ProfilePage.tsx

@@ -13,6 +13,11 @@ export function ProfilePage() {
   // --- Persönliche Informationen ---
   const [firstName, setFirstName] = useState(user?.firstName ?? '');
   const [lastName, setLastName] = useState(user?.lastName ?? '');
+  const [phone, setPhone] = useState(user?.phone ?? '');
+  const [mobile, setMobile] = useState(user?.mobile ?? '');
+  const [street, setStreet] = useState(user?.street ?? '');
+  const [postalCode, setPostalCode] = useState(user?.postalCode ?? '');
+  const [city, setCity] = useState(user?.city ?? '');
   const [profileMsg, setProfileMsg] = useState('');
   const [profileError, setProfileError] = useState('');
   const [profileLoading, setProfileLoading] = useState(false);
@@ -47,7 +52,7 @@ export function ProfilePage() {
   const [tfaError, setTfaError] = useState('');
   const [tfaLoading, setTfaLoading] = useState(false);
 
-  // 2FA-Status mit Context-User synchronisieren (Bug-Fix: Login-Response hat jetzt twoFactorEnabled)
+  // 2FA-Status mit Context-User synchronisieren
   useEffect(() => {
     if (user?.twoFactorEnabled !== undefined) {
       setTwoFactorEnabled(user.twoFactorEnabled);
@@ -61,6 +66,17 @@ export function ProfilePage() {
     }
   }, [user?.avatar]);
 
+  // Kontaktdaten mit Context-User synchronisieren
+  useEffect(() => {
+    if (user) {
+      setPhone(user.phone ?? '');
+      setMobile(user.mobile ?? '');
+      setStreet(user.street ?? '');
+      setPostalCode(user.postalCode ?? '');
+      setCity(user.city ?? '');
+    }
+  }, [user?.phone, user?.mobile, user?.street, user?.postalCode, user?.city]);
+
   // === Handler: Profilbild hochladen ===
   const handleAvatarChange = async (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -128,7 +144,15 @@ export function ProfilePage() {
     setProfileLoading(true);
 
     try {
-      await api.patch('/users/me', { firstName, lastName });
+      await api.patch('/users/me', {
+        firstName,
+        lastName,
+        phone: phone || null,
+        mobile: mobile || null,
+        street: street || null,
+        postalCode: postalCode || null,
+        city: city || null,
+      });
       await refreshUser();
       setProfileMsg('Profil erfolgreich aktualisiert');
     } catch (err: unknown) {
@@ -267,9 +291,26 @@ export function ProfilePage() {
           fontSize: '1.5rem',
           fontWeight: 600,
           marginBottom: '1.5rem',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.75rem',
         }}
       >
         Mein Profil
+        {!twoFactorEnabled && (
+          <span
+            className={styles.tfaWarning}
+            onClick={() => setActiveTab('password')}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') setActiveTab('password');
+            }}
+            title="Klicken, um 2FA zu aktivieren"
+          >
+            2FA nicht aktiv
+          </span>
+        )}
       </h1>
 
       {/* === Tab-Leiste === */}
@@ -279,7 +320,7 @@ export function ProfilePage() {
           className={`${styles.tab} ${activeTab === 'personal' ? styles.tabActive : ''}`}
           onClick={() => setActiveTab('personal')}
         >
-          Persönliche Informationen
+          Profil
         </button>
         <button
           type="button"
@@ -297,11 +338,12 @@ export function ProfilePage() {
         </button>
       </div>
 
-      {/* === Tab: Persönliche Informationen === */}
+      {/* === Tab: Profil === */}
       {activeTab === 'personal' && (
         <div className={styles.section}>
-          {/* Profilbild */}
+          <div className={styles.profileLayout}>
-          <div className={styles.avatarSection}>
+            {/* --- Linke Spalte: Avatar --- */}
+            <div className={styles.avatarColumn}>
               <div
                 className={styles.avatarPreview}
                 onClick={() => fileInputRef.current?.click()}
@@ -318,7 +360,7 @@ export function ProfilePage() {
                   size={96}
                 />
                 <div className={styles.avatarOverlay}>
-                <span>Bild ändern</span>
+                  <span>Ändern</span>
                 </div>
               </div>
               <input
@@ -335,7 +377,7 @@ export function ProfilePage() {
                   onClick={() => fileInputRef.current?.click()}
                   disabled={avatarLoading}
                 >
-                {avatarLoading ? 'Laden...' : 'Profilbild hochladen'}
+                  {avatarLoading ? 'Laden...' : 'Hochladen'}
                 </button>
                 {avatar && (
                   <button
@@ -351,25 +393,19 @@ export function ProfilePage() {
               {avatarMsg && <div className={styles.success}>{avatarMsg}</div>}
               {avatarError && <div className={styles.error}>{avatarError}</div>}
               <small className={styles.avatarHint}>
-              JPEG, PNG, GIF oder WebP. Wird auf 200x200 Pixel skaliert.
+                JPEG, PNG, GIF oder WebP. Max. 200x200px.
               </small>
             </div>
 
+            {/* --- Rechte Spalte: Formular --- */}
+            <div className={styles.formColumn}>
               <form onSubmit={handleProfileUpdate} className={styles.form}>
                 {profileMsg && <div className={styles.success}>{profileMsg}</div>}
                 {profileError && <div className={styles.error}>{profileError}</div>}
 
-            <div className={styles.field}>
+                {/* Name */}
-              <label htmlFor="email">E-Mail</label>
+                <fieldset className={styles.fieldGroup}>
-              <input
+                  <legend className={styles.fieldGroupLegend}>Name</legend>
-                id="email"
-                type="email"
-                value={user?.email ?? ''}
-                disabled
-              />
-              <small>E-Mail-Adresse kann nicht geändert werden</small>
-            </div>
-
                   <div className={styles.fieldRow}>
                     <div className={styles.field}>
                       <label htmlFor="firstName">Vorname</label>
@@ -394,11 +430,94 @@ export function ProfilePage() {
                       />
                     </div>
                   </div>
+                </fieldset>
 
+                {/* E-Mail & Rolle */}
+                <div className={styles.fieldRow}>
+                  <div className={styles.field}>
+                    <label htmlFor="email">E-Mail</label>
+                    <input
+                      id="email"
+                      type="email"
+                      value={user?.email ?? ''}
+                      disabled
+                    />
+                    <small>E-Mail kann nicht geändert werden</small>
+                  </div>
                   <div className={styles.field}>
                     <label>Rolle</label>
                     <input type="text" value={user?.role ?? ''} disabled />
                   </div>
+                </div>
+
+                {/* Telefon */}
+                <fieldset className={styles.fieldGroup}>
+                  <legend className={styles.fieldGroupLegend}>Kontakt</legend>
+                  <div className={styles.fieldRow}>
+                    <div className={styles.field}>
+                      <label htmlFor="phone">Telefon</label>
+                      <input
+                        id="phone"
+                        type="tel"
+                        value={phone}
+                        onChange={(e) => setPhone(e.target.value)}
+                        maxLength={30}
+                        placeholder="+49 123 456789"
+                      />
+                    </div>
+                    <div className={styles.field}>
+                      <label htmlFor="mobile">Mobil</label>
+                      <input
+                        id="mobile"
+                        type="tel"
+                        value={mobile}
+                        onChange={(e) => setMobile(e.target.value)}
+                        maxLength={30}
+                        placeholder="+49 170 1234567"
+                      />
+                    </div>
+                  </div>
+                </fieldset>
+
+                {/* Adresse */}
+                <fieldset className={styles.fieldGroup}>
+                  <legend className={styles.fieldGroupLegend}>Adresse</legend>
+                  <div className={styles.field}>
+                    <label htmlFor="street">Straße</label>
+                    <input
+                      id="street"
+                      type="text"
+                      value={street}
+                      onChange={(e) => setStreet(e.target.value)}
+                      maxLength={200}
+                      placeholder="Musterstraße 42"
+                    />
+                  </div>
+                  <div className={styles.fieldRow}>
+                    <div className={`${styles.field} ${styles.fieldSmall}`}>
+                      <label htmlFor="postalCode">PLZ</label>
+                      <input
+                        id="postalCode"
+                        type="text"
+                        value={postalCode}
+                        onChange={(e) => setPostalCode(e.target.value)}
+                        maxLength={10}
+                        placeholder="12345"
+                      />
+                    </div>
+                    <div className={styles.field}>
+                      <label htmlFor="city">Ort</label>
+                      <input
+                        id="city"
+                        type="text"
+                        value={city}
+                        onChange={(e) => setCity(e.target.value)}
+                        maxLength={100}
+                        placeholder="Berlin"
+                      />
+                    </div>
+                  </div>
+                </fieldset>
 
                 <button
                   type="submit"
@@ -409,6 +528,8 @@ export function ProfilePage() {
                 </button>
               </form>
             </div>
+          </div>
+        </div>
       )}
 
       {/* === Tab: Experten Profil (Platzhalter) === */}
@@ -421,8 +542,9 @@ export function ProfilePage() {
         </div>
       )}
 
-      {/* === Tab: Passwort ändern === */}
+      {/* === Tab: Passwort ändern + 2FA === */}
       {activeTab === 'password' && (
+        <>
           <div className={styles.section}>
             <h2 className={styles.sectionTitle}>Passwort ändern</h2>
             <form onSubmit={handlePasswordChange} className={styles.form}>
@@ -476,9 +598,8 @@ export function ProfilePage() {
               </button>
             </form>
           </div>
-      )}
 
-      {/* === Sicherheit: Zwei-Faktor-Authentifizierung (immer sichtbar) === */}
+          {/* === 2FA Sektion (innerhalb Passwort-Tab) === */}
           <div className={styles.section}>
             <h2 className={styles.sectionTitle}>
               Zwei-Faktor-Authentifizierung (2FA)
@@ -637,6 +758,8 @@ export function ProfilePage() {
               </form>
             )}
           </div>
+        </>
+      )}
     </div>
   );
 }