feat(02-03): password reset flow, force-change interceptor, MailModule

- MailModule with SMTP transport configured from ENV variables
- MailService for password reset and welcome emails (plain text, i18n)
- Password reset flow: request-reset (public), reset-password (token-based)
- Change password for logged-in users with current password verification
- Admin reset password endpoint (ADMIN/SUPER_ADMIN only, D-03)
- ForcePasswordChangeInterceptor blocks all routes except change-password,
  logout, me when mustChangePassword=true (D-06, Pitfall 5)
- Frontend: reset-password request page, token reset page, change-password page
- Forgot password link added to login page
- MailHog service added to docker-compose.dev.yml for dev email testing
- SMTP env vars added to docker-compose.yml (defaults to MailHog)
- Complete DE/EN i18n coverage for reset and change password flows
- SUS packages installed: @nestjs-modules/mailer, nodemailer, ldapts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-18 13:48:23 +02:00
parent eaaa9adfa5
commit ac617f4fe5
20 changed files with 4216 additions and 12 deletions
+11
View File
@@ -3,6 +3,7 @@
import { useState, useTransition } from 'react';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { login } from '@/lib/auth-actions';
/**
@@ -154,6 +155,16 @@ export default function LoginPage() {
</label>
</div>
{/* Forgot password link (D-03) */}
<div className="flex justify-end">
<Link
href="/reset-password"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
{t('forgotPassword')}
</Link>
</div>
{/* Submit button */}
<button
type="submit"
@@ -0,0 +1,211 @@
'use client';
import { useState, useTransition, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
/**
* Password reset form with token validation (D-03 self-service).
* User arrives here from the reset email link.
* On success, redirects to /login after 3 seconds.
* Part of (auth) route group -- no sidebar/header (D-04).
*/
export default function ResetPasswordTokenPage() {
const t = useTranslations('auth');
const router = useRouter();
const params = useParams();
const token = params.token as string;
const [isPending, startTransition] = useTransition();
const [success, setSuccess] = useState(false);
const [error, setError] = useState<string | null>(null);
const [passwordMismatch, setPasswordMismatch] = useState(false);
// Redirect to login after successful reset
useEffect(() => {
if (!success) return;
const timer = setTimeout(() => {
router.push('/login');
}, 3000);
return () => clearTimeout(timer);
}, [success, router]);
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setError(null);
setPasswordMismatch(false);
const formData = new FormData(e.currentTarget);
const newPassword = formData.get('newPassword') as string;
const confirmPassword = formData.get('confirmPassword') as string;
if (newPassword !== confirmPassword) {
setPasswordMismatch(true);
return;
}
startTransition(async () => {
try {
const response = await fetch(`${API_URL}/auth/reset-password`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token, newPassword }),
});
if (!response.ok) {
const data = await response.json().catch(() => null);
const message = data?.message || '';
if (message.includes('expired')) {
setError('tokenExpired');
} else if (message.includes('used')) {
setError('tokenUsed');
} else {
setError('tokenInvalid');
}
return;
}
setSuccess(true);
} catch {
setError('networkError');
}
});
}
return (
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
<div className="w-full max-w-sm space-y-8">
{/* Heading */}
<div className="text-center">
<h1 className="text-3xl font-extrabold text-primary tracking-tight">
Tessera
</h1>
<h2 className="mt-4 text-2xl font-bold text-foreground">
{t('resetPassword.newPasswordTitle')}
</h2>
</div>
{success ? (
/* Success message with redirect notice */
<div className="space-y-4">
<div className="rounded-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 px-4 py-3 text-sm text-green-800 dark:text-green-200">
{t('resetPassword.resetSuccess')}
</div>
<p className="text-sm text-muted-foreground text-center">
{t('resetPassword.redirecting')}
</p>
<Link
href="/login"
className="flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity"
>
{t('resetPassword.backToLogin')}
</Link>
</div>
) : (
<>
{/* Error message */}
{error && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
{t(`resetPassword.${error}`)}
</div>
)}
{/* Password mismatch */}
{passwordMismatch && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
{t('resetPassword.passwordMismatch')}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-5">
{/* New password */}
<div className="space-y-2">
<label
htmlFor="newPassword"
className="text-sm font-medium text-foreground"
>
{t('resetPassword.newPassword')}
</label>
<input
id="newPassword"
name="newPassword"
type="password"
required
minLength={8}
autoComplete="new-password"
autoFocus
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
placeholder={t('resetPassword.newPassword')}
/>
</div>
{/* Confirm password */}
<div className="space-y-2">
<label
htmlFor="confirmPassword"
className="text-sm font-medium text-foreground"
>
{t('resetPassword.confirmPassword')}
</label>
<input
id="confirmPassword"
name="confirmPassword"
type="password"
required
minLength={8}
autoComplete="new-password"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
placeholder={t('resetPassword.confirmPassword')}
/>
</div>
<button
type="submit"
disabled={isPending}
className="flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
>
{isPending ? (
<svg
className="animate-spin h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
/>
</svg>
) : (
t('resetPassword.submitReset')
)}
</button>
</form>
<div className="text-center">
<Link
href="/login"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
{t('resetPassword.backToLogin')}
</Link>
</div>
</>
)}
</div>
</div>
);
}
@@ -0,0 +1,151 @@
'use client';
import { useState, useTransition } from 'react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
/**
* Password reset request page (D-03 self-service).
* Simple form with email input. Always shows success message
* regardless of whether email exists (T-02-12: prevent enumeration).
* Part of (auth) route group -- no sidebar/header (D-04).
*/
export default function ResetPasswordPage() {
const t = useTranslations('auth');
const [isPending, startTransition] = useTransition();
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState<string | null>(null);
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setError(null);
const formData = new FormData(e.currentTarget);
const email = formData.get('email') as string;
if (!email) return;
startTransition(async () => {
try {
const response = await fetch(`${API_URL}/auth/request-reset`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email }),
});
if (!response.ok) {
setError('networkError');
return;
}
setSubmitted(true);
} catch {
setError('networkError');
}
});
}
return (
<div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
<div className="w-full max-w-sm space-y-8">
{/* Heading */}
<div className="text-center">
<h1 className="text-3xl font-extrabold text-primary tracking-tight">
Tessera
</h1>
<h2 className="mt-4 text-2xl font-bold text-foreground">
{t('resetPassword.title')}
</h2>
</div>
{submitted ? (
/* Success message -- always shown, prevents email enumeration */
<div className="space-y-4">
<div className="rounded-md bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 px-4 py-3 text-sm text-green-800 dark:text-green-200">
{t('resetPassword.success')}
</div>
<Link
href="/login"
className="flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity"
>
{t('resetPassword.backToLogin')}
</Link>
</div>
) : (
/* Email form */
<>
{/* Error message */}
{error && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive">
{t(`error.${error}`)}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<label
htmlFor="email"
className="text-sm font-medium text-foreground"
>
{t('resetPassword.email')}
</label>
<input
id="email"
name="email"
type="email"
required
autoComplete="email"
autoFocus
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
placeholder={t('resetPassword.email')}
/>
</div>
<button
type="submit"
disabled={isPending}
className="flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
>
{isPending ? (
<svg
className="animate-spin h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
/>
</svg>
) : (
t('resetPassword.submit')
)}
</button>
</form>
<div className="text-center">
<Link
href="/login"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
{t('resetPassword.backToLogin')}
</Link>
</div>
</>
)}
</div>
</div>
);
}
@@ -0,0 +1,207 @@
'use client';
import { useState, useTransition, useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { fetchCurrentUser } from '@/lib/auth-actions';
import { useAuthStore } from '@/lib/stores/auth-store';
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
/**
* Change password page (D-06 force-change + voluntary change).
* Inside (portal) route group -- has sidebar/header.
* Shows a notice when user was forced here by mustChangePassword flag.
* On success, redirects to dashboard.
*/
export default function ChangePasswordPage() {
const t = useTranslations('auth');
const router = useRouter();
const { user, setUser } = useAuthStore();
const [isPending, startTransition] = useTransition();
const [error, setError] = useState<string | null>(null);
const [passwordMismatch, setPasswordMismatch] = useState(false);
const [isForced, setIsForced] = useState(false);
// Detect if this is a forced password change
useEffect(() => {
async function checkForceChange() {
const currentUser = await fetchCurrentUser();
if (currentUser?.mustChangePassword) {
setIsForced(true);
}
}
checkForceChange();
}, []);
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setError(null);
setPasswordMismatch(false);
const formData = new FormData(e.currentTarget);
const currentPassword = formData.get('currentPassword') as string;
const newPassword = formData.get('newPassword') as string;
const confirmPassword = formData.get('confirmPassword') as string;
if (newPassword !== confirmPassword) {
setPasswordMismatch(true);
return;
}
startTransition(async () => {
try {
// Get the session cookie to send with the request
const response = await fetch(`${API_URL}/auth/change-password`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ currentPassword, newPassword }),
credentials: 'include',
});
if (!response.ok) {
const data = await response.json().catch(() => null);
if (data?.message === 'Current password is incorrect') {
setError('wrongCurrentPassword');
} else {
setError('networkError');
}
return;
}
// Update auth store to clear mustChangePassword
if (user) {
setUser({ ...user });
}
// Redirect to dashboard
router.push('/');
router.refresh();
} catch {
setError('networkError');
}
});
}
return (
<div className="mx-auto max-w-md py-8 px-4">
<h1 className="text-2xl font-bold text-foreground mb-6">
{t('changePassword.title')}
</h1>
{/* Force-change notice (D-06) */}
{isForced && (
<div className="rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 px-4 py-3 text-sm text-yellow-800 dark:text-yellow-200 mb-6">
{t('changePassword.forceChangeNotice')}
</div>
)}
{/* Error message */}
{error && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive mb-6">
{t(`changePassword.${error}`)}
</div>
)}
{/* Password mismatch */}
{passwordMismatch && (
<div className="rounded-md bg-destructive/10 border border-destructive/20 px-4 py-3 text-sm text-destructive mb-6">
{t('changePassword.passwordMismatch')}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-5">
{/* Current password */}
<div className="space-y-2">
<label
htmlFor="currentPassword"
className="text-sm font-medium text-foreground"
>
{t('changePassword.currentPassword')}
</label>
<input
id="currentPassword"
name="currentPassword"
type="password"
required
autoComplete="current-password"
autoFocus
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
placeholder={t('changePassword.currentPassword')}
/>
</div>
{/* New password */}
<div className="space-y-2">
<label
htmlFor="newPassword"
className="text-sm font-medium text-foreground"
>
{t('changePassword.newPassword')}
</label>
<input
id="newPassword"
name="newPassword"
type="password"
required
minLength={8}
autoComplete="new-password"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
placeholder={t('changePassword.newPassword')}
/>
</div>
{/* Confirm new password */}
<div className="space-y-2">
<label
htmlFor="confirmPassword"
className="text-sm font-medium text-foreground"
>
{t('changePassword.confirmPassword')}
</label>
<input
id="confirmPassword"
name="confirmPassword"
type="password"
required
minLength={8}
autoComplete="new-password"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
placeholder={t('changePassword.confirmPassword')}
/>
</div>
<button
type="submit"
disabled={isPending}
className="flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
>
{isPending ? (
<svg
className="animate-spin h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
/>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
/>
</svg>
) : (
t('changePassword.submit')
)}
</button>
</form>
</div>
);
}
+30
View File
@@ -23,12 +23,42 @@
"password": "Passwort",
"rememberMe": "Angemeldet bleiben",
"submit": "Anmelden",
"forgotPassword": "Passwort vergessen?",
"error": {
"invalidCredentials": "Benutzername oder Passwort ungueltig",
"networkError": "Verbindungsfehler. Bitte versuchen Sie es erneut."
},
"branding": {
"tagline": "Modulare Workflow-Plattform fuer Ihr Unternehmen"
},
"resetPassword": {
"title": "Passwort zuruecksetzen",
"email": "E-Mail-Adresse",
"submit": "Link senden",
"success": "Falls ein Konto mit dieser E-Mail existiert, wurde ein Link zum Zuruecksetzen gesendet.",
"backToLogin": "Zurueck zur Anmeldung",
"newPasswordTitle": "Neues Passwort festlegen",
"newPassword": "Neues Passwort",
"confirmPassword": "Passwort bestaetigen",
"submitReset": "Passwort zuruecksetzen",
"resetSuccess": "Ihr Passwort wurde erfolgreich zurueckgesetzt.",
"redirecting": "Sie werden in wenigen Sekunden zur Anmeldung weitergeleitet...",
"tokenExpired": "Der Link zum Zuruecksetzen ist abgelaufen. Bitte fordern Sie einen neuen an.",
"tokenUsed": "Dieser Link wurde bereits verwendet. Bitte fordern Sie einen neuen an.",
"tokenInvalid": "Der Link zum Zuruecksetzen ist ungueltig.",
"passwordMismatch": "Die Passwoerter stimmen nicht ueberein."
},
"changePassword": {
"title": "Passwort aendern",
"currentPassword": "Aktuelles Passwort",
"newPassword": "Neues Passwort",
"confirmPassword": "Neues Passwort bestaetigen",
"submit": "Passwort aendern",
"success": "Ihr Passwort wurde erfolgreich geaendert.",
"forceChangeNotice": "Aus Sicherheitsgruenden muessen Sie Ihr Passwort aendern, bevor Sie fortfahren koennen.",
"wrongCurrentPassword": "Das aktuelle Passwort ist falsch.",
"networkError": "Verbindungsfehler. Bitte versuchen Sie es erneut.",
"passwordMismatch": "Die Passwoerter stimmen nicht ueberein."
}
},
"header": {
+30
View File
@@ -23,12 +23,42 @@
"password": "Password",
"rememberMe": "Remember me",
"submit": "Sign In",
"forgotPassword": "Forgot password?",
"error": {
"invalidCredentials": "Invalid username or password",
"networkError": "Connection error. Please try again."
},
"branding": {
"tagline": "Modular workflow platform for your organization"
},
"resetPassword": {
"title": "Reset Password",
"email": "Email address",
"submit": "Send Reset Link",
"success": "If an account with this email exists, a reset link has been sent.",
"backToLogin": "Back to Sign In",
"newPasswordTitle": "Set New Password",
"newPassword": "New Password",
"confirmPassword": "Confirm Password",
"submitReset": "Reset Password",
"resetSuccess": "Your password has been reset successfully.",
"redirecting": "You will be redirected to the sign in page in a few seconds...",
"tokenExpired": "This reset link has expired. Please request a new one.",
"tokenUsed": "This reset link has already been used. Please request a new one.",
"tokenInvalid": "This reset link is invalid.",
"passwordMismatch": "Passwords do not match."
},
"changePassword": {
"title": "Change Password",
"currentPassword": "Current Password",
"newPassword": "New Password",
"confirmPassword": "Confirm New Password",
"submit": "Change Password",
"success": "Your password has been changed successfully.",
"forceChangeNotice": "For security reasons, you must change your password before continuing.",
"wrongCurrentPassword": "The current password is incorrect.",
"networkError": "Connection error. Please try again.",
"passwordMismatch": "Passwords do not match."
}
},
"header": {