@payez/next-mvp 4.8.1 → 4.8.3

package/src/components/auth/FederatedAuthSection.tsx

@@ -1,129 +1,129 @@
-'use client';
-
-import React from 'react';
-import { FederatedProvider } from '@/types/auth';
-
-interface Props {
-  providers: FederatedProvider[];
-  onProviderClick: (provider: FederatedProvider) => void;
-  isLoading?: boolean;
-}
-
-/**
- * PAY-2104 — PER-PROVIDER BRAND TREATMENT, NOT ONE GENERIC BUTTON.
- *
- * Apple and Facebook both publish binding rules for their sign-in buttons and
- * neither is satisfied by the generic "Continue with X" control this section
- * used to render for every provider:
- *   - APPLE (App Store Review Guidelines 4.8 / "Sign in with Apple" HIG): the
- *     button MUST carry the Apple logo and one of Apple's own wordings. The
- *     approved primary wording is "Sign in with Apple" ("Continue with Apple"
- *     is the permitted alternative). "Continue with Apple" with no logo, which
- *     is what the generic path produced, is non-compliant and is what App Store
- *     review rejects. Black or white only.
- *   - FACEBOOK (Meta Platform Terms / brand guidelines): "Continue with
- *     Facebook", the Facebook "f" mark, and the brand blue (#1877F2) or white
- *     are the sanctioned treatments.
- * Google/Microsoft/GitHub keep the neutral control — they impose no such rule,
- * and inventing brand colours for them would be a change nobody asked for.
- *
- * The mark inherits `currentColor` so it is legible on both the white neutral
- * buttons and the black/blue branded ones without a second SVG per provider.
- */
-const PROVIDER_BRAND: Record<
-  FederatedProvider,
-  { label: string; background: string; color: string; border: string }
-> = {
-  google: { label: 'Continue with Google', background: 'var(--bg-default, #ffffff)', color: 'var(--text-primary, #111827)', border: 'var(--border-default, #e5e7eb)' },
-  microsoft: { label: 'Continue with Microsoft', background: 'var(--bg-default, #ffffff)', color: 'var(--text-primary, #111827)', border: 'var(--border-default, #e5e7eb)' },
-  github: { label: 'Continue with GitHub', background: 'var(--bg-default, #ffffff)', color: 'var(--text-primary, #111827)', border: 'var(--border-default, #e5e7eb)' },
-  // Meta brand blue; white mark on blue, per the brand guidelines.
-  facebook: { label: 'Continue with Facebook', background: '#1877F2', color: '#ffffff', border: '#1877F2' },
-  // Apple HIG: black (or white) field, "Sign in with Apple", Apple logo.
-  apple: { label: 'Sign in with Apple', background: '#000000', color: '#ffffff', border: '#000000' },
-};
-
-const providerIcons: Record<FederatedProvider, { svg: React.ReactNode }> = {
-  google: {
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <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: {
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <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: {
-    // currentColor: white on the Meta-blue button. A hardcoded #1877F2 fill on a
-    // #1877F2 field is an invisible mark — the exact way a branded button ships
-    // looking like a blank one.
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <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: {
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <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: {
-    svg: (
-      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <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 icon = providerIcons[provider];
-        const brand = PROVIDER_BRAND[provider] ?? {
-          label: `Continue with ${provider}`,
-          background: 'var(--bg-default, #ffffff)',
-          color: 'var(--text-primary, #111827)',
-          border: 'var(--border-default, #e5e7eb)',
-        };
-        return (
-          <button
-            key={provider}
-            type="button"
-            onClick={() => onProviderClick(provider)}
-            disabled={isLoading}
-            data-provider={provider}
-            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 ${brand.border}`,
-              color: brand.color,
-              background: brand.background,
-            }}
-          >
-            {icon.svg}
-            {brand.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
+'use client';
+
+import React from 'react';
+import { FederatedProvider } from '@/types/auth';
+
+interface Props {
+  providers: FederatedProvider[];
+  onProviderClick: (provider: FederatedProvider) => void;
+  isLoading?: boolean;
+}
+
+/**
+ * PAY-2104 — PER-PROVIDER BRAND TREATMENT, NOT ONE GENERIC BUTTON.
+ *
+ * Apple and Facebook both publish binding rules for their sign-in buttons and
+ * neither is satisfied by the generic "Continue with X" control this section
+ * used to render for every provider:
+ *   - APPLE (App Store Review Guidelines 4.8 / "Sign in with Apple" HIG): the
+ *     button MUST carry the Apple logo and one of Apple's own wordings. The
+ *     approved primary wording is "Sign in with Apple" ("Continue with Apple"
+ *     is the permitted alternative). "Continue with Apple" with no logo, which
+ *     is what the generic path produced, is non-compliant and is what App Store
+ *     review rejects. Black or white only.
+ *   - FACEBOOK (Meta Platform Terms / brand guidelines): "Continue with
+ *     Facebook", the Facebook "f" mark, and the brand blue (#1877F2) or white
+ *     are the sanctioned treatments.
+ * Google/Microsoft/GitHub keep the neutral control — they impose no such rule,
+ * and inventing brand colours for them would be a change nobody asked for.
+ *
+ * The mark inherits `currentColor` so it is legible on both the white neutral
+ * buttons and the black/blue branded ones without a second SVG per provider.
+ */
+const PROVIDER_BRAND: Record<
+  FederatedProvider,
+  { label: string; background: string; color: string; border: string }
+> = {
+  google: { label: 'Continue with Google', background: 'var(--bg-default, #ffffff)', color: 'var(--text-primary, #111827)', border: 'var(--border-default, #e5e7eb)' },
+  microsoft: { label: 'Continue with Microsoft', background: 'var(--bg-default, #ffffff)', color: 'var(--text-primary, #111827)', border: 'var(--border-default, #e5e7eb)' },
+  github: { label: 'Continue with GitHub', background: 'var(--bg-default, #ffffff)', color: 'var(--text-primary, #111827)', border: 'var(--border-default, #e5e7eb)' },
+  // Meta brand blue; white mark on blue, per the brand guidelines.
+  facebook: { label: 'Continue with Facebook', background: '#1877F2', color: '#ffffff', border: '#1877F2' },
+  // Apple HIG: black (or white) field, "Sign in with Apple", Apple logo.
+  apple: { label: 'Sign in with Apple', background: '#000000', color: '#ffffff', border: '#000000' },
+};
+
+const providerIcons: Record<FederatedProvider, { svg: React.ReactNode }> = {
+  google: {
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <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: {
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <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: {
+    // currentColor: white on the Meta-blue button. A hardcoded #1877F2 fill on a
+    // #1877F2 field is an invisible mark — the exact way a branded button ships
+    // looking like a blank one.
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <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: {
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <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: {
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <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 icon = providerIcons[provider];
+        const brand = PROVIDER_BRAND[provider] ?? {
+          label: `Continue with ${provider}`,
+          background: 'var(--bg-default, #ffffff)',
+          color: 'var(--text-primary, #111827)',
+          border: 'var(--border-default, #e5e7eb)',
+        };
+        return (
+          <button
+            key={provider}
+            type="button"
+            onClick={() => onProviderClick(provider)}
+            disabled={isLoading}
+            data-provider={provider}
+            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 ${brand.border}`,
+              color: brand.color,
+              background: brand.background,
+            }}
+          >
+            {icon.svg}
+            {brand.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/auth/ModeAwareLoginPage.tsx

@@ -1,146 +1,146 @@
-'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);
-    }
-  };
-
-  // READ THE FLAGS, NOT `mode`. A single mode made these mutually exclusive, so a site
-  // could only ever show ONE of OAuth or username/password. Both are normal together;
-  // OAuth-only is the exception a client opts into. Source is the IDP
-  // (/api/auth/settings) unless the site deliberately overrides.
-  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. Renders alongside the form below when the client offers both. */}
-      {isFederated && (
-        <FederatedAuthSection
-          providers={config.providers}
-          onProviderClick={handleFederatedClick}
-          isLoading={totalLoading}
-        />
-      )}
-
-      {/* Separator, only when BOTH are offered. Previously the two sections rendered
-          flush against each other because a single `mode` meant only one could ever
-          appear — nothing needed to sit between them. */}
-      {isFederated && isTraditional && (
-        <div className="flex items-center gap-3 my-6" aria-hidden="true">
-          <span className="h-px flex-1" style={{ background: 'var(--border-default, #e5e7eb)' }} />
-          <span className="text-xs uppercase tracking-wide" style={{ color: 'var(--text-muted, #6b7280)' }}>
-            or
-          </span>
-          <span className="h-px flex-1" style={{ background: 'var(--border-default, #e5e7eb)' }} />
-        </div>
-      )}
-
-      {/* Username / password. */}
-      {isTraditional && (
-        <TraditionalAuthSection
-          email={email}
-          password={password}
-          onEmailChange={setEmail}
-          onPasswordChange={setPassword}
-          onSubmit={handleTraditionalSubmit}
-          isLoading={totalLoading}
-          buttonText="Sign In"
-          showForgotPassword={config.enableRecovery}
-          onForgotPassword={onForgotPassword}
-        />
-      )}
-
-      {/* NEITHER is offered. This branch used to be labelled "Hybrid Mode - Show both"
-          and rendered BOTH sections on the same condition - so a client configured with
-          no sign-in method at all got the full form. Say so instead: a blank card leaves
-          the user pressing nothing, and the operator with no idea what is wrong. */}
-      {!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-in 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-in options.</p>
-          <p className="mt-1">Please reload the page. If it keeps happening, contact an administrator.</p>
-        </div>
-      )}
-
-      {!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-in is not available for this application.</p>
-          <p className="mt-1">
-            No sign-in 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 {
+  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);
+    }
+  };
+
+  // READ THE FLAGS, NOT `mode`. A single mode made these mutually exclusive, so a site
+  // could only ever show ONE of OAuth or username/password. Both are normal together;
+  // OAuth-only is the exception a client opts into. Source is the IDP
+  // (/api/auth/settings) unless the site deliberately overrides.
+  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. Renders alongside the form below when the client offers both. */}
+      {isFederated && (
+        <FederatedAuthSection
+          providers={config.providers}
+          onProviderClick={handleFederatedClick}
+          isLoading={totalLoading}
+        />
+      )}
+
+      {/* Separator, only when BOTH are offered. Previously the two sections rendered
+          flush against each other because a single `mode` meant only one could ever
+          appear — nothing needed to sit between them. */}
+      {isFederated && isTraditional && (
+        <div className="flex items-center gap-3 my-6" aria-hidden="true">
+          <span className="h-px flex-1" style={{ background: 'var(--border-default, #e5e7eb)' }} />
+          <span className="text-xs uppercase tracking-wide" style={{ color: 'var(--text-muted, #6b7280)' }}>
+            or
+          </span>
+          <span className="h-px flex-1" style={{ background: 'var(--border-default, #e5e7eb)' }} />
+        </div>
+      )}
+
+      {/* Username / password. */}
+      {isTraditional && (
+        <TraditionalAuthSection
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleTraditionalSubmit}
+          isLoading={totalLoading}
+          buttonText="Sign In"
+          showForgotPassword={config.enableRecovery}
+          onForgotPassword={onForgotPassword}
+        />
+      )}
+
+      {/* NEITHER is offered. This branch used to be labelled "Hybrid Mode - Show both"
+          and rendered BOTH sections on the same condition - so a client configured with
+          no sign-in method at all got the full form. Say so instead: a blank card leaves
+          the user pressing nothing, and the operator with no idea what is wrong. */}
+      {!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-in 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-in options.</p>
+          <p className="mt-1">Please reload the page. If it keeps happening, contact an administrator.</p>
+        </div>
+      )}
+
+      {!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-in is not available for this application.</p>
+          <p className="mt-1">
+            No sign-in method is enabled for this client. An administrator needs to enable
+            a federated provider or username and password sign-in.
+          </p>
+        </div>
+      )}
+    </>
+  );
+}