tessera-ctl/apps/web/src/app/(portal)/change-password/page.tsx

'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>
  );
}