cynx-lib 1.3.47 → 1.3.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.47",
+  "version": "1.3.49",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/ui/components/ActionsMenu.jsx

@@ -120,11 +120,11 @@ export function ActionsMenu({ items, align = 'right' }) {
                   display: 'flex', alignItems: 'center', gap: 8,
                   padding: '6px 10px', borderRadius: 'var(--rads,8px)',
                   fontSize: 12, cursor: 'pointer', transition: 'all .14s',
-                  color: item.variant === 'danger' ? 'var(--danger, #f64747)' : item.variant === 'success' ? 'var(--success, #27ae60)' : item.variant === 'warning' ? 'var(--accent, #f99e2c)' : 'var(--text,#1a1a2e)',
+                  color: (item.variant === 'danger' || item.danger) ? 'var(--danger, #ef4444)' : item.variant === 'success' ? 'var(--success, #16a34a)' : item.variant === 'warning' ? 'var(--warning, #f59e0b)' : 'var(--primary-text, #18181b)',
                   fontWeight: 500,
                 }}
                 onMouseEnter={e => {
-                  e.currentTarget.style.background = item.variant === 'danger' ? 'var(--dd, rgba(246,71,71,.08))' : item.variant === 'warning' ? 'var(--pd, rgba(249,158,44,.08))' : 'var(--grey-1,#f5f5f8)';
+                  e.currentTarget.style.background = (item.variant === 'danger' || item.danger) ? 'var(--danger-bg, rgba(239,68,68,.10))' : item.variant === 'success' ? 'var(--success-bg, rgba(22,163,74,.10))' : item.variant === 'warning' ? 'var(--warning-bg, rgba(245,158,11,.12))' : 'var(--grey-1, #f4f4f5)';
                 }}
                 onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
               >

package/ui/components/LoginPage.jsx

@@ -0,0 +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>
+  );
+}

package/ui/index.cjs

@@ -49,6 +49,7 @@ __export(index_exports, {
   Input: () => Input,
   Layout: () => Layout,
   LinearProgress: () => LinearProgress,
+  LoginPage: () => LoginPage,
   Modal: () => Modal,
   PageShell: () => PageShell,
   Pagination: () => Pagination,
@@ -125,7 +126,9 @@ var import_FilePicker = __toESM(require("./components/FilePicker.jsx"), 1);
 var import_Divider = __toESM(require("./components/Divider.jsx"), 1);
 var import_InfoBadge = __toESM(require("./components/InfoBadge.jsx"), 1);
 var import_Layout = __toESM(require("./components/Layout.jsx"), 1);
+var import_LoginPage = __toESM(require("./components/LoginPage.jsx"), 1);
 const Layout = import_Layout.default;
+const LoginPage = import_LoginPage.default;
 const Button = import_Button.default;
 const FilePicker = import_FilePicker.default;
 const Divider = import_Divider.default;

package/ui/index.js

@@ -38,8 +38,10 @@ import { default as _FilePicker } from './components/FilePicker.jsx';
 import { default as _Divider } from './components/Divider.jsx';
 import { default as _InfoBadge } from './components/InfoBadge.jsx';
 import { default as _Layout } from './components/Layout.jsx';
+import { default as _LoginPage } from './components/LoginPage.jsx';
 
 export const Layout = _Layout;
+export const LoginPage = _LoginPage;
 export const Button = _Button;
 export const FilePicker = _FilePicker;
 export const Divider = _Divider;