@underpostnet/underpost 2.97.0 → 2.97.5

package/src/client/components/core/FileExplorer.js

@@ -156,6 +156,15 @@ const FileExplorer = {
 
       EventsUI.onClick(`.btn-input-file-explorer`, async (e) => {
         e.preventDefault();
+
+        // Check authentication before upload
+        if (!Auth.getToken()) {
+          return NotificationManager.Push({
+            html: Translate.Render(`error-user-not-authenticated`),
+            status: 'error',
+          });
+        }
+
         const { errorMessage } = await validators();
         if (!formBodyFiles)
           return NotificationManager.Push({
@@ -166,6 +175,12 @@ const FileExplorer = {
         let fileData;
         {
           const { status, data } = await FileService.post({ body: formBodyFiles });
+          if (status === 'error' || !data) {
+            return NotificationManager.Push({
+              html: Translate.Render(`error-upload-file`),
+              status: 'error',
+            });
+          }
           fileData = data;
         }
         {
@@ -259,6 +274,8 @@ const FileExplorer = {
         // params.data._id
 
         this.eGui = document.createElement('div');
+        const isPublic = params.data.isPublic;
+        const toggleId = `toggle-public-${params.data._id}`;
         this.eGui.innerHTML = html`
           <div class="fl">
             ${await BtnIcon.Render({
@@ -281,6 +298,13 @@ const FileExplorer = {
               label: html`<i class="fas fa-copy"></i>`,
               type: 'button',
             })}
+            ${await BtnIcon.Render({
+              class: `in fll management-table-btn-mini ${toggleId}`,
+              label: isPublic
+                ? html`<i class="fas fa-globe" style="color: #4caf50;"></i>`
+                : html`<i class="fas fa-lock" style="color: #9e9e9e;"></i>`,
+              type: 'button',
+            })}
           </div>
         `;
 
@@ -315,13 +339,21 @@ const FileExplorer = {
 
           EventsUI.onClick(`.btn-file-download-${params.data._id}`, async (e) => {
             e.preventDefault();
-            console.log(params);
-            const {
-              data: [file],
-              status,
-            } = await FileService.get({ id: params.data.fileId });
-
-            downloadFile(new Blob([new Uint8Array(file.data.data)], { type: params.data.mimetype }), params.data.name);
+            try {
+              // Use FileService with blob/ prefix for centralized blob fetching
+              const { data: blobArray, status } = await FileService.get({ id: `blob/${params.data.fileId}` });
+              if (status === 'success' && blobArray && blobArray[0]) {
+                downloadFile(blobArray[0], params.data.name);
+              } else {
+                throw new Error('Failed to fetch file blob');
+              }
+            } catch (error) {
+              logger.error('Download failed:', error);
+              NotificationManager.Push({
+                html: 'Download failed',
+                status: 'error',
+              });
+            }
           });
           EventsUI.onClick(
             `.btn-file-delete-${params.data._id}`,
@@ -371,6 +403,80 @@ const FileExplorer = {
             },
             { context: 'modal' },
           );
+
+          // Toggle public/private status
+          EventsUI.onClick(
+            `.${toggleId}`,
+            async (e) => {
+              e.preventDefault();
+
+              // If document is currently private, show confirmation before making public
+              if (!params.data.isPublic) {
+                const confirmResult = await Modal.RenderConfirm({
+                  html: async () => {
+                    return html`
+                      <div class="in section-mp" style="text-align: center">
+                        ${Translate.Render('confirm-make-public')}
+                        <br />
+                        "${params.data.title}"
+                      </div>
+                    `;
+                  },
+                  id: `confirm-toggle-public-${params.data._id}`,
+                });
+                if (confirmResult.status !== 'confirm') return;
+              }
+
+              try {
+                const { data, status } = await DocumentService.patch({
+                  id: params.data._id,
+                  action: 'toggle-public',
+                });
+
+                if (status === 'success') {
+                  // Update local data
+                  params.data.isPublic = data.isPublic;
+
+                  // Update documentInstance
+                  const docIndex = documentInstance.findIndex((d) => d._id === params.data._id);
+                  if (docIndex !== -1) {
+                    documentInstance[docIndex].isPublic = data.isPublic;
+                  }
+
+                  // Update button icon
+                  const btnElement = s(`.${toggleId}`);
+                  if (btnElement) {
+                    const iconElement = btnElement.querySelector('i');
+                    if (iconElement) {
+                      if (data.isPublic) {
+                        iconElement.className = 'fas fa-globe';
+                        iconElement.style.color = '#4caf50';
+                      } else {
+                        iconElement.className = 'fas fa-lock';
+                        iconElement.style.color = '#9e9e9e';
+                      }
+                    }
+                  }
+
+                  NotificationManager.Push({
+                    html: data.isPublic
+                      ? Translate.Render('document-now-public')
+                      : Translate.Render('document-now-private'),
+                    status: 'success',
+                  });
+                } else {
+                  throw new Error('Failed to toggle public status');
+                }
+              } catch (error) {
+                logger.error('Toggle public failed:', error);
+                NotificationManager.Push({
+                  html: Translate.Render('error-toggle-public'),
+                  status: 'error',
+                });
+              }
+            },
+            { context: 'modal' },
+          );
         });
       }
 
@@ -618,7 +724,7 @@ const FileExplorer = {
                   columnDefs: [
                     { field: 'name', flex: 2, headerName: 'Name', cellRenderer: LoadFileNameRenderer },
                     { field: 'mimetype', flex: 1, headerName: 'Type' },
-                    { headerName: '', width: 80, cellRenderer: LoadFileActionsRenderer },
+                    { headerName: '', width: 120, cellRenderer: LoadFileActionsRenderer },
                   ],
                 },
               })}
@@ -680,6 +786,7 @@ const FileExplorer = {
         fileId: f.fileId._id,
         _id: f._id,
         title: f.title,
+        isPublic: f.isPublic || false,
       };
     });
     let documentId = document._id;

package/src/client/components/core/Input.js

@@ -1,3 +1,11 @@
+/**
+ * Input component module for form controls and file handling utilities.
+ * Provides input rendering, file data conversion, and blob endpoint integration.
+ *
+ * @module src/client/components/core/Input.js
+ * @namespace InputClient
+ */
+
 import { AgGrid } from './AgGrid.js';
 import { BtnIcon } from './BtnIcon.js';
 import { isValidDate } from './CommonJs.js';
@@ -8,8 +16,26 @@ import { RichText } from './RichText.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
 import { htmls, htmlStrSanitize, s } from './VanillaJs.js';
+import { getApiBaseUrl } from '../../services/core/core.service.js';
+import { FileService } from '../../services/file/file.service.js';
+
+/**
+ * Logger instance for this module.
+ * @type {Function}
+ * @memberof InputClient
+ * @private
+ */
 const logger = loggerFactory(import.meta);
 
+/**
+ * Creates a FormData object from file input event.
+ * Filters files by extension if provided.
+ * @function fileFormDataFactory
+ * @memberof InputClient
+ * @param {Event} e - The input change event containing files.
+ * @param {string[]} [extensions] - Optional array of allowed MIME types.
+ * @returns {FormData} FormData object containing the valid files.
+ */
 const fileFormDataFactory = (e, extensions) => {
   const form = new FormData();
   for (const keyFile of Object.keys(e.target.files)) {
@@ -22,17 +48,156 @@ const fileFormDataFactory = (e, extensions) => {
   return form;
 };
 
+/**
+ * Convert file data to File object.
+ * Supports both legacy format (with buffer data) and new format (metadata only).
+ *
+ * Legacy format: `{ data: { data: [0, 1, 2, ...] }, mimetype: 'text/markdown', name: 'file.md' }`
+ * New format: `{ _id: '...', mimetype: 'text/markdown', name: 'file.md' }`
+ *
+ * @function getFileFromFileData
+ * @memberof InputClient
+ * @param {Object} fileData - File data object in legacy or new format.
+ * @param {Object} [fileData.data] - Legacy format data container.
+ * @param {Array<number>} [fileData.data.data] - Legacy format byte array.
+ * @param {string} [fileData._id] - New format file ID.
+ * @param {string} fileData.mimetype - MIME type of the file.
+ * @param {string} fileData.name - Name of the file.
+ * @returns {File|null} File object if legacy format, null if metadata-only or invalid.
+ */
 const getFileFromFileData = (fileData) => {
-  const blob = new Blob([new Uint8Array(fileData.data.data)], { type: fileData.mimetype });
-  return new File([blob], fileData.name, { type: fileData.mimetype });
+  if (!fileData) {
+    logger.error('getFileFromFileData: fileData is undefined');
+    return null;
+  }
+
+  // Check if this is legacy format with buffer data
+  if (fileData.data?.data) {
+    try {
+      const blob = new Blob([new Uint8Array(fileData.data.data)], { type: fileData.mimetype });
+      return new File([blob], fileData.name, { type: fileData.mimetype });
+    } catch (error) {
+      logger.error('Error creating File from legacy buffer data:', error);
+      return null;
+    }
+  }
+
+  // New format - metadata only, cannot create File without content
+  // Return null and let caller fetch from blob endpoint if needed
+  if (fileData._id && !fileData.data?.data) {
+    logger.warn(
+      'getFileFromFileData: File is metadata-only, cannot create File object without content. File ID:',
+      fileData._id,
+    );
+    return null;
+  }
+
+  logger.error('getFileFromFileData: Invalid file data structure', fileData);
+  return null;
+};
+
+/**
+ * Fetch file content from blob endpoint and create File object.
+ * Used for metadata-only format files during edit mode.
+ * Uses FileService with blob/ prefix for centralized blob fetching.
+ *
+ * @async
+ * @function getFileFromBlobEndpoint
+ * @memberof InputClient
+ * @param {Object} fileData - File metadata object with _id.
+ * @param {string} fileData._id - File ID for blob endpoint lookup.
+ * @param {string} [fileData.name] - Optional file name.
+ * @param {string} [fileData.mimetype] - Optional MIME type.
+ * @returns {Promise<File|null>} File object from blob endpoint, or null on error.
+ */
+const getFileFromBlobEndpoint = async (fileData) => {
+  if (!fileData || !fileData._id) {
+    return null;
+  }
+
+  try {
+    const { data: blobArray, status } = await FileService.get({ id: `blob/${fileData._id}` });
+    if (status !== 'success' || !blobArray || !blobArray[0]) {
+      logger.error('Failed to fetch file from blob endpoint');
+      return null;
+    }
+
+    const blob = blobArray[0];
+    return new File([blob], fileData.name || 'file', { type: fileData.mimetype || blob.type });
+  } catch (error) {
+    logger.error('Error fetching file from blob endpoint:', error);
+    return null;
+  }
 };
 
+/**
+ * Get image/file source URL from file data.
+ * Supports both legacy format (with buffer) and new format (metadata only).
+ * For new format, returns blob endpoint URL.
+ *
+ * @function getSrcFromFileData
+ * @memberof InputClient
+ * @param {Object} fileData - File data object in legacy or new format.
+ * @param {Object} [fileData.data] - Legacy format data container.
+ * @param {Array<number>} [fileData.data.data] - Legacy format byte array.
+ * @param {string} [fileData._id] - New format file ID for blob endpoint.
+ * @param {string} fileData.mimetype - MIME type of the file.
+ * @returns {string|null} Object URL for legacy format, blob endpoint URL for new format, or null on error.
+ */
 const getSrcFromFileData = (fileData) => {
-  const file = getFileFromFileData(fileData);
-  return URL.createObjectURL(file);
+  if (!fileData) {
+    logger.error('getSrcFromFileData: fileData is undefined');
+    return null;
+  }
+
+  // Legacy format with buffer data - create object URL
+  if (fileData.data?.data) {
+    try {
+      const file = getFileFromFileData(fileData);
+      if (file) {
+        return URL.createObjectURL(file);
+      }
+    } catch (error) {
+      logger.error('Error getting src from legacy buffer data:', error);
+    }
+  }
+
+  // New format - use blob endpoint
+  if (fileData._id) {
+    try {
+      return getApiBaseUrl({ id: fileData._id, endpoint: 'file/blob' });
+    } catch (error) {
+      logger.error('Error generating blob URL:', error);
+      return null;
+    }
+  }
+
+  logger.error('getSrcFromFileData: Cannot generate src, invalid file data:', fileData);
+  return null;
 };
 
+/**
+ * Input component for rendering various form input types.
+ * Supports text, password, file, color, date, dropdown, toggle, rich text, and grid inputs.
+ * @namespace InputClient.Input
+ * @memberof InputClient
+ */
 const Input = {
+  /**
+   * Renders an input element based on the provided options.
+   * @async
+   * @function Render
+   * @memberof InputClient.Input
+   * @param {Object} options - Input configuration options.
+   * @param {string} options.id - Unique identifier for the input.
+   * @param {string} [options.type] - Input type (text, password, file, color, datetime-local, etc.).
+   * @param {string} [options.placeholder] - Placeholder text.
+   * @param {string} [options.label] - Label text for the input.
+   * @param {string} [options.containerClass] - CSS class for the container.
+   * @param {string} [options.inputClass] - CSS class for the input element.
+   * @param {boolean} [options.disabled] - Whether the input is disabled.
+   * @returns {Promise<string>} HTML string for the input component.
+   */
   Render: async function (options) {
     const { id } = options;
     options?.placeholder
@@ -184,8 +349,8 @@ const Input = {
     }
     return obj;
   },
-  setValues: function (formData, obj, originObj, fileObj) {
-    setTimeout(() => {
+  setValues: async function (formData, obj, originObj, fileObj) {
+    setTimeout(async () => {
       for (const inputData of formData) {
         if (!s(`.${inputData.id}`)) continue;
 
@@ -194,11 +359,31 @@ const Input = {
             if (fileObj && fileObj[inputData.model] && s(`.${inputData.id}`)) {
               const dataTransfer = new DataTransfer();
 
-              if (fileObj[inputData.model].fileBlob)
-                dataTransfer.items.add(getFileFromFileData(fileObj[inputData.model].fileBlob));
+              if (fileObj[inputData.model].fileBlob) {
+                let fileBlobData = getFileFromFileData(fileObj[inputData.model].fileBlob);
+
+                // If fileBlob is metadata-only, try to fetch from blob endpoint
+                if (!fileBlobData && fileObj[inputData.model].fileBlob?._id) {
+                  fileBlobData = await getFileFromBlobEndpoint(fileObj[inputData.model].fileBlob);
+                }
+
+                if (fileBlobData) {
+                  dataTransfer.items.add(fileBlobData);
+                }
+              }
 
-              if (fileObj[inputData.model].mdBlob)
-                dataTransfer.items.add(getFileFromFileData(fileObj[inputData.model].mdBlob));
+              if (fileObj[inputData.model].mdBlob) {
+                let mdBlobData = getFileFromFileData(fileObj[inputData.model].mdBlob);
+
+                // If mdBlob is metadata-only, try to fetch from blob endpoint
+                if (!mdBlobData && fileObj[inputData.model].mdBlob?._id) {
+                  mdBlobData = await getFileFromBlobEndpoint(fileObj[inputData.model].mdBlob);
+                }
+
+                if (mdBlobData) {
+                  dataTransfer.items.add(mdBlobData);
+                }
+              }
 
               if (dataTransfer.files.length) {
                 s(`.${inputData.id}`).files = dataTransfer.files;
@@ -384,4 +569,12 @@ function isTextInputFocused() {
   return active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA');
 }
 
-export { Input, InputFile, fileFormDataFactory, getSrcFromFileData, getFileFromFileData, isTextInputFocused };
+export {
+  Input,
+  InputFile,
+  fileFormDataFactory,
+  getSrcFromFileData,
+  getFileFromFileData,
+  getFileFromBlobEndpoint,
+  isTextInputFocused,
+};

package/src/client/components/core/LogIn.js

@@ -1,16 +1,19 @@
-import { CoreService } from '../../services/core/core.service.js';
+import { CoreService, getApiBaseUrl } from '../../services/core/core.service.js';
 import { FileService } from '../../services/file/file.service.js';
 import { UserService } from '../../services/user/user.service.js';
 import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
 import { EventsUI } from './EventsUI.js';
 import { Input } from './Input.js';
+import { loggerFactory } from './Logger.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { htmls, s } from './VanillaJs.js';
 import { Webhook } from './Webhook.js';
 
+const logger = loggerFactory(import.meta);
+
 const LogIn = {
   Scope: {
     user: {
@@ -24,6 +27,8 @@ const LogIn = {
   Event: {},
   Trigger: async function (options) {
     const { user } = options;
+    if (user) this.Scope.user.main.model.user = { ...this.Scope.user.main.model.user, ...user };
+
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (!user || user.role === 'guest') return;
     await Webhook.register({ user });
@@ -52,26 +57,40 @@ const LogIn = {
         </style>`,
       );
     if (!this.Scope.user.main.model.user.profileImage) {
-      const resultFile = await FileService.get({ id: user.profileImageId });
-      if (resultFile && resultFile.status === 'success' && resultFile.data[0]) {
-        const imageData = resultFile.data[0];
-
-        const imageBlob = new Blob([new Uint8Array(imageData.data.data)], { type: imageData.mimetype });
-
-        const imageFile = new File([imageBlob], imageData.name, { type: imageData.mimetype });
+      // Try to load profile image only if profileImageId exists
+      if (!this.Scope.user.main.model.user.profileImage && user?.profileImageId) {
+        try {
+          const resultFile = await FileService.get({ id: user.profileImageId });
+          if (resultFile && resultFile.status === 'success' && resultFile.data[0]) {
+            const imageData = resultFile.data[0];
+            let imageSrc = null;
 
-        const imageSrc = URL.createObjectURL(imageFile);
+            try {
+              // Handle new metadata-only format
+              if (!imageData.data?.data && imageData._id) {
+                imageSrc = getApiBaseUrl({ id: imageData._id, endpoint: 'file/blob' });
+              }
+              // Handle legacy format with buffer data
+              else if (imageData.data?.data) {
+                const imageBlob = new Blob([new Uint8Array(imageData.data.data)], { type: imageData.mimetype });
+                const imageFile = new File([imageBlob], imageData.name, { type: imageData.mimetype });
+                imageSrc = URL.createObjectURL(imageFile);
+              }
 
-        // const  rawSvg = await CoreService.getRaw({ url: imageSrc });
-        // rawSvg = rawSvg.replace(`<svg`, `<svg class="abs account-profile-image" `).replace(`#5f5f5f`, `#ffffffc8`);
-
-        this.Scope.user.main.model.user.profileImage = {
-          resultFile,
-          imageData,
-          imageBlob,
-          imageFile,
-          imageSrc,
-        };
+              if (imageSrc) {
+                this.Scope.user.main.model.user.profileImage = {
+                  resultFile,
+                  imageData,
+                  imageSrc,
+                };
+              }
+            } catch (error) {
+              logger.warn('Error processing profile image:', error);
+            }
+          }
+        } catch (error) {
+          logger.warn('Error fetching profile image:', error);
+        }
       }
       htmls(
         `.action-btn-profile-log-in-render`,
@@ -80,7 +99,10 @@ const LogIn = {
             class="abs center top-box-profile-img"
             ${this.Scope.user.main.model.user.profileImage
               ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
-              : ``}
+              : `src="${getApiBaseUrl({
+                  id: 'assets/avatar',
+                  endpoint: 'user',
+                })}"`}
           />
         </div>`,
       );