cynx-lib 1.3.80 → 1.3.81

package/ui/components/LoginPage.jsx

@@ -1,405 +1,405 @@
-import { useState, useEffect, useRef } from 'react';
-import { Fingerprint, Lock } from 'lucide-react';
-import Button from './Button.jsx';
-import Input from './Input.jsx';
-import Spinner from './Spinner.jsx';
-import Divider from './Divider.jsx';
-
-/**
- * Universal White-Label LoginPage component for cynx-lib.
- * Supports Password login, Multi-Provider Captcha (Cap, Turnstile, reCAPTCHA, custom),
- * Passkeys (WebAuthn / Biometrics), and SSO providers.
- * STRICT NO EMOJIS!
- */
-export default function LoginPage({
-  logo,
-  logoAlt = 'Logo',
-  title = 'Вход в систему',
-  subtitle,
-  background = 'var(--grey-1, var(--bg, #f4f5f8))',
-  cardMaxWidth = 330,
-
-  // Password Login
-  showPasswordLogin = true,
-  usernameLabel = 'Логин',
-  passwordLabel = 'Пароль',
-  usernamePlaceholder = 'Введите логин',
-  passwordPlaceholder = 'Введите пароль',
-  submitButtonText = 'Войти',
-  submitButtonLoadingText = 'Вход...',
-  onSubmit,
-
-  // Passkey Login
-  showPasskey = false,
-  passkeyButtonText = 'Войти через Passkey',
-  passkeyIcon,
-  onPasskeyLogin,
-  passkeyLoading = false,
-
-  // SSO Providers
-  ssoProviders = [],
-  ssoDividerText,
-
-  // Captcha Configuration
-  captcha,
-
-  // Errors, Notices & States
-  error: externalError,
-  notice,
-  loading: externalLoading = false,
-
-  // Custom Slots
-  headerSlot,
-  footerSlot,
-  extraFields,
-  noAuthMethodsText = 'Нет доступных способов входа. Обратитесь к администратору.',
-}) {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [internalError, setInternalError] = useState('');
-  const [internalLoading, setInternalLoading] = useState(false);
-  const [pageReady, setPageReady] = useState(false);
-  const [capToken, setCapToken] = useState('');
-  const [passkeyInternalLoading, setPasskeyInternalLoading] = useState(false);
-  const capRef = useRef(null);
-
-  const error = externalError !== undefined ? externalError : internalError;
-  const loading = externalLoading || internalLoading;
-  const isPasskeyBusy = passkeyLoading || passkeyInternalLoading;
-
-  const isCaptchaEnabled = !!(captcha && (captcha.enabled !== false && (captcha.provider || captcha.endpoint || captcha.siteKey)));
-  const captchaProvider = captcha?.provider || 'cap';
-
-  // 1. Setup Captcha Event Listeners (Cap Anti-Bot Widget)
-  useEffect(() => {
-    if (!isCaptchaEnabled || captchaProvider !== 'cap') return;
-    const el = capRef.current;
-    if (!el) return;
-
-    const handleSolve = (e) => {
-      setCapToken(e.detail?.token || '');
-    };
-    const handleReset = () => {
-      setCapToken('');
-    };
-
-    el.addEventListener('solve', handleSolve);
-    el.addEventListener('reset', handleReset);
-    return () => {
-      el.removeEventListener('solve', handleSolve);
-      el.removeEventListener('reset', handleReset);
-    };
-  }, [pageReady, showPasswordLogin, isCaptchaEnabled, captchaProvider]);
-
-  // 2. Preload Fonts & Logo to prevent Layout Shifts (FOUC)
-  useEffect(() => {
-    let isMounted = true;
-
-    const prepareAssets = async () => {
-      const tasks = [];
-
-      if (typeof document !== 'undefined' && document.fonts && typeof document.fonts.load === 'function') {
-        tasks.push(document.fonts.load('13px Manrope').catch(() => {}));
-        tasks.push(document.fonts.load('600 11px Manrope').catch(() => {}));
-        tasks.push(document.fonts.load('700 14px Manrope').catch(() => {}));
-      }
-
-      if (typeof logo === 'string' && logo.trim()) {
-        const logoPromise = new Promise((resolve) => {
-          const img = new Image();
-          img.onload = resolve;
-          img.onerror = resolve;
-          img.src = logo;
-          if (typeof img.decode === 'function') {
-            img.decode().then(resolve).catch(resolve);
-          }
-          setTimeout(resolve, 300);
-        });
-        tasks.push(logoPromise);
-      }
-
-      await Promise.all(tasks);
-      if (isMounted) {
-        setPageReady(true);
-      }
-    };
-
-    prepareAssets();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [logo]);
-
-  // 3. Form Submission
-  const handleSubmit = async (e) => {
-    if (e && e.preventDefault) e.preventDefault();
-    if (loading) return;
-
-    if (!username.trim() || !password) {
-      setInternalError('Введите логин и пароль');
-      return;
-    }
-
-    if (isCaptchaEnabled && !capToken) {
-      setInternalError('Пожалуйста, подтвердите капчу');
-      return;
-    }
-
-    setInternalError('');
-    setInternalLoading(true);
-
-    try {
-      if (typeof onSubmit === 'function') {
-        await onSubmit({
-          username: username.trim(),
-          password,
-          captchaToken: isCaptchaEnabled ? capToken : undefined,
-        });
-      }
-    } catch (err) {
-      setInternalError(err.message || 'Ошибка авторизации');
-      if (capRef.current && typeof capRef.current.reset === 'function') {
-        capRef.current.reset();
-      }
-      setCapToken('');
-    } finally {
-      setInternalLoading(false);
-    }
-  };
-
-  // 4. Passkey Action Handler
-  const handlePasskeyClick = async () => {
-    if (isPasskeyBusy) return;
-    setInternalError('');
-    setPasskeyInternalLoading(true);
-    try {
-      if (typeof onPasskeyLogin === 'function') {
-        await onPasskeyLogin();
-      }
-    } catch (err) {
-      setInternalError(err.message || 'Ошибка аутентификации через Passkey');
-    } finally {
-      setPasskeyInternalLoading(false);
-    }
-  };
-
-  if (!pageReady) {
-    return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background }}>
-        <Spinner size={32} />
-      </div>
-    );
-  }
-
-  const enabledSSO = Array.isArray(ssoProviders) ? ssoProviders : [];
-  const hasPasskey = showPasskey && typeof onPasskeyLogin === 'function';
-  const hasAuthMethods = showPasswordLogin || hasPasskey || enabledSSO.length > 0;
-
-  return (
-    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background, padding: 16 }}>
-      <div style={{ width: '100%', maxWidth: cardMaxWidth }}>
-        {/* Header & Branding */}
-        <div style={{ textAlign: 'center', marginBottom: 28 }}>
-          {logo ? (
-            <div style={{ height: 54, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px' }}>
-              {typeof logo === 'string' ? (
-                <img src={logo} alt={logoAlt} style={{ maxHeight: 54, maxWidth: 200, objectFit: 'contain', display: 'block' }} />
-              ) : (
-                logo
-              )}
-            </div>
-          ) : null}
-
-          {title && (
-            <h1 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--primary-text)', margin: 0 }}>
-              {title}
-            </h1>
-          )}
-
-          {subtitle && (
-            <div style={{ fontSize: '.78rem', color: 'var(--muted)', marginTop: 4 }}>
-              {subtitle}
-            </div>
-          )}
-        </div>
-
-        {headerSlot}
-
-        {/* Notices */}
-        {notice && (
-          <div style={{ fontSize: '.78rem', color: 'var(--accent)', background: 'var(--accent-subtle, rgba(0,0,0,0.04))', padding: '8px 12px', borderRadius: 'var(--rads)', marginBottom: 14 }}>
-            {notice}
-          </div>
-        )}
-
-        {/* Errors */}
-        {error && (
-          <div style={{ fontSize: '.78rem', color: 'var(--danger)', background: 'var(--danger-bg)', padding: '8px 12px', borderRadius: 'var(--rads)', marginBottom: 14 }}>
-            {error}
-          </div>
-        )}
-
-        {/* Password Login Form */}
-        {showPasswordLogin && (
-          <div
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                handleSubmit();
-              }
-            }}
-            style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
-          >
-            <Input
-              label={usernameLabel}
-              size="lg"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              placeholder={usernamePlaceholder}
-              name="login_auth_user"
-              id="login_auth_user"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              data-lpignore="true"
-              data-1p-ignore="true"
-              data-form-type="other"
-              data-bwignore="true"
-              required
-            />
-            <Input
-              label={passwordLabel}
-              size="lg"
-              type="passwd"
-              name="login_auth_secret"
-              id="login_auth_secret"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              data-lpignore="true"
-              data-1p-ignore="true"
-              data-form-type="other"
-              data-bwignore="true"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder={passwordPlaceholder}
-              required
-            />
-
-            {/* Captcha Slot */}
-            {isCaptchaEnabled && (
-              <div style={{ display: 'flex', justifyContent: 'center', margin: '2px 0' }}>
-                {captchaProvider === 'cap' ? (
-                  <cap-widget
-                    ref={capRef}
-                    data-cap-api-endpoint={captcha?.endpoint || '/api/captcha/'}
-                  ></cap-widget>
-                ) : typeof captcha?.render === 'function' ? (
-                  captcha.render(setCapToken, () => setCapToken(''), capRef)
-                ) : null}
-              </div>
-            )}
-
-            {extraFields}
-
-            <Button
-              type="button"
-              variant="primary"
-              size="lg"
-              loading={loading}
-              onClick={handleSubmit}
-              style={{
-                width: '100%',
-                marginTop: 14,
-                color: '#ffffff',
-                background: 'var(--accent)',
-                fontWeight: 600,
-              }}
-            >
-              {loading ? submitButtonLoadingText : submitButtonText}
-            </Button>
-          </div>
-        )}
-
-        {/* Passkey Biometric Action */}
-        {hasPasskey && (
-          <div style={{ marginTop: showPasswordLogin ? 10 : 0 }}>
-            <Button
-              type="button"
-              variant="default"
-              size="lg"
-              loading={isPasskeyBusy}
-              onClick={handlePasskeyClick}
-              style={{
-                width: '100%',
-                color: 'var(--primary-text)',
-                background: 'var(--surface)',
-                border: '1px solid var(--border)',
-                fontWeight: 600,
-                fontSize: '.85rem',
-              }}
-              icon={passkeyIcon || <Fingerprint size={16} />}
-            >
-              {passkeyButtonText}
-            </Button>
-          </div>
-        )}
-
-        {/* SSO Divider */}
-        {(showPasswordLogin || hasPasskey) && enabledSSO.length > 0 && (
-          <Divider color="var(--border)" size="md" style={{ margin: '18px 0' }}>
-            {ssoDividerText}
-          </Divider>
-        )}
-
-        {/* SSO Providers */}
-        {enabledSSO.length > 0 && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {enabledSSO.map((p) => {
-              const buttonNode = (
-                <Button
-                  variant={p.variant || 'default'}
-                  size="lg"
-                  onClick={p.onClick}
-                  style={{
-                    width: '100%',
-                    color: 'var(--primary-text)',
-                    background: 'var(--surface)',
-                    border: '1px solid var(--border)',
-                    fontWeight: 600,
-                    fontSize: '.85rem',
-                  }}
-                  icon={p.icon || <Lock size={15} />}
-                >
-                  Войти через {p.name}
-                </Button>
-              );
-
-              if (p.url) {
-                return (
-                  <a key={p.id} href={p.url} style={{ textDecoration: 'none', display: 'block' }}>
-                    {buttonNode}
-                  </a>
-                );
-              }
-
-              return <div key={p.id}>{buttonNode}</div>;
-            })}
-          </div>
-        )}
-
-        {/* Fallback when no auth methods available */}
-        {!hasAuthMethods && (
-          <div style={{ textAlign: 'center', color: 'var(--muted)', fontSize: '.78rem', padding: '20px 0' }}>
-            {noAuthMethodsText}
-          </div>
-        )}
-
-        {footerSlot}
-      </div>
-    </div>
-  );
-}
+import { useState, useEffect, useRef } from 'react';
+import { Fingerprint, Lock } from 'lucide-react';
+import Button from './Button.jsx';
+import Input from './Input.jsx';
+import Spinner from './Spinner.jsx';
+import Divider from './Divider.jsx';
+
+/**
+ * Universal White-Label LoginPage component for cynx-lib.
+ * Supports Password login, Multi-Provider Captcha (Cap, Turnstile, reCAPTCHA, custom),
+ * Passkeys (WebAuthn / Biometrics), and SSO providers.
+ * STRICT NO EMOJIS!
+ */
+export default function LoginPage({
+  logo,
+  logoAlt = 'Logo',
+  title = 'Вход в систему',
+  subtitle,
+  background = 'var(--grey-1, var(--bg, #f4f5f8))',
+  cardMaxWidth = 330,
+
+  // Password Login
+  showPasswordLogin = true,
+  usernameLabel = 'Логин',
+  passwordLabel = 'Пароль',
+  usernamePlaceholder = 'Введите логин',
+  passwordPlaceholder = 'Введите пароль',
+  submitButtonText = 'Войти',
+  submitButtonLoadingText = 'Вход...',
+  onSubmit,
+
+  // Passkey Login
+  showPasskey = false,
+  passkeyButtonText = 'Войти через Passkey',
+  passkeyIcon,
+  onPasskeyLogin,
+  passkeyLoading = false,
+
+  // SSO Providers
+  ssoProviders = [],
+  ssoDividerText,
+
+  // Captcha Configuration
+  captcha,
+
+  // Errors, Notices & States
+  error: externalError,
+  notice,
+  loading: externalLoading = false,
+
+  // Custom Slots
+  headerSlot,
+  footerSlot,
+  extraFields,
+  noAuthMethodsText = 'Нет доступных способов входа. Обратитесь к администратору.',
+}) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [internalError, setInternalError] = useState('');
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [pageReady, setPageReady] = useState(false);
+  const [capToken, setCapToken] = useState('');
+  const [passkeyInternalLoading, setPasskeyInternalLoading] = useState(false);
+  const capRef = useRef(null);
+
+  const error = externalError !== undefined ? externalError : internalError;
+  const loading = externalLoading || internalLoading;
+  const isPasskeyBusy = passkeyLoading || passkeyInternalLoading;
+
+  const isCaptchaEnabled = !!(captcha && (captcha.enabled !== false && (captcha.provider || captcha.endpoint || captcha.siteKey)));
+  const captchaProvider = captcha?.provider || 'cap';
+
+  // 1. Setup Captcha Event Listeners (Cap Anti-Bot Widget)
+  useEffect(() => {
+    if (!isCaptchaEnabled || captchaProvider !== 'cap') return;
+    const el = capRef.current;
+    if (!el) return;
+
+    const handleSolve = (e) => {
+      setCapToken(e.detail?.token || '');
+    };
+    const handleReset = () => {
+      setCapToken('');
+    };
+
+    el.addEventListener('solve', handleSolve);
+    el.addEventListener('reset', handleReset);
+    return () => {
+      el.removeEventListener('solve', handleSolve);
+      el.removeEventListener('reset', handleReset);
+    };
+  }, [pageReady, showPasswordLogin, isCaptchaEnabled, captchaProvider]);
+
+  // 2. Preload Fonts & Logo to prevent Layout Shifts (FOUC)
+  useEffect(() => {
+    let isMounted = true;
+
+    const prepareAssets = async () => {
+      const tasks = [];
+
+      if (typeof document !== 'undefined' && document.fonts && typeof document.fonts.load === 'function') {
+        tasks.push(document.fonts.load('13px Manrope').catch(() => {}));
+        tasks.push(document.fonts.load('600 11px Manrope').catch(() => {}));
+        tasks.push(document.fonts.load('700 14px Manrope').catch(() => {}));
+      }
+
+      if (typeof logo === 'string' && logo.trim()) {
+        const logoPromise = new Promise((resolve) => {
+          const img = new Image();
+          img.onload = resolve;
+          img.onerror = resolve;
+          img.src = logo;
+          if (typeof img.decode === 'function') {
+            img.decode().then(resolve).catch(resolve);
+          }
+          setTimeout(resolve, 300);
+        });
+        tasks.push(logoPromise);
+      }
+
+      await Promise.all(tasks);
+      if (isMounted) {
+        setPageReady(true);
+      }
+    };
+
+    prepareAssets();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [logo]);
+
+  // 3. Form Submission
+  const handleSubmit = async (e) => {
+    if (e && e.preventDefault) e.preventDefault();
+    if (loading) return;
+
+    if (!username.trim() || !password) {
+      setInternalError('Введите логин и пароль');
+      return;
+    }
+
+    if (isCaptchaEnabled && !capToken) {
+      setInternalError('Пожалуйста, подтвердите капчу');
+      return;
+    }
+
+    setInternalError('');
+    setInternalLoading(true);
+
+    try {
+      if (typeof onSubmit === 'function') {
+        await onSubmit({
+          username: username.trim(),
+          password,
+          captchaToken: isCaptchaEnabled ? capToken : undefined,
+        });
+      }
+    } catch (err) {
+      setInternalError(err.message || 'Ошибка авторизации');
+      if (capRef.current && typeof capRef.current.reset === 'function') {
+        capRef.current.reset();
+      }
+      setCapToken('');
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+
+  // 4. Passkey Action Handler
+  const handlePasskeyClick = async () => {
+    if (isPasskeyBusy) return;
+    setInternalError('');
+    setPasskeyInternalLoading(true);
+    try {
+      if (typeof onPasskeyLogin === 'function') {
+        await onPasskeyLogin();
+      }
+    } catch (err) {
+      setInternalError(err.message || 'Ошибка аутентификации через Passkey');
+    } finally {
+      setPasskeyInternalLoading(false);
+    }
+  };
+
+  if (!pageReady) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background }}>
+        <Spinner size={32} />
+      </div>
+    );
+  }
+
+  const enabledSSO = Array.isArray(ssoProviders) ? ssoProviders : [];
+  const hasPasskey = showPasskey && typeof onPasskeyLogin === 'function';
+  const hasAuthMethods = showPasswordLogin || hasPasskey || enabledSSO.length > 0;
+
+  return (
+    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background, padding: 16 }}>
+      <div style={{ width: '100%', maxWidth: cardMaxWidth }}>
+        {/* Header & Branding */}
+        <div style={{ textAlign: 'center', marginBottom: 28 }}>
+          {logo ? (
+            <div style={{ height: 54, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px' }}>
+              {typeof logo === 'string' ? (
+                <img src={logo} alt={logoAlt} style={{ maxHeight: 54, maxWidth: 200, objectFit: 'contain', display: 'block' }} />
+              ) : (
+                logo
+              )}
+            </div>
+          ) : null}
+
+          {title && (
+            <h1 style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--primary-text)', margin: 0 }}>
+              {title}
+            </h1>
+          )}
+
+          {subtitle && (
+            <div style={{ fontSize: '.78rem', color: 'var(--muted)', marginTop: 4 }}>
+              {subtitle}
+            </div>
+          )}
+        </div>
+
+        {headerSlot}
+
+        {/* Notices */}
+        {notice && (
+          <div style={{ fontSize: '.78rem', color: 'var(--accent)', background: 'var(--accent-subtle, rgba(0,0,0,0.04))', padding: '8px 12px', borderRadius: 'var(--rads)', marginBottom: 14 }}>
+            {notice}
+          </div>
+        )}
+
+        {/* Errors */}
+        {error && (
+          <div style={{ fontSize: '.78rem', color: 'var(--danger)', background: 'var(--danger-bg)', padding: '8px 12px', borderRadius: 'var(--rads)', marginBottom: 14 }}>
+            {error}
+          </div>
+        )}
+
+        {/* Password Login Form */}
+        {showPasswordLogin && (
+          <div
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleSubmit();
+              }
+            }}
+            style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
+          >
+            <Input
+              label={usernameLabel}
+              size="lg"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder={usernamePlaceholder}
+              name="login_auth_user"
+              id="login_auth_user"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              data-lpignore="true"
+              data-1p-ignore="true"
+              data-form-type="other"
+              data-bwignore="true"
+              required
+            />
+            <Input
+              label={passwordLabel}
+              size="lg"
+              type="passwd"
+              name="login_auth_secret"
+              id="login_auth_secret"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              data-lpignore="true"
+              data-1p-ignore="true"
+              data-form-type="other"
+              data-bwignore="true"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder={passwordPlaceholder}
+              required
+            />
+
+            {/* Captcha Slot */}
+            {isCaptchaEnabled && (
+              <div style={{ display: 'flex', justifyContent: 'center', margin: '2px 0' }}>
+                {captchaProvider === 'cap' ? (
+                  <cap-widget
+                    ref={capRef}
+                    data-cap-api-endpoint={captcha?.endpoint || '/api/captcha/'}
+                  ></cap-widget>
+                ) : typeof captcha?.render === 'function' ? (
+                  captcha.render(setCapToken, () => setCapToken(''), capRef)
+                ) : null}
+              </div>
+            )}
+
+            {extraFields}
+
+            <Button
+              type="button"
+              variant="primary"
+              size="lg"
+              loading={loading}
+              onClick={handleSubmit}
+              style={{
+                width: '100%',
+                marginTop: 14,
+                color: '#ffffff',
+                background: 'var(--accent)',
+                fontWeight: 600,
+              }}
+            >
+              {loading ? submitButtonLoadingText : submitButtonText}
+            </Button>
+          </div>
+        )}
+
+        {/* Passkey Biometric Action */}
+        {hasPasskey && (
+          <div style={{ marginTop: showPasswordLogin ? 10 : 0 }}>
+            <Button
+              type="button"
+              variant="default"
+              size="lg"
+              loading={isPasskeyBusy}
+              onClick={handlePasskeyClick}
+              style={{
+                width: '100%',
+                color: 'var(--primary-text)',
+                background: 'var(--surface)',
+                border: '1px solid var(--border)',
+                fontWeight: 600,
+                fontSize: '.85rem',
+              }}
+              icon={passkeyIcon || <Fingerprint size={16} />}
+            >
+              {passkeyButtonText}
+            </Button>
+          </div>
+        )}
+
+        {/* SSO Divider */}
+        {(showPasswordLogin || hasPasskey) && enabledSSO.length > 0 && (
+          <Divider color="var(--border)" size="md" style={{ margin: '18px 0' }}>
+            {ssoDividerText}
+          </Divider>
+        )}
+
+        {/* SSO Providers */}
+        {enabledSSO.length > 0 && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {enabledSSO.map((p) => {
+              const buttonNode = (
+                <Button
+                  variant={p.variant || 'default'}
+                  size="lg"
+                  onClick={p.onClick}
+                  style={{
+                    width: '100%',
+                    color: 'var(--primary-text)',
+                    background: 'var(--surface)',
+                    border: '1px solid var(--border)',
+                    fontWeight: 600,
+                    fontSize: '.85rem',
+                  }}
+                  icon={p.icon || <Lock size={15} />}
+                >
+                  Войти через {p.name}
+                </Button>
+              );
+
+              if (p.url) {
+                return (
+                  <a key={p.id} href={p.url} style={{ textDecoration: 'none', display: 'block' }}>
+                    {buttonNode}
+                  </a>
+                );
+              }
+
+              return <div key={p.id}>{buttonNode}</div>;
+            })}
+          </div>
+        )}
+
+        {/* Fallback when no auth methods available */}
+        {!hasAuthMethods && (
+          <div style={{ textAlign: 'center', color: 'var(--muted)', fontSize: '.78rem', padding: '20px 0' }}>
+            {noAuthMethodsText}
+          </div>
+        )}
+
+        {footerSlot}
+      </div>
+    </div>
+  );
+}