@payez/next-mvp 4.8.1 → 4.8.2

package/src/pages/recovery/page.tsx

@@ -1,267 +1,267 @@
-'use client';
-
-import { useState, useEffect, Suspense } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { RecoveryStep, RecoverySession, PasswordResetToken } from '../../types/recovery';
-import { accountApi } from '../../utils/api';
-import { recoveryEntry, resetSubmitTarget } from '../../auth/password-reset-bridge';
-import { InitiateRecoveryStep } from '../../components/recovery/InitiateRecoveryStep';
-import { SelectMethodStep } from '../../components/recovery/SelectMethodStep';
-import { VerifyCodeStep } from '../../components/recovery/VerifyCodeStep';
-import { SetPasswordStep } from '../../components/recovery/SetPasswordStep';
-import { CompleteStep } from '../../components/recovery/CompleteStep';
-import { RequestedStep } from '../../components/recovery/RequestedStep';
-import { useColors } from '../../theme/useTheme';
-
-function RecoveryContent() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  // PAY-2121 (BAPert 70576): a VERIFIED passwordless user arrives here with a real
-  // reset token (?token=) from the IdP's post-verify fragment, via the bridge. In
-  // that case skip the request-a-code step and go straight to set-password - the
-  // token is the credential; asking for a code would throw it away.
-  const entry = recoveryEntry(searchParams?.get('token'), searchParams?.get('email'));
-  const colors = useColors();
-
-  const [currentStep, setCurrentStep] = useState<RecoveryStep>(entry.step);
-  const [email, setEmail] = useState(entry.email);
-  const [recoverySession, setRecoverySession] = useState<RecoverySession | null>(null);
-  const [selectedMethod, setSelectedMethod] = useState<'email' | 'sms' | 'authenticator' | null>(null);
-  const [verificationCode, setVerificationCode] = useState('');
-  const [passwordResetToken, setPasswordResetToken] = useState<PasswordResetToken | null>(
-    entry.resetToken ? { token: entry.resetToken, expiresAt: '' } : null,
-  );
-  const [error, setError] = useState<string | null>(null);
-  // PAY-1591: true when the reset failed because the recovery itself is dead; the error box then offers a way back.
-  const [recoveryExpired, setRecoveryExpired] = useState(false);
-  const [loading, setLoading] = useState(false);
-  // PAY-1588: true only after the IdP accepted the new password. The 'complete' step is ALSO reached from initiate()
-  // when no recovery session comes back, and that path must not tell the user a password was set.
-  const [resetSucceeded, setResetSucceeded] = useState(false);
-
-  const handleInitiateRecovery = async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await accountApi.initiateRecovery(email);
-
-      if (response.success && response.data?.recovery_session_token) {
-        setRecoverySession({
-          recoveryToken: response.data.recovery_session_token,
-          email: email,
-          maskedEmail: response.data.masked_email,
-          maskedPhone: response.data.masked_phone,
-          hasAuthenticator: response.data.has_authenticator,
-          availableMethods: response.data.available_methods || [],
-          expiresAt: response.data.expires_at || ''
-        });
-        setCurrentStep('select-method');
-      } else {
-        // No recovery session (unknown / locked / throttled): the ONE neutral step, never CompleteStep (rigpert 60711).
-        setCurrentStep('requested');
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to initiate recovery. Please try again.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSendCode = async (method: 'email' | 'sms' | 'authenticator') => {
-    if (!recoverySession) return;
-
-    setLoading(true);
-    setError(null);
-    setSelectedMethod(method);
-
-    try {
-      const response = await accountApi.sendRecoveryCode(recoverySession.recoveryToken, method);
-
-      if (response.success) {
-        setCurrentStep('verify-code');
-      } else {
-        setError('Failed to send verification code. Please try again.');
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to send verification code.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleVerifyCode = async () => {
-    if (!recoverySession || !selectedMethod) return;
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await accountApi.verifyRecoveryCode(
-        recoverySession.recoveryToken,
-        verificationCode,
-        selectedMethod
-      );
-
-      if (response.success && response.data) {
-        setPasswordResetToken({
-          token: response.data.password_reset_token,
-          expiresAt: response.data.expires_at
-        });
-        setCurrentStep('set-password');
-      } else {
-        setError(response.error?.message || 'Invalid verification code');
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to verify code.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleResetPassword = async (password: string, confirmPassword: string) => {
-    // PAY-2121 (BAPert 70582): the ONE place that decides whether a submit may proceed.
-    // No token (or no email anywhere) -> refuse BEFORE any request; a guard-less submit
-    // would otherwise call the API with an empty token.
-    const target = resetSubmitTarget(passwordResetToken?.token, recoverySession?.email, email);
-    if (!target) {
-      setError(passwordResetToken ? 'We could not tell which account to reset. Start recovery again.' : 'This reset link is missing its token. Start recovery again.');
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-    setRecoveryExpired(false);
-
-    try {
-      const response = await accountApi.resetPasswordWithToken(
-        target.email,
-        target.token,
-        password,
-        confirmPassword
-      );
-
-      if (response.success) {
-        setResetSucceeded(true);
-        setCurrentStep('complete');
-      } else {
-        setError('Failed to reset password. Please try again.');
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to reset password.');
-      setRecoveryExpired(!!err && (err as { code?: string }).code === 'RECOVERY_EXPIRED');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleGoBack = () => {
-    if (currentStep === 'select-method') setCurrentStep('initiate');
-    else if (currentStep === 'verify-code') setCurrentStep('select-method');
-    // PAY-2121: a deep-linked set-password has no verify-code to go back to; return to
-    // the request-code step so a bad token still leaves a way forward.
-    else if (currentStep === 'set-password') setCurrentStep(recoverySession ? 'verify-code' : 'initiate');
-  };
-
-  return (
-    <div className="w-full flex items-center justify-center p-6" style={{ background: 'var(--bg-default)' }}>
-      <div className="max-w-md w-full">
-        {error && (
-          <div className="mb-4 bg-red-50 border border-red-200 rounded-2xl p-3">
-            <p className="text-red-700 text-sm">{error}</p>
-            {recoveryExpired && (
-              <a href="/account-auth/recovery" className="text-sm font-medium underline">
-                Start password recovery again
-              </a>
-            )}
-          </div>
-        )}
-
-        {loading && (
-          <div className="mb-4 rounded-2xl p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-default)' }}>
-            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>Processing...</p>
-          </div>
-        )}
-
-        {currentStep === 'initiate' && (
-          <InitiateRecoveryStep
-            email={email}
-            setEmail={setEmail}
-            onSubmit={handleInitiateRecovery}
-            loading={loading}
-          />
-        )}
-
-        {currentStep === 'select-method' && recoverySession && (
-          <SelectMethodStep
-            session={recoverySession}
-            onSelectMethod={handleSendCode}
-            loading={loading}
-          />
-        )}
-
-        {currentStep === 'verify-code' && (
-          <VerifyCodeStep
-            code={verificationCode}
-            setCode={setVerificationCode}
-            onSubmit={handleVerifyCode}
-            onResend={() => selectedMethod && handleSendCode(selectedMethod)}
-            loading={loading}
-            maskedDestination={
-              selectedMethod === 'sms'
-                ? recoverySession?.maskedPhone
-                : recoverySession?.maskedEmail
-            }
-          />
-        )}
-
-        {currentStep === 'set-password' && (
-          <SetPasswordStep
-            onSubmit={handleResetPassword}
-            loading={loading}
-          />
-        )}
-
-        {currentStep === 'requested' && <RequestedStep onGoToLogin={() => router.push('/account-auth/login')} />}
-
-        {currentStep === 'complete' && (
-          <CompleteStep
-            onGoToLogin={() => router.push(resetSucceeded ? '/account-auth/login?notice=password-set' : '/account-auth/login')}
-          />
-        )}
-
-        {currentStep !== 'complete' && currentStep !== 'requested' && currentStep !== 'initiate' && !loading && (
-          <div className="mt-6 text-center">
-            <button
-              type="button"
-              onClick={handleGoBack}
-              className="text-sm hover:underline font-medium"
-              style={{ color: 'var(--text-primary)' }}
-            >
-              ← Go Back
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function LoadingFallback() {
-  const colors = useColors();
-  return (
-    <div className="w-full flex items-center justify-center" style={{ background: 'var(--bg-default)' }}>
-      <div className="border rounded-2xl p-8" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-default)' }}>
-        <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
-      </div>
-    </div>
-  );
-}
-
-export default function RecoveryPage() {
-  return (
-    <Suspense fallback={<LoadingFallback />}>
-      <RecoveryContent />
-    </Suspense>
-  );
-}
+'use client';
+
+import { useState, useEffect, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { RecoveryStep, RecoverySession, PasswordResetToken } from '../../types/recovery';
+import { accountApi } from '../../utils/api';
+import { recoveryEntry, resetSubmitTarget } from '../../auth/password-reset-bridge';
+import { InitiateRecoveryStep } from '../../components/recovery/InitiateRecoveryStep';
+import { SelectMethodStep } from '../../components/recovery/SelectMethodStep';
+import { VerifyCodeStep } from '../../components/recovery/VerifyCodeStep';
+import { SetPasswordStep } from '../../components/recovery/SetPasswordStep';
+import { CompleteStep } from '../../components/recovery/CompleteStep';
+import { RequestedStep } from '../../components/recovery/RequestedStep';
+import { useColors } from '../../theme/useTheme';
+
+function RecoveryContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // PAY-2121 (BAPert 70576): a VERIFIED passwordless user arrives here with a real
+  // reset token (?token=) from the IdP's post-verify fragment, via the bridge. In
+  // that case skip the request-a-code step and go straight to set-password - the
+  // token is the credential; asking for a code would throw it away.
+  const entry = recoveryEntry(searchParams?.get('token'), searchParams?.get('email'));
+  const colors = useColors();
+
+  const [currentStep, setCurrentStep] = useState<RecoveryStep>(entry.step);
+  const [email, setEmail] = useState(entry.email);
+  const [recoverySession, setRecoverySession] = useState<RecoverySession | null>(null);
+  const [selectedMethod, setSelectedMethod] = useState<'email' | 'sms' | 'authenticator' | null>(null);
+  const [verificationCode, setVerificationCode] = useState('');
+  const [passwordResetToken, setPasswordResetToken] = useState<PasswordResetToken | null>(
+    entry.resetToken ? { token: entry.resetToken, expiresAt: '' } : null,
+  );
+  const [error, setError] = useState<string | null>(null);
+  // PAY-1591: true when the reset failed because the recovery itself is dead; the error box then offers a way back.
+  const [recoveryExpired, setRecoveryExpired] = useState(false);
+  const [loading, setLoading] = useState(false);
+  // PAY-1588: true only after the IdP accepted the new password. The 'complete' step is ALSO reached from initiate()
+  // when no recovery session comes back, and that path must not tell the user a password was set.
+  const [resetSucceeded, setResetSucceeded] = useState(false);
+
+  const handleInitiateRecovery = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await accountApi.initiateRecovery(email);
+
+      if (response.success && response.data?.recovery_session_token) {
+        setRecoverySession({
+          recoveryToken: response.data.recovery_session_token,
+          email: email,
+          maskedEmail: response.data.masked_email,
+          maskedPhone: response.data.masked_phone,
+          hasAuthenticator: response.data.has_authenticator,
+          availableMethods: response.data.available_methods || [],
+          expiresAt: response.data.expires_at || ''
+        });
+        setCurrentStep('select-method');
+      } else {
+        // No recovery session (unknown / locked / throttled): the ONE neutral step, never CompleteStep (rigpert 60711).
+        setCurrentStep('requested');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to initiate recovery. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSendCode = async (method: 'email' | 'sms' | 'authenticator') => {
+    if (!recoverySession) return;
+
+    setLoading(true);
+    setError(null);
+    setSelectedMethod(method);
+
+    try {
+      const response = await accountApi.sendRecoveryCode(recoverySession.recoveryToken, method);
+
+      if (response.success) {
+        setCurrentStep('verify-code');
+      } else {
+        setError('Failed to send verification code. Please try again.');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send verification code.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerifyCode = async () => {
+    if (!recoverySession || !selectedMethod) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await accountApi.verifyRecoveryCode(
+        recoverySession.recoveryToken,
+        verificationCode,
+        selectedMethod
+      );
+
+      if (response.success && response.data) {
+        setPasswordResetToken({
+          token: response.data.password_reset_token,
+          expiresAt: response.data.expires_at
+        });
+        setCurrentStep('set-password');
+      } else {
+        setError(response.error?.message || 'Invalid verification code');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to verify code.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResetPassword = async (password: string, confirmPassword: string) => {
+    // PAY-2121 (BAPert 70582): the ONE place that decides whether a submit may proceed.
+    // No token (or no email anywhere) -> refuse BEFORE any request; a guard-less submit
+    // would otherwise call the API with an empty token.
+    const target = resetSubmitTarget(passwordResetToken?.token, recoverySession?.email, email);
+    if (!target) {
+      setError(passwordResetToken ? 'We could not tell which account to reset. Start recovery again.' : 'This reset link is missing its token. Start recovery again.');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setRecoveryExpired(false);
+
+    try {
+      const response = await accountApi.resetPasswordWithToken(
+        target.email,
+        target.token,
+        password,
+        confirmPassword
+      );
+
+      if (response.success) {
+        setResetSucceeded(true);
+        setCurrentStep('complete');
+      } else {
+        setError('Failed to reset password. Please try again.');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset password.');
+      setRecoveryExpired(!!err && (err as { code?: string }).code === 'RECOVERY_EXPIRED');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGoBack = () => {
+    if (currentStep === 'select-method') setCurrentStep('initiate');
+    else if (currentStep === 'verify-code') setCurrentStep('select-method');
+    // PAY-2121: a deep-linked set-password has no verify-code to go back to; return to
+    // the request-code step so a bad token still leaves a way forward.
+    else if (currentStep === 'set-password') setCurrentStep(recoverySession ? 'verify-code' : 'initiate');
+  };
+
+  return (
+    <div className="w-full flex items-center justify-center p-6" style={{ background: 'var(--bg-default)' }}>
+      <div className="max-w-md w-full">
+        {error && (
+          <div className="mb-4 bg-red-50 border border-red-200 rounded-2xl p-3">
+            <p className="text-red-700 text-sm">{error}</p>
+            {recoveryExpired && (
+              <a href="/account-auth/recovery" className="text-sm font-medium underline">
+                Start password recovery again
+              </a>
+            )}
+          </div>
+        )}
+
+        {loading && (
+          <div className="mb-4 rounded-2xl p-3" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-default)' }}>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>Processing...</p>
+          </div>
+        )}
+
+        {currentStep === 'initiate' && (
+          <InitiateRecoveryStep
+            email={email}
+            setEmail={setEmail}
+            onSubmit={handleInitiateRecovery}
+            loading={loading}
+          />
+        )}
+
+        {currentStep === 'select-method' && recoverySession && (
+          <SelectMethodStep
+            session={recoverySession}
+            onSelectMethod={handleSendCode}
+            loading={loading}
+          />
+        )}
+
+        {currentStep === 'verify-code' && (
+          <VerifyCodeStep
+            code={verificationCode}
+            setCode={setVerificationCode}
+            onSubmit={handleVerifyCode}
+            onResend={() => selectedMethod && handleSendCode(selectedMethod)}
+            loading={loading}
+            maskedDestination={
+              selectedMethod === 'sms'
+                ? recoverySession?.maskedPhone
+                : recoverySession?.maskedEmail
+            }
+          />
+        )}
+
+        {currentStep === 'set-password' && (
+          <SetPasswordStep
+            onSubmit={handleResetPassword}
+            loading={loading}
+          />
+        )}
+
+        {currentStep === 'requested' && <RequestedStep onGoToLogin={() => router.push('/account-auth/login')} />}
+
+        {currentStep === 'complete' && (
+          <CompleteStep
+            onGoToLogin={() => router.push(resetSucceeded ? '/account-auth/login?notice=password-set' : '/account-auth/login')}
+          />
+        )}
+
+        {currentStep !== 'complete' && currentStep !== 'requested' && currentStep !== 'initiate' && !loading && (
+          <div className="mt-6 text-center">
+            <button
+              type="button"
+              onClick={handleGoBack}
+              className="text-sm hover:underline font-medium"
+              style={{ color: 'var(--text-primary)' }}
+            >
+              ← Go Back
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LoadingFallback() {
+  const colors = useColors();
+  return (
+    <div className="w-full flex items-center justify-center" style={{ background: 'var(--bg-default)' }}>
+      <div className="border rounded-2xl p-8" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-default)' }}>
+        <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
+      </div>
+    </div>
+  );
+}
+
+export default function RecoveryPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <RecoveryContent />
+    </Suspense>
+  );
+}