@payez/next-mvp 4.8.1 → 4.8.2

package/src/pages/onboarding/index.ts

@@ -1,11 +1,11 @@
-/**
- * PAY-2121: the onboarding surface.
- *
- *   default     - the /account-auth/onboarding page (mount from the scaffold at
- *                 app/account-auth/onboarding/page.tsx).
- *   PasswordResetBridge - mount once on `/` to honour the IdP's post-verify
- *                 `#password_reset_required=true` fragment.
- */
-export { default } from './page';
-export { default as OnboardingPage } from './page';
-export { PasswordResetBridge } from '../../components/auth/PasswordResetBridge';
+/**
+ * PAY-2121: the onboarding surface.
+ *
+ *   default     - the /account-auth/onboarding page (mount from the scaffold at
+ *                 app/account-auth/onboarding/page.tsx).
+ *   PasswordResetBridge - mount once on `/` to honour the IdP's post-verify
+ *                 `#password_reset_required=true` fragment.
+ */
+export { default } from './page';
+export { default as OnboardingPage } from './page';
+export { PasswordResetBridge } from '../../components/auth/PasswordResetBridge';

package/src/pages/onboarding/page.tsx

@@ -1,212 +1,212 @@
-'use client';
-
-import React, { Suspense, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-
-/**
- * PAY-2121: the /account-auth/onboarding landing page.
- *
- * The IdP's welcome/invite email links to
- *   {site}/account-auth/onboarding?client_id=<numeric>&onboard_token=<token>
- * (OnboardingLinkService.BuildOnboardingLink, PayEz-Core). A fresh
- * @payez/next-mvp app had NO page at that path, so the invitee 404'd at the
- * developer's own site. This page mounts it.
- *
- * It is TOKEN-DRIVEN: the invitee has no account or session; the onboard_token
- * IS the credential. The page forwards { onboard_token } to the kit's onboarding
- * API (the /api/onboarding/* handlers), which proxy the IdP. Two steps:
- *   1. verify-welcome-email -> the masked contact info the invitee recognises;
- *   2. verify-code -> reset_token + email; then set-password -> onboarding done.
- *
- * MOUNTING (what README section 5 asks a consumer to write; the CLI scaffold
- * writes it too):
- *   app/account-auth/onboarding/page.tsx:
- *     export { default } from '@payez/next-mvp/pages/onboarding';
- *
- * A missing onboard_token is a typed state, never a crash: it renders a plain
- * "this link is missing its token" with a way back to sign-in.
- */
-
-type Step = 'code' | 'password' | 'done';
-
-const H = { primary: 'var(--text-primary)', secondary: 'var(--text-secondary)', muted: 'var(--text-muted)' } as const;
-
-function OnboardingContent() {
-  const params = useSearchParams();
-  const onboardToken = params?.get('onboard_token') ?? '';
-
-  const [step, setStep] = useState<Step>('code');
-  const [maskedEmail, setMaskedEmail] = useState<string | null>(null);
-  const [digits, setDigits] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirm, setConfirm] = useState('');
-  const [resetToken, setResetToken] = useState('');
-  const [email, setEmail] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // Step 1: tell the invitee which address the code went to (masked). Best
-  // effort - a failure here does not block entering a code they were emailed.
-  useEffect(() => {
-    if (!onboardToken) return;
-    let alive = true;
-    (async () => {
-      try {
-        const res = await fetch('/api/onboarding/verify-welcome-email', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ onboard_token: onboardToken }),
-        });
-        const body = await res.json().catch(() => null);
-        const data = body?.data?.data || body?.data || {};
-        const masked = data?.masked_user_info?.masked_email || data?.masked_email;
-        if (alive && typeof masked === 'string' && masked) setMaskedEmail(masked);
-      } catch { /* non-fatal */ }
-    })();
-    return () => { alive = false; };
-  }, [onboardToken]);
-
-  if (!onboardToken) {
-    return (
-      <Shell>
-        <h1 style={titleStyle}>This invitation link is missing its token.</h1>
-        <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>
-          The link may have been truncated or copied incompletely. Ask for a new invitation, or sign in if you already have an
-          account.
-        </p>
-        <p style={{ marginTop: 16 }}>
-          <a href="/account-auth/login" style={linkStyle}>Go to sign in</a>
-        </p>
-      </Shell>
-    );
-  }
-
-  async function submitCode(e: React.FormEvent) {
-    e.preventDefault();
-    setBusy(true);
-    setError(null);
-    try {
-      const res = await fetch('/api/onboarding/verify-code', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ onboard_token: onboardToken, code: digits }),
-      });
-      const body = await res.json().catch(() => null);
-      const data = body?.data?.data || body?.data || body;
-      if (!res.ok || !data?.reset_token || !data?.email) throw new Error();
-      setResetToken(data.reset_token);
-      setEmail(data.email);
-      setStep('password');
-    } catch {
-      setError('That code was not accepted. Check it and try again.');
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function submitPassword(e: React.FormEvent) {
-    e.preventDefault();
-    if (password !== confirm) { setError('The two passwords do not match.'); return; }
-    setBusy(true);
-    setError(null);
-    try {
-      const res = await fetch('/api/onboarding/set-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ onboard_token: onboardToken, email, reset_token: resetToken, new_password: password }),
-      });
-      const body = await res.json().catch(() => null);
-      if (!res.ok || (body && body.success === false)) throw new Error(body?.message || '');
-      setStep('done');
-    } catch (err) {
-      setError(err instanceof Error && err.message ? err.message : 'We could not set that password. Try again.');
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <Shell>
-      {step === 'code' && (
-        <>
-          <h1 style={titleStyle}>Finish setting up your account</h1>
-          <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>
-            {maskedEmail
-              ? `We emailed a 6-digit code to ${maskedEmail}. Enter it below.`
-              : 'Enter the 6-digit code from your invitation email.'}
-          </p>
-          <form onSubmit={submitCode} noValidate style={{ marginTop: 16 }}>
-            <input
-              value={digits}
-              onChange={(e) => setDigits(e.target.value.replace(/\D/g, '').slice(0, 6))}
-              inputMode="numeric"
-              autoComplete="one-time-code"
-              aria-label="6-digit code"
-              placeholder="000000"
-              style={{ ...inputStyle, letterSpacing: 6, textAlign: 'center', fontFamily: 'monospace', fontSize: 20 }}
-            />
-            <button type="submit" disabled={busy || digits.length < 6} style={ctaStyle(busy || digits.length < 6)}>
-              {busy ? 'Verifying…' : 'Verify'}
-            </button>
-          </form>
-        </>
-      )}
-
-      {step === 'password' && (
-        <>
-          <h1 style={titleStyle}>Choose a password</h1>
-          <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>Set the password you will sign in with.</p>
-          <form onSubmit={submitPassword} noValidate style={{ marginTop: 16 }}>
-            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} aria-label="New password" placeholder="New password" style={inputStyle} />
-            <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} aria-label="Confirm password" placeholder="Confirm password" style={{ ...inputStyle, marginTop: 10 }} />
-            <button type="submit" disabled={busy || !password || !confirm} style={ctaStyle(busy || !password || !confirm)}>
-              {busy ? 'Saving…' : 'Set password'}
-            </button>
-          </form>
-        </>
-      )}
-
-      {step === 'done' && (
-        <>
-          <h1 style={titleStyle}>You&apos;re all set.</h1>
-          <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>Your account is ready. You can sign in now.</p>
-          <p style={{ marginTop: 16 }}>
-            <a href="/account-auth/login" style={linkStyle}>Go to sign in</a>
-          </p>
-        </>
-      )}
-
-      {error && <p style={{ color: '#b00020', fontSize: 13, marginTop: 12 }}>{error}</p>}
-    </Shell>
-  );
-}
-
-const titleStyle: React.CSSProperties = { color: H.primary, fontSize: 20, fontWeight: 600, margin: 0 };
-const linkStyle: React.CSSProperties = { color: H.primary, fontWeight: 600, textDecoration: 'underline' };
-const inputStyle: React.CSSProperties = {
-  width: '100%', padding: '10px 12px', border: '1px solid var(--border-default, #d1d5db)',
-  borderRadius: 10, color: H.primary, fontSize: 15, background: 'var(--bg-card, #fff)',
-};
-const ctaStyle = (disabled: boolean): React.CSSProperties => ({
-  marginTop: 14, width: '100%', padding: '10px 12px', borderRadius: 10, border: 'none',
-  background: H.primary, color: '#fff', fontWeight: 600, fontSize: 15, cursor: disabled ? 'default' : 'pointer',
-  opacity: disabled ? 0.5 : 1,
-});
-
-function Shell({ children }: { children: React.ReactNode }) {
-  return (
-    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, background: 'var(--bg-default, #f9fafb)' }}>
-      <div style={{ width: '100%', maxWidth: 420, background: 'var(--bg-card, #fff)', border: '1px solid var(--border-default, #e5e7eb)', borderRadius: 16, padding: 28 }}>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-export default function OnboardingPage() {
-  return (
-    <Suspense fallback={<div style={{ minHeight: '100vh' }} />}>
-      <OnboardingContent />
-    </Suspense>
-  );
-}
+'use client';
+
+import React, { Suspense, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+/**
+ * PAY-2121: the /account-auth/onboarding landing page.
+ *
+ * The IdP's welcome/invite email links to
+ *   {site}/account-auth/onboarding?client_id=<numeric>&onboard_token=<token>
+ * (OnboardingLinkService.BuildOnboardingLink, PayEz-Core). A fresh
+ * @payez/next-mvp app had NO page at that path, so the invitee 404'd at the
+ * developer's own site. This page mounts it.
+ *
+ * It is TOKEN-DRIVEN: the invitee has no account or session; the onboard_token
+ * IS the credential. The page forwards { onboard_token } to the kit's onboarding
+ * API (the /api/onboarding/* handlers), which proxy the IdP. Two steps:
+ *   1. verify-welcome-email -> the masked contact info the invitee recognises;
+ *   2. verify-code -> reset_token + email; then set-password -> onboarding done.
+ *
+ * MOUNTING (what README section 5 asks a consumer to write; the CLI scaffold
+ * writes it too):
+ *   app/account-auth/onboarding/page.tsx:
+ *     export { default } from '@payez/next-mvp/pages/onboarding';
+ *
+ * A missing onboard_token is a typed state, never a crash: it renders a plain
+ * "this link is missing its token" with a way back to sign-in.
+ */
+
+type Step = 'code' | 'password' | 'done';
+
+const H = { primary: 'var(--text-primary)', secondary: 'var(--text-secondary)', muted: 'var(--text-muted)' } as const;
+
+function OnboardingContent() {
+  const params = useSearchParams();
+  const onboardToken = params?.get('onboard_token') ?? '';
+
+  const [step, setStep] = useState<Step>('code');
+  const [maskedEmail, setMaskedEmail] = useState<string | null>(null);
+  const [digits, setDigits] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [resetToken, setResetToken] = useState('');
+  const [email, setEmail] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Step 1: tell the invitee which address the code went to (masked). Best
+  // effort - a failure here does not block entering a code they were emailed.
+  useEffect(() => {
+    if (!onboardToken) return;
+    let alive = true;
+    (async () => {
+      try {
+        const res = await fetch('/api/onboarding/verify-welcome-email', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ onboard_token: onboardToken }),
+        });
+        const body = await res.json().catch(() => null);
+        const data = body?.data?.data || body?.data || {};
+        const masked = data?.masked_user_info?.masked_email || data?.masked_email;
+        if (alive && typeof masked === 'string' && masked) setMaskedEmail(masked);
+      } catch { /* non-fatal */ }
+    })();
+    return () => { alive = false; };
+  }, [onboardToken]);
+
+  if (!onboardToken) {
+    return (
+      <Shell>
+        <h1 style={titleStyle}>This invitation link is missing its token.</h1>
+        <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>
+          The link may have been truncated or copied incompletely. Ask for a new invitation, or sign in if you already have an
+          account.
+        </p>
+        <p style={{ marginTop: 16 }}>
+          <a href="/account-auth/login" style={linkStyle}>Go to sign in</a>
+        </p>
+      </Shell>
+    );
+  }
+
+  async function submitCode(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/onboarding/verify-code', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ onboard_token: onboardToken, code: digits }),
+      });
+      const body = await res.json().catch(() => null);
+      const data = body?.data?.data || body?.data || body;
+      if (!res.ok || !data?.reset_token || !data?.email) throw new Error();
+      setResetToken(data.reset_token);
+      setEmail(data.email);
+      setStep('password');
+    } catch {
+      setError('That code was not accepted. Check it and try again.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function submitPassword(e: React.FormEvent) {
+    e.preventDefault();
+    if (password !== confirm) { setError('The two passwords do not match.'); return; }
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/onboarding/set-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ onboard_token: onboardToken, email, reset_token: resetToken, new_password: password }),
+      });
+      const body = await res.json().catch(() => null);
+      if (!res.ok || (body && body.success === false)) throw new Error(body?.message || '');
+      setStep('done');
+    } catch (err) {
+      setError(err instanceof Error && err.message ? err.message : 'We could not set that password. Try again.');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Shell>
+      {step === 'code' && (
+        <>
+          <h1 style={titleStyle}>Finish setting up your account</h1>
+          <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>
+            {maskedEmail
+              ? `We emailed a 6-digit code to ${maskedEmail}. Enter it below.`
+              : 'Enter the 6-digit code from your invitation email.'}
+          </p>
+          <form onSubmit={submitCode} noValidate style={{ marginTop: 16 }}>
+            <input
+              value={digits}
+              onChange={(e) => setDigits(e.target.value.replace(/\D/g, '').slice(0, 6))}
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              aria-label="6-digit code"
+              placeholder="000000"
+              style={{ ...inputStyle, letterSpacing: 6, textAlign: 'center', fontFamily: 'monospace', fontSize: 20 }}
+            />
+            <button type="submit" disabled={busy || digits.length < 6} style={ctaStyle(busy || digits.length < 6)}>
+              {busy ? 'Verifying…' : 'Verify'}
+            </button>
+          </form>
+        </>
+      )}
+
+      {step === 'password' && (
+        <>
+          <h1 style={titleStyle}>Choose a password</h1>
+          <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>Set the password you will sign in with.</p>
+          <form onSubmit={submitPassword} noValidate style={{ marginTop: 16 }}>
+            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} aria-label="New password" placeholder="New password" style={inputStyle} />
+            <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} aria-label="Confirm password" placeholder="Confirm password" style={{ ...inputStyle, marginTop: 10 }} />
+            <button type="submit" disabled={busy || !password || !confirm} style={ctaStyle(busy || !password || !confirm)}>
+              {busy ? 'Saving…' : 'Set password'}
+            </button>
+          </form>
+        </>
+      )}
+
+      {step === 'done' && (
+        <>
+          <h1 style={titleStyle}>You&apos;re all set.</h1>
+          <p style={{ color: H.secondary, fontSize: 14, marginTop: 8 }}>Your account is ready. You can sign in now.</p>
+          <p style={{ marginTop: 16 }}>
+            <a href="/account-auth/login" style={linkStyle}>Go to sign in</a>
+          </p>
+        </>
+      )}
+
+      {error && <p style={{ color: '#b00020', fontSize: 13, marginTop: 12 }}>{error}</p>}
+    </Shell>
+  );
+}
+
+const titleStyle: React.CSSProperties = { color: H.primary, fontSize: 20, fontWeight: 600, margin: 0 };
+const linkStyle: React.CSSProperties = { color: H.primary, fontWeight: 600, textDecoration: 'underline' };
+const inputStyle: React.CSSProperties = {
+  width: '100%', padding: '10px 12px', border: '1px solid var(--border-default, #d1d5db)',
+  borderRadius: 10, color: H.primary, fontSize: 15, background: 'var(--bg-card, #fff)',
+};
+const ctaStyle = (disabled: boolean): React.CSSProperties => ({
+  marginTop: 14, width: '100%', padding: '10px 12px', borderRadius: 10, border: 'none',
+  background: H.primary, color: '#fff', fontWeight: 600, fontSize: 15, cursor: disabled ? 'default' : 'pointer',
+  opacity: disabled ? 0.5 : 1,
+});
+
+function Shell({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, background: 'var(--bg-default, #f9fafb)' }}>
+      <div style={{ width: '100%', maxWidth: 420, background: 'var(--bg-card, #fff)', border: '1px solid var(--border-default, #e5e7eb)', borderRadius: 16, padding: 28 }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default function OnboardingPage() {
+  return (
+    <Suspense fallback={<div style={{ minHeight: '100vh' }} />}>
+      <OnboardingContent />
+    </Suspense>
+  );
+}