cynx-lib 1.3.82 → 1.3.83

package/package.json

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

package/ui/components/LoginPage.jsx

@@ -35,10 +35,15 @@ export default function LoginPage({
   passkeyIcon,
   onPasskeyLogin,
   passkeyLoading = false,
+  passkeyInGrid = false,
+  passkeyPosition = 'start', // 'start' | 'end'
 
-  // SSO Providers
+  // SSO & Alternate Providers
   ssoProviders = [],
-  ssoDividerText,
+  ssoDividerText = 'или',
+  ssoLayout = 'column', // 'column' | 'grid'
+  ssoColumns,           // e.g. 2, 3, 4, or undefined (auto)
+  ssoButtonFormat,      // 'full' | 'short' | 'icon-only'
 
   // Captcha Configuration
   captcha,
@@ -61,11 +66,13 @@ export default function LoginPage({
   const [pageReady, setPageReady] = useState(false);
   const [capToken, setCapToken] = useState('');
   const [passkeyInternalLoading, setPasskeyInternalLoading] = useState(false);
+  const [activeSsoId, setActiveSsoId] = useState(null);
   const capRef = useRef(null);
 
   const error = externalError !== undefined ? externalError : internalError;
-  const loading = externalLoading || internalLoading;
+  const isFormBusy = externalLoading || internalLoading;
   const isPasskeyBusy = passkeyLoading || passkeyInternalLoading;
+  const isAnyBusy = isFormBusy || isPasskeyBusy || !!activeSsoId;
 
   const isCaptchaEnabled = !!(captcha && (captcha.enabled !== false && (captcha.provider || captcha.endpoint || captcha.siteKey)));
   const captchaProvider = captcha?.provider || 'cap';
@@ -134,7 +141,7 @@ export default function LoginPage({
   // 3. Form Submission
   const handleSubmit = async (e) => {
     if (e && e.preventDefault) e.preventDefault();
-    if (loading) return;
+    if (isAnyBusy) return;
 
     if (!username.trim() || !password) {
       setInternalError('Введите логин и пароль');
@@ -170,7 +177,7 @@ export default function LoginPage({
 
   // 4. Passkey Action Handler
   const handlePasskeyClick = async () => {
-    if (isPasskeyBusy) return;
+    if (isAnyBusy) return;
     setInternalError('');
     setPasskeyInternalLoading(true);
     try {
@@ -184,6 +191,21 @@ export default function LoginPage({
     }
   };
 
+  // 5. SSO Action Handler (with independent button loading)
+  const handleSsoClick = async (p, e) => {
+    if (isAnyBusy) return;
+    if (typeof p.onClick !== 'function') return;
+    setInternalError('');
+    setActiveSsoId(p.id);
+    try {
+      await p.onClick(e);
+    } catch (err) {
+      setInternalError(err.message || `Ошибка входа через ${p.name || 'провайдера'}`);
+    } finally {
+      setActiveSsoId(null);
+    }
+  };
+
   if (!pageReady) {
     return (
       <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background }}>
@@ -196,6 +218,29 @@ export default function LoginPage({
   const hasPasskey = showPasskey && typeof onPasskeyLogin === 'function';
   const hasAuthMethods = showPasswordLogin || hasPasskey || enabledSSO.length > 0;
 
+  const isGrid = ssoLayout === 'grid' || (typeof ssoColumns === 'number' && ssoColumns > 1);
+  const shouldPutPasskeyInGrid = hasPasskey && (passkeyInGrid || (isGrid && passkeyInGrid !== false && enabledSSO.length > 0));
+
+  const passkeyProvider = hasPasskey ? {
+    id: '__passkey__',
+    name: passkeyButtonText,
+    label: passkeyButtonText,
+    icon: passkeyIcon || <Fingerprint size={16} />,
+    onClick: handlePasskeyClick,
+    loading: isPasskeyBusy,
+    disabled: isAnyBusy && !isPasskeyBusy,
+    isPasskey: true,
+  } : null;
+
+  const allAlternateProviders = shouldPutPasskeyInGrid
+    ? (passkeyPosition === 'end'
+        ? [...enabledSSO, passkeyProvider]
+        : [passkeyProvider, ...enabledSSO]
+      )
+    : enabledSSO;
+
+  const hasAlternateMethods = (hasPasskey && !shouldPutPasskeyInGrid) || allAlternateProviders.length > 0;
+
   return (
     <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background, padding: 16 }}>
       <div style={{ width: '100%', maxWidth: cardMaxWidth }}>
@@ -309,7 +354,8 @@ export default function LoginPage({
               type="button"
               variant="primary"
               size="lg"
-              loading={loading}
+              loading={isFormBusy}
+              disabled={isAnyBusy && !isFormBusy}
               onClick={handleSubmit}
               style={{
                 width: '100%',
@@ -319,19 +365,27 @@ export default function LoginPage({
                 fontWeight: 600,
               }}
             >
-              {loading ? submitButtonLoadingText : submitButtonText}
+              {isFormBusy ? submitButtonLoadingText : submitButtonText}
             </Button>
           </div>
         )}
 
-        {/* Passkey Biometric Action */}
-        {hasPasskey && (
-          <div style={{ marginTop: showPasswordLogin ? 10 : 0 }}>
+        {/* Divider between password login and alternate auth methods */}
+        {showPasswordLogin && hasAlternateMethods && (
+          <Divider color="var(--border)" size="md" style={{ margin: '18px 0' }}>
+            {ssoDividerText}
+          </Divider>
+        )}
+
+        {/* Standalone Passkey Action (when not placed in grid) */}
+        {hasPasskey && !shouldPutPasskeyInGrid && (
+          <div style={{ marginBottom: allAlternateProviders.length > 0 ? 8 : 0 }}>
             <Button
               type="button"
               variant="default"
               size="lg"
               loading={isPasskeyBusy}
+              disabled={isAnyBusy && !isPasskeyBusy}
               onClick={handlePasskeyClick}
               style={{
                 width: '100%',
@@ -348,45 +402,107 @@ export default function LoginPage({
           </div>
         )}
 
-        {/* SSO Divider */}
-        {(showPasswordLogin || hasPasskey) && enabledSSO.length > 0 && (
-          <Divider color="var(--border)" size="md" style={{ margin: '18px 0' }}>
-            {ssoDividerText}
-          </Divider>
-        )}
+        {/* Alternate Auth Providers (SSO, Social, Passkey in grid) */}
+        {allAlternateProviders.length > 0 && (
+          <div
+            style={isGrid ? {
+              display: 'grid',
+              gridTemplateColumns: typeof ssoColumns === 'number'
+                ? `repeat(${ssoColumns}, minmax(0, 1fr))`
+                : `repeat(auto-fit, minmax(${cardMaxWidth > 360 ? '130px' : '90px'}, 1fr))`,
+              gap: 8,
+              width: '100%',
+            } : {
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8,
+              width: '100%',
+            }}
+          >
+            {allAlternateProviders.map((p) => {
+              const iconNode = p.logo ? (
+                typeof p.logo === 'string' ? (
+                  <img
+                    src={p.logo}
+                    alt={p.name || 'provider'}
+                    style={{ width: 16, height: 16, objectFit: 'contain', flexShrink: 0, display: 'block' }}
+                  />
+                ) : (
+                  p.logo
+                )
+              ) : (
+                p.icon || (p.isPasskey ? <Fingerprint size={16} /> : <Lock size={15} />)
+              );
+
+              let labelText = '';
+              if (ssoButtonFormat === 'icon-only' || p.iconOnly) {
+                labelText = '';
+              } else if (p.label) {
+                labelText = p.label;
+              } else if (p.buttonText) {
+                labelText = p.buttonText;
+              } else if (isGrid || ssoButtonFormat === 'short') {
+                labelText = p.name;
+              } else {
+                labelText = (p.name && (p.name.startsWith('Войти') || p.name.startsWith('Sign in')))
+                  ? p.name
+                  : `Войти через ${p.name}`;
+              }
+
+              const isItemLoading = p.isPasskey
+                ? isPasskeyBusy
+                : (p.loading !== undefined ? p.loading : activeSsoId === p.id);
+
+              const isItemDisabled = p.isPasskey
+                ? (isAnyBusy && !isPasskeyBusy)
+                : (p.disabled !== undefined ? p.disabled : (isAnyBusy && activeSsoId !== p.id));
+
+              const handleClick = p.isPasskey ? p.onClick : (e) => handleSsoClick(p, e);
 
-        {/* SSO Providers */}
-        {enabledSSO.length > 0 && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {enabledSSO.map((p) => {
               const buttonNode = (
                 <Button
+                  type="button"
                   variant={p.variant || 'default'}
                   size="lg"
-                  onClick={p.onClick}
+                  loading={isItemLoading}
+                  disabled={isItemDisabled}
+                  onClick={handleClick}
                   style={{
                     width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 8,
                     color: 'var(--primary-text)',
                     background: 'var(--surface)',
                     border: '1px solid var(--border)',
                     fontWeight: 600,
-                    fontSize: '.85rem',
+                    fontSize: isGrid ? '.82rem' : '.85rem',
+                    padding: isGrid ? (labelText ? '0 10px' : '0 6px') : '0 16px',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    ...p.style,
                   }}
-                  icon={p.icon || <Lock size={15} />}
+                  icon={iconNode}
                 >
-                  Войти через {p.name}
+                  {labelText}
                 </Button>
               );
 
               if (p.url) {
                 return (
-                  <a key={p.id} href={p.url} style={{ textDecoration: 'none', display: 'block' }}>
+                  <a key={p.id} href={p.url} style={{ textDecoration: 'none', display: 'block', minWidth: 0 }}>
                     {buttonNode}
                   </a>
                 );
               }
 
-              return <div key={p.id}>{buttonNode}</div>;
+              return (
+                <div key={p.id} style={{ minWidth: 0 }}>
+                  {buttonNode}
+                </div>
+              );
             })}
           </div>
         )}