@payez/next-mvp 4.8.1 → 4.8.2

package/src/components/auth/CredentialSignInForm.tsx

@@ -1,240 +1,240 @@
-'use client';
-
-import React, { useState } from 'react';
-import { TraditionalAuthSection } from './TraditionalAuthSection';
-import { safeCallbackPath } from '../../auth/safe-callback';
-import { authorizeResumeHref } from '../../lib/authorize-resume';
-import { NO_CODE_REQUEST, codeStepInstruction, type CodeRequest } from '../../lib/code-step-copy';
-import {
-  credentialSignIn,
-  requestEmailCode,
-  validateCredentials,
-  type FetchLike,
-} from '../../lib/credential-sign-in-client';
-
-/**
- * PAY-2302 cut 1b: the package's email + password (+ 2FA code) sign-in form.
- *
- * WHY IT EXISTS. The package's own Better Auth instance has no emailAndPassword, so the login page had no credential form
- * (removed 2026-08-02, BAPert 17586: "restore this form together" with the backend that makes it work). This is that pair:
- * the backend is routes/auth/credential-login (+ credential-login-email-code), which the app mounts at
- * /api/auth/admin-login[/email-code]; this component drives it. Moved from the portal's AdminLoginCard (VibeID-Customer-Portal
- * 3d654917), re-styled with the package's own TraditionalAuthSection instead of the portal's AuthCard chrome.
- *
- * MOUNT IT through the login page's slot, so nothing changes for a consumer that does not opt in:
- *     <LoginPage altAuthSlot={<CredentialSignInForm />} />
- * (An app that has not mounted the two routes must NOT mount this form: it would be the dead control 17586 removed.)
- *
- * Two steps, the IdP's own contract (an access token with no refresh token means a second factor is outstanding):
- *   'credentials' - email + password
- *   'code'        - the 2FA code; the door parks the provisional bearer in an httpOnly cookie, this step resubmits with the code.
- *
- * After success the browser goes to the callbackUrl, passed through safeCallbackPath (same-origin paths only); when the page
- * carries ?return_url (an IdP authorize request) it goes to the app's /api/oauth/resume instead, which resumes that request.
- */
-
-interface Props {
-  /** Where to go after sign-in. Default: the page's ?callbackUrl, else /dashboard. Always passed through safeCallbackPath. */
-  callbackUrl?: string;
-  /** Test seam: the fetch used for both doors. */
-  fetchImpl?: FetchLike;
-  /** Test seam: navigation after success. */
-  onSignedIn?: (destination: string) => void;
-  showForgotPassword?: boolean;
-}
-
-const inputStyle: React.CSSProperties = {
-  borderColor: 'var(--border-default, #e5e7eb)',
-  color: 'var(--text-primary, #111827)',
-  background: 'var(--bg-input, white)',
-};
-
-export function resolveDestination(explicit?: string): string {
-  let raw = explicit;
-  let returnUrl: string | null = null;
-  if (typeof window !== 'undefined') {
-    const params = new URLSearchParams(window.location.search);
-    if (raw === undefined) raw = params.get('callbackUrl') ?? undefined;
-    // PAY-2302 cut 2: an IdP that sent the user here mid-authorize (?return_url=<IdP authorize request>) must get the
-    // authorize request resumed after sign-in. The href points at the app's OWN /api/oauth/resume, which validates the
-    // URL against IDP_URL server-side; nothing absolute is navigated to from here, and the result is still guarded.
-    returnUrl = params.get('return_url');
-  }
-  return safeCallbackPath(authorizeResumeHref(returnUrl), safeCallbackPath(raw, '/dashboard'));
-}
-
-export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPassword = false }: Props) {
-  const [step, setStep] = useState<'credentials' | 'code'>('credentials');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [code, setCode] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [fieldError, setFieldError] = useState<string | null>(null);
-  const [codeRequest, setCodeRequest] = useState<CodeRequest>(NO_CODE_REQUEST);
-  const [offerEmailCode, setOfferEmailCode] = useState(false);
-  const [emailCodeMsg, setEmailCodeMsg] = useState<string | null>(null);
-
-  async function submit(withCode?: string) {
-    setBusy(true);
-    setError(null);
-    setOfferEmailCode(false);
-    try {
-      const r = await credentialSignIn({ email, password, code: withCode }, fetchImpl);
-      if (r.kind === 'success') {
-        const destination = resolveDestination(callbackUrl);
-        if (onSignedIn) onSignedIn(destination);
-        else window.location.href = destination;
-        return;
-      }
-      if (r.kind === 'two_factor') {
-        setCodeRequest(r.codeRequest);
-        setStep('code');
-        return;
-      }
-      setError(r.message);
-      if (r.kind === 'error') setOfferEmailCode(r.offerEmailCode);
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  function onCredentialsSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    const invalid = validateCredentials(email, password);
-    if (invalid) {
-      setFieldError(invalid.email ?? invalid.password ?? null);
-      return;
-    }
-    setFieldError(null);
-    void submit();
-  }
-
-  function onCodeSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    const trimmed = code.trim();
-    if (!trimmed) {
-      setFieldError('Enter your authentication code.');
-      return;
-    }
-    setFieldError(null);
-    void submit(trimmed);
-  }
-
-  function onBack() {
-    setStep('credentials');
-    setCodeRequest(NO_CODE_REQUEST);
-    setCode('');
-    setFieldError(null);
-    setError(null);
-    setOfferEmailCode(false);
-    setEmailCodeMsg(null);
-  }
-
-  async function askForEmailCode() {
-    setBusy(true);
-    setEmailCodeMsg(null);
-    try {
-      const r = await requestEmailCode(fetchImpl);
-      if (r.kind === 'requested') {
-        setCodeRequest(r.codeRequest);
-        setError(null);
-        setOfferEmailCode(false);
-        setEmailCodeMsg('We asked for a code to be emailed to you. Enter it above when it arrives.');
-      } else {
-        setEmailCodeMsg(r.message);
-      }
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  const problem = fieldError ?? error;
-  const problemLine = problem && (
-    <p role="alert" data-testid="credential-sign-in-error" className="text-sm mt-3" style={{ color: 'var(--color-error, #ef4444)' }}>
-      {problem}
-    </p>
-  );
-
-  if (step === 'code') {
-    return (
-      <div data-testid="credential-sign-in-code-step" className="text-left">
-        <p className="text-sm mb-4" style={{ color: 'var(--text-primary, #111827)' }}>{codeStepInstruction(email, codeRequest)}</p>
-        <form onSubmit={onCodeSubmit} noValidate className="space-y-4">
-          <div>
-            <label htmlFor="credential-code" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary, #111827)' }}>
-              Authentication code
-            </label>
-            <input
-              id="credential-code"
-              name="code"
-              type="text"
-              inputMode="numeric"
-              autoComplete="one-time-code"
-              required
-              placeholder="000000"
-              value={code}
-              disabled={busy}
-              onChange={(e) => {
-                setCode(e.target.value);
-                setFieldError(null);
-              }}
-              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-              style={inputStyle}
-            />
-          </div>
-          <button
-            type="submit"
-            disabled={busy}
-            className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-            style={{ background: 'var(--btn-primary-bg, #11B588)', color: 'var(--btn-primary-text, white)' }}
-          >
-            {busy ? 'Verifying…' : 'Verify'}
-          </button>
-        </form>
-        <button type="button" onClick={onBack} disabled={busy} className="text-sm underline mt-4" style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-muted, #6b7280)' }}>
-          Back
-        </button>
-        {problemLine}
-        {(offerEmailCode || emailCodeMsg) && (
-          <div data-testid="email-code-offer" className="mt-4">
-            {offerEmailCode && (
-              <button type="button" onClick={() => void askForEmailCode()} disabled={busy} className="text-sm font-semibold underline" style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-primary, #111827)' }}>
-                Email me a code instead
-              </button>
-            )}
-            {emailCodeMsg && (
-              <p role="status" data-testid="email-code-offer-msg" className="text-sm mt-2" style={{ color: 'var(--text-primary, #111827)' }}>
-                {emailCodeMsg}
-              </p>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div data-testid="credential-sign-in" className="text-left">
-      <TraditionalAuthSection
-        email={email}
-        password={password}
-        onEmailChange={(v) => {
-          setEmail(v);
-          setFieldError(null);
-        }}
-        onPasswordChange={(v) => {
-          setPassword(v);
-          setFieldError(null);
-        }}
-        onSubmit={onCredentialsSubmit}
-        isLoading={busy}
-        buttonText="Sign in"
-        showForgotPassword={showForgotPassword}
-      />
-      {problemLine}
-    </div>
-  );
-}
-
-export default CredentialSignInForm;
+'use client';
+
+import React, { useState } from 'react';
+import { TraditionalAuthSection } from './TraditionalAuthSection';
+import { safeCallbackPath } from '../../auth/safe-callback';
+import { authorizeResumeHref } from '../../lib/authorize-resume';
+import { NO_CODE_REQUEST, codeStepInstruction, type CodeRequest } from '../../lib/code-step-copy';
+import {
+  credentialSignIn,
+  requestEmailCode,
+  validateCredentials,
+  type FetchLike,
+} from '../../lib/credential-sign-in-client';
+
+/**
+ * PAY-2302 cut 1b: the package's email + password (+ 2FA code) sign-in form.
+ *
+ * WHY IT EXISTS. The package's own Better Auth instance has no emailAndPassword, so the login page had no credential form
+ * (removed 2026-08-02, BAPert 17586: "restore this form together" with the backend that makes it work). This is that pair:
+ * the backend is routes/auth/credential-login (+ credential-login-email-code), which the app mounts at
+ * /api/auth/admin-login[/email-code]; this component drives it. Moved from the portal's AdminLoginCard (VibeID-Customer-Portal
+ * 3d654917), re-styled with the package's own TraditionalAuthSection instead of the portal's AuthCard chrome.
+ *
+ * MOUNT IT through the login page's slot, so nothing changes for a consumer that does not opt in:
+ *     <LoginPage altAuthSlot={<CredentialSignInForm />} />
+ * (An app that has not mounted the two routes must NOT mount this form: it would be the dead control 17586 removed.)
+ *
+ * Two steps, the IdP's own contract (an access token with no refresh token means a second factor is outstanding):
+ *   'credentials' - email + password
+ *   'code'        - the 2FA code; the door parks the provisional bearer in an httpOnly cookie, this step resubmits with the code.
+ *
+ * After success the browser goes to the callbackUrl, passed through safeCallbackPath (same-origin paths only); when the page
+ * carries ?return_url (an IdP authorize request) it goes to the app's /api/oauth/resume instead, which resumes that request.
+ */
+
+interface Props {
+  /** Where to go after sign-in. Default: the page's ?callbackUrl, else /dashboard. Always passed through safeCallbackPath. */
+  callbackUrl?: string;
+  /** Test seam: the fetch used for both doors. */
+  fetchImpl?: FetchLike;
+  /** Test seam: navigation after success. */
+  onSignedIn?: (destination: string) => void;
+  showForgotPassword?: boolean;
+}
+
+const inputStyle: React.CSSProperties = {
+  borderColor: 'var(--border-default, #e5e7eb)',
+  color: 'var(--text-primary, #111827)',
+  background: 'var(--bg-input, white)',
+};
+
+export function resolveDestination(explicit?: string): string {
+  let raw = explicit;
+  let returnUrl: string | null = null;
+  if (typeof window !== 'undefined') {
+    const params = new URLSearchParams(window.location.search);
+    if (raw === undefined) raw = params.get('callbackUrl') ?? undefined;
+    // PAY-2302 cut 2: an IdP that sent the user here mid-authorize (?return_url=<IdP authorize request>) must get the
+    // authorize request resumed after sign-in. The href points at the app's OWN /api/oauth/resume, which validates the
+    // URL against IDP_URL server-side; nothing absolute is navigated to from here, and the result is still guarded.
+    returnUrl = params.get('return_url');
+  }
+  return safeCallbackPath(authorizeResumeHref(returnUrl), safeCallbackPath(raw, '/dashboard'));
+}
+
+export function CredentialSignInForm({ callbackUrl, fetchImpl, onSignedIn, showForgotPassword = false }: Props) {
+  const [step, setStep] = useState<'credentials' | 'code'>('credentials');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [code, setCode] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [codeRequest, setCodeRequest] = useState<CodeRequest>(NO_CODE_REQUEST);
+  const [offerEmailCode, setOfferEmailCode] = useState(false);
+  const [emailCodeMsg, setEmailCodeMsg] = useState<string | null>(null);
+
+  async function submit(withCode?: string) {
+    setBusy(true);
+    setError(null);
+    setOfferEmailCode(false);
+    try {
+      const r = await credentialSignIn({ email, password, code: withCode }, fetchImpl);
+      if (r.kind === 'success') {
+        const destination = resolveDestination(callbackUrl);
+        if (onSignedIn) onSignedIn(destination);
+        else window.location.href = destination;
+        return;
+      }
+      if (r.kind === 'two_factor') {
+        setCodeRequest(r.codeRequest);
+        setStep('code');
+        return;
+      }
+      setError(r.message);
+      if (r.kind === 'error') setOfferEmailCode(r.offerEmailCode);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function onCredentialsSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const invalid = validateCredentials(email, password);
+    if (invalid) {
+      setFieldError(invalid.email ?? invalid.password ?? null);
+      return;
+    }
+    setFieldError(null);
+    void submit();
+  }
+
+  function onCodeSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const trimmed = code.trim();
+    if (!trimmed) {
+      setFieldError('Enter your authentication code.');
+      return;
+    }
+    setFieldError(null);
+    void submit(trimmed);
+  }
+
+  function onBack() {
+    setStep('credentials');
+    setCodeRequest(NO_CODE_REQUEST);
+    setCode('');
+    setFieldError(null);
+    setError(null);
+    setOfferEmailCode(false);
+    setEmailCodeMsg(null);
+  }
+
+  async function askForEmailCode() {
+    setBusy(true);
+    setEmailCodeMsg(null);
+    try {
+      const r = await requestEmailCode(fetchImpl);
+      if (r.kind === 'requested') {
+        setCodeRequest(r.codeRequest);
+        setError(null);
+        setOfferEmailCode(false);
+        setEmailCodeMsg('We asked for a code to be emailed to you. Enter it above when it arrives.');
+      } else {
+        setEmailCodeMsg(r.message);
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const problem = fieldError ?? error;
+  const problemLine = problem && (
+    <p role="alert" data-testid="credential-sign-in-error" className="text-sm mt-3" style={{ color: 'var(--color-error, #ef4444)' }}>
+      {problem}
+    </p>
+  );
+
+  if (step === 'code') {
+    return (
+      <div data-testid="credential-sign-in-code-step" className="text-left">
+        <p className="text-sm mb-4" style={{ color: 'var(--text-primary, #111827)' }}>{codeStepInstruction(email, codeRequest)}</p>
+        <form onSubmit={onCodeSubmit} noValidate className="space-y-4">
+          <div>
+            <label htmlFor="credential-code" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary, #111827)' }}>
+              Authentication code
+            </label>
+            <input
+              id="credential-code"
+              name="code"
+              type="text"
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              required
+              placeholder="000000"
+              value={code}
+              disabled={busy}
+              onChange={(e) => {
+                setCode(e.target.value);
+                setFieldError(null);
+              }}
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={inputStyle}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={busy}
+            className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            style={{ background: 'var(--btn-primary-bg, #11B588)', color: 'var(--btn-primary-text, white)' }}
+          >
+            {busy ? 'Verifying…' : 'Verify'}
+          </button>
+        </form>
+        <button type="button" onClick={onBack} disabled={busy} className="text-sm underline mt-4" style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-muted, #6b7280)' }}>
+          Back
+        </button>
+        {problemLine}
+        {(offerEmailCode || emailCodeMsg) && (
+          <div data-testid="email-code-offer" className="mt-4">
+            {offerEmailCode && (
+              <button type="button" onClick={() => void askForEmailCode()} disabled={busy} className="text-sm font-semibold underline" style={{ background: 'none', border: 'none', padding: 0, color: 'var(--text-primary, #111827)' }}>
+                Email me a code instead
+              </button>
+            )}
+            {emailCodeMsg && (
+              <p role="status" data-testid="email-code-offer-msg" className="text-sm mt-2" style={{ color: 'var(--text-primary, #111827)' }}>
+                {emailCodeMsg}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div data-testid="credential-sign-in" className="text-left">
+      <TraditionalAuthSection
+        email={email}
+        password={password}
+        onEmailChange={(v) => {
+          setEmail(v);
+          setFieldError(null);
+        }}
+        onPasswordChange={(v) => {
+          setPassword(v);
+          setFieldError(null);
+        }}
+        onSubmit={onCredentialsSubmit}
+        isLoading={busy}
+        buttonText="Sign in"
+        showForgotPassword={showForgotPassword}
+      />
+      {problemLine}
+    </div>
+  );
+}
+
+export default CredentialSignInForm;