webspresso 0.0.98 → 0.0.99

package/plugins/admin-panel/field-renderers/file-upload.js

@@ -27,9 +27,24 @@ function shouldShowImagePreview(url, accept) {
   return isImageAccept(accept) || isImageUrl(url);
 }
 
-function renderUploadedFilePreview(url, { accept, readonly, onRemove, label }) {
+function renderUploadedFilePreview(url, { accept, readonly, onRemove, onSelectLibrary, label }) {
   if (!url) return null;
 
+  const actions = !readonly ? m('.flex.items-center.gap-3.mt-1', [
+    onSelectLibrary
+      ? m('button.text-indigo-600.dark:text-indigo-400.hover:text-indigo-800.dark:hover:text-indigo-300.text-xs.font-medium', {
+          type: 'button',
+          onclick: onSelectLibrary,
+        }, '📁 Change from Library')
+      : null,
+    onRemove
+      ? m('button.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.text-xs', {
+          type: 'button',
+          onclick: onRemove,
+        }, 'Remove')
+      : null,
+  ]) : null;
+
   if (shouldShowImagePreview(url, accept)) {
     return m('.mt-3.flex.flex-col.items-start.gap-2', [
       m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer' },
@@ -40,12 +55,7 @@ function renderUploadedFilePreview(url, { accept, readonly, onRemove, label }) {
         })
       ),
       m('p.text-xs.text-gray-500.dark:text-slate-400.break-all', url),
-      !readonly && onRemove
-        ? m('button.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.text-sm', {
-            type: 'button',
-            onclick: onRemove,
-          }, 'Remove')
-        : null,
+      actions,
     ]);
   }
 
@@ -55,12 +65,7 @@ function renderUploadedFilePreview(url, { accept, readonly, onRemove, label }) {
       target: '_blank',
       rel: 'noopener noreferrer',
     }, url),
-    !readonly && onRemove
-      ? m('button.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.text-sm', {
-          type: 'button',
-          onclick: onRemove,
-        }, 'Remove')
-      : null,
+    actions,
   ]);
 }
 
@@ -141,6 +146,19 @@ module.exports = {
         if (vnode.attrs.onchange) vnode.attrs.onchange('');
       };
 
+      const openLibraryPicker = () => {
+        if (typeof window !== 'undefined' && window.__openFileManagerPicker) {
+          window.__openFileManagerPicker({
+            accept,
+            title: 'Choose from Media Library',
+            onSelect: (pickedUrl) => {
+              revokeLocalPreview(state);
+              if (vnode.attrs.onchange) vnode.attrs.onchange(pickedUrl);
+            }
+          });
+        }
+      };
+
       if (!uploadUrl) {
         return m('.mb-4', [
           m(
@@ -148,7 +166,14 @@ module.exports = {
             label,
             required ? m('span.text-red-500', ' *') : null
           ),
-          m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
+          typeof window !== 'undefined' && window.__openFileManagerPicker
+            ? m('.flex.items-center.gap-2.mb-3', [
+                m('button.px-3.py-1.5.bg-indigo-600.hover:bg-indigo-700.text-white.text-xs.font-medium.rounded.flex.items-center.gap-1.shadow-sm', {
+                  type: 'button',
+                  onclick: openLibraryPicker,
+                }, '📁 Choose from Media Library')
+              ])
+            : m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
           m('input.w-full.px-3.py-2.border.rounded', {
             type: 'text',
             name,
@@ -161,7 +186,7 @@ module.exports = {
             },
           }),
           value
-            ? renderUploadedFilePreview(value, { accept, readonly, onRemove: clearValue, label })
+            ? renderUploadedFilePreview(value, { accept, readonly, onRemove: clearValue, onSelectLibrary: openLibraryPicker, label })
             : null,
         ]);
       }
@@ -173,7 +198,7 @@ module.exports = {
           required ? m('span.text-red-500', ' *') : null
         ),
         displayUrl
-          ? renderUploadedFilePreview(displayUrl, { accept, readonly, onRemove: clearValue, label })
+          ? renderUploadedFilePreview(displayUrl, { accept, readonly, onRemove: clearValue, onSelectLibrary: openLibraryPicker, label })
           : null,
         m(
           'div.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-6.text-center',
@@ -200,11 +225,26 @@ module.exports = {
                     'p.text-gray-600.dark:text-slate-400.mb-2',
                     displayUrl ? 'Drag and drop to replace, or' : 'Drag and drop a file here, or'
                   ),
-                  m(
-                    'label.text-blue-600.hover:text-blue-800.cursor-pointer',
-                    { for: 'file-input-' + name },
-                    displayUrl ? 'choose another file' : 'browse'
-                  ),
+                  m('.flex.items-center.justify-center.gap-3.flex-wrap', [
+                    m(
+                      'label.text-blue-600.hover:text-blue-800.cursor-pointer',
+                      { for: 'file-input-' + name },
+                      displayUrl ? 'choose another file' : 'browse'
+                    ),
+                    typeof window !== 'undefined' && window.__openFileManagerPicker
+                      ? m('button.text-indigo-600.hover:text-indigo-800.dark:text-indigo-400.cursor-pointer.font-medium.flex.items-center.gap-1.text-sm', {
+                          type: 'button',
+                          onclick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            openLibraryPicker();
+                          }
+                        }, [
+                          m('span', '•'),
+                          m('span', '📁 Choose from Media Library')
+                        ])
+                      : null,
+                  ]),
                 ]),
           ]
         ),
@@ -280,6 +320,98 @@ module.exports = {
 
       const urls = Array.isArray(value) ? value : (value ? [value] : []);
 
+      const openLibraryPicker = () => {
+        if (typeof window !== 'undefined' && window.__openFileManagerPicker) {
+          window.__openFileManagerPicker({
+            accept,
+            title: 'Add from Media Library',
+            onSelect: (pickedUrl) => {
+              const newUrls = [...urls, pickedUrl];
+              if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+            }
+          });
+        }
+      };
+
+      const renderGrid = () => {
+        if (urls.length === 0) return null;
+        return m('.grid.grid-cols-2.sm:grid-cols-3.md:grid-cols-4.gap-4.mb-3', urls.map((url, idx) => {
+          const isDragOver = state.dragOverIndex === idx;
+          const baseClasses = '.relative.group.border.rounded-lg.p-2.transition-all';
+          const cursorClass = readonly ? '' : '.cursor-move';
+          const borderClasses = isDragOver ? '.border-blue-500.border-2.dark:border-blue-500' : '.border-gray-200.dark:border-slate-700';
+          const bgClasses = isDragOver ? '.bg-blue-50.dark:bg-slate-800' : '.bg-gray-50.dark:bg-slate-900';
+          
+          return m(baseClasses + cursorClass + borderClasses + bgClasses, {
+            draggable: !readonly,
+            ondragstart: (e) => {
+              state.draggedIndex = idx;
+              e.dataTransfer.effectAllowed = 'move';
+              e.dataTransfer.setData('text/plain', idx);
+            },
+            ondragover: (e) => {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = 'move';
+            },
+            ondragenter: (e) => {
+              state.dragOverIndex = idx;
+            },
+            ondragleave: (e) => {
+              if (state.dragOverIndex === idx) {
+                state.dragOverIndex = null;
+              }
+            },
+            ondrop: (e) => {
+              e.preventDefault();
+              const fromIdx = state.draggedIndex;
+              const toIdx = idx;
+              if (fromIdx !== null && fromIdx !== undefined && fromIdx !== toIdx) {
+                const newUrls = [...urls];
+                const [movedItem] = newUrls.splice(fromIdx, 1);
+                newUrls.splice(toIdx, 0, movedItem);
+                if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+              }
+              state.draggedIndex = null;
+              state.dragOverIndex = null;
+            },
+            ondragend: (e) => {
+              state.draggedIndex = null;
+              state.dragOverIndex = null;
+            }
+          }, [
+            shouldShowImagePreview(url, accept)
+              ? m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer', draggable: false },
+                  m('img.h-32.w-full.rounded.object-contain.bg-white.dark:bg-slate-950', {
+                    src: url,
+                    alt: `${label} ${idx + 1}`,
+                    loading: 'lazy',
+                    draggable: false,
+                  })
+                )
+              : m('a.flex.items-center.justify-center.h-32.w-full.text-sm.text-indigo-600.dark:text-indigo-400.break-all.p-2', {
+                  href: url,
+                  target: '_blank',
+                  rel: 'noopener noreferrer',
+                  draggable: false,
+                }, url.substring(url.lastIndexOf('/') + 1) || url),
+            !readonly
+              ? m('button.absolute.top-1.right-1.bg-red-500.text-white.rounded-full.p-1.shadow-md.opacity-0.group-hover:opacity-100.hover:bg-red-700.transition-opacity', {
+                  type: 'button',
+                  onclick: () => {
+                    const newUrls = urls.filter((_, i) => i !== idx);
+                    if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
+                  },
+                  title: 'Remove file',
+                }, [
+                  m('svg.w-4.h-4', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+                    m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M6 18L18 6M6 6l12 12' })
+                  )
+                ])
+              : null,
+          ]);
+        }));
+      };
+
       if (!uploadUrl) {
         return m('.mb-4', [
           m(
@@ -287,7 +419,19 @@ module.exports = {
             label,
             required ? m('span.text-red-500', ' *') : null
           ),
-          m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
+          typeof window !== 'undefined' && window.__openFileManagerPicker
+            ? m('.flex.items-center.gap-2.mb-3', [
+                m('button.px-3.py-1.5.bg-indigo-600.hover:bg-indigo-700.text-white.text-xs.font-medium.rounded.flex.items-center.gap-1.shadow-sm', {
+                  type: 'button',
+                  onclick: openLibraryPicker,
+                }, '📁 Add from Media Library')
+              ])
+            : m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured.'),
+          renderGrid(),
+          m('input[type=hidden]', {
+            name,
+            value: JSON.stringify(urls),
+          }),
         ]);
       }
 
@@ -298,83 +442,7 @@ module.exports = {
           required ? m('span.text-red-500', ' *') : null
         ),
 
-        urls.length > 0
-          ? m('.grid.grid-cols-2.sm:grid-cols-3.md:grid-cols-4.gap-4.mb-3', urls.map((url, idx) => {
-              const isDragOver = state.dragOverIndex === idx;
-              const baseClasses = '.relative.group.border.rounded-lg.p-2.transition-all';
-              const cursorClass = readonly ? '' : '.cursor-move';
-              const borderClasses = isDragOver ? '.border-blue-500.border-2.dark:border-blue-500' : '.border-gray-200.dark:border-slate-700';
-              const bgClasses = isDragOver ? '.bg-blue-50.dark:bg-slate-800' : '.bg-gray-50.dark:bg-slate-900';
-              
-              return m(baseClasses + cursorClass + borderClasses + bgClasses, {
-                draggable: !readonly,
-                ondragstart: (e) => {
-                  state.draggedIndex = idx;
-                  e.dataTransfer.effectAllowed = 'move';
-                  e.dataTransfer.setData('text/plain', idx);
-                },
-                ondragover: (e) => {
-                  e.preventDefault();
-                  e.dataTransfer.dropEffect = 'move';
-                },
-                ondragenter: (e) => {
-                  state.dragOverIndex = idx;
-                },
-                ondragleave: (e) => {
-                  if (state.dragOverIndex === idx) {
-                    state.dragOverIndex = null;
-                  }
-                },
-                ondrop: (e) => {
-                  e.preventDefault();
-                  const fromIdx = state.draggedIndex;
-                  const toIdx = idx;
-                  if (fromIdx !== null && fromIdx !== undefined && fromIdx !== toIdx) {
-                    const newUrls = [...urls];
-                    const [movedItem] = newUrls.splice(fromIdx, 1);
-                    newUrls.splice(toIdx, 0, movedItem);
-                    if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
-                  }
-                  state.draggedIndex = null;
-                  state.dragOverIndex = null;
-                },
-                ondragend: (e) => {
-                  state.draggedIndex = null;
-                  state.dragOverIndex = null;
-                }
-              }, [
-                shouldShowImagePreview(url, accept)
-                  ? m('a.block', { href: url, target: '_blank', rel: 'noopener noreferrer', draggable: false },
-                      m('img.h-32.w-full.rounded.object-contain.bg-white.dark:bg-slate-950', {
-                        src: url,
-                        alt: `${label} ${idx + 1}`,
-                        loading: 'lazy',
-                        draggable: false,
-                      })
-                    )
-                  : m('a.flex.items-center.justify-center.h-32.w-full.text-sm.text-indigo-600.dark:text-indigo-400.break-all.p-2', {
-                      href: url,
-                      target: '_blank',
-                      rel: 'noopener noreferrer',
-                      draggable: false,
-                    }, url.substring(url.lastIndexOf('/') + 1) || url),
-                !readonly
-                  ? m('button.absolute.top-1.right-1.bg-red-500.text-white.rounded-full.p-1.shadow-md.opacity-0.group-hover:opacity-100.hover:bg-red-700.transition-opacity', {
-                      type: 'button',
-                      onclick: () => {
-                        const newUrls = urls.filter((_, i) => i !== idx);
-                        if (vnode.attrs.onchange) vnode.attrs.onchange(newUrls);
-                      },
-                      title: 'Remove file',
-                    }, [
-                      m('svg.w-4.h-4', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
-                        m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M6 18L18 6M6 6l12 12' })
-                      )
-                    ])
-                  : null,
-              ]);
-            }))
-          : null,
+        renderGrid(),
 
         m(
           'div.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-6.text-center',
@@ -405,11 +473,26 @@ module.exports = {
                           'p.text-gray-600.dark:text-slate-400.mb-2',
                           'Drag and drop files here, or'
                         ),
-                        m(
-                          'label.text-blue-600.hover:text-blue-800.cursor-pointer',
-                          { for: 'file-input-multiple-' + name },
-                          'browse'
-                        ),
+                        m('.flex.items-center.justify-center.gap-3.flex-wrap', [
+                          m(
+                            'label.text-blue-600.hover:text-blue-800.cursor-pointer',
+                            { for: 'file-input-multiple-' + name },
+                            'browse'
+                          ),
+                          typeof window !== 'undefined' && window.__openFileManagerPicker
+                            ? m('button.text-indigo-600.hover:text-indigo-800.dark:text-indigo-400.cursor-pointer.font-medium.flex.items-center.gap-1.text-sm', {
+                                type: 'button',
+                                onclick: (e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  openLibraryPicker();
+                                }
+                              }, [
+                                m('span', '•'),
+                                m('span', '📁 Add from Media Library')
+                              ])
+                            : null,
+                        ]),
                       ]),
                 ]),
           ]

package/plugins/admin-panel/field-renderers/index.js

@@ -79,7 +79,9 @@ function initializeDefaultRenderers() {
   registerFieldRenderer('rich-text', richTextRenderer.RichTextField);
   registerFieldRenderer('file-upload', fileUploadRenderer.FileUploadField);
   registerFieldRenderer('file', fileUploadRenderer.FileUploadField);
+  registerFieldRenderer('image', fileUploadRenderer.FileUploadField);
   registerFieldRenderer('files', fileUploadRenderer.FilesUploadField);
+  registerFieldRenderer('files-upload', fileUploadRenderer.FilesUploadField);
   
   // Relation types
   registerFieldRenderer('belongsTo', relationRenderers.BelongsToField);

package/plugins/api-key/crypto.js

@@ -0,0 +1,101 @@
+/**
+ * API Key Plugin — Cryptographic Utilities
+ * Zero external dependencies (uses native Node.js crypto)
+ * @module plugins/api-key/crypto
+ */
+
+'use strict';
+
+const crypto = require('crypto');
+
+/**
+ * Compare two strings in constant time to prevent timing attacks.
+ * Uses dummy buffer comparison if lengths differ to avoid leaking length via response timing.
+ * 
+ * @param {string} a
+ * @param {string} b
+ * @returns {boolean}
+ */
+function safeCompare(a, b) {
+  if (typeof a !== 'string' || typeof b !== 'string') {
+    return false;
+  }
+
+  const bufA = Buffer.from(a, 'utf8');
+  const bufB = Buffer.from(b, 'utf8');
+
+  if (bufA.length !== bufB.length) {
+    // Perform dummy timing-safe comparison with itself to preserve constant execution time
+    crypto.timingSafeEqual(bufA, bufA);
+    return false;
+  }
+
+  return crypto.timingSafeEqual(bufA, bufB);
+}
+
+/**
+ * Hash a raw API key using SHA-256
+ * 
+ * @param {string} rawKey
+ * @returns {string} Hex-encoded SHA-256 hash (64 characters)
+ */
+function hashKey(rawKey) {
+  if (typeof rawKey !== 'string' || rawKey.length === 0) {
+    return '';
+  }
+  return crypto.createHash('sha256').update(rawKey, 'utf8').digest('hex');
+}
+
+/**
+ * Mask an API key for safe UI display and logs.
+ * Shows prefix + '...' + last 4 characters.
+ * 
+ * @param {string} rawKey
+ * @param {string} [prefix='wsp_live_']
+ * @returns {string}
+ */
+function maskKey(rawKey, prefix = 'wsp_live_') {
+  if (!rawKey || typeof rawKey !== 'string') {
+    return '****';
+  }
+
+  if (rawKey.length <= 8) {
+    return '****';
+  }
+
+  const last4 = rawKey.slice(-4);
+  const effectivePrefix = rawKey.startsWith(prefix) ? prefix : rawKey.slice(0, Math.min(prefix.length, 9));
+  return `${effectivePrefix}...${last4}`;
+}
+
+/**
+ * Generate a cryptographically secure API key
+ * 
+ * @param {Object} [options]
+ * @param {string} [options.prefix='wsp_live_'] - Prefix for the key
+ * @param {number} [options.byteLength=24] - Number of random bytes (produces 32 base64url chars)
+ * @returns {{ key: string, hash: string, hint: string, prefix: string }}
+ */
+function generateKey(options = {}) {
+  const prefix = typeof options.prefix === 'string' ? options.prefix : 'wsp_live_';
+  const byteLength = typeof options.byteLength === 'number' && options.byteLength > 0 ? options.byteLength : 24;
+
+  const randomPart = crypto.randomBytes(byteLength).toString('base64url');
+  const key = `${prefix}${randomPart}`;
+  const hash = hashKey(key);
+  const hint = maskKey(key, prefix);
+
+  return {
+    key,
+    hash,
+    hint,
+    prefix,
+  };
+}
+
+module.exports = {
+  safeCompare,
+  hashKey,
+  maskKey,
+  generateKey,
+};