@payez/next-mvp 4.8.1 → 4.8.3

package/src/components/auth/ModeAwareSignupPage.tsx

@@ -1,200 +1,200 @@
-'use client';
-
-import React, { useState } from 'react';
-import { useAuthConfig } from '../../client/AuthContext';
-import { FederatedProvider } from '@/types/auth';
-import { FederatedAuthSection } from './FederatedAuthSection';
-import { TraditionalAuthSection } from './TraditionalAuthSection';
-
-interface Props {
-  onFederatedSignUp?: (provider: FederatedProvider) => void;
-  onTraditionalSignUp?: (email: string, password: string, confirmPassword: string) => Promise<void>;
-  isLoading?: boolean;
-  error?: string | null;
-}
-
-export function ModeAwareSignupPage({
-  onFederatedSignUp,
-  onTraditionalSignUp,
-  isLoading = false,
-  error = null,
-}: Props) {
-  const config = useAuthConfig();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [localLoading, setLocalLoading] = useState(false);
-
-  const handleFederatedClick = (provider: FederatedProvider) => {
-    onFederatedSignUp?.(provider);
-  };
-
-  const handleTraditionalSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!onTraditionalSignUp) return;
-
-    if (password !== confirmPassword) {
-      alert('Passwords do not match');
-      return;
-    }
-
-    setLocalLoading(true);
-    try {
-      await onTraditionalSignUp(email, password, confirmPassword);
-    } finally {
-      setLocalLoading(false);
-    }
-  };
-
-  // Same change as ModeAwareLoginPage: read the independent flags, not the single mode.
-  // Leaving signup on `mode` would have made sign-in and sign-up disagree about what the
-  // client offers - the worse half of a half-migration.
-  const isFederated = config.allowFederatedLogin !== false && config.providers.length > 0;
-  const isTraditional = config.allowTraditionalLogin !== false;
-  const totalLoading = isLoading || localLoading;
-
-  return (
-    <>
-      {error && (
-        <div
-          className="mb-6 px-4 py-3 rounded-lg"
-          style={{
-            background: 'var(--color-error, #ef4444)',
-            color: 'white',
-          }}
-        >
-          {error}
-        </div>
-      )}
-
-      {/* Federated Only Mode */}
-      {isFederated && (
-        <FederatedAuthSection
-          providers={config.providers}
-          onProviderClick={handleFederatedClick}
-          isLoading={totalLoading}
-        />
-      )}
-
-      {/* Traditional Only Mode */}
-      {isTraditional && config.enableEmailSignup && (
-        <form onSubmit={handleTraditionalSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-              Email Address
-            </label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="you@example.com"
-              disabled={totalLoading}
-              required
-              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-              style={{
-                border: '1px solid var(--border-default)',
-                color: 'var(--text-primary)',
-                background: 'var(--bg-default)',
-              }}
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••"
-              disabled={totalLoading}
-              required
-              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-              style={{
-                border: '1px solid var(--border-default)',
-                color: 'var(--text-primary)',
-                background: 'var(--bg-default)',
-              }}
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-              Confirm Password
-            </label>
-            <input
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              placeholder="••••••••"
-              disabled={totalLoading}
-              required
-              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-              style={{
-                border: '1px solid var(--border-default)',
-                color: 'var(--text-primary)',
-                background: 'var(--bg-default)',
-              }}
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={totalLoading}
-            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 mt-6"
-            style={{
-              border: '1px solid var(--border-default)',
-              color: 'white',
-              background: 'var(--color-primary, #10b981)',
-            }}
-          >
-            {totalLoading ? 'Creating Account...' : 'Create Account'}
-          </button>
-        </form>
-      )}
-
-      {/* PAY-2334: same three states as the login page. Not answered yet -> neutral text; read failed -> say so;
-          only an ANSWERED "nothing offered" falls through to the branch below. */}
-      {!isFederated && !isTraditional && config.settingsStatus === 'loading' && (
-        <div role="status" className="px-4 py-3 rounded-lg text-sm text-left" style={{ color: 'var(--text-secondary, #6b7280)' }}>
-          <p>Loading sign-up options…</p>
-        </div>
-      )}
-
-      {!isFederated && !isTraditional && config.settingsStatus === 'failed' && (
-        <div
-          role="alert"
-          className="px-4 py-3 rounded-lg text-sm text-left"
-          style={{
-            border: '1px solid var(--border-default, #e5e7eb)',
-            color: 'var(--text-primary, #111827)',
-          }}
-        >
-          <p className="font-semibold">Could not load sign-up options.</p>
-          <p className="mt-1">Please reload the page. If it keeps happening, contact an administrator.</p>
-        </div>
-      )}
-
-      {/* PAY-2341: ANSWERED, and nothing is offered. This branch used to be labelled "Hybrid Mode - Show both" and
-          rendered the federated section plus the email sign-up form on the same "neither" condition, so a client with no
-          sign-up method showed a working-looking form. Say so, as the login page does (ModeAwareLoginPage). */}
-      {!isFederated && !isTraditional && (config.settingsStatus ?? 'ready') === 'ready' && (
-        <div
-          role="alert"
-          className="px-4 py-3 rounded-lg text-sm text-left"
-          style={{
-            border: '1px solid var(--border-default, #e5e7eb)',
-            color: 'var(--text-primary, #111827)',
-          }}
-        >
-          <p className="font-semibold">Sign-up is not available for this application.</p>
-          <p className="mt-1">
-            No sign-up method is enabled for this client. An administrator needs to enable
-            a federated provider or username and password sign-in.
-          </p>
-        </div>
-      )}
-    </>
-  );
-}
+'use client';
+
+import React, { useState } from 'react';
+import { useAuthConfig } from '../../client/AuthContext';
+import { FederatedProvider } from '@/types/auth';
+import { FederatedAuthSection } from './FederatedAuthSection';
+import { TraditionalAuthSection } from './TraditionalAuthSection';
+
+interface Props {
+  onFederatedSignUp?: (provider: FederatedProvider) => void;
+  onTraditionalSignUp?: (email: string, password: string, confirmPassword: string) => Promise<void>;
+  isLoading?: boolean;
+  error?: string | null;
+}
+
+export function ModeAwareSignupPage({
+  onFederatedSignUp,
+  onTraditionalSignUp,
+  isLoading = false,
+  error = null,
+}: Props) {
+  const config = useAuthConfig();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [localLoading, setLocalLoading] = useState(false);
+
+  const handleFederatedClick = (provider: FederatedProvider) => {
+    onFederatedSignUp?.(provider);
+  };
+
+  const handleTraditionalSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!onTraditionalSignUp) return;
+
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+
+    setLocalLoading(true);
+    try {
+      await onTraditionalSignUp(email, password, confirmPassword);
+    } finally {
+      setLocalLoading(false);
+    }
+  };
+
+  // Same change as ModeAwareLoginPage: read the independent flags, not the single mode.
+  // Leaving signup on `mode` would have made sign-in and sign-up disagree about what the
+  // client offers - the worse half of a half-migration.
+  const isFederated = config.allowFederatedLogin !== false && config.providers.length > 0;
+  const isTraditional = config.allowTraditionalLogin !== false;
+  const totalLoading = isLoading || localLoading;
+
+  return (
+    <>
+      {error && (
+        <div
+          className="mb-6 px-4 py-3 rounded-lg"
+          style={{
+            background: 'var(--color-error, #ef4444)',
+            color: 'white',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* Federated Only Mode */}
+      {isFederated && (
+        <FederatedAuthSection
+          providers={config.providers}
+          onProviderClick={handleFederatedClick}
+          isLoading={totalLoading}
+        />
+      )}
+
+      {/* Traditional Only Mode */}
+      {isTraditional && config.enableEmailSignup && (
+        <form onSubmit={handleTraditionalSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Email Address
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              disabled={totalLoading}
+              required
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={{
+                border: '1px solid var(--border-default)',
+                color: 'var(--text-primary)',
+                background: 'var(--bg-default)',
+              }}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={totalLoading}
+              required
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={{
+                border: '1px solid var(--border-default)',
+                color: 'var(--text-primary)',
+                background: 'var(--bg-default)',
+              }}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Confirm Password
+            </label>
+            <input
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={totalLoading}
+              required
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={{
+                border: '1px solid var(--border-default)',
+                color: 'var(--text-primary)',
+                background: 'var(--bg-default)',
+              }}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={totalLoading}
+            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 mt-6"
+            style={{
+              border: '1px solid var(--border-default)',
+              color: 'white',
+              background: 'var(--color-primary, #10b981)',
+            }}
+          >
+            {totalLoading ? 'Creating Account...' : 'Create Account'}
+          </button>
+        </form>
+      )}
+
+      {/* PAY-2334: same three states as the login page. Not answered yet -> neutral text; read failed -> say so;
+          only an ANSWERED "nothing offered" falls through to the branch below. */}
+      {!isFederated && !isTraditional && config.settingsStatus === 'loading' && (
+        <div role="status" className="px-4 py-3 rounded-lg text-sm text-left" style={{ color: 'var(--text-secondary, #6b7280)' }}>
+          <p>Loading sign-up options…</p>
+        </div>
+      )}
+
+      {!isFederated && !isTraditional && config.settingsStatus === 'failed' && (
+        <div
+          role="alert"
+          className="px-4 py-3 rounded-lg text-sm text-left"
+          style={{
+            border: '1px solid var(--border-default, #e5e7eb)',
+            color: 'var(--text-primary, #111827)',
+          }}
+        >
+          <p className="font-semibold">Could not load sign-up options.</p>
+          <p className="mt-1">Please reload the page. If it keeps happening, contact an administrator.</p>
+        </div>
+      )}
+
+      {/* PAY-2341: ANSWERED, and nothing is offered. This branch used to be labelled "Hybrid Mode - Show both" and
+          rendered the federated section plus the email sign-up form on the same "neither" condition, so a client with no
+          sign-up method showed a working-looking form. Say so, as the login page does (ModeAwareLoginPage). */}
+      {!isFederated && !isTraditional && (config.settingsStatus ?? 'ready') === 'ready' && (
+        <div
+          role="alert"
+          className="px-4 py-3 rounded-lg text-sm text-left"
+          style={{
+            border: '1px solid var(--border-default, #e5e7eb)',
+            color: 'var(--text-primary, #111827)',
+          }}
+        >
+          <p className="font-semibold">Sign-up is not available for this application.</p>
+          <p className="mt-1">
+            No sign-up method is enabled for this client. An administrator needs to enable
+            a federated provider or username and password sign-in.
+          </p>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/auth/PasswordResetBridge.tsx

@@ -1,30 +1,30 @@
-'use client';
-
-import { useEffect } from 'react';
-import { passwordResetRedirect } from '../../auth/password-reset-bridge';
-
-/**
- * PAY-2121: mount this once on your app's `/` page. When the IdP's post-verify
- * redirect lands on `/#password_reset_required=true&reset_token=<t>&email=<e>`
- * (a FRAGMENT), this performs ONE replace to the kit's reset surface and clears
- * the hash. With any other fragment it renders nothing and leaves `/` alone.
- *
- * It renders nothing and reads no user data - it only inspects the fragment.
- *
- * @example
- * // app/page.tsx
- * import { PasswordResetBridge } from '@payez/next-mvp/components/auth/PasswordResetBridge';
- * export default function Home() {
- *   return (&lt;&gt;&lt;PasswordResetBridge /&gt;&lt;/&gt;);
- * }
- */
-export function PasswordResetBridge() {
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const target = passwordResetRedirect(window.location.hash);
-    if (target) window.location.replace(target);
-  }, []);
-  return null;
-}
-
-export default PasswordResetBridge;
+'use client';
+
+import { useEffect } from 'react';
+import { passwordResetRedirect } from '../../auth/password-reset-bridge';
+
+/**
+ * PAY-2121: mount this once on your app's `/` page. When the IdP's post-verify
+ * redirect lands on `/#password_reset_required=true&reset_token=<t>&email=<e>`
+ * (a FRAGMENT), this performs ONE replace to the kit's reset surface and clears
+ * the hash. With any other fragment it renders nothing and leaves `/` alone.
+ *
+ * It renders nothing and reads no user data - it only inspects the fragment.
+ *
+ * @example
+ * // app/page.tsx
+ * import { PasswordResetBridge } from '@payez/next-mvp/components/auth/PasswordResetBridge';
+ * export default function Home() {
+ *   return (&lt;&gt;&lt;PasswordResetBridge /&gt;&lt;/&gt;);
+ * }
+ */
+export function PasswordResetBridge() {
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const target = passwordResetRedirect(window.location.hash);
+    if (target) window.location.replace(target);
+  }, []);
+  return null;
+}
+
+export default PasswordResetBridge;