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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user