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>
2026-06-24 22:46:39 +02:00 · 2026-03-09 09:03:15 +01:00 · 2026-03-09 09:03:15 +01:00 · 5d3958cd74
commit 5d3958cd74
parent c8703ef3e0
7 changed files with 623 additions and 313 deletions
--- a/packages/core-service/prisma/core.schema.prisma
+++ b/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")

--- a/packages/core-service/prisma/migrations/20260309000000_add_user_contact_fields/migration.sql
+++ b/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);
--- a/packages/core-service/src/core/users/dto/update-user.dto.ts
+++ b/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;
 }
--- a/packages/core-service/src/core/users/users.service.ts
+++ b/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,
--- a/packages/frontend/src/auth/AuthContext.tsx
+++ b/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;
 }
--- a/packages/frontend/src/profile/ProfilePage.module.css
+++ b/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 === */
-.avatarSection {
-  display: flex;
-  flex-direction: column;
+/* === 2FA Warn-Badge === */
+.tfaWarning {
+  display: inline-flex;
  align-items: center;
-  gap: 0.75rem;
-  padding-bottom: 1.25rem;
-  margin-bottom: 1.25rem;
-  border-bottom: 1px solid var(--color-border);
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  background: #fff7ed;
+  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;
+  }
+}
--- a/packages/frontend/src/profile/ProfilePage.tsx
+++ b/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.avatarSection}>
+          <div className={styles.profileLayout}>
+            {/* --- 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}>
-              <label htmlFor="email">E-Mail</label>
-              <input
-                id="email"
-                type="email"
-                value={user?.email ?? ''}
-                disabled
-              />
-              <small>E-Mail-Adresse kann nicht geändert werden</small>
-            </div>
-
+                {/* Name */}
+                <fieldset className={styles.fieldGroup}>
+                  <legend className={styles.fieldGroupLegend}>Name</legend>
                  <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>
  );
 }