spsays-training/components/auth/change-password-modal.tsx

"use client";

/**
 * ChangePasswordModal — three-field "change my password" form rendered in
 * a centred portal dialog. Mirrors the AuthModal pattern (backdrop +
 * fixed-position card + Esc-to-close + body scroll-lock) so the look and
 * feel matches.
 *
 * Opens from /settings → Authentication → Change password.
 *
 * On success: closes itself, refreshes the user state via auth-provider's
 * setUser so the rest of the app sees the fresh JWT-backed user. The BFF
 * has already re-issued the session cookie, so the caller stays signed in
 * on this device.
 */

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { X } from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { auth, AuthError } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function ChangePasswordModal({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const { user, setUser } = useAuth();
  // OAuth-only accounts have no existing password to verify against — the
  // modal renders two fields (new + confirm) instead of three. Backend
  // accepts current_password as optional in this case.
  const requireCurrent = user?.has_password ?? true;
  const [current, setCurrent] = useState("");
  const [next, setNext] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  // Reset form whenever the modal closes — re-opening should start blank,
  // not show the previous attempt.
  useEffect(() => {
    if (open) return;
    setCurrent("");
    setNext("");
    setConfirm("");
    setError(null);
    setSubmitting(false);
  }, [open]);

  // Esc-to-close.
  useEffect(() => {
    if (!open) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  // Body scroll-lock while the modal is open.
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  if (!open || typeof document === "undefined") return null;

  async function onSubmit(e: React.SyntheticEvent) {
    e.preventDefault();
    setError(null);
    if (next.length < 8) {
      setError("New password must be at least 8 characters.");
      return;
    }
    if (next !== confirm) {
      setError("New passwords don't match.");
      return;
    }
    setSubmitting(true);
    try {
      const updated = await auth.changePassword(current, next);
      setUser(updated);
      onClose();
    } catch (err) {
      setError(
        err instanceof AuthError ? err.message : "Could not change password.",
      );
    } finally {
      setSubmitting(false);
    }
  }

  return createPortal(
    <>
      <div
        className="fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
        onClick={onClose}
        aria-hidden
      />
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="change-password-title"
        className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
      >
        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
          <header className="flex items-center justify-between px-5 py-4 border-b border-border">
            <h2
              id="change-password-title"
              className="font-[family-name:var(--font-title)] font-semibold text-xl text-foreground"
            >
              Change password
            </h2>
            <button
              type="button"
              onClick={onClose}
              className="size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
              aria-label="Close"
            >
              <X className="size-4" />
            </button>
          </header>

          <form onSubmit={onSubmit} className="px-5 py-5 space-y-4">
            {requireCurrent ? (
              <div className="space-y-1.5">
                <Label htmlFor="cp-current">Current password</Label>
                <Input
                  id="cp-current"
                  type="password"
                  autoComplete="current-password"
                  required
                  value={current}
                  onChange={(e) => setCurrent(e.target.value)}
                />
              </div>
            ) : null}
            <div className="space-y-1.5">
              <Label htmlFor="cp-new">New password</Label>
              <Input
                id="cp-new"
                type="password"
                autoComplete="new-password"
                minLength={8}
                required
                value={next}
                onChange={(e) => setNext(e.target.value)}
              />
              <p className="text-xs text-muted-foreground">
                At least 8 characters.
              </p>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="cp-confirm">Confirm new password</Label>
              <Input
                id="cp-confirm"
                type="password"
                autoComplete="new-password"
                required
                value={confirm}
                onChange={(e) => setConfirm(e.target.value)}
              />
            </div>

            {error ? (
              <p className="text-sm text-destructive">{error}</p>
            ) : null}

            <div className="flex items-center justify-end gap-2 pt-1">
              <Button
                type="button"
                variant="ghost"
                onClick={onClose}
                className="h-10 px-4 text-sm"
              >
                Cancel
              </Button>
              <Button
                type="submit"
                disabled={submitting}
                className="h-10 px-4 text-sm"
              >
                {submitting ? "Saving…" : "Save changes"}
              </Button>
            </div>
          </form>
        </div>
      </div>
    </>,
    document.body,
  );
}