musicshare/apps/web/src/app/reset-password/page.tsx

'use client';

import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useState } from 'react';
import type { MeDTO } from '@musicshare/shared';
import { api, useMe } from '@/lib/api';

export default function ResetPasswordPage() {
  return (
    <Suspense>
      <ResetPassword />
    </Suspense>
  );
}

function ResetPassword() {
  const token = useSearchParams().get('token');
  const router = useRouter();
  const { mutate } = useMe();
  const [show, setShow] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  if (!token) {
    return (
      <div className="card form narrow">
        <h1>Link incomplete</h1>
        <p>This reset link is missing part of its address. Open it straight from the email, or ask for a new one.</p>
        <Link href="/forgot-password" className="btn btn-primary">
          Send a new link
        </Link>
      </div>
    );
  }

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const password = String(new FormData(e.currentTarget).get('password') ?? '');
    setBusy(true);
    setError(null);
    try {
      const { user } = await api<{ user: MeDTO }>('/auth/reset-password', { body: { token, password } });
      await mutate(user, { revalidate: false });
      router.replace('/');
    } catch (err) {
      setError((err as Error).message);
      setBusy(false);
    }
  };

  return (
    <form className="card form narrow" onSubmit={onSubmit}>
      <h1>Choose a new password</h1>
      <label>
        New password
        <input
          name="password"
          type={show ? 'text' : 'password'}
          required
          minLength={8}
          maxLength={200}
          autoComplete="new-password"
          autoFocus
        />
      </label>
      <label className="checkbox">
        <input type="checkbox" checked={show} onChange={(e) => setShow(e.target.checked)} /> Show password
      </label>
      {error && (
        <p className="error">
          {error} {error.includes('expired') && <Link href="/forgot-password">Send a new link</Link>}
        </p>
      )}
      <button className="btn btn-primary" disabled={busy}>
        {busy ? 'Saving…' : 'Save and log in'}
      </button>
      <p className="muted">This signs you out on your other devices.</p>
    </form>
  );
}