fix(e2e): wait for hydration before clicking nav dropdown in logout test

waitForURL('/') resolves as soon as the URL changes but before SvelteKit
finishes hydrating — the avatar button's onclick is not yet registered,
so the click has no effect and the dropdown never opens.

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

.gitea/workflows/ci.yml

@@ -190,6 +190,7 @@ jobs:
           E2E_BASE_URL: http://localhost:3000
           E2E_USERNAME: admin
           E2E_PASSWORD: admin123
+          E2E_BACKEND_URL: http://localhost:8080
 
       - name: Upload E2E results
         if: always()

COLLABORATING.md

@@ -43,6 +43,42 @@ Repeat for each new behavior.
 - The Refactor step must not change behavior — if a test breaks, the refactor introduced a bug.
 - If a bug is reported with no test, write the failing test first, then fix it.
 
+## User Journeys & E2E Acceptance Criteria
+
+Every `feature` issue must include two sections before any implementation begins:
+
+### 1. User Journey
+
+A plain-prose description of the steps a user takes to get value from the feature. Written from the user's perspective, not the implementation's:
+
+> User opens a document, clicks "History", sees a chronological list of changes with editor name and timestamp. Clicking a row expands the old vs. new values.
+
+This makes the scope concrete and prevents scope creep — anything not in the journey is out of scope for the issue.
+
+### 2. E2E Scenarios
+
+One or more acceptance criteria written as Playwright-ready scenarios. These become the outermost Red test in the TDD cycle — no feature is considered done until all its E2E scenarios pass:
+
+```
+Scenario: View edit history of a document
+  Given I am on a document detail page
+  When I click the "History" tab
+  Then I see at least one revision entry
+  And each entry shows the editor's name and a timestamp
+```
+
+Use this format consistently. It maps directly to `test.describe` / `test` blocks in the Playwright spec.
+
+### Where this fits in the workflow
+
+```
+Issue (Journey + Scenarios) → Red E2E test → Implementation → Green
+```
+
+The scenarios in the issue are the contract. Write them before planning, treat them as failing tests from day one.
+
+---
+
 ## Issue Tracking (Gitea)
 
 All work is tracked in **Gitea** at `http://192.168.178.71:3005` (repo `marcel/familienarchiv`). Never use todo files or CLAUDE.md notes as a substitute.

backend/pom.xml

@@ -119,6 +119,10 @@
 			<artifactId>lombok</artifactId>
 			<optional>true</optional>
 		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-mail</artifactId>
+		</dependency>
 		<dependency>
 			<groupId>org.flywaydb</groupId>
 			<artifactId>flyway-core</artifactId>

backend/src/main/java/org/raddatz/familienarchiv/config/AsyncConfig.java

@@ -6,10 +6,12 @@ import java.util.concurrent.ThreadPoolExecutor;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.scheduling.annotation.EnableAsync;
+import org.springframework.scheduling.annotation.EnableScheduling;
 import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor;
 
 @Configuration
 @EnableAsync
+@EnableScheduling
 public class AsyncConfig {
     @Bean
     public Executor taskExecutor() {

backend/src/main/java/org/raddatz/familienarchiv/config/DataInitializer.java

@@ -43,8 +43,8 @@ public class DataInitializer {
     @Bean
     public CommandLineRunner initAdminUser(PasswordEncoder passwordEncoder) {
         return args -> {
-            if (userRepository.count() == 0) {
-                log.info("Keine User gefunden. Erstelle Default-Admin...");
+            if (userRepository.findByUsername(adminUsername).isEmpty()) {
+                log.info("Kein Admin-User '{}' gefunden. Erstelle Default-Admin...", adminUsername);
 
                 // 1. Admin Gruppe erstellen
                 UserGroup adminGroup = UserGroup.builder()
@@ -81,7 +81,8 @@ public class DataInitializer {
     @Profile("e2e")
     public CommandLineRunner initE2EData(PersonRepository personRepo,
             DocumentRepository docRepo,
-            TagRepository tagRepo) {
+            TagRepository tagRepo,
+            PasswordEncoder passwordEncoder) {
         return args -> {
             if (personRepo.count() > 0) {
                 log.info("E2E seed: Daten bereits vorhanden, überspringe.");
@@ -165,8 +166,21 @@ public class DataInitializer {
                     .receivers(Set.of(otto))
                     .build());
 
-            log.info("E2E seed: {} Personen, {} Tags, {} Dokumente erstellt.",
-                    personRepo.count(), tagRepo.count(), docRepo.count());
+            // ── Read-only user (for permissions E2E tests) ───────────────────
+            // Username: reader / Password: reader123
+            // Has only READ_ALL — used to assert write controls are absent.
+            UserGroup leserGroup = groupRepository.save(UserGroup.builder()
+                    .name("Leser")
+                    .permissions(Set.of("READ_ALL"))
+                    .build());
+            userRepository.save(AppUser.builder()
+                    .username("reader")
+                    .password(passwordEncoder.encode("reader123"))
+                    .groups(Set.of(leserGroup))
+                    .build());
+
+            log.info("E2E seed: {} Personen, {} Tags, {} Dokumente, {} Benutzer erstellt.",
+                    personRepo.count(), tagRepo.count(), docRepo.count(), userRepository.count());
         };
     }
 }

backend/src/main/java/org/raddatz/familienarchiv/config/SecurityConfig.java

@@ -48,6 +48,10 @@ public class SecurityConfig {
                 .authorizeHttpRequests(auth -> {
                     // Health endpoint must be open so CI/Docker health checks work without credentials
                     auth.requestMatchers("/actuator/health").permitAll();
+                    // Password reset endpoints are unauthenticated by nature
+                    auth.requestMatchers("/api/auth/forgot-password", "/api/auth/reset-password").permitAll();
+                    // E2E test helper (only active under "e2e" profile)
+                    auth.requestMatchers("/api/auth/reset-token-for-test").permitAll();
                     // In dev, allow unauthenticated access to the OpenAPI spec and Swagger UI
                     if (environment.matchesProfiles("dev")) {
                         auth.requestMatchers(

backend/src/main/java/org/raddatz/familienarchiv/controller/AuthController.java

@@ -0,0 +1,37 @@
+package org.raddatz.familienarchiv.controller;
+
+import org.raddatz.familienarchiv.dto.ForgotPasswordRequest;
+import org.raddatz.familienarchiv.dto.ResetPasswordRequest;
+import org.raddatz.familienarchiv.service.PasswordResetService;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import lombok.RequiredArgsConstructor;
+
+@RestController
+@RequestMapping("/api/auth")
+@RequiredArgsConstructor
+public class AuthController {
+
+    private final PasswordResetService passwordResetService;
+
+    @Value("${app.base-url:http://localhost:3000}")
+    private String appBaseUrl;
+
+    @PostMapping("/forgot-password")
+    public ResponseEntity<Void> forgotPassword(@RequestBody ForgotPasswordRequest request) {
+        passwordResetService.requestReset(request.getEmail(), appBaseUrl);
+        // Always return 204 — never disclose whether the email exists
+        return ResponseEntity.noContent().build();
+    }
+
+    @PostMapping("/reset-password")
+    public ResponseEntity<Void> resetPassword(@RequestBody ResetPasswordRequest request) {
+        passwordResetService.resetPassword(request);
+        return ResponseEntity.noContent().build();
+    }
+}

backend/src/main/java/org/raddatz/familienarchiv/controller/AuthE2EController.java

@@ -0,0 +1,33 @@
+package org.raddatz.familienarchiv.controller;
+
+import java.time.LocalDateTime;
+
+import org.raddatz.familienarchiv.repository.PasswordResetTokenRepository;
+import org.springframework.context.annotation.Profile;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import lombok.RequiredArgsConstructor;
+
+/**
+ * Test-only endpoint to retrieve a password reset token by email.
+ * Only active under the "e2e" Spring profile.
+ */
+@RestController
+@RequestMapping("/api/auth")
+@Profile("e2e")
+@RequiredArgsConstructor
+public class AuthE2EController {
+
+    private final PasswordResetTokenRepository tokenRepository;
+
+    @GetMapping("/reset-token-for-test")
+    public ResponseEntity<String> getResetTokenForTest(@RequestParam String email) {
+        return tokenRepository.findLatestActiveTokenByEmail(email, LocalDateTime.now())
+                .map(ResponseEntity::ok)
+                .orElse(ResponseEntity.notFound().build());
+    }
+}

backend/src/main/java/org/raddatz/familienarchiv/controller/UserController.java

@@ -4,6 +4,7 @@ import java.util.List;
 import java.util.Map;
 import java.util.UUID;
 
+import org.raddatz.familienarchiv.dto.AdminUpdateUserRequest;
 import org.raddatz.familienarchiv.dto.ChangePasswordDTO;
 import org.raddatz.familienarchiv.dto.CreateUserRequest;
 import org.raddatz.familienarchiv.dto.UpdateProfileDTO;
@@ -79,6 +80,15 @@ public class UserController {
         return ResponseEntity.ok(userService.createUserOrUpdate(request));
     }
 
+    @PutMapping("/users/{id}")
+    @RequirePermission(Permission.ADMIN_USER)
+    public ResponseEntity<AppUser> adminUpdateUser(@PathVariable UUID id,
+                                                    @RequestBody AdminUpdateUserRequest dto) {
+        AppUser updated = userService.adminUpdateUser(id, dto);
+        updated.setPassword(null);
+        return ResponseEntity.ok(updated);
+    }
+
     @DeleteMapping("/users/{id}")
     @RequirePermission(Permission.ADMIN_USER)
     public ResponseEntity<Void> deleteUser(@PathVariable UUID id) {

backend/src/main/java/org/raddatz/familienarchiv/dto/AdminUpdateUserRequest.java

@@ -0,0 +1,18 @@
+package org.raddatz.familienarchiv.dto;
+
+import lombok.Data;
+
+import java.time.LocalDate;
+import java.util.List;
+import java.util.UUID;
+
+@Data
+public class AdminUpdateUserRequest {
+    private String firstName;
+    private String lastName;
+    private LocalDate birthDate;
+    private String email;
+    private String contact;
+    private String newPassword;
+    private List<UUID> groupIds;
+}

backend/src/main/java/org/raddatz/familienarchiv/dto/CreateUserRequest.java

@@ -3,6 +3,7 @@ package org.raddatz.familienarchiv.dto;
 
 import lombok.Data;
 
+import java.time.LocalDate;
 import java.util.List;
 import java.util.UUID;
 
@@ -11,5 +12,9 @@ public class CreateUserRequest {
     private String username;
     private String email;
     private String initialPassword;
-    private List<UUID> groupIds; // In welche Gruppen soll der User?
+    private List<UUID> groupIds;
+    private String firstName;
+    private String lastName;
+    private LocalDate birthDate;
+    private String contact;
 }

backend/src/main/java/org/raddatz/familienarchiv/dto/ForgotPasswordRequest.java

@@ -0,0 +1,8 @@
+package org.raddatz.familienarchiv.dto;
+
+import lombok.Data;
+
+@Data
+public class ForgotPasswordRequest {
+    private String email;
+}

backend/src/main/java/org/raddatz/familienarchiv/dto/ResetPasswordRequest.java

@@ -0,0 +1,9 @@
+package org.raddatz.familienarchiv.dto;
+
+import lombok.Data;
+
+@Data
+public class ResetPasswordRequest {
+    private String token;
+    private String newPassword;
+}

backend/src/main/java/org/raddatz/familienarchiv/exception/ErrorCode.java

@@ -35,6 +35,8 @@ public enum ErrorCode {
     UNAUTHORIZED,
     /** The authenticated user lacks the required permission. 403 */
     FORBIDDEN,
+    /** The password-reset token is missing, expired, or already used. 400 */
+    INVALID_RESET_TOKEN,
 
     // --- Generic ---
     /** Request validation failed (missing or malformed fields). 400 */

backend/src/main/java/org/raddatz/familienarchiv/model/PasswordResetToken.java

@@ -0,0 +1,45 @@
+package org.raddatz.familienarchiv.model;
+
+import java.time.LocalDateTime;
+import java.util.UUID;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.FetchType;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.ManyToOne;
+import jakarta.persistence.Table;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Entity
+@Table(name = "password_reset_tokens")
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class PasswordResetToken {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
+    private UUID id;
+
+    @ManyToOne(fetch = FetchType.LAZY)
+    @JoinColumn(name = "user_id", nullable = false)
+    private AppUser user;
+
+    @Column(nullable = false, unique = true, length = 64)
+    private String token;
+
+    @Column(name = "expires_at", nullable = false)
+    private LocalDateTime expiresAt;
+
+    @Column(nullable = false)
+    @Builder.Default
+    private boolean used = false;
+}

backend/src/main/java/org/raddatz/familienarchiv/repository/PasswordResetTokenRepository.java

@@ -0,0 +1,22 @@
+package org.raddatz.familienarchiv.repository;
+
+import java.time.LocalDateTime;
+import java.util.Optional;
+import java.util.UUID;
+
+import org.raddatz.familienarchiv.model.PasswordResetToken;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+
+public interface PasswordResetTokenRepository extends JpaRepository<PasswordResetToken, UUID> {
+
+    Optional<PasswordResetToken> findByToken(String token);
+
+    @Query("SELECT t.token FROM PasswordResetToken t WHERE t.user.email = :email AND t.used = false AND t.expiresAt > :now ORDER BY t.expiresAt DESC LIMIT 1")
+    Optional<String> findLatestActiveTokenByEmail(String email, LocalDateTime now);
+
+    @Modifying
+    @Query("DELETE FROM PasswordResetToken t WHERE t.expiresAt < :now OR t.used = true")
+    void deleteExpiredAndUsed(LocalDateTime now);
+}

backend/src/main/java/org/raddatz/familienarchiv/service/PasswordResetService.java

@@ -0,0 +1,132 @@
+package org.raddatz.familienarchiv.service;
+
+import java.security.SecureRandom;
+import java.time.LocalDateTime;
+import java.util.HexFormat;
+import java.util.Optional;
+
+import org.raddatz.familienarchiv.dto.ResetPasswordRequest;
+import org.raddatz.familienarchiv.exception.DomainException;
+import org.raddatz.familienarchiv.exception.ErrorCode;
+import org.raddatz.familienarchiv.model.AppUser;
+import org.raddatz.familienarchiv.model.PasswordResetToken;
+import org.raddatz.familienarchiv.repository.AppUserRepository;
+import org.raddatz.familienarchiv.repository.PasswordResetTokenRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.mail.MailException;
+import org.springframework.mail.SimpleMailMessage;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+
+@Service
+@RequiredArgsConstructor
+@Slf4j
+public class PasswordResetService {
+
+    private final AppUserRepository userRepository;
+    private final PasswordResetTokenRepository tokenRepository;
+    private final PasswordEncoder passwordEncoder;
+
+    @Autowired(required = false)
+    private JavaMailSender mailSender;
+
+    @Value("${app.mail.from:noreply@familienarchiv.local}")
+    private String mailFrom;
+
+    private static final SecureRandom SECURE_RANDOM = new SecureRandom();
+    private static final int TOKEN_EXPIRY_HOURS = 1;
+
+    /**
+     * Creates a reset token for the given email address and sends it via email.
+     * If the email is not found, silently does nothing (prevents user enumeration).
+     * If no mail sender is configured, logs a warning.
+     */
+    public void requestReset(String email, String appBaseUrl) {
+        Optional<AppUser> userOpt = userRepository.findByEmail(email);
+        if (userOpt.isEmpty()) {
+            log.debug("Password reset requested for unknown email: {}", email);
+            return;
+        }
+
+        AppUser user = userOpt.get();
+        String token = generateToken();
+
+        tokenRepository.save(PasswordResetToken.builder()
+                .user(user)
+                .token(token)
+                .expiresAt(LocalDateTime.now().plusHours(TOKEN_EXPIRY_HOURS))
+                .build());
+
+        sendResetEmail(user.getEmail(), token, appBaseUrl);
+    }
+
+    /**
+     * Validates the token and updates the user's password.
+     */
+    @Transactional
+    public void resetPassword(ResetPasswordRequest request) {
+        PasswordResetToken resetToken = tokenRepository.findByToken(request.getToken())
+                .orElseThrow(() -> DomainException.badRequest(
+                        ErrorCode.INVALID_RESET_TOKEN, "Invalid or unknown reset token"));
+
+        if (resetToken.isUsed() || resetToken.getExpiresAt().isBefore(LocalDateTime.now())) {
+            throw DomainException.badRequest(ErrorCode.INVALID_RESET_TOKEN, "Token expired or already used");
+        }
+
+        AppUser user = resetToken.getUser();
+        user.setPassword(passwordEncoder.encode(request.getNewPassword()));
+        userRepository.save(user);
+
+        resetToken.setUsed(true);
+        tokenRepository.save(resetToken);
+    }
+
+    /** Nightly cleanup of expired and used tokens. */
+    @Scheduled(cron = "0 0 3 * * *")
+    @Transactional
+    public void cleanupExpiredTokens() {
+        tokenRepository.deleteExpiredAndUsed(LocalDateTime.now());
+        log.info("Cleaned up expired password reset tokens");
+    }
+
+    private String generateToken() {
+        byte[] bytes = new byte[32];
+        SECURE_RANDOM.nextBytes(bytes);
+        return HexFormat.of().formatHex(bytes);
+    }
+
+    private void sendResetEmail(String to, String token, String appBaseUrl) {
+        if (mailSender == null) {
+            log.warn("Mail sender not configured — skipping password reset email to {}", to);
+            return;
+        }
+
+        String resetUrl = appBaseUrl + "/reset-password?token=" + token;
+        SimpleMailMessage message = new SimpleMailMessage();
+        message.setFrom(mailFrom);
+        message.setTo(to);
+        message.setSubject("Passwort zurücksetzen — Familienarchiv");
+        message.setText(
+                "Hallo,\n\n"
+                + "Sie haben eine Passwort-Zurücksetzung beantragt.\n\n"
+                + "Klicken Sie auf den folgenden Link, um Ihr Passwort zurückzusetzen:\n"
+                + resetUrl + "\n\n"
+                + "Der Link ist " + TOKEN_EXPIRY_HOURS + " Stunde(n) gültig.\n\n"
+                + "Falls Sie diese Anfrage nicht gestellt haben, ignorieren Sie diese E-Mail.\n\n"
+                + "Ihr Familienarchiv-Team");
+
+        try {
+            mailSender.send(message);
+            log.info("Password reset email sent to {}", to);
+        } catch (MailException e) {
+            log.error("Failed to send password reset email to {}: {}", to, e.getMessage());
+        }
+    }
+}

backend/src/main/java/org/raddatz/familienarchiv/service/UserService.java

@@ -3,6 +3,7 @@ package org.raddatz.familienarchiv.service;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 
+import org.raddatz.familienarchiv.dto.AdminUpdateUserRequest;
 import org.raddatz.familienarchiv.dto.ChangePasswordDTO;
 import org.raddatz.familienarchiv.dto.CreateUserRequest;
 import org.raddatz.familienarchiv.dto.UpdateProfileDTO;
@@ -54,6 +55,10 @@ public class UserService {
                     .email(request.getEmail())
                     .password(passwordEncoder.encode(request.getInitialPassword()))
                     .groups(groups)
+                    .firstName(request.getFirstName())
+                    .lastName(request.getLastName())
+                    .birthDate(request.getBirthDate())
+                    .contact(request.getContact())
                     .enabled(true)
                     .build();
         }
@@ -96,6 +101,39 @@ public class UserService {
         return userRepository.save(user);
     }
 
+    @Transactional
+    public AppUser adminUpdateUser(UUID id, AdminUpdateUserRequest dto) {
+        AppUser user = getById(id);
+
+        if (dto.getEmail() != null && !dto.getEmail().isBlank()) {
+            userRepository.findByEmail(dto.getEmail()).ifPresent(existing -> {
+                if (!existing.getId().equals(id)) {
+                    throw DomainException.conflict(ErrorCode.EMAIL_ALREADY_IN_USE,
+                            "E-Mail wird bereits von einem anderen Konto verwendet");
+                }
+            });
+            user.setEmail(dto.getEmail().trim());
+        } else if (dto.getEmail() != null && dto.getEmail().isBlank()) {
+            user.setEmail(null);
+        }
+
+        user.setFirstName(dto.getFirstName());
+        user.setLastName(dto.getLastName());
+        user.setBirthDate(dto.getBirthDate());
+        user.setContact(dto.getContact() == null || dto.getContact().isBlank() ? null : dto.getContact().trim());
+
+        if (dto.getNewPassword() != null && !dto.getNewPassword().isBlank()) {
+            user.setPassword(passwordEncoder.encode(dto.getNewPassword()));
+        }
+
+        if (dto.getGroupIds() != null) {
+            Set<UserGroup> groups = new HashSet<>(groupRepository.findAllById(dto.getGroupIds()));
+            user.setGroups(groups);
+        }
+
+        return userRepository.save(user);
+    }
+
     @Transactional
     public void changePassword(UUID userId, ChangePasswordDTO dto) {
         AppUser user = getById(userId);

backend/src/main/resources/application.yaml

@@ -24,6 +24,23 @@ spring:
       max-file-size: 50MB
       max-request-size: 50MB
 
+  mail:
+    host: ${MAIL_HOST:}
+    port: ${MAIL_PORT:587}
+    username: ${MAIL_USERNAME:}
+    password: ${MAIL_PASSWORD:}
+    properties:
+      mail:
+        smtp:
+          auth: true
+          starttls:
+            enable: true
+
+management:
+  health:
+    mail:
+      enabled: false
+
 springdoc:
   api-docs:
     enabled: false
@@ -38,6 +55,11 @@ app:
     bucket: ${S3_BUCKET_NAME}
     region: ${S3_REGION}
 
+  base-url: ${APP_BASE_URL:http://localhost:3000}
+
+  mail:
+    from: ${APP_MAIL_FROM:noreply@familienarchiv.local}
+
   admin:
     username: ${APP_ADMIN_USERNAME:admin}
     password: ${APP_ADMIN_PASSWORD:admin123}

backend/src/main/resources/db/migration/V8__add_password_reset_tokens.sql

@@ -0,0 +1,10 @@
+CREATE TABLE password_reset_tokens (
+    id          UUID         PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id     UUID         NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    token       VARCHAR(64)  NOT NULL UNIQUE,
+    expires_at  TIMESTAMP    NOT NULL,
+    used        BOOLEAN      NOT NULL DEFAULT FALSE,
+    created_at  TIMESTAMP    NOT NULL DEFAULT now()
+);
+
+CREATE INDEX idx_prt_token ON password_reset_tokens(token);

backend/src/test/java/org/raddatz/familienarchiv/service/PasswordResetServiceTest.java

@@ -0,0 +1,126 @@
+package org.raddatz.familienarchiv.service;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.argThat;
+import static org.mockito.Mockito.never;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+import java.time.LocalDateTime;
+import java.util.Optional;
+import java.util.UUID;
+
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InjectMocks;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.raddatz.familienarchiv.dto.ResetPasswordRequest;
+import org.raddatz.familienarchiv.exception.DomainException;
+import org.raddatz.familienarchiv.model.AppUser;
+import org.raddatz.familienarchiv.model.PasswordResetToken;
+import org.raddatz.familienarchiv.repository.AppUserRepository;
+import org.raddatz.familienarchiv.repository.PasswordResetTokenRepository;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.security.crypto.password.PasswordEncoder;
+
+@ExtendWith(MockitoExtension.class)
+class PasswordResetServiceTest {
+
+    @Mock AppUserRepository userRepository;
+    @Mock PasswordResetTokenRepository tokenRepository;
+    @Mock PasswordEncoder passwordEncoder;
+    @Mock JavaMailSender mailSender;
+    @InjectMocks PasswordResetService service;
+
+    private AppUser makeUser(String email) {
+        return AppUser.builder()
+                .id(UUID.randomUUID())
+                .username("testuser")
+                .email(email)
+                .password("hashed")
+                .build();
+    }
+
+    // ─── requestReset ─────────────────────────────────────────────────────────
+
+    @Test
+    void requestReset_savesTokenForKnownEmail() {
+        AppUser user = makeUser("user@example.com");
+        when(userRepository.findByEmail("user@example.com")).thenReturn(Optional.of(user));
+
+        service.requestReset("user@example.com", "http://localhost:3000");
+
+        verify(tokenRepository).save(argThat(t ->
+                t.getUser().equals(user)
+                        && t.getToken().length() == 64
+                        && !t.isUsed()));
+    }
+
+    @Test
+    void requestReset_doesNothingForUnknownEmail() {
+        when(userRepository.findByEmail("ghost@example.com")).thenReturn(Optional.empty());
+
+        service.requestReset("ghost@example.com", "http://localhost:3000");
+
+        verify(tokenRepository, never()).save(any());
+    }
+
+    // ─── resetPassword ────────────────────────────────────────────────────────
+
+    @Test
+    void resetPassword_updatesPasswordForValidToken() {
+        AppUser user = makeUser("user@example.com");
+        PasswordResetToken token = PasswordResetToken.builder()
+                .id(UUID.randomUUID())
+                .token("validtoken123")
+                .user(user)
+                .expiresAt(LocalDateTime.now().plusHours(1))
+                .used(false)
+                .build();
+        when(tokenRepository.findByToken("validtoken123")).thenReturn(Optional.of(token));
+        when(passwordEncoder.encode("newpass")).thenReturn("hashed-newpass");
+
+        ResetPasswordRequest req = new ResetPasswordRequest();
+        req.setToken("validtoken123");
+        req.setNewPassword("newpass");
+        service.resetPassword(req);
+
+        verify(passwordEncoder).encode("newpass");
+        verify(userRepository).save(argThat(u -> u.getPassword().equals("hashed-newpass")));
+        assertThat(token.isUsed()).isTrue();
+    }
+
+    @Test
+    void resetPassword_throwsForExpiredToken() {
+        AppUser user = makeUser("user@example.com");
+        PasswordResetToken token = PasswordResetToken.builder()
+                .token("expiredtoken")
+                .user(user)
+                .expiresAt(LocalDateTime.now().minusMinutes(1))
+                .used(false)
+                .build();
+        when(tokenRepository.findByToken("expiredtoken")).thenReturn(Optional.of(token));
+
+        ResetPasswordRequest req = new ResetPasswordRequest();
+        req.setToken("expiredtoken");
+        req.setNewPassword("newpass");
+
+        assertThatThrownBy(() -> service.resetPassword(req))
+                .isInstanceOf(DomainException.class);
+    }
+
+    @Test
+    void resetPassword_throwsForUnknownToken() {
+        when(tokenRepository.findByToken("nosuchtoken")).thenReturn(Optional.empty());
+
+        ResetPasswordRequest req = new ResetPasswordRequest();
+        req.setToken("nosuchtoken");
+        req.setNewPassword("newpass");
+
+        assertThatThrownBy(() -> service.resetPassword(req))
+                .isInstanceOf(DomainException.class);
+    }
+}

docker-compose.yml

@@ -58,6 +58,19 @@ services:
     networks:
       - archive-net
 
+  # --- Mail catcher: Mailpit (dev only) ---
+  # Catches all outgoing emails and displays them in a web UI.
+  # Access the inbox at http://localhost:${PORT_MAILPIT_UI} after starting the stack.
+  mailpit:
+    image: axllent/mailpit:latest
+    container_name: archive-mailpit
+    restart: unless-stopped
+    ports:
+      - "${PORT_MAILPIT_UI:-8025}:8025"   # Web UI
+      - "${PORT_MAILPIT_SMTP:-1025}:1025" # SMTP
+    networks:
+      - archive-net
+
   # --- Backend: Spring Boot ---
   backend:
     build:
@@ -74,6 +87,8 @@ services:
         condition: service_healthy
       minio:
         condition: service_healthy
+      mailpit:
+        condition: service_started
     environment:
       SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/${POSTGRES_DB}
       SPRING_DATASOURCE_USERNAME: ${POSTGRES_USER}
@@ -83,6 +98,16 @@ services:
       S3_SECRET_KEY: ${MINIO_ROOT_PASSWORD}
       S3_BUCKET_NAME: ${MINIO_DEFAULT_BUCKETS}
       S3_REGION: us-east-1
+      APP_BASE_URL: ${APP_BASE_URL:-http://localhost:3000}
+      # Defaults to the local Mailpit catcher — override in .env for production SMTP
+      MAIL_HOST: ${MAIL_HOST:-mailpit}
+      MAIL_PORT: ${MAIL_PORT:-1025}
+      MAIL_USERNAME: ${MAIL_USERNAME:-}
+      MAIL_PASSWORD: ${MAIL_PASSWORD:-}
+      APP_MAIL_FROM: ${APP_MAIL_FROM:-noreply@familienarchiv.local}
+      # Mailpit needs no auth or STARTTLS; production SMTP overrides these via .env
+      SPRING_MAIL_PROPERTIES_MAIL_SMTP_AUTH: ${MAIL_SMTP_AUTH:-false}
+      SPRING_MAIL_PROPERTIES_MAIL_SMTP_STARTTLS_ENABLE: ${MAIL_STARTTLS_ENABLE:-false}
     ports:
       - "${PORT_BACKEND}:8080"
     networks:

docs/mail.md

@@ -0,0 +1,96 @@
+# Mail configuration
+
+Familienarchiv uses Spring Mail to send password reset emails. The mail sender is **optional** — if no SMTP host is configured, the feature degrades gracefully: a reset token is still created in the database, but no email is sent and a warning is logged.
+
+## How it works in each environment
+
+| Environment | Default behaviour |
+|---|---|
+| `docker-compose up` (dev) | Mailpit catches all emails — nothing leaves your machine |
+| CI | No mail host set — emails are silently skipped, tokens tested via the `/api/auth/reset-token-for-test` endpoint |
+| Production | Real SMTP server configured via environment variables |
+
+---
+
+## Development — Mailpit
+
+[Mailpit](https://github.com/axllent/mailpit) is included in `docker-compose.yml` as a local mail catcher. It accepts SMTP connections from the backend and displays all caught emails in a web inbox. No credentials or external network access required.
+
+**Start the stack as usual:**
+
+```bash
+docker-compose up -d
+```
+
+**Open the inbox:**
+
+```
+http://localhost:8025
+```
+
+All password reset emails appear here. Copy the reset link from the email body and open it in your browser to complete the flow end-to-end locally.
+
+**Ports (configurable in `.env`):**
+
+| Variable | Default | Purpose |
+|---|---|---|
+| `PORT_MAILPIT_UI` | `8025` | Mailpit web inbox |
+| `PORT_MAILPIT_SMTP` | `1025` | SMTP port (used internally by the backend) |
+
+---
+
+## Production — real SMTP
+
+To send real emails, set the following variables in your `.env` file (or as host environment variables). The `MAIL_HOST` variable is the switch — leaving it empty disables outgoing mail entirely.
+
+```dotenv
+# Required
+APP_BASE_URL=https://your-domain.example.com   # Base URL inserted into reset links
+MAIL_HOST=smtp.example.com
+MAIL_PORT=587
+MAIL_USERNAME=your-smtp-user
+MAIL_PASSWORD=your-smtp-password
+
+# Optional — adjust if your provider uses different settings
+MAIL_SMTP_AUTH=true          # default: false (Mailpit needs false)
+MAIL_STARTTLS_ENABLE=true    # default: false (Mailpit needs false)
+APP_MAIL_FROM=noreply@your-domain.example.com
+```
+
+**Common provider settings:**
+
+| Provider | Host | Port | Auth | STARTTLS |
+|---|---|---|---|---|
+| Gmail (App Password) | `smtp.gmail.com` | `587` | `true` | `true` |
+| Mailgun | `smtp.mailgun.org` | `587` | `true` | `true` |
+| Hetzner | `mail.your-server.de` | `587` | `true` | `true` |
+| Self-hosted Postfix | your server IP/hostname | `587` | `true` | `true` |
+
+> **Gmail note:** You must use an [App Password](https://support.google.com/accounts/answer/185833), not your regular account password. 2-Step Verification must be enabled on the account.
+
+---
+
+## Environment variable reference
+
+All variables have safe defaults so the app starts without any mail configuration.
+
+| Variable | Default (docker-compose) | Description |
+|---|---|---|
+| `MAIL_HOST` | `mailpit` | SMTP hostname. Empty string disables mail entirely. |
+| `MAIL_PORT` | `1025` | SMTP port. |
+| `MAIL_USERNAME` | *(empty)* | SMTP username. Leave empty if your server needs no auth. |
+| `MAIL_PASSWORD` | *(empty)* | SMTP password. |
+| `MAIL_SMTP_AUTH` | `false` | Enable SMTP authentication (`true` for real servers). |
+| `MAIL_STARTTLS_ENABLE` | `false` | Enable STARTTLS (`true` for real servers on port 587). |
+| `APP_MAIL_FROM` | `noreply@familienarchiv.local` | The `From:` address on outgoing emails. |
+| `APP_BASE_URL` | `http://localhost:3000` | Base URL prepended to password reset links. |
+
+---
+
+## Disabling mail entirely
+
+Set `MAIL_HOST` to an empty string. Spring Boot will not create a mail sender bean and no emails will be sent. Password reset tokens are still written to the database — useful if you want to test the reset flow via the API directly.
+
+```dotenv
+MAIL_HOST=
+```

frontend/e2e/admin.spec.ts

@@ -0,0 +1,218 @@
+import { test, expect, type Browser } from '@playwright/test';
+
+/**
+ * Admin panel E2E tests.
+ *
+ * Reads top-to-bottom as a complete admin journey:
+ * 1. Admin opens the dashboard and sees all three management tabs.
+ * 2. Admin creates a group for read-only access.
+ * 3. Admin creates a new user in that group.
+ * 4. Admin edits the user's profile.
+ * 5. Admin resets the user's password without knowing their current password.
+ * 6. The user can log in with the admin-set password.
+ * 7. Admin deletes the user.
+ * 8. Admin deletes the test group.
+ * 9. Admin renames a tag and renames it back.
+ *
+ * Steps 2–8 form a self-contained lifecycle: everything created in this suite
+ * is also deleted, leaving the database in its original state.
+ */
+
+// ── Dashboard ─────────────────────────────────────────────────────────────────
+
+test.describe('Admin dashboard', () => {
+	test('admin navigates to /admin and sees the three management tabs', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		await expect(page.getByRole('button', { name: 'Benutzer', exact: true })).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Gruppen', exact: true })).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Schlagworte', exact: true })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-dashboard.png' });
+	});
+});
+
+// ── Group lifecycle ────────────────────────────────────────────────────────────
+
+test.describe('Admin — group management', () => {
+	test('admin creates a new group "E2E Leser" with READ_ALL permission', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		// Switch to the Groups tab
+		await page.getByRole('button', { name: 'Gruppen', exact: true }).click();
+
+		await page.getByPlaceholder('Gruppenname (z.B. Editoren)').fill('E2E Leser');
+
+		// No permission checkboxes checked — READ_ALL is handled at application level
+		// (a group with no permissions gets read-only access by default in the UI)
+
+		await page.getByRole('button', { name: /Erstellen/i }).click();
+
+		await expect(page.getByRole('cell', { name: 'E2E Leser', exact: true })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-group-created.png' });
+	});
+});
+
+// ── User lifecycle ─────────────────────────────────────────────────────────────
+
+test.describe('Admin — user lifecycle', () => {
+	test('admin creates user "e2e-testuser" and they appear in the user list', async ({ page }) => {
+		await page.goto('/admin/users/new');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.locator('input[name="username"]').fill('e2e-testuser');
+		await page.locator('input[name="password"]').fill('InitPass123!');
+
+		// Assign to the group we just created
+		const groupLabel = page.locator('label').filter({ hasText: 'E2E Leser' });
+		if ((await groupLabel.count()) > 0) {
+			await groupLabel.locator('input[type="checkbox"]').check();
+		}
+
+		await page.getByRole('button', { name: /Erstellen/i }).click();
+
+		// Redirected back to /admin — user appears in the table
+		await expect(page).toHaveURL('/admin');
+		await expect(page.getByRole('cell', { name: 'e2e-testuser', exact: true })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-user-created.png' });
+	});
+
+	test('admin opens the edit page and updates the user first name', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		// Click the edit link for the test user
+		const userRow = page.locator('tr').filter({ hasText: 'e2e-testuser' });
+		await userRow.getByRole('link', { name: /Bearbeiten/i }).click();
+
+		await expect(page).toHaveURL(/\/admin\/users\/.+/);
+		await expect(
+			page.getByRole('heading', { name: /Benutzer bearbeiten: e2e-testuser/i })
+		).toBeVisible();
+
+		await page.locator('input[name="firstName"]').fill('E2E');
+		await page.locator('input[name="lastName"]').fill('Testuser');
+
+		await page.getByRole('button', { name: /Speichern/i }).click();
+
+		await expect(page.getByText('Änderungen gespeichert.')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-user-edited.png' });
+	});
+
+	test('admin sets a new password without entering the current password', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		const userRow = page.locator('tr').filter({ hasText: 'e2e-testuser' });
+		await userRow.getByRole('link', { name: /Bearbeiten/i }).click();
+
+		// Password fields — no current password field on the admin edit form
+		await page.locator('input[name="newPassword"]').fill('AdminSet456!');
+		await page.locator('input[name="confirmPassword"]').fill('AdminSet456!');
+
+		await page.getByRole('button', { name: /Speichern/i }).click();
+
+		await expect(page.getByText('Änderungen gespeichert.')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-user-password-reset.png' });
+	});
+
+	test('the user can log in with the admin-set password', async ({ browser }) => {
+		// Open a completely separate browser context — no shared session cookies
+		const freshCtx = await (browser as Browser).newContext({
+			storageState: { cookies: [], origins: [] }
+		});
+		const freshPage = await freshCtx.newPage();
+
+		await freshPage.goto('/login');
+		await freshPage.getByLabel('Benutzername').fill('e2e-testuser');
+		await freshPage.getByLabel('Passwort').fill('AdminSet456!');
+		await freshPage.getByRole('button', { name: 'Anmelden' }).click();
+
+		await expect(freshPage).toHaveURL('/');
+		await freshPage.screenshot({ path: 'test-results/e2e/admin-user-login-new-password.png' });
+
+		await freshCtx.close();
+	});
+
+	test('admin deletes the test user and they disappear from the list', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		const userRow = page.locator('tr').filter({ hasText: 'e2e-testuser' });
+
+		// The delete button triggers a window.confirm() dialog
+		page.once('dialog', (dialog) => dialog.accept());
+		await userRow.getByTitle('Benutzer löschen').click();
+
+		await expect(page.getByRole('cell', { name: 'e2e-testuser', exact: true })).not.toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-user-deleted.png' });
+	});
+});
+
+// ── Group cleanup ──────────────────────────────────────────────────────────────
+
+test.describe('Admin — group cleanup', () => {
+	test('admin deletes the "E2E Leser" group', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByRole('button', { name: 'Gruppen' }).click();
+
+		const groupRow = page.locator('tr').filter({ hasText: 'E2E Leser' });
+
+		page.once('dialog', (dialog) => dialog.accept());
+		await groupRow.getByTitle('Löschen').click();
+
+		await expect(page.getByRole('cell', { name: 'E2E Leser', exact: true })).not.toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-group-deleted.png' });
+	});
+});
+
+// ── Tag management ─────────────────────────────────────────────────────────────
+
+test.describe('Admin — tag management', () => {
+	test('admin renames a tag and sees the change in the list', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByRole('button', { name: 'Schlagworte', exact: true }).click();
+		// Wait for the tags list to render after the tab switch
+		await page.waitForSelector('ul > li');
+
+		// Hover over the "Familie" row to reveal the opacity-0 action buttons
+		const familieRow = page
+			.locator('ul > li')
+			.filter({ has: page.locator('span', { hasText: /^Familie$/ }) });
+		await familieRow.hover();
+		await familieRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
+
+		// After clicking edit, {#if editingTagId} replaces the span with a form —
+		// the familieRow filter no longer matches, so we find the input directly.
+		await page.locator('input[name="name"]').fill('Familie (E2E)');
+		await page.getByRole('button', { name: 'Speichern' }).click();
+
+		await expect(page.getByText('Familie (E2E)')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-tag-renamed.png' });
+	});
+
+	test('admin renames it back to restore the original name', async ({ page }) => {
+		await page.goto('/admin');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByRole('button', { name: 'Schlagworte', exact: true }).click();
+		await page.waitForSelector('ul > li');
+
+		const renamedRow = page
+			.locator('ul > li')
+			.filter({ has: page.locator('span', { hasText: /^Familie \(E2E\)$/ }) });
+		await renamedRow.hover();
+		await renamedRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
+
+		await page.locator('input[name="name"]').fill('Familie');
+		await page.getByRole('button', { name: 'Speichern' }).click();
+
+		await expect(page.getByText('Familie')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/admin-tag-restored.png' });
+	});
+});

frontend/e2e/auth.spec.ts

@@ -48,8 +48,27 @@ test.describe('Authentication', () => {
 		await page.screenshot({ path: 'test-results/e2e/login-success.png' });
 	});
 
+	test('login establishes a session that authenticates API calls', async ({ page }) => {
+		// Guards against regressions where the session cookie is set but broken.
+		// The profile page calls /api/users/me server-side — if auth works end-to-end,
+		// it loads without redirecting to /login.
+		await login(page);
+		await page.goto('/profile');
+		await expect(page).toHaveURL('/profile');
+		await expect(page.getByRole('heading', { name: /Mein Profil/i })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/auth-session-valid.png' });
+	});
+
 	test('logout clears the session and redirects to /login', async ({ page }) => {
 		await login(page);
+		// Wait for hydration before interacting with the nav — onclick handlers are
+		// only wired up after SvelteKit finishes hydrating the page client-side.
+		await page.waitForSelector('[data-hydrated]');
+		// Logout is inside the user avatar dropdown — open it first.
+		// Wait for the dropdown button to be visible before clicking Abmelden,
+		// since the {#if userMenuOpen} block renders asynchronously in Svelte.
+		await page.locator('button[aria-haspopup="true"]').click();
+		await expect(page.getByRole('button', { name: 'Abmelden' })).toBeVisible();
 		await page.getByRole('button', { name: 'Abmelden' }).click();
 		await expect(page).toHaveURL(/\/login/);
 		// Confirm session is gone: navigating to / redirects back

frontend/e2e/documents.spec.ts

@@ -80,6 +80,41 @@ test.describe('New document', () => {
 	});
 });
 
+test.describe('Document creation', () => {
+	test('user fills in a title and lands on the new document detail page', async ({ page }) => {
+		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByLabel('Titel').fill('E2E Testbrief');
+		await page.getByRole('button', { name: /Speichern/i }).click();
+
+		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
+		await expect(page.getByRole('heading', { name: 'E2E Testbrief' })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/document-create.png' });
+	});
+});
+
+test.describe('Document editing', () => {
+	test('user opens an existing document, changes the title, and sees the update', async ({
+		page
+	}) => {
+		// Find the document created in the previous describe
+		await page.goto('/?q=E2E+Testbrief');
+		await page.waitForSelector('[data-hydrated]');
+		const docLink = page.getByRole('link', { name: 'E2E Testbrief' }).first();
+		const href = await docLink.getAttribute('href');
+		await page.goto(`${href}/edit`);
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByLabel('Titel').fill('E2E Testbrief (überarbeitet)');
+		await page.getByRole('button', { name: /Speichern/i }).click();
+
+		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
+		await expect(page.getByText('E2E Testbrief (überarbeitet)')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/document-edit-save.png' });
+	});
+});
+
 test.describe('Document edit', () => {
 	test('renders the edit form with pre-filled data', async ({ page }) => {
 		// Navigate to home, find first document, go to its edit page

frontend/e2e/password-reset.spec.ts

@@ -0,0 +1,113 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Password-reset E2E tests.
+ *
+ * These tests run WITHOUT a stored session because they test unauthenticated flows.
+ *
+ * They rely on the "e2e" Spring profile being active in CI (see playwright.config.ts /
+ * docker-compose.e2e.yml).  The profile exposes GET /api/auth/reset-token-for-test?email=
+ * so we can retrieve the generated token without a real mail server.
+ */
+test.use({ storageState: { cookies: [], origins: [] } });
+
+// The backend is accessible directly for E2E helper calls (no SvelteKit proxy needed).
+const BACKEND_URL = process.env.E2E_BACKEND_URL ?? 'http://localhost:8080';
+
+async function getResetToken(email: string): Promise<string> {
+	const res = await fetch(
+		`${BACKEND_URL}/api/auth/reset-token-for-test?email=${encodeURIComponent(email)}`
+	);
+	if (!res.ok) throw new Error(`Could not retrieve reset token for ${email}: ${res.status}`);
+	return res.text();
+}
+
+test.describe('Password reset', () => {
+	test('forgot-password page is accessible without login', async ({ page }) => {
+		await page.goto('/forgot-password');
+		await expect(page).toHaveURL('/forgot-password');
+		await expect(page.getByRole('heading', { name: /Passwort vergessen/i })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/password-reset-form.png' });
+	});
+
+	test('forgot-password shows success banner for any email (prevents user enumeration)', async ({
+		page
+	}) => {
+		await page.goto('/forgot-password');
+		await page.getByLabel(/E-Mail/i).fill('nonexistent@example.com');
+		await page.getByRole('button', { name: /Link anfordern/i }).click();
+		// Always shows success — never reveals whether the email exists
+		await expect(page.locator('.bg-green-50')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/password-reset-success-banner.png' });
+	});
+
+	test('full password reset flow', async ({ page }) => {
+		const testEmail = process.env.E2E_EMAIL ?? 'admin@familyarchive.local';
+		const originalPassword = process.env.E2E_PASSWORD ?? 'admin123';
+		const newPassword = 'NewP@ssw0rd_E2E!';
+
+		// 1. Request reset
+		await page.goto('/forgot-password');
+		await page.getByLabel(/E-Mail/i).fill(testEmail);
+		await page.getByRole('button', { name: /Link anfordern/i }).click();
+		await expect(page.locator('.bg-green-50')).toBeVisible();
+
+		// 2. Fetch the token via the test helper endpoint
+		const token = await getResetToken(testEmail);
+		expect(token.length).toBeGreaterThan(0);
+
+		// 3. Open the reset-password page with the token
+		await page.goto(`/reset-password?token=${token}`);
+		await expect(page.getByRole('heading', { name: /Neues Passwort/i })).toBeVisible();
+		await page.getByLabel(/^Neues Passwort$/i).fill(newPassword);
+		await page.getByLabel(/Passwort bestätigen/i).fill(newPassword);
+		await page.getByRole('button', { name: /Passwort speichern/i }).click();
+
+		// 4. Success banner — then navigate to login
+		await expect(page.locator('.bg-green-50')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/password-reset-changed.png' });
+		await page.getByRole('link', { name: /Zurück zum Login/i }).click();
+
+		// 5. Log in with new password
+		await expect(page).toHaveURL(/\/login/);
+		await page.getByLabel('Benutzername').fill(process.env.E2E_USERNAME ?? 'admin');
+		await page.getByLabel('Passwort').fill(newPassword);
+		await page.getByRole('button', { name: 'Anmelden' }).click();
+		await expect(page).toHaveURL('/');
+
+		// 6. Restore original password via profile page
+		await page.goto('/profile');
+		await page.locator('input[name="currentPassword"]').fill(newPassword);
+		await page.locator('input[name="newPassword"]').fill(originalPassword);
+		await page.locator('input[name="confirmPassword"]').fill(originalPassword);
+		// Profile page has two "Speichern" buttons — the password form is the last one
+		await page.locator('button[type="submit"]').last().click();
+		// After changing password, auth_token is stale → redirect to login
+		await expect(page).toHaveURL(/\/login/);
+
+		// 7. Log back in with original password to confirm restore worked
+		await page.getByLabel('Benutzername').fill(process.env.E2E_USERNAME ?? 'admin');
+		await page.getByLabel('Passwort').fill(originalPassword);
+		await page.getByRole('button', { name: 'Anmelden' }).click();
+		await expect(page).toHaveURL('/');
+		await page.screenshot({ path: 'test-results/e2e/password-reset-restored.png' });
+	});
+
+	test('reset-password page shows error for invalid token', async ({ page }) => {
+		await page.goto('/reset-password?token=invalidtoken000');
+		await page.getByLabel(/^Neues Passwort$/i).fill('somepassword');
+		await page.getByLabel(/Passwort bestätigen/i).fill('somepassword');
+		await page.getByRole('button', { name: /Passwort speichern/i }).click();
+		await expect(page.locator('.text-red-600')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/password-reset-invalid-token.png' });
+	});
+
+	test('reset-password page shows mismatch error when passwords differ', async ({ page }) => {
+		await page.goto('/reset-password?token=anytoken');
+		await page.getByLabel(/^Neues Passwort$/i).fill('password1');
+		await page.getByLabel(/Passwort bestätigen/i).fill('password2');
+		await page.getByRole('button', { name: /Passwort speichern/i }).click();
+		await expect(page.locator('.text-red-600')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/password-reset-mismatch.png' });
+	});
+});

frontend/e2e/permissions.spec.ts

@@ -1,4 +1,14 @@
 import { test, expect } from '@playwright/test';
+import { login } from './helpers/auth';
+
+/**
+ * Permission E2E tests.
+ *
+ * Two describe blocks form the full story:
+ * 1. Admin user — can see all write controls.
+ * 2. Read-only user ("reader", seeded in DataInitializer with READ_ALL only) —
+ *    can browse content but sees no write controls anywhere.
+ */
 
 test.describe('Write permissions — admin user', () => {
 	test('admin user sees Neues Dokument link on home page', async ({ page }) => {
@@ -29,3 +39,49 @@ test.describe('Write permissions — admin user', () => {
 		await expect(page.getByRole('button', { name: /Bearbeiten/i })).toBeVisible();
 	});
 });
+
+// ── Read-only user journey ─────────────────────────────────────────────────────
+//
+// The "reader" user is seeded by DataInitializer (e2e profile) with READ_ALL only.
+// They can browse documents and persons but must not see any mutation controls.
+
+test.describe('Read-only user — no write controls visible', () => {
+	// Fresh session — no shared admin cookies
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test.beforeEach(async ({ page }) => {
+		await login(page, 'reader', 'reader123');
+	});
+
+	test('read-only user is redirected to home after login', async ({ page }) => {
+		await expect(page).toHaveURL('/');
+		await page.screenshot({ path: 'test-results/e2e/permissions-reader-home.png' });
+	});
+
+	test('home page does not show the "Neues Dokument" link', async ({ page }) => {
+		await expect(page.getByRole('link', { name: /Neues Dokument/i })).not.toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/permissions-reader-no-new-doc.png' });
+	});
+
+	test('persons page does not show the "Neue Person" link', async ({ page }) => {
+		await page.goto('/persons');
+		await expect(page.getByRole('link', { name: /Neue Person/i })).not.toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/permissions-reader-no-new-person.png' });
+	});
+
+	test('person detail page does not show the edit button', async ({ page }) => {
+		await page.goto('/persons');
+		const firstPerson = page.locator('a[href^="/persons/"]:not([href="/persons/new"])').first();
+		await firstPerson.click();
+		await page.waitForSelector('[data-hydrated]');
+		await expect(page.getByRole('button', { name: /Bearbeiten/i })).not.toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/permissions-reader-no-edit.png' });
+	});
+
+	test('navigating directly to /documents/new redirects away', async ({ page }) => {
+		await page.goto('/documents/new');
+		// Read-only user should not be able to access the new document form
+		await expect(page).not.toHaveURL('/documents/new');
+		await page.screenshot({ path: 'test-results/e2e/permissions-reader-no-new-doc-direct.png' });
+	});
+});

frontend/e2e/persons.spec.ts

@@ -95,6 +95,21 @@ test.describe('New person', () => {
 	});
 });
 
+test.describe('Person creation', () => {
+	test('user fills in first and last name and lands on the new person detail page', async ({
+		page
+	}) => {
+		await page.goto('/persons/new');
+		await page.getByLabel('Vorname').fill('E2E');
+		await page.getByLabel('Nachname').fill('Testperson');
+		await page.getByRole('button', { name: /Erstellen/i }).click();
+
+		await expect(page).toHaveURL(/\/persons\/[^/]+$/);
+		await expect(page.getByRole('heading', { name: 'E2E Testperson' })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/person-create.png' });
+	});
+});
+
 test.describe('Person detail — sort toggle', () => {
 	test('each section has its own sort toggle that works independently', async ({ page }) => {
 		await page.goto('/persons');
@@ -259,7 +274,10 @@ test.describe('Conversations — enhancements', () => {
 		const originalReceiverId = url.searchParams.get('receiverId')!;
 
 		await page.getByTestId('conv-swap-btn').click();
-		await page.waitForURL(/senderId=/);
+		// Wait for the URL to reflect the swapped IDs (not just any URL with senderId=)
+		await page.waitForURL(
+			(url) => new URL(url).searchParams.get('senderId') === originalReceiverId
+		);
 
 		const swappedUrl = new URL(page.url());
 		expect(swappedUrl.searchParams.get('senderId')).toBe(originalReceiverId);

frontend/e2e/profile.spec.ts

@@ -0,0 +1,106 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Profile page E2E tests.
+ *
+ * Reads top-to-bottom as a single user journey:
+ * the logged-in admin opens their profile, updates their display name,
+ * tries a wrong password (sees an error), then successfully changes their
+ * password and logs back in with the new one.
+ *
+ * The password change test restores the original password at the end so the
+ * shared session remains valid for all subsequent test files.
+ */
+
+test.describe('Profile page', () => {
+	test('user opens their profile and sees the personal data and password sections', async ({
+		page
+	}) => {
+		await page.goto('/profile');
+		await expect(page.getByRole('heading', { name: /Mein Profil/i })).toBeVisible();
+		await expect(page.getByText('Persönliche Daten')).toBeVisible();
+		await expect(page.getByText('Passwort ändern')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/profile-view.png' });
+	});
+
+	test('user saves updated first and last name and sees confirmation', async ({ page }) => {
+		await page.goto('/profile');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.locator('input[name="firstName"]').fill('E2E');
+		await page.locator('input[name="lastName"]').fill('Admin');
+
+		// Two "Speichern" buttons exist — the first belongs to the profile form
+		await page
+			.locator('form[action*="updateProfile"]')
+			.getByRole('button', { name: /Speichern/i })
+			.click();
+
+		await expect(page.getByText('Gespeichert.')).toBeVisible();
+		// Nav avatar shows the new initials derived from firstName + lastName
+		await expect(page.locator('button[aria-haspopup="true"]')).toContainText('EA');
+		await page.screenshot({ path: 'test-results/e2e/profile-save.png' });
+	});
+
+	test('shows an error when the current password is wrong', async ({ page }) => {
+		await page.goto('/profile');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.locator('input[name="currentPassword"]').fill('definitely-wrong');
+		await page.locator('input[name="newPassword"]').fill('NewPass123!');
+		await page.locator('input[name="confirmPassword"]').fill('NewPass123!');
+
+		await page
+			.locator('form[action*="changePassword"]')
+			.getByRole('button', { name: /Speichern/i })
+			.click();
+
+		await expect(page.getByText('Das aktuelle Passwort ist falsch.')).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/profile-wrong-password.png' });
+	});
+
+	test('user changes their password and can log in with the new one', async ({ page }) => {
+		await page.goto('/profile');
+		await page.waitForSelector('[data-hydrated]');
+
+		// ── Step 1: change to a temporary password ─────────────────────────────
+		await page.locator('input[name="currentPassword"]').fill('admin123');
+		await page.locator('input[name="newPassword"]').fill('TempAdmin456!');
+		await page.locator('input[name="confirmPassword"]').fill('TempAdmin456!');
+		await page
+			.locator('form[action*="changePassword"]')
+			.getByRole('button', { name: /Speichern/i })
+			.click();
+
+		// After the password changes, the auth_token cookie still carries the old
+		// credentials. use:enhance re-runs the page's load function, which calls
+		// the backend with the stale Basic Auth header → 401 → redirect to /login.
+		await expect(page).toHaveURL(/\/login/);
+
+		// ── Step 2: log in with the new password ───────────────────────────────
+		await page.getByLabel('Benutzername').fill('admin');
+		await page.getByLabel('Passwort').fill('TempAdmin456!');
+		await page.getByRole('button', { name: 'Anmelden' }).click();
+		await expect(page).toHaveURL('/');
+		await page.screenshot({ path: 'test-results/e2e/profile-password-changed.png' });
+
+		// ── Step 3: restore the original password so subsequent tests still work ─
+		await page.goto('/profile');
+		await page.waitForSelector('[data-hydrated]');
+		await page.locator('input[name="currentPassword"]').fill('TempAdmin456!');
+		await page.locator('input[name="newPassword"]').fill('admin123');
+		await page.locator('input[name="confirmPassword"]').fill('admin123');
+		await page
+			.locator('form[action*="changePassword"]')
+			.getByRole('button', { name: /Speichern/i })
+			.click();
+		// Redirected to /login again after credential rotation
+		await expect(page).toHaveURL(/\/login/);
+
+		// ── Step 4: log back in with the restored password ─────────────────────
+		await page.getByLabel('Benutzername').fill('admin');
+		await page.getByLabel('Passwort').fill('admin123');
+		await page.getByRole('button', { name: 'Anmelden' }).click();
+		await expect(page).toHaveURL('/');
+	});
+});

frontend/messages/de.json

@@ -159,6 +159,14 @@
 	"admin_section_new_group": "Neue Gruppe anlegen",
 	"admin_group_name_placeholder": "Gruppenname (z.B. Editoren)",
 	"admin_user_delete_confirm": "Benutzer {username} wirklich löschen?",
+	"admin_btn_new_user": "Neuer Benutzer",
+	"admin_user_new_heading": "Neuen Benutzer anlegen",
+	"admin_user_edit_heading": "Benutzer bearbeiten: {username}",
+	"admin_user_created": "Benutzer wurde erstellt.",
+	"admin_user_updated": "Änderungen gespeichert.",
+	"admin_col_full_name": "Name",
+	"admin_label_new_password_optional": "Neues Passwort (optional)",
+	"admin_label_initial_password": "Passwort",
 	"doc_file_error_preview": "Vorschau konnte nicht geladen werden.",
 	"doc_download_title": "Herunterladen",
 	"doc_tag_filter_title": "Nach {name} filtern",
@@ -194,5 +202,18 @@
 	"profile_password_mismatch": "Die neuen Passwörter stimmen nicht überein.",
 	"profile_saved": "Gespeichert.",
 	"profile_password_changed": "Passwort erfolgreich geändert.",
-	"user_profile_heading": "Profil von"
+	"user_profile_heading": "Profil von",
+	"error_invalid_reset_token": "Der Link ist ungültig oder abgelaufen.",
+	"forgot_password_heading": "Passwort vergessen",
+	"forgot_password_email_label": "E-Mail-Adresse",
+	"forgot_password_submit": "Link anfordern",
+	"forgot_password_success": "Falls ein Konto mit dieser E-Mail-Adresse existiert, erhalten Sie in Kürze eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts.",
+	"forgot_password_back_to_login": "Zurück zum Login",
+	"reset_password_heading": "Neues Passwort festlegen",
+	"reset_password_label": "Neues Passwort",
+	"reset_password_confirm_label": "Passwort bestätigen",
+	"reset_password_submit": "Passwort speichern",
+	"reset_password_mismatch": "Die Passwörter stimmen nicht überein.",
+	"reset_password_success": "Ihr Passwort wurde erfolgreich geändert. Sie können sich jetzt anmelden.",
+	"login_forgot_password": "Passwort vergessen?"
 }

frontend/messages/en.json

@@ -159,6 +159,14 @@
 	"admin_section_new_group": "Create new group",
 	"admin_group_name_placeholder": "Group name (e.g. Editors)",
 	"admin_user_delete_confirm": "Really delete user {username}?",
+	"admin_btn_new_user": "New User",
+	"admin_user_new_heading": "Create new user",
+	"admin_user_edit_heading": "Edit user: {username}",
+	"admin_user_created": "User has been created.",
+	"admin_user_updated": "Changes saved.",
+	"admin_col_full_name": "Name",
+	"admin_label_new_password_optional": "New password (optional)",
+	"admin_label_initial_password": "Password",
 	"doc_file_error_preview": "Could not load preview.",
 	"doc_download_title": "Download",
 	"doc_tag_filter_title": "Filter by {name}",
@@ -194,5 +202,18 @@
 	"profile_password_mismatch": "The new passwords do not match.",
 	"profile_saved": "Saved.",
 	"profile_password_changed": "Password changed successfully.",
-	"user_profile_heading": "Profile of"
+	"user_profile_heading": "Profile of",
+	"error_invalid_reset_token": "The link is invalid or has expired.",
+	"forgot_password_heading": "Forgot password",
+	"forgot_password_email_label": "Email address",
+	"forgot_password_submit": "Request link",
+	"forgot_password_success": "If an account with this email address exists, you will shortly receive an email with a link to reset your password.",
+	"forgot_password_back_to_login": "Back to login",
+	"reset_password_heading": "Set new password",
+	"reset_password_label": "New password",
+	"reset_password_confirm_label": "Confirm password",
+	"reset_password_submit": "Save password",
+	"reset_password_mismatch": "The passwords do not match.",
+	"reset_password_success": "Your password has been changed successfully. You can now log in.",
+	"login_forgot_password": "Forgot password?"
 }

frontend/messages/es.json

@@ -159,6 +159,14 @@
 	"admin_section_new_group": "Crear nuevo grupo",
 	"admin_group_name_placeholder": "Nombre del grupo (p.ej. Editores)",
 	"admin_user_delete_confirm": "¿Realmente eliminar al usuario {username}?",
+	"admin_btn_new_user": "Nuevo usuario",
+	"admin_user_new_heading": "Crear nuevo usuario",
+	"admin_user_edit_heading": "Editar usuario: {username}",
+	"admin_user_created": "Usuario creado.",
+	"admin_user_updated": "Cambios guardados.",
+	"admin_col_full_name": "Nombre",
+	"admin_label_new_password_optional": "Nueva contraseña (opcional)",
+	"admin_label_initial_password": "Contraseña",
 	"doc_file_error_preview": "No se pudo cargar la vista previa.",
 	"doc_download_title": "Descargar",
 	"doc_tag_filter_title": "Filtrar por {name}",
@@ -194,5 +202,18 @@
 	"profile_password_mismatch": "Las nuevas contraseñas no coinciden.",
 	"profile_saved": "Guardado.",
 	"profile_password_changed": "Contraseña cambiada con éxito.",
-	"user_profile_heading": "Perfil de"
+	"user_profile_heading": "Perfil de",
+	"error_invalid_reset_token": "El enlace no es válido o ha expirado.",
+	"forgot_password_heading": "Contraseña olvidada",
+	"forgot_password_email_label": "Correo electrónico",
+	"forgot_password_submit": "Solicitar enlace",
+	"forgot_password_success": "Si existe una cuenta con esta dirección de correo electrónico, recibirá en breve un correo con un enlace para restablecer su contraseña.",
+	"forgot_password_back_to_login": "Volver al inicio de sesión",
+	"reset_password_heading": "Establecer nueva contraseña",
+	"reset_password_label": "Nueva contraseña",
+	"reset_password_confirm_label": "Confirmar contraseña",
+	"reset_password_submit": "Guardar contraseña",
+	"reset_password_mismatch": "Las contraseñas no coinciden.",
+	"reset_password_success": "Su contraseña ha sido cambiada con éxito. Ahora puede iniciar sesión.",
+	"login_forgot_password": "¿Olvidó su contraseña?"
 }

frontend/playwright.config.ts

@@ -12,7 +12,10 @@ export default defineConfig({
 	// The backend + DB + MinIO must be started separately (see README or CI workflow).
 	webServer: {
 		command: 'npm run dev -- --port 3000',
-		url: 'http://localhost:3000',
+		// Use the E2E_BASE_URL so that a pre-running server (e.g. the docker dev server
+		// on port 5173 during local development) is detected and reused without starting
+		// a new one. In CI the default is localhost:3000 where a fresh server is started.
+		url: process.env.E2E_BASE_URL ?? 'http://localhost:3000',
 		reuseExistingServer: true,
 		timeout: 120_000
 	},

frontend/src/hooks.server.ts

@@ -5,7 +5,7 @@ import { env } from 'process';
 import { cookieName, cookieMaxAge } from '$lib/paraglide/runtime';
 import { detectLocale } from '$lib/server/locale';
 
-const PUBLIC_PATHS = ['/login', '/logout'];
+const PUBLIC_PATHS = ['/login', '/logout', '/forgot-password', '/reset-password'];
 
 const handleLocaleDetection: Handle = ({ event, resolve }) => {
 	if (!event.cookies.get(cookieName)) {
@@ -71,6 +71,12 @@ export const handleFetch: HandleFetch = async ({ event, request, fetch }) => {
 			return fetch(request);
 		}
 
+		// Password reset endpoints are public — no auth header needed.
+		const PUBLIC_API_PATHS = ['/api/auth/forgot-password', '/api/auth/reset-password'];
+		if (PUBLIC_API_PATHS.some((p) => request.url.includes(p))) {
+			return fetch(request);
+		}
+
 		const token = event.cookies.get('auth_token');
 
 		if (!token) {

frontend/src/lib/errors.ts

@@ -13,6 +13,7 @@ export type ErrorCode =
 	| 'EMAIL_ALREADY_IN_USE'
 	| 'WRONG_CURRENT_PASSWORD'
 	| 'IMPORT_ALREADY_RUNNING'
+	| 'INVALID_RESET_TOKEN'
 	| 'UNAUTHORIZED'
 	| 'FORBIDDEN'
 	| 'VALIDATION_ERROR'
@@ -58,6 +59,8 @@ export function getErrorMessage(code: ErrorCode | string | undefined): string {
 			return m.error_wrong_current_password();
 		case 'IMPORT_ALREADY_RUNNING':
 			return m.error_import_already_running();
+		case 'INVALID_RESET_TOKEN':
+			return m.error_invalid_reset_token();
 		case 'UNAUTHORIZED':
 			return m.error_unauthorized();
 		case 'FORBIDDEN':

frontend/src/lib/generated/api.ts

@@ -4,6 +4,22 @@
  */
 
 export interface paths {
+    "/api/users/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getUser"];
+        put: operations["adminUpdateUser"];
+        post?: never;
+        delete: operations["deleteUser"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/users/me": {
         parameters: {
             query?: never;
@@ -164,6 +180,38 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/auth/reset-password": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["resetPassword"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/auth/forgot-password": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["forgotPassword"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/admin/trigger-import": {
         parameters: {
             query?: never;
@@ -196,22 +244,6 @@ export interface paths {
         patch: operations["updateGroup"];
         trace?: never;
     };
-    "/api/users/{id}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get: operations["getUser"];
-        put?: never;
-        post?: never;
-        delete: operations["deleteUser"];
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/api/tags": {
         parameters: {
             query?: never;
@@ -344,13 +376,15 @@ export interface paths {
 export type webhooks = Record<string, never>;
 export interface components {
     schemas: {
-        UpdateProfileDTO: {
+        AdminUpdateUserRequest: {
             firstName?: string;
             lastName?: string;
             /** Format: date */
             birthDate?: string;
             email?: string;
             contact?: string;
+            newPassword?: string;
+            groupIds?: string[];
         };
         AppUser: {
             /** Format: uuid */
@@ -374,6 +408,14 @@ export interface components {
             name: string;
             permissions: string[];
         };
+        UpdateProfileDTO: {
+            firstName?: string;
+            lastName?: string;
+            /** Format: date */
+            birthDate?: string;
+            email?: string;
+            contact?: string;
+        };
         Tag: {
             /** Format: uuid */
             id: string;
@@ -444,6 +486,11 @@ export interface components {
             email?: string;
             initialPassword?: string;
             groupIds?: string[];
+            firstName?: string;
+            lastName?: string;
+            /** Format: date */
+            birthDate?: string;
+            contact?: string;
         };
         ChangePasswordDTO: {
             currentPassword?: string;
@@ -453,6 +500,13 @@ export interface components {
             name?: string;
             permissions?: string[];
         };
+        ResetPasswordRequest: {
+            token?: string;
+            newPassword?: string;
+        };
+        ForgotPasswordRequest: {
+            email?: string;
+        };
         ImportStatus: {
             /** @enum {string} */
             state?: "IDLE" | "RUNNING" | "DONE" | "FAILED";
@@ -471,6 +525,74 @@ export interface components {
 }
 export type $defs = Record<string, never>;
 export interface operations {
+    getUser: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["AppUser"];
+                };
+            };
+        };
+    };
+    adminUpdateUser: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["AdminUpdateUserRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "*/*": components["schemas"]["AppUser"];
+                };
+            };
+        };
+    };
+    deleteUser: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     getCurrentUser: {
         parameters: {
             query?: never;
@@ -867,6 +989,50 @@ export interface operations {
             };
         };
     };
+    resetPassword: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ResetPasswordRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    forgotPassword: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ForgotPasswordRequest"];
+            };
+        };
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     triggerMassImport: {
         parameters: {
             query?: never;
@@ -933,48 +1099,6 @@ export interface operations {
             };
         };
     };
-    getUser: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            /** @description OK */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "*/*": components["schemas"]["AppUser"];
-                };
-            };
-        };
-    };
-    deleteUser: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            /** @description OK */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-        };
-    };
     searchTags: {
         parameters: {
             query?: {

frontend/src/routes/+layout.svelte

@@ -46,7 +46,7 @@ function clickOutside(node: HTMLElement) {
 </script>
 
 <div class="min-h-screen bg-white" data-hydrated={hydrated || undefined}>
-	{#if !page.url.pathname.startsWith('/login')}
+	{#if !['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))}
 		<header class="sticky top-0 z-50 border-b border-gray-100 bg-white">
 			<!-- De Gruyter Brill purple accent strip -->
 			<div class="h-1 bg-brand-purple"></div>

frontend/src/routes/admin/+page.server.ts

@@ -35,21 +35,6 @@ export async function load({ fetch, locals }) {
 }
 
 export const actions = {
-	createUser: async ({ request, fetch }) => {
-		const data = await request.formData();
-		const api = createApiClient(fetch);
-
-		const result = await api.POST('/api/users', {
-			body: {
-				username: data.get('username') as string,
-				initialPassword: data.get('password') as string,
-				groupIds: data.getAll('groupIds') as string[]
-			}
-		});
-
-		return toActionResult(result);
-	},
-
 	deleteUser: async ({ request, fetch }) => {
 		const data = await request.formData();
 		const id = data.get('id') as string;

frontend/src/routes/admin/+page.svelte

@@ -8,7 +8,6 @@ let { data, form } = $props();
 let activeTab = $state('users');
 let editingTagId: string | null = $state(null);
 let editingTagName = $state('');
-let editingUserId: string | null = $state(null);
 let editingGroupId: string | null = $state(null);
 
 const availablePermissions = ['WRITE_ALL', 'ADMIN', 'ADMIN_USER', 'ADMIN_TAG', 'ADMIN_PERMISSION'];
@@ -23,14 +22,6 @@ function cancelEditTag() {
 	editingTagName = '';
 }
 
-function startEditUser(id: string) {
-	editingUserId = id;
-}
-
-function cancelEditUser() {
-	editingUserId = null;
-}
-
 function startEditGroup(id: string) {
 	editingGroupId = id;
 }
@@ -80,6 +71,20 @@ function cancelEditGroup() {
 		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
 			<div class="flex items-center justify-between border-b border-gray-100 p-6">
 				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2>
+				<a
+					href="/admin/users/new"
+					class="inline-flex items-center gap-1 rounded-sm bg-brand-navy px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+				>
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					{m.admin_btn_new_user()}
+				</a>
 			</div>
 
 			<table class="min-w-full divide-y divide-gray-200">
@@ -88,200 +93,89 @@ function cancelEditGroup() {
 						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
 							>{m.admin_col_login()}</th
 						>
+						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
+							>{m.admin_col_full_name()}</th
+						>
 						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
 							>{m.admin_col_groups()}</th
 						>
-						{#if editingUserId}
-							<th
-								class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
-								>{m.admin_col_password()}</th
-							>
-						{/if}
+						<th
+							class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
+							>{m.admin_col_actions()}</th
+						>
 					</tr>
 				</thead>
 				<tbody class="divide-y divide-gray-200 bg-white">
 					{#each data.users as user (user.id)}
 						<tr class="group/row hover:bg-gray-50">
-							{#if editingUserId === user.id}
-								<!-- === EDIT MODE === -->
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
-									{user.username}
-									<input
-										type="hidden"
-										name="username"
-										value={user.username}
-										form="edit-form-{user.id}"
-									/>
-								</td>
-
-								<td class="px-6 py-4 text-sm">
-									<select
-										name="groupIds"
-										multiple
-										form="edit-form-{user.id}"
-										class="block min-h-[80px] w-full rounded border-brand-mint p-1 text-xs"
-									>
-										{#each data.groups as group (group.id)}
-											<option
-												value={group.id}
-												selected={user.groups.some((g: { id: string }) => g.id === group.id)}
+							<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900">
+								{user.username}
+							</td>
+							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
+								{#if user.firstName || user.lastName}
+									{user.firstName ?? ''} {user.lastName ?? ''}
+								{:else}
+									<span class="text-gray-300 italic">–</span>
+								{/if}
+							</td>
+							<td class="px-6 py-4 text-sm text-gray-500">
+								<div class="flex flex-wrap gap-1">
+									{#if user.groups && user.groups.length > 0}
+										{#each user.groups as group (group.id)}
+											<span
+												class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
 											>
 												{group.name}
-											</option>
+											</span>
 										{/each}
-									</select>
-									<p class="mt-1 text-[10px] text-gray-400">{m.admin_multiselect_hint()}</p>
-								</td>
-
-								<td class="px-6 py-4 text-right align-top whitespace-nowrap">
-									<form
-										id="edit-form-{user.id}"
-										method="POST"
-										action="?/createUser"
-										use:enhance={() =>
-											async ({ update }) => {
-												await update();
-												cancelEditUser();
-											}}
-										class="flex flex-col items-end gap-2"
+									{:else}
+										<span class="text-xs text-gray-400 italic">{m.admin_no_groups()}</span>
+									{/if}
+								</div>
+							</td>
+							<td class="px-6 py-4 text-right whitespace-nowrap">
+								<div class="flex items-center justify-end gap-4">
+									<a
+										href="/admin/users/{user.id}"
+										class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
 									>
-										<input
-											type="password"
-											name="password"
-											placeholder={m.admin_password_placeholder()}
-											class="w-32 rounded border border-brand-mint px-2 py-1 text-xs"
-										/>
+										{m.btn_edit()}
+									</a>
 
-										<div class="mt-1 flex gap-2">
-											<button
-												type="submit"
-												class="rounded bg-green-600 px-2 py-1 text-xs font-bold text-white uppercase hover:bg-green-700"
-											>
-												{m.btn_save()}
-											</button>
-											<button
-												type="button"
-												onclick={cancelEditUser}
-												class="rounded bg-gray-200 px-2 py-1 text-xs font-bold text-gray-600 uppercase hover:bg-gray-300"
-											>
-												{m.btn_cancel()}
-											</button>
-										</div>
-									</form>
-								</td>
-							{:else}
-								<!-- === VIEW MODE === -->
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
-									{user.username}
-								</td>
-								<td class="px-6 py-4 text-sm text-gray-500">
-									<div class="flex flex-wrap gap-1">
-										{#if user.groups && user.groups.length > 0}
-											{#each user.groups as group (group.id)}
-												<span
-													class="rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700 uppercase"
-												>
-													{group.name}
-												</span>
-											{/each}
-										{:else}
-											<span class="text-xs text-gray-400 italic">{m.admin_no_groups()}</span>
-										{/if}
-									</div>
-								</td>
-								<td class="px-6 py-4 text-right whitespace-nowrap">
-									<div class="flex items-center justify-end gap-4">
+									<form
+										method="POST"
+										action="?/deleteUser"
+										use:enhance={({ cancel }) => {
+											if (!confirm(m.admin_user_delete_confirm({ username: user.username }))) {
+												cancel();
+											}
+											return async ({ update }) => {
+												await update();
+											};
+										}}
+										class="flex items-center"
+									>
+										<input type="hidden" name="id" value={user.id} />
 										<button
-											onclick={() => startEditUser(user.id)}
-											class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
+											class="p-1 text-gray-300 transition-colors hover:text-red-600"
+											title={m.admin_btn_delete_user_title()}
 										>
-											{m.btn_edit()}
+											<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+												/>
+											</svg>
 										</button>
-
-										<form
-											method="POST"
-											action="?/deleteUser"
-											use:enhance={({ cancel }) => {
-												if (!confirm(m.admin_user_delete_confirm({ username: user.username }))) {
-													cancel();
-												}
-												return async ({ update }) => {
-													await update();
-												};
-											}}
-											class="flex items-center"
-										>
-											<input type="hidden" name="id" value={user.id} />
-											<button
-												class="p-1 text-gray-300 transition-colors hover:text-red-600"
-												title={m.admin_btn_delete_user_title()}
-											>
-												<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="2"
-														d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-													/>
-												</svg>
-											</button>
-										</form>
-									</div>
-								</td>
-							{/if}
+									</form>
+								</div>
+							</td>
 						</tr>
 					{/each}
 				</tbody>
 			</table>
-
-			<!-- Create User Form -->
-			<div class="border-t border-gray-200 bg-gray-50 p-6">
-				<h3 class="mb-4 text-xs font-bold tracking-wide text-gray-500 uppercase">
-					{m.admin_section_new_user()}
-				</h3>
-				<form
-					method="POST"
-					action="?/createUser"
-					use:enhance
-					class="grid grid-cols-1 items-start gap-4 md:grid-cols-6"
-				>
-					<input
-						type="text"
-						name="username"
-						placeholder="Login"
-						required
-						class="w-full rounded border-gray-300 text-sm"
-					/>
-					<input
-						type="password"
-						name="password"
-						placeholder={m.admin_col_password()}
-						required
-						class="w-full rounded border-gray-300 text-sm"
-					/>
-
-					<div class="md:col-span-3">
-						<select
-							name="groupIds"
-							multiple
-							class="h-[42px] w-full rounded border-gray-300 py-1 text-sm"
-							required
-							title={m.admin_multiselect_hint_multi()}
-						>
-							{#each data.groups as group (group.id)}
-								<option value={group.id}>{group.name}</option>
-							{/each}
-						</select>
-						<p class="mt-1 text-[10px] text-gray-400">{m.admin_multiselect_hint_full()}</p>
-					</div>
-
-					<button
-						type="submit"
-						class="h-[42px] w-full rounded bg-brand-navy text-sm font-bold text-white uppercase hover:bg-brand-mint hover:text-brand-navy"
-						>{m.btn_create()}</button
-					>
-				</form>
-			</div>
 		</div>
 	{:else if activeTab === 'tags'}
 		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>

frontend/src/routes/admin/page.svelte.spec.ts

@@ -0,0 +1,82 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+const makeGroup = (overrides = {}) => ({
+	id: 'g1',
+	name: 'Editoren',
+	permissions: ['WRITE_ALL'],
+	...overrides
+});
+
+const makeUser = (overrides = {}) => ({
+	id: 'u1',
+	username: 'max',
+	firstName: 'Max',
+	lastName: 'Mustermann',
+	email: 'max@example.com',
+	birthDate: undefined,
+	contact: undefined,
+	enabled: true,
+	groups: [makeGroup()],
+	createdAt: '2024-01-01T00:00:00Z',
+	...overrides
+});
+
+const baseData = {
+	user: undefined,
+	canWrite: true,
+	users: [makeUser()],
+	groups: [makeGroup()],
+	tags: []
+};
+
+afterEach(cleanup);
+
+// ─── Users tab ────────────────────────────────────────────────────────────────
+
+describe('Admin page – users tab', () => {
+	it('shows the username in the table', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByRole('cell', { name: 'max', exact: true })).toBeInTheDocument();
+	});
+
+	it('shows the full name in the table', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Max Mustermann/)).toBeInTheDocument();
+	});
+
+	it('shows a dash when user has no name set', async () => {
+		const data = { ...baseData, users: [makeUser({ firstName: undefined, lastName: undefined })] };
+		render(Page, { data, form: null });
+		await expect.element(page.getByText('–')).toBeInTheDocument();
+	});
+
+	it('shows group badges for the user', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText('Editoren')).toBeInTheDocument();
+	});
+
+	it('edit link points to /admin/users/[id]', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Bearbeiten/i }))
+			.toHaveAttribute('href', '/admin/users/u1');
+	});
+
+	it('new user button links to /admin/users/new', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Neuer Benutzer/i }))
+			.toHaveAttribute('href', '/admin/users/new');
+	});
+
+	it('shows "no groups" label when user has no groups', async () => {
+		const data = { ...baseData, users: [makeUser({ groups: [] })] };
+		render(Page, { data, form: null });
+		await expect.element(page.getByText(/Keine Gruppen/i)).toBeInTheDocument();
+	});
+});

frontend/src/routes/admin/users/[id]/+page.server.ts

@@ -0,0 +1,67 @@
+import { error, fail } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const load: PageServerLoad = async ({ params, fetch, locals }) => {
+	const user = locals.user;
+	const hasAdmin = user?.groups?.some((g: { permissions: string[] }) =>
+		g.permissions.includes('ADMIN')
+	);
+	if (!hasAdmin) throw error(403, getErrorMessage('FORBIDDEN'));
+
+	const api = createApiClient(fetch);
+	const [userResult, groupsResult] = await Promise.all([
+		api.GET('/api/users/{id}', { params: { path: { id: params.id } } }),
+		api.GET('/api/groups')
+	]);
+
+	if (!userResult.response.ok) throw error(404, getErrorMessage('USER_NOT_FOUND'));
+
+	return {
+		editUser: userResult.data!,
+		groups: groupsResult.data ?? []
+	};
+};
+
+export const actions: Actions = {
+	default: async ({ params, request, fetch }) => {
+		const data = await request.formData();
+
+		const newPassword = data.get('newPassword') as string;
+		const confirmPassword = data.get('confirmPassword') as string;
+		if (newPassword && newPassword !== confirmPassword) {
+			return fail(400, { error: getErrorMessage('PASSWORDS_DO_NOT_MATCH') });
+		}
+
+		const birthDateRaw = data.get('birthDate') as string;
+		const body = {
+			firstName: (data.get('firstName') as string) || null,
+			lastName: (data.get('lastName') as string) || null,
+			birthDate: birthDateRaw || null,
+			email: (data.get('email') as string) || null,
+			contact: (data.get('contact') as string) || null,
+			newPassword: newPassword || null,
+			groupIds: data.getAll('groupIds') as string[]
+		};
+
+		const res = await fetch(`/api/users/${params.id}`, {
+			method: 'PUT',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(body)
+		});
+
+		if (!res.ok) {
+			let code: string | undefined;
+			try {
+				const json = await res.json();
+				code = json?.code;
+			} catch {
+				// ignore
+			}
+			return fail(res.status, { error: getErrorMessage(code) });
+		}
+
+		return { success: true };
+	}
+};

frontend/src/routes/admin/users/[id]/+page.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { untrack } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
+
+let { data, form } = $props();
+
+function isoToGerman(iso: string | undefined): string {
+	if (!iso) return '';
+	const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+	if (!match) return '';
+	return `${match[3]}.${match[2]}.${match[1]}`;
+}
+
+function germanToIso(german: string): string {
+	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
+	if (!match) return '';
+	return `${match[3]}-${match[2]}-${match[1]}`;
+}
+
+let birthDateDisplay = $state(untrack(() => isoToGerman(data.editUser?.birthDate)));
+let birthDateIso = $state(untrack(() => data.editUser?.birthDate ?? ''));
+
+function handleBirthDateInput(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const digits = input.value.replace(/\D/g, '').slice(0, 8);
+	let formatted: string;
+	if (digits.length <= 2) {
+		formatted = digits;
+	} else if (digits.length <= 4) {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
+	} else {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
+	}
+	input.value = formatted;
+	birthDateDisplay = formatted;
+	birthDateIso = germanToIso(formatted);
+}
+</script>
+
+<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+	<a
+		href="/admin"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+	>
+		<svg
+			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="2"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+		</svg>
+		{m.btn_back_to_overview()}
+	</a>
+
+	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">
+		{m.admin_user_edit_heading({ username: data.editUser.username })}
+	</h1>
+
+	{#if form?.success}
+		<div class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">
+			{m.admin_user_updated()}
+		</div>
+	{/if}
+	{#if form?.error}
+		<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+			{form.error}
+		</div>
+	{/if}
+
+	<form method="POST" use:enhance class="space-y-6">
+		<!-- Profile card -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.profile_section_personal()}
+			</h2>
+
+			<div class="space-y-4">
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_first_name()}
+						</span>
+						<input
+							type="text"
+							name="firstName"
+							value={data.editUser.firstName ?? ''}
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+
+					<label class="block">
+						<span
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						>
+							{m.profile_label_last_name()}
+						</span>
+						<input
+							type="text"
+							name="lastName"
+							value={data.editUser.lastName ?? ''}
+							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						/>
+					</label>
+				</div>
+
+				<label class="block">
+					<span
+						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+					>
+						{m.profile_label_birth_date()}
+					</span>
+					<input
+						type="text"
+						placeholder="TT.MM.JJJJ"
+						value={birthDateDisplay}
+						oninput={handleBirthDateInput}
+						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					/>
+					<input type="hidden" name="birthDate" value={birthDateIso} />
+				</label>
+
+				<label class="block">
+					<span
+						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+					>
+						{m.profile_label_email()}
+					</span>
+					<input
+						type="email"
+						name="email"
+						value={data.editUser.email ?? ''}
+						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					/>
+				</label>
+
+				<label class="block">
+					<span
+						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+					>
+						{m.profile_label_contact()}
+					</span>
+					<textarea
+						name="contact"
+						rows="3"
+						placeholder={m.profile_contact_placeholder()}
+						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						>{data.editUser.contact ?? ''}</textarea
+					>
+				</label>
+			</div>
+		</div>
+
+		<!-- Groups card -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.admin_col_groups()}
+			</h2>
+
+			<div class="flex flex-wrap gap-3">
+				{#each data.groups as group (group.id)}
+					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
+						<input
+							type="checkbox"
+							name="groupIds"
+							value={group.id}
+							checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
+							class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
+						/>
+						{group.name}
+					</label>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Password card -->
+		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.admin_label_new_password_optional()}
+			</h2>
+
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<label class="block">
+					<span
+						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+					>
+						{m.profile_label_new_password()}
+					</span>
+					<input
+						type="password"
+						name="newPassword"
+						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					/>
+				</label>
+
+				<label class="block">
+					<span
+						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+					>
+						{m.profile_label_new_password_confirm()}
+					</span>
+					<input
+						type="password"
+						name="confirmPassword"
+						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					/>
+				</label>
+			</div>
+		</div>
+
+		<!-- Save bar -->
+		<div
+			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+		>
+			<a
+				href="/admin"
+				class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
+			>
+				{m.btn_cancel()}
+			</a>
+			<button
+				type="submit"
+				class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+			>
+				{m.btn_save()}
+			</button>
+		</div>
+	</form>
+</div>

frontend/src/routes/admin/users/[id]/page.svelte.spec.ts

@@ -0,0 +1,129 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+const groups = [
+	{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] },
+	{ id: 'g2', name: 'Admins', permissions: ['ADMIN'] }
+];
+
+const makeUser = (overrides = {}) => ({
+	id: 'u1',
+	username: 'max',
+	firstName: 'Max',
+	lastName: 'Mustermann',
+	email: 'max@example.com',
+	birthDate: '1985-03-22',
+	contact: 'Tel: 0123',
+	enabled: true,
+	groups: [{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] }],
+	createdAt: '2024-01-01T00:00:00Z',
+	...overrides
+});
+
+const baseData = { user: undefined, canWrite: true, editUser: makeUser(), groups };
+
+afterEach(cleanup);
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('Admin edit user page – rendering', () => {
+	it('renders the heading with username', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Benutzer bearbeiten: max/i)).toBeInTheDocument();
+	});
+
+	it('pre-fills first name from editUser data', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[name="firstName"]');
+		expect(input?.value).toBe('Max');
+	});
+
+	it('pre-fills last name from editUser data', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[name="lastName"]');
+		expect(input?.value).toBe('Mustermann');
+	});
+
+	it('pre-fills email from editUser data', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[name="email"]');
+		expect(input?.value).toBe('max@example.com');
+	});
+
+	it('pre-fills birth date in German format (dd.mm.yyyy)', async () => {
+		render(Page, { data: baseData, form: null });
+		const input = document.querySelector<HTMLInputElement>('input[placeholder="TT.MM.JJJJ"]');
+		expect(input?.value).toBe('22.03.1985');
+	});
+
+	it('pre-fills contact field', async () => {
+		render(Page, { data: baseData, form: null });
+		const textarea = document.querySelector<HTMLTextAreaElement>('textarea[name="contact"]');
+		expect(textarea?.value).toBe('Tel: 0123');
+	});
+
+	it('renders group checkboxes', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText('Editoren')).toBeInTheDocument();
+		await expect.element(page.getByText('Admins')).toBeInTheDocument();
+	});
+
+	it('pre-selects the groups the user already belongs to', async () => {
+		render(Page, { data: baseData, form: null });
+		const checkbox = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="groupIds"][value="g1"]'
+		);
+		expect(checkbox?.checked).toBe(true);
+	});
+
+	it('does not pre-select groups the user does not belong to', async () => {
+		render(Page, { data: baseData, form: null });
+		const checkbox = document.querySelector<HTMLInputElement>(
+			'input[type="checkbox"][name="groupIds"][value="g2"]'
+		);
+		expect(checkbox?.checked).toBe(false);
+	});
+
+	it('password fields are empty by default', async () => {
+		render(Page, { data: baseData, form: null });
+		const passwordInputs = document.querySelectorAll<HTMLInputElement>('input[type="password"]');
+		passwordInputs.forEach((input) => {
+			expect(input.value).toBe('');
+		});
+	});
+
+	it('cancel link points to /admin', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/admin');
+	});
+
+	it('renders the save button', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
+	});
+});
+
+// ─── Feedback messages ────────────────────────────────────────────────────────
+
+describe('Admin edit user page – feedback', () => {
+	it('shows success message when form.success is true', async () => {
+		render(Page, { data: baseData, form: { success: true } });
+		await expect.element(page.getByText(/Änderungen gespeichert/i)).toBeInTheDocument();
+	});
+
+	it('shows error message when form.error is set', async () => {
+		render(Page, { data: baseData, form: { error: 'Ungültige Eingabe.' } });
+		await expect.element(page.getByText('Ungültige Eingabe.')).toBeInTheDocument();
+	});
+
+	it('does not show success message when form is null', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Änderungen gespeichert/i)).not.toBeInTheDocument();
+	});
+});

frontend/src/routes/admin/users/new/+page.server.ts

@@ -0,0 +1,45 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const load: PageServerLoad = async ({ fetch, locals }) => {
+	const user = locals.user;
+	const hasAdmin = user?.groups?.some((g: { permissions: string[] }) =>
+		g.permissions.includes('ADMIN')
+	);
+	if (!hasAdmin) throw error(403, getErrorMessage('FORBIDDEN'));
+
+	const api = createApiClient(fetch);
+	const groupsResult = await api.GET('/api/groups');
+
+	return { groups: groupsResult.data ?? [] };
+};
+
+export const actions: Actions = {
+	default: async ({ request, fetch }) => {
+		const data = await request.formData();
+		const api = createApiClient(fetch);
+
+		const birthDateRaw = data.get('birthDate') as string;
+		const result = await api.POST('/api/users', {
+			body: {
+				username: data.get('username') as string,
+				initialPassword: data.get('password') as string,
+				email: (data.get('email') as string) || undefined,
+				groupIds: data.getAll('groupIds') as string[],
+				firstName: (data.get('firstName') as string) || null,
+				lastName: (data.get('lastName') as string) || null,
+				birthDate: birthDateRaw || null,
+				contact: (data.get('contact') as string) || null
+			}
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { error: getErrorMessage(code) });
+		}
+
+		throw redirect(303, '/admin');
+	}
+};

frontend/src/routes/admin/users/new/+page.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { data, form } = $props();
+
+function germanToIso(german: string): string {
+	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
+	if (!match) return '';
+	return `${match[3]}-${match[2]}-${match[1]}`;
+}
+
+let birthDateIso = $state('');
+
+function handleBirthDateInput(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const digits = input.value.replace(/\D/g, '').slice(0, 8);
+	let formatted: string;
+	if (digits.length <= 2) {
+		formatted = digits;
+	} else if (digits.length <= 4) {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
+	} else {
+		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
+	}
+	input.value = formatted;
+	birthDateIso = germanToIso(formatted);
+}
+</script>
+
+<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+	<a
+		href="/admin"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+	>
+		<svg
+			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke="currentColor"
+			stroke-width="2"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+		</svg>
+		{m.btn_back_to_overview()}
+	</a>
+
+	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.admin_user_new_heading()}</h1>
+
+	{#if form?.error}
+		<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+			{form.error}
+		</div>
+	{/if}
+
+	<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<form method="POST" use:enhance class="space-y-5">
+			<!-- Account -->
+			<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.admin_section_users()}
+			</h2>
+
+			<label class="block">
+				<span
+					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+				>
+					{m.admin_col_login()}
+				</span>
+				<input
+					type="text"
+					name="username"
+					required
+					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span
+					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+				>
+					{m.admin_label_initial_password()}
+				</span>
+				<input
+					type="password"
+					name="password"
+					required
+					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+				/>
+			</label>
+
+			<!-- Profile -->
+			<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.profile_section_personal()}
+			</h2>
+
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<label class="block">
+					<span
+						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+					>
+						{m.profile_label_first_name()}
+					</span>
+					<input
+						type="text"
+						name="firstName"
+						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					/>
+				</label>
+
+				<label class="block">
+					<span
+						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+					>
+						{m.profile_label_last_name()}
+					</span>
+					<input
+						type="text"
+						name="lastName"
+						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					/>
+				</label>
+			</div>
+
+			<label class="block">
+				<span
+					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+				>
+					{m.profile_label_birth_date()}
+				</span>
+				<input
+					type="text"
+					placeholder="TT.MM.JJJJ"
+					oninput={handleBirthDateInput}
+					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+				/>
+				<input type="hidden" name="birthDate" value={birthDateIso} />
+			</label>
+
+			<label class="block">
+				<span
+					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+				>
+					{m.profile_label_email()}
+				</span>
+				<input
+					type="email"
+					name="email"
+					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+				/>
+			</label>
+
+			<label class="block">
+				<span
+					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+				>
+					{m.profile_label_contact()}
+				</span>
+				<textarea
+					name="contact"
+					rows="3"
+					placeholder={m.profile_contact_placeholder()}
+					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+				></textarea>
+			</label>
+
+			<!-- Groups -->
+			<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
+				{m.admin_col_groups()}
+			</h2>
+
+			<div class="flex flex-wrap gap-3">
+				{#each data.groups as group (group.id)}
+					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
+						<input
+							type="checkbox"
+							name="groupIds"
+							value={group.id}
+							class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
+						/>
+						{group.name}
+					</label>
+				{/each}
+			</div>
+
+			<!-- Save bar -->
+			<div
+				class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
+			>
+				<a
+					href="/admin"
+					class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
+				>
+					{m.btn_cancel()}
+				</a>
+				<button
+					type="submit"
+					class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+				>
+					{m.btn_create()}
+				</button>
+			</div>
+		</form>
+	</div>
+</div>

frontend/src/routes/admin/users/new/page.svelte.spec.ts

@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Page from './+page.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+const groups = [
+	{ id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] },
+	{ id: 'g2', name: 'Admins', permissions: ['ADMIN'] }
+];
+
+const baseData = { user: undefined, canWrite: true, groups };
+
+afterEach(cleanup);
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('Admin new user page – rendering', () => {
+	it('renders the page heading', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText(/Neuen Benutzer anlegen/i)).toBeInTheDocument();
+	});
+
+	it('renders the login input', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByRole('textbox', { name: /Login/i })).toBeInTheDocument();
+	});
+
+	it('renders group checkboxes for each available group', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText('Editoren')).toBeInTheDocument();
+		await expect.element(page.getByText('Admins')).toBeInTheDocument();
+	});
+
+	it('cancel link points to /admin', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/admin');
+	});
+
+	it('back link points to /admin', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect
+			.element(page.getByRole('link', { name: /Zurück/i }))
+			.toHaveAttribute('href', '/admin');
+	});
+
+	it('renders the create button', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByRole('button', { name: /Erstellen/i })).toBeInTheDocument();
+	});
+});
+
+// ─── Error display ────────────────────────────────────────────────────────────
+
+describe('Admin new user page – error display', () => {
+	it('shows the error message when form has an error', async () => {
+		render(Page, { data: baseData, form: { error: 'Ein Fehler ist aufgetreten.' } });
+		await expect.element(page.getByText('Ein Fehler ist aufgetreten.')).toBeInTheDocument();
+	});
+
+	it('does not show error section when form is null', async () => {
+		render(Page, { data: baseData, form: null });
+		await expect.element(page.getByText('Ein Fehler ist aufgetreten.')).not.toBeInTheDocument();
+	});
+});

frontend/src/routes/documents/new/+page.server.ts

@@ -1,4 +1,4 @@
-import { error, fail, redirect } from '@sveltejs/kit';
+import { fail, redirect } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private';
 import { createApiClient } from '$lib/api.server';
 import { parseBackendError, getErrorMessage } from '$lib/errors';
@@ -16,7 +16,7 @@ export async function load({
 		locals.user?.groups?.some((g: { permissions: string[] }) =>
 			g.permissions.includes('WRITE_ALL')
 		) ?? false;
-	if (!canWrite) throw error(403, 'Forbidden');
+	if (!canWrite) throw redirect(303, '/');
 
 	const senderId = url.searchParams.get('senderId') || '';
 	const receiverId = url.searchParams.get('receiverId') || '';

frontend/src/routes/forgot-password/+page.server.ts

@@ -0,0 +1,20 @@
+import { fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+
+export const actions = {
+	default: async ({ request, fetch }) => {
+		const formData = await request.formData();
+		const email = formData.get('email') as string;
+
+		if (!email) {
+			return fail(400, { error: 'Email is required' });
+		}
+
+		const api = createApiClient(fetch);
+		await api.POST('/api/auth/forgot-password', { body: { email } });
+
+		// Always return success — never disclose whether the email exists
+		return { success: true };
+	}
+} satisfies Actions;

frontend/src/routes/forgot-password/+page.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { form }: { form?: { error?: string; success?: boolean } } = $props();
+</script>
+
+<div class="relative flex min-h-screen flex-col bg-white">
+	<!-- Accent strip -->
+	<div class="h-1 bg-brand-purple"></div>
+
+	<div class="flex flex-1 items-center justify-center px-4">
+		<div class="w-full max-w-sm">
+			<!-- Logo -->
+			<div class="mb-10 text-center">
+				<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
+					<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
+						>Familienarchiv</span
+					>
+				</a>
+			</div>
+
+			<!-- Card -->
+			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
+				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
+					{m.forgot_password_heading()}
+				</h1>
+
+				{#if form?.success}
+					<div class="mb-5 rounded-sm border border-green-200 bg-green-50 px-4 py-3">
+						<p class="font-sans text-xs text-green-700">{m.forgot_password_success()}</p>
+					</div>
+
+					<a
+						href="/login"
+						class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+						>{m.forgot_password_back_to_login()}</a
+					>
+				{:else}
+					<form method="POST" class="space-y-5">
+						<div>
+							<label
+								for="email"
+								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+								>{m.forgot_password_email_label()}</label
+							>
+							<input
+								type="email"
+								name="email"
+								id="email"
+								required
+								autocomplete="email"
+								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+							/>
+						</div>
+
+						{#if form?.error}
+							<div class="text-center font-sans text-xs font-medium text-red-600">{form.error}</div>
+						{/if}
+
+						<button
+							type="submit"
+							class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+						>
+							{m.forgot_password_submit()}
+						</button>
+
+						<div class="mt-4 text-center">
+							<a
+								href="/login"
+								class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+								>{m.forgot_password_back_to_login()}</a
+							>
+						</div>
+					</form>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<!-- Footer -->
+	<div class="py-4 text-center">
+		<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
+	</div>
+</div>

frontend/src/routes/login/+page.svelte

@@ -89,6 +89,14 @@ const activeLocale = $derived(getLocale().toUpperCase());
 					>
 						{m.login_btn_submit()}
 					</button>
+
+					<div class="mt-4 text-center">
+						<a
+							href="/forgot-password"
+							class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+							>{m.login_forgot_password()}</a
+						>
+					</div>
 				</form>
 			</div>
 		</div>

frontend/src/routes/reset-password/+page.server.ts

@@ -0,0 +1,34 @@
+import { fail } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { parseBackendError } from '$lib/errors';
+
+export const load: PageServerLoad = async ({ url }) => {
+	const token = url.searchParams.get('token');
+	return { token };
+};
+
+export const actions = {
+	default: async ({ request, fetch }) => {
+		const formData = await request.formData();
+		const token = formData.get('token') as string;
+		const newPassword = formData.get('newPassword') as string;
+		const confirmPassword = formData.get('confirmPassword') as string;
+
+		if (newPassword !== confirmPassword) {
+			return fail(400, { error: 'MISMATCH' });
+		}
+
+		const api = createApiClient(fetch);
+		const result = await api.POST('/api/auth/reset-password', {
+			body: { token, newPassword }
+		});
+
+		if (!result.response.ok) {
+			const backendError = await parseBackendError(result.response);
+			return fail(400, { error: backendError?.code ?? 'INTERNAL_ERROR' });
+		}
+
+		return { success: true };
+	}
+} satisfies Actions;

frontend/src/routes/reset-password/+page.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { getErrorMessage } from '$lib/errors';
+
+let {
+	data,
+	form
+}: {
+	data: { token: string | null };
+	form?: { error?: string; success?: boolean };
+} = $props();
+</script>
+
+<div class="relative flex min-h-screen flex-col bg-white">
+	<!-- Accent strip -->
+	<div class="h-1 bg-brand-purple"></div>
+
+	<div class="flex flex-1 items-center justify-center px-4">
+		<div class="w-full max-w-sm">
+			<!-- Logo -->
+			<div class="mb-10 text-center">
+				<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
+					<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
+						>Familienarchiv</span
+					>
+				</a>
+			</div>
+
+			<!-- Card -->
+			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
+				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
+					{m.reset_password_heading()}
+				</h1>
+
+				{#if form?.success}
+					<div class="mb-5 rounded-sm border border-green-200 bg-green-50 px-4 py-3">
+						<p class="font-sans text-xs text-green-700">{m.reset_password_success()}</p>
+					</div>
+
+					<a
+						href="/login"
+						class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+						>{m.forgot_password_back_to_login()}</a
+					>
+				{:else}
+					<form method="POST" class="space-y-5">
+						<input type="hidden" name="token" value={data.token ?? ''} />
+
+						<div>
+							<label
+								for="newPassword"
+								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+								>{m.reset_password_label()}</label
+							>
+							<input
+								type="password"
+								name="newPassword"
+								id="newPassword"
+								required
+								autocomplete="new-password"
+								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+							/>
+						</div>
+
+						<div>
+							<label
+								for="confirmPassword"
+								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+								>{m.reset_password_confirm_label()}</label
+							>
+							<input
+								type="password"
+								name="confirmPassword"
+								id="confirmPassword"
+								required
+								autocomplete="new-password"
+								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+							/>
+						</div>
+
+						{#if form?.error}
+							<div class="text-center font-sans text-xs font-medium text-red-600">
+								{form.error === 'MISMATCH'
+									? m.reset_password_mismatch()
+									: getErrorMessage(form.error)}
+							</div>
+						{/if}
+
+						<button
+							type="submit"
+							class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+						>
+							{m.reset_password_submit()}
+						</button>
+
+						<div class="mt-4 text-center">
+							<a
+								href="/login"
+								class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+								>{m.forgot_password_back_to_login()}</a
+							>
+						</div>
+					</form>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<!-- Footer -->
+	<div class="py-4 text-center">
+		<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
+	</div>
+</div>