@payez/next-mvp 4.1.7 → 4.1.9

package/src/components/auth/FederatedAuthSection.tsx

@@ -1,95 +1,95 @@
-'use client';
-
-import React from 'react';
-import { FederatedProvider } from '@/types/auth';
-
-interface Props {
-  providers: FederatedProvider[];
-  onProviderClick: (provider: FederatedProvider) => void;
-  isLoading?: boolean;
-}
-
-const providerIcons: Record<FederatedProvider, { label: string; svg: React.ReactNode; color: string }> = {
-  google: {
-    label: 'Google',
-    color: '#4285F4',
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
-        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
-        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
-        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
-      </svg>
-    ),
-  },
-  microsoft: {
-    label: 'Microsoft',
-    color: '#0078D4',
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-        <rect x="1" y="1" width="9" height="9" fill="#F25022"/>
-        <rect x="12" y="1" width="9" height="9" fill="#7FBA00"/>
-        <rect x="1" y="12" width="9" height="9" fill="#00A4EF"/>
-        <rect x="12" y="12" width="9" height="9" fill="#FFB900"/>
-      </svg>
-    ),
-  },
-  facebook: {
-    label: 'Facebook',
-    color: '#1877F2',
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="#1877F2">
-        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-      </svg>
-    ),
-  },
-  github: {
-    label: 'GitHub',
-    color: '#000000',
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-      </svg>
-    ),
-  },
-  apple: {
-    label: 'Apple',
-    color: '#000000',
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
-      </svg>
-    ),
-  },
-};
-
-export function FederatedAuthSection({ providers, onProviderClick, isLoading }: Props) {
-  if (!providers.length) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-3">
-      {providers.map((provider) => {
-        const config = providerIcons[provider];
-        return (
-          <button
-            key={provider}
-            type="button"
-            onClick={() => onProviderClick(provider)}
-            disabled={isLoading}
-            className={`w-full px-4 py-3 rounded-lg border-2 font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed`}
-            style={{
-              border: '1px solid var(--border-default)',
-              color: 'var(--text-primary)',
-              background: 'var(--bg-default)',
-            }}
-          >
-            {config.svg}
-            Continue with {config.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
+'use client';
+
+import React from 'react';
+import { FederatedProvider } from '@/types/auth';
+
+interface Props {
+  providers: FederatedProvider[];
+  onProviderClick: (provider: FederatedProvider) => void;
+  isLoading?: boolean;
+}
+
+const providerIcons: Record<FederatedProvider, { label: string; svg: React.ReactNode; color: string }> = {
+  google: {
+    label: 'Google',
+    color: '#4285F4',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+      </svg>
+    ),
+  },
+  microsoft: {
+    label: 'Microsoft',
+    color: '#0078D4',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <rect x="1" y="1" width="9" height="9" fill="#F25022"/>
+        <rect x="12" y="1" width="9" height="9" fill="#7FBA00"/>
+        <rect x="1" y="12" width="9" height="9" fill="#00A4EF"/>
+        <rect x="12" y="12" width="9" height="9" fill="#FFB900"/>
+      </svg>
+    ),
+  },
+  facebook: {
+    label: 'Facebook',
+    color: '#1877F2',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="#1877F2">
+        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+      </svg>
+    ),
+  },
+  github: {
+    label: 'GitHub',
+    color: '#000000',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+      </svg>
+    ),
+  },
+  apple: {
+    label: 'Apple',
+    color: '#000000',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+      </svg>
+    ),
+  },
+};
+
+export function FederatedAuthSection({ providers, onProviderClick, isLoading }: Props) {
+  if (!providers.length) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      {providers.map((provider) => {
+        const config = providerIcons[provider];
+        return (
+          <button
+            key={provider}
+            type="button"
+            onClick={() => onProviderClick(provider)}
+            disabled={isLoading}
+            className={`w-full px-4 py-3 rounded-lg border-2 font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed`}
+            style={{
+              border: '1px solid var(--border-default)',
+              color: 'var(--text-primary)',
+              background: 'var(--bg-default)',
+            }}
+          >
+            {config.svg}
+            Continue with {config.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/auth/ModeAwareLoginPage.tsx

@@ -1,135 +1,135 @@
-'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 {
-  onFederatedSignIn?: (provider: FederatedProvider) => void;
-  onTraditionalSignIn?: (email: string, password: string) => Promise<void>;
-  onForgotPassword?: () => void;
-  isLoading?: boolean;
-  error?: string | null;
-}
-
-export function ModeAwareLoginPage({
-  onFederatedSignIn,
-  onTraditionalSignIn,
-  onForgotPassword,
-  isLoading = false,
-  error = null,
-}: Props) {
-  const config = useAuthConfig();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [localLoading, setLocalLoading] = useState(false);
-
-  const handleFederatedClick = (provider: FederatedProvider) => {
-    onFederatedSignIn?.(provider);
-  };
-
-  const handleTraditionalSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!onTraditionalSignIn) return;
-
-    setLocalLoading(true);
-    try {
-      await onTraditionalSignIn(email, password);
-    } finally {
-      setLocalLoading(false);
-    }
-  };
-
-  const isFederated = config.mode === 'federated';
-  const isTraditional = config.mode === 'traditional';
-  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 && (
-        <TraditionalAuthSection
-          email={email}
-          password={password}
-          onEmailChange={setEmail}
-          onPasswordChange={setPassword}
-          onSubmit={handleTraditionalSubmit}
-          isLoading={totalLoading}
-          buttonText="Sign In"
-          showForgotPassword={config.enableRecovery}
-          onForgotPassword={onForgotPassword}
-        />
-      )}
-
-      {/* Hybrid Mode - Show both */}
-      {isFederated === false && isTraditional === false && (
-        <>
-          <FederatedAuthSection
-            providers={config.providers}
-            onProviderClick={handleFederatedClick}
-            isLoading={totalLoading}
-          />
-
-          {config.providers.length > 0 && (
-            <div className="relative my-6">
-              <div className="absolute inset-0 flex items-center">
-                <div
-                  className="w-full"
-                  style={{
-                    borderTop: '1px solid var(--border-default)',
-                  }}
-                ></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span
-                  className="px-2"
-                  style={{
-                    background: 'var(--bg-card)',
-                    color: 'var(--text-secondary)',
-                  }}
-                >
-                  Or sign in with email
-                </span>
-              </div>
-            </div>
-          )}
-
-          <TraditionalAuthSection
-            email={email}
-            password={password}
-            onEmailChange={setEmail}
-            onPasswordChange={setPassword}
-            onSubmit={handleTraditionalSubmit}
-            isLoading={totalLoading}
-            buttonText="Sign In"
-            showForgotPassword={config.enableRecovery}
-            onForgotPassword={onForgotPassword}
-          />
-        </>
-      )}
-    </>
-  );
-}
+'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 {
+  onFederatedSignIn?: (provider: FederatedProvider) => void;
+  onTraditionalSignIn?: (email: string, password: string) => Promise<void>;
+  onForgotPassword?: () => void;
+  isLoading?: boolean;
+  error?: string | null;
+}
+
+export function ModeAwareLoginPage({
+  onFederatedSignIn,
+  onTraditionalSignIn,
+  onForgotPassword,
+  isLoading = false,
+  error = null,
+}: Props) {
+  const config = useAuthConfig();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [localLoading, setLocalLoading] = useState(false);
+
+  const handleFederatedClick = (provider: FederatedProvider) => {
+    onFederatedSignIn?.(provider);
+  };
+
+  const handleTraditionalSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!onTraditionalSignIn) return;
+
+    setLocalLoading(true);
+    try {
+      await onTraditionalSignIn(email, password);
+    } finally {
+      setLocalLoading(false);
+    }
+  };
+
+  const isFederated = config.mode === 'federated';
+  const isTraditional = config.mode === 'traditional';
+  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 && (
+        <TraditionalAuthSection
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleTraditionalSubmit}
+          isLoading={totalLoading}
+          buttonText="Sign In"
+          showForgotPassword={config.enableRecovery}
+          onForgotPassword={onForgotPassword}
+        />
+      )}
+
+      {/* Hybrid Mode - Show both */}
+      {isFederated === false && isTraditional === false && (
+        <>
+          <FederatedAuthSection
+            providers={config.providers}
+            onProviderClick={handleFederatedClick}
+            isLoading={totalLoading}
+          />
+
+          {config.providers.length > 0 && (
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <div
+                  className="w-full"
+                  style={{
+                    borderTop: '1px solid var(--border-default)',
+                  }}
+                ></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span
+                  className="px-2"
+                  style={{
+                    background: 'var(--bg-card)',
+                    color: 'var(--text-secondary)',
+                  }}
+                >
+                  Or sign in with email
+                </span>
+              </div>
+            </div>
+          )}
+
+          <TraditionalAuthSection
+            email={email}
+            password={password}
+            onEmailChange={setEmail}
+            onPasswordChange={setPassword}
+            onSubmit={handleTraditionalSubmit}
+            isLoading={totalLoading}
+            buttonText="Sign In"
+            showForgotPassword={config.enableRecovery}
+            onForgotPassword={onForgotPassword}
+          />
+        </>
+      )}
+    </>
+  );
+}