fix(auth): implement password reset functionality

- Add sendResetPasswordEmail function to email.ts
- Configure sendResetPassword in better-auth config
- Create /reset-password page to handle password reset after email link click

apps/web/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { Button } from '@tpmjs/ui/Button/Button';
+import { Input } from '@tpmjs/ui/Input/Input';
+import { Label } from '@tpmjs/ui/Label/Label';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { Suspense, useState } from 'react';
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams();
+  const token = searchParams.get('token');
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters');
+      return;
+    }
+
+    if (!token) {
+      setError('Invalid or missing reset token');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await fetch('/api/auth/reset-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          token,
+          newPassword: password,
+        }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        setError(data.message || 'Failed to reset password');
+        setLoading(false);
+        return;
+      }
+
+      setSuccess(true);
+      setLoading(false);
+    } catch (err) {
+      console.error('Reset password exception:', err);
+      setError('An unexpected error occurred');
+      setLoading(false);
+    }
+  }
+
+  if (!token) {
+    return (
+      <div className="space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-foreground">Invalid Link</h1>
+          <p className="text-foreground-secondary mt-2">
+            This password reset link is invalid or has expired.
+          </p>
+        </div>
+
+        <div className="bg-error/10 border border-error/20 text-error px-4 py-3 rounded-md text-sm">
+          Please request a new password reset link.
+        </div>
+
+        <p className="text-center text-sm text-foreground-secondary">
+          <Link href="/forgot-password" className="text-foreground hover:underline font-medium">
+            Request new reset link
+          </Link>
+        </p>
+      </div>
+    );
+  }
+
+  if (success) {
+    return (
+      <div className="space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-foreground">Password Reset</h1>
+          <p className="text-foreground-secondary mt-2">
+            Your password has been successfully reset.
+          </p>
+        </div>
+
+        <div className="bg-success/10 border border-success/20 text-success px-4 py-3 rounded-md text-sm">
+          You can now sign in with your new password.
+        </div>
+
+        <Link href="/sign-in">
+          <Button className="w-full">Sign In</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold text-foreground">Set New Password</h1>
+        <p className="text-foreground-secondary mt-2">Enter your new password below</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div className="bg-error/10 border border-error/20 text-error px-4 py-3 rounded-md text-sm">
+            {error}
+          </div>
+        )}
+
+        <div>
+          <Label htmlFor="password">New Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+            placeholder="At least 8 characters"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="confirmPassword">Confirm Password</Label>
+          <Input
+            id="confirmPassword"
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            required
+            placeholder="Confirm your password"
+          />
+        </div>
+
+        <Button type="submit" disabled={loading} loading={loading} className="w-full">
+          {loading ? 'Resetting...' : 'Reset Password'}
+        </Button>
+      </form>
+
+      <p className="text-center text-sm text-foreground-secondary">
+        Remember your password?{' '}
+        <Link href="/sign-in" className="text-foreground hover:underline font-medium">
+          Sign in
+        </Link>
+      </p>
+    </div>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="space-y-6">
+          <div className="text-center">
+            <h1 className="text-2xl font-bold text-foreground">Loading...</h1>
+          </div>
+        </div>
+      }
+    >
+      <ResetPasswordForm />
+    </Suspense>
+  );
+}

apps/web/src/lib/auth.ts

@@ -1,7 +1,7 @@
 import { prisma } from '@tpmjs/db';
 import { betterAuth } from 'better-auth';
 import { prismaAdapter } from 'better-auth/adapters/prisma';
-import { sendVerificationEmail } from './email';
+import { sendResetPasswordEmail, sendVerificationEmail } from './email';
 
 // Determine base URL for auth - MUST match the domain users are browsing on
 // VERCEL_URL is the deployment URL (e.g., tpmjs-xxx.vercel.app), not the custom domain
@@ -26,6 +26,9 @@ export const auth = betterAuth({
   emailAndPassword: {
     enabled: true,
     requireEmailVerification: true,
+    sendResetPassword: async ({ user, url }) => {
+      await sendResetPasswordEmail(user.email, url);
+    },
   },
   emailVerification: {
     sendVerificationEmail: async ({ user, url }) => {

apps/web/src/lib/email.ts

@@ -49,3 +49,37 @@ export async function sendVerificationEmail(to: string, verificationUrl: string)
     throw new Error('Failed to send verification email');
   }
 }
+
+export async function sendResetPasswordEmail(to: string, resetUrl: string) {
+  const { error } = await getResend().emails.send({
+    from: 'TPMJS <noreply@tpmjs.com>',
+    to,
+    subject: 'Reset your password - TPMJS',
+    html: `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        </head>
+        <body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
+          <h1 style="color: #333; font-size: 24px; margin-bottom: 20px;">Reset your password</h1>
+          <p style="color: #666; font-size: 16px; line-height: 1.5; margin-bottom: 20px;">
+            Click the button below to reset your password. If you didn't request this, you can safely ignore this email.
+          </p>
+          <a href="${resetUrl}" style="display: inline-block; background-color: #000; color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-size: 16px; font-weight: 500;">
+            Reset Password
+          </a>
+          <p style="color: #999; font-size: 14px; margin-top: 30px;">
+            This link will expire in 1 hour for security reasons.
+          </p>
+        </body>
+      </html>
+    `,
+  });
+
+  if (error) {
+    console.error('Failed to send reset password email:', error);
+    throw new Error('Failed to send reset password email');
+  }
+}