cynx-lib 1.3.81 → 1.3.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.81",
+  "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>
         )}

package/utils/utils/storage_manager.cjs

@@ -274,7 +274,7 @@ class StorageManager {
       fileType,
       mimeType,
       fileSize: Number(f.file_size || 0),
-      // cloudUrl: f.cloud_url,
+      cloudUrl: f.cloud_url || f.cloudUrl || null,
       viewUrl: `${base}/cdn/${fileId}/view`,
       downloadUrl: `${base}/cdn/${fileId}/download`,
       url: `${base}/cdn/${fileId}`,
@@ -943,6 +943,12 @@ class StorageManager {
       }
       return res.status(404).send("File URL not found");
     }
+    if (targetUrl.startsWith("/")) {
+      const serverBase = (this.storageServerUrl || process.env?.STORAGE_SERVER_URL || "").replace(/\/+$/, "");
+      if (serverBase) {
+        targetUrl = `${serverBase}${targetUrl}`;
+      }
+    }
     if (!/^https?:\/\//i.test(targetUrl)) {
       targetUrl = `https://${targetUrl}`;
     }
@@ -1067,10 +1073,30 @@ class StorageManager {
           const fileType = rf.fileType || rf.file_type || (0, import_storage.getFileTypeCategory)(mimeType, rf.originalName || rf.original_name);
           const originalName = rf.originalName || rf.original_name || "file";
           const fileSize = Number(rf.fileSize || rf.file_size || 0);
-          const cloudUrl = rf.cloudUrl || rf.cloud_url || rf.url || (this.storageServerUrl ? `${this.storageServerUrl}/cdn/${fileId}` : "");
+          const rawUrl = rf.cloudUrl || rf.cloud_url || rf.url || "";
+          let cloudUrl = rawUrl;
+          if (this.storageServerUrl) {
+            if (rawUrl.startsWith("http")) {
+              cloudUrl = this.storageServerUrl.startsWith("https://") ? rawUrl.replace(/^http:\/\//, "https://") : rawUrl;
+            } else if (rawUrl.startsWith("/")) {
+              cloudUrl = `${this.storageServerUrl}${rawUrl}`;
+            } else {
+              cloudUrl = `${this.storageServerUrl}/cdn/${fileId}`;
+            }
+          }
           const cloudPublicId = rf.cloudPublicId || rf.cloud_public_id || fileId;
           const storageId = rf.storageId || rf.storage_id || null;
           if (this.query) {
+            let validStorageId = null;
+            if (storageId) {
+              try {
+                const sCheck = await this.query(`SELECT 1 FROM ${this.storagesTable} WHERE id = $1 LIMIT 1`, [storageId]);
+                if (sCheck && sCheck.rows && sCheck.rows.length > 0) {
+                  validStorageId = storageId;
+                }
+              } catch {
+              }
+            }
             const hasInspectionCol = await this._hasInspectionColumn();
             const insertSql = hasInspectionCol ? `INSERT INTO ${this.filesTable} (
                   id, entity_type, entity_id, inspection_id, storage_id,
@@ -1094,7 +1120,7 @@ class StorageManager {
                   cloud_public_id = EXCLUDED.cloud_public_id,
                   updated_at = NOW()
                 RETURNING *`;
-            const params = hasInspectionCol ? [fileId, entityType, entityId, inspectionId, storageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId] : [fileId, entityType, entityId, storageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId];
+            const params = hasInspectionCol ? [fileId, entityType, entityId, inspectionId, validStorageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId] : [fileId, entityType, entityId, validStorageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId];
             const r = await this.query(insertSql, params);
             this.fileMetadataCache.set(fileId, { data: r.rows[0], ts: Date.now() });
             return this.formatFileRecord(r.rows[0]);

package/utils/utils/storage_manager.js

@@ -284,7 +284,7 @@ export class StorageManager {
       fileType,
       mimeType,
       fileSize: Number(f.file_size || 0),
-      // cloudUrl: f.cloud_url,
+      cloudUrl: f.cloud_url || f.cloudUrl || null,
       viewUrl: `${base}/cdn/${fileId}/view`,
       downloadUrl: `${base}/cdn/${fileId}/download`,
       url: `${base}/cdn/${fileId}`,
@@ -1044,6 +1044,13 @@ export class StorageManager {
       return res.status(404).send('File URL not found');
     }
 
+    if (targetUrl.startsWith('/')) {
+      const serverBase = (this.storageServerUrl || process.env?.STORAGE_SERVER_URL || '').replace(/\/+$/, '');
+      if (serverBase) {
+        targetUrl = `${serverBase}${targetUrl}`;
+      }
+    }
+
     if (!/^https?:\/\//i.test(targetUrl)) {
       targetUrl = `https://${targetUrl}`;
     }
@@ -1195,11 +1202,31 @@ export class StorageManager {
           const fileType = rf.fileType || rf.file_type || getFileTypeCategory(mimeType, rf.originalName || rf.original_name);
           const originalName = rf.originalName || rf.original_name || 'file';
           const fileSize = Number(rf.fileSize || rf.file_size || 0);
-          const cloudUrl = rf.cloudUrl || rf.cloud_url || rf.url || (this.storageServerUrl ? `${this.storageServerUrl}/cdn/${fileId}` : '');
+          const rawUrl = rf.cloudUrl || rf.cloud_url || rf.url || '';
+          let cloudUrl = rawUrl;
+          if (this.storageServerUrl) {
+            if (rawUrl.startsWith('http')) {
+              cloudUrl = this.storageServerUrl.startsWith('https://') ? rawUrl.replace(/^http:\/\//, 'https://') : rawUrl;
+            } else if (rawUrl.startsWith('/')) {
+              cloudUrl = `${this.storageServerUrl}${rawUrl}`;
+            } else {
+              cloudUrl = `${this.storageServerUrl}/cdn/${fileId}`;
+            }
+          }
           const cloudPublicId = rf.cloudPublicId || rf.cloud_public_id || fileId;
           const storageId = rf.storageId || rf.storage_id || null;
 
           if (this.query) {
+            let validStorageId = null;
+            if (storageId) {
+              try {
+                const sCheck = await this.query(`SELECT 1 FROM ${this.storagesTable} WHERE id = $1 LIMIT 1`, [storageId]);
+                if (sCheck && sCheck.rows && sCheck.rows.length > 0) {
+                  validStorageId = storageId;
+                }
+              } catch {}
+            }
+
             const hasInspectionCol = await this._hasInspectionColumn();
             const insertSql = hasInspectionCol
               ? `INSERT INTO ${this.filesTable} (
@@ -1227,8 +1254,8 @@ export class StorageManager {
                 RETURNING *`;
 
             const params = hasInspectionCol
-              ? [fileId, entityType, entityId, inspectionId, storageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId]
-              : [fileId, entityType, entityId, storageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId];
+              ? [fileId, entityType, entityId, inspectionId, validStorageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId]
+              : [fileId, entityType, entityId, validStorageId, originalName, fileType, mimeType, fileSize, cloudUrl, cloudPublicId];
 
             const r = await this.query(insertSql, params);
             this.fileMetadataCache.set(fileId, { data: r.rows[0], ts: Date.now() });