kempo 4.2.38 → 4.2.40

package/dist/admin/settings/[owner]/[name]/index.page.html

@@ -45,6 +45,7 @@
 						<option value="number">Number</option>
 						<option value="boolean">Boolean</option>
 						<option value="json">JSON</option>
+						<option value="secret">Secret</option>
 					</select>
 				</div>
 				<div class="mb d-f" style="align-items: center; gap: var(--spacer_h);">
@@ -122,6 +123,17 @@
 				await customElements.whenDefined('k-toggle');
 				$publicToggle.value = settingData.isPublic;
 
+				// Secrets are never public — force the toggle off and lock it whenever the type is (or becomes) 'secret'.
+				const syncPublicToggleForType = type => {
+					if(type === 'secret'){
+						$publicToggle.value = false;
+						$publicToggle.setAttribute('disabled', '');
+					} else if(canEditMetadata){
+						$publicToggle.removeAttribute('disabled');
+					}
+				};
+				syncPublicToggleForType(settingData.type);
+
 				/*
 					Value editors
 				*/
@@ -141,6 +153,13 @@
 							if(monacoEl) return JSON.parse(monacoEl.value);
 							return settingData.value;
 						}
+						case 'secret': {
+							// Blank on an existing secret means "unchanged" — round-trip the masked sentinel so the server keeps it.
+							// Blank while switching some other value's type to secret has nothing to preserve, so it clears instead.
+							const typed = $editorContainer.querySelector('input[type="password"]').value;
+							if(typed !== '') return typed;
+							return settingData.type === 'secret' ? settingData.value : null;
+						}
 					}
 				};
 
@@ -195,6 +214,23 @@
 					$editorContainer.appendChild(editor);
 				};
 
+				const renderSecretEditor = value => {
+					$editorContainer.innerHTML = '';
+					const input = document.createElement('input');
+					input.type = 'password';
+					input.className = 'full';
+					input.autocomplete = 'new-password';
+					input.placeholder = value ? 'Leave blank to keep the current secret' : 'Enter a secret value';
+					if(!canEditValue) input.readOnly = true;
+					$editorContainer.appendChild(input);
+					const note = document.createElement('p');
+					note.className = 'tc-muted mb0';
+					note.textContent = value
+						? 'The stored value is encrypted and cannot be displayed. Type a new value to replace it.'
+						: 'This secret has not been set yet.';
+					$editorContainer.appendChild(note);
+				};
+
 				const renderEditor = async (type, value) => {
 					currentType = type;
 					switch(type){
@@ -202,6 +238,7 @@
 						case 'number': renderNumberEditor(value); break;
 						case 'boolean': await renderBooleanEditor(value); break;
 						case 'json': renderJsonEditor(value); break;
+						case 'secret': renderSecretEditor(value); break;
 						default: renderStringEditor(String(value ?? ''));
 					}
 				};
@@ -218,6 +255,9 @@
 					try { converted = getValueFromEditor(); }
 					catch(e){ converted = settingData.value; }
 
+					// A secret editor left blank round-trips as the masked sentinel — treat that as empty rather than carrying it into the new type as if it were real plaintext.
+					if(currentType === 'secret' && converted === settingData.value) converted = '';
+
 					switch(newType){
 						case 'string':
 							converted = typeof converted === 'object'
@@ -236,8 +276,13 @@
 								catch(e){ /* keep as string */ }
 							}
 							break;
+						case 'secret':
+							// Never carry a value across into a secret field silently — require the user to type it.
+							converted = null;
+							break;
 					}
 					currentType = newType;
+					syncPublicToggleForType(newType);
 					await renderEditor(newType, converted);
 					setTimeout(checkDirty, 0);
 				});
@@ -321,11 +366,17 @@
 						return;
 					}
 
-					settingData.value = value;
+					// Don't hold the plaintext secret in page state any longer than the request needs it — mirror what a reload would show.
+					settingData.value = $typeSelect.value === 'secret'
+						? (value === null ? null : '••••••••')
+						: value;
 					settingData.type = $typeSelect.value;
 					settingData.isPublic = $publicToggle.value;
 					settingData.description = $descriptionInput.value.trim();
 
+					// Clear the typed plaintext out of the input now that it's saved, rather than leaving it sitting in the DOM.
+					if(settingData.type === 'secret') await renderEditor(settingData.type, settingData.value);
+
 					Toast.success('Setting saved');
 					document.getElementById('updatedAt').textContent = new Date().toLocaleString();
 					checkDirty();

package/dist/admin/settings/index.page.html

@@ -241,9 +241,10 @@
 									<option value="number">Number</option>
 									<option value="boolean">Boolean</option>
 									<option value="json">JSON</option>
+									<option value="secret">Secret</option>
 								</select>
 							</div>
-							<div class="mb d-f" style="align-items: center; gap: var(--spacer-sm);">
+							<div class="mb d-f" style="align-items: center; gap: var(--spacer-sm);" id="dlg-isPublic-row">
 								<input type="checkbox" id="dlg-isPublic">
 								<label for="dlg-isPublic">Public (accessible without authentication)</label>
 							</div>
@@ -280,6 +281,16 @@
 						},
 						cancelText: 'Cancel'
 					});
+
+					const $dlgValue = $dialog.querySelector('#dlg-value');
+					const $dlgIsPublic = $dialog.querySelector('#dlg-isPublic');
+					const $dlgIsPublicRow = $dialog.querySelector('#dlg-isPublic-row');
+					$dialog.querySelector('#dlg-type').addEventListener('change', e => {
+						const isSecret = e.target.value === 'secret';
+						$dlgValue.type = isSecret ? 'password' : 'text';
+						$dlgIsPublicRow.style.display = isSecret ? 'none' : '';
+						if(isSecret) $dlgIsPublic.checked = false;
+					});
 				});
 			}
 		</script>

package/dist/kempo/components/PermissionTarget.js

@@ -0,0 +1,2 @@
+import s from"/kempo-ui/components/LightComponent.js";import{currentUserHasPermission as t,currentUserHasAllPermissions as i,currentUserHasSomePermissions as e}from"../sdk.js";export default class a extends s{static properties={has:{type:String},all:{type:String},some:{type:String},target:{type:String}};constructor(){super(),this.has="",this.all="",this.some="",this.target=""}async connectedCallback(){super.connectedCallback(),this.style.display="none",await this.applyPermission()}async applyPermission(){let s=!1;if(1===[this.has,this.all,this.some].filter(Boolean).length)try{if(this.has){const[i,e]=await t({permission:this.has});s=!i&&e.hasPermission}else if(this.all){const t=this.all.split(",").map(s=>s.trim()),[e,a]=await i({permissions:t});s=!e&&a.hasPermission}else{const t=this.some.split(",").map(s=>s.trim()),[i,a]=await e({permissions:t});s=!i&&a.hasPermission}}catch(t){s=!1}this.setTargetsVisible(s)}setTargetsVisible(s){if(this.target)for(const t of document.querySelectorAll(this.target))t.style.display=s?"":"none"}}window.customElements.define("k-permission-target",a);
+//# sourceMappingURL=C:\Users\dusti\dev\kempo\dist\kempo\components\PermissionTarget.js.map

package/dist/kempo/components/PermissionTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"src\\kempo\\components\\PermissionTarget.js","names":["LightComponent","currentUserHasPermission","currentUserHasAllPermissions","currentUserHasSomePermissions","PermissionTarget","static","has","type","String","all","some","target","constructor","super","this","connectedCallback","style","display","applyPermission","hasPermission","filter","Boolean","length","error","data","permission","permissions","split","map","p","trim","setTargetsVisible","visible","element","document","querySelectorAll","window","customElements","define"],"sources":["0"],"sourcesContent":["import LightComponent from '/kempo-ui/components/LightComponent.js';\nimport { currentUserHasPermission, currentUserHasAllPermissions, currentUserHasSomePermissions } from '../sdk.js';\n\n/*\n\tSame permission check as k-permission, aimed at other elements instead of its own children.\n\n\tk-permission works by wrapping content and toggling its own display — which only works when\n\twrapping is harmless. Some elements are load-bearing about their position in the DOM: kempo-ui's\n\t<k-tabs> finds its <k-tab>/<k-tab-content> children with a direct-child query, so introducing a\n\twrapper between them breaks tab selection entirely, not just the permission check. This targets\n\tarbitrary elements elsewhere in the document by selector, so the gated elements can stay exactly\n\twhere their own component expects them.\n\n\tRenders nothing itself and never appears in the layout — it is pure wiring, placed wherever is\n\tconvenient (its target does not need to be a descendant, or even nearby).\n*/\nexport default class PermissionTarget extends LightComponent {\n\tstatic properties = {\n\t\thas: { type: String },\n\t\tall: { type: String },\n\t\tsome: { type: String },\n\t\ttarget: { type: String }\n\t};\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.has = '';\n\t\tthis.all = '';\n\t\tthis.some = '';\n\t\tthis.target = '';\n\t}\n\n\tasync connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.style.display = 'none';\n\t\tawait this.applyPermission();\n\t}\n\n\tasync applyPermission() {\n\t\tconst attributeCount = [this.has, this.all, this.some].filter(Boolean).length;\n\n\t\tlet hasPermission = false;\n\t\tif(attributeCount === 1) {\n\t\t\ttry {\n\t\t\t\tif(this.has) {\n\t\t\t\t\tconst [error, data] = await currentUserHasPermission({ permission: this.has });\n\t\t\t\t\thasPermission = error ? false : data.hasPermission;\n\t\t\t\t} else if(this.all) {\n\t\t\t\t\tconst permissions = this.all.split(',').map(p => p.trim());\n\t\t\t\t\tconst [error, data] = await currentUserHasAllPermissions({ permissions });\n\t\t\t\t\thasPermission = error ? false : data.hasPermission;\n\t\t\t\t} else {\n\t\t\t\t\tconst permissions = this.some.split(',').map(p => p.trim());\n\t\t\t\t\tconst [error, data] = await currentUserHasSomePermissions({ permissions });\n\t\t\t\t\thasPermission = error ? false : data.hasPermission;\n\t\t\t\t}\n\t\t\t} catch(error) {\n\t\t\t\thasPermission = false;\n\t\t\t}\n\t\t}\n\n\t\tthis.setTargetsVisible(hasPermission);\n\t}\n\n\tsetTargetsVisible(visible) {\n\t\tif(!this.target) return;\n\t\tfor(const element of document.querySelectorAll(this.target)) {\n\t\t\telement.style.display = visible ? '' : 'none';\n\t\t}\n\t}\n}\n\nwindow.customElements.define('k-permission-target', PermissionTarget);\n"],"mappings":"OAAOA,MAAoB,4EAClBC,kCAA0BC,mCAA8BC,MAAqC,2BAevF,MAAMC,UAAyBJ,EAC7CK,kBAAoB,CACnBC,IAAK,CAAEC,KAAMC,QACbC,IAAK,CAAEF,KAAMC,QACbE,KAAM,CAAEH,KAAMC,QACdG,OAAQ,CAAEJ,KAAMC,SAGjB,WAAAI,GACCC,QACAC,KAAKR,IAAM,GACXQ,KAAKL,IAAM,GACXK,KAAKJ,KAAO,GACZI,KAAKH,OAAS,EACf,CAEA,uBAAMI,GACLF,MAAME,oBACND,KAAKE,MAAMC,QAAU,aACfH,KAAKI,iBACZ,CAEA,qBAAMA,GAGL,IAAIC,GAAgB,EACpB,GAAsB,IAHC,CAACL,KAAKR,IAAKQ,KAAKL,IAAKK,KAAKJ,MAAMU,OAAOC,SAASC,OAItE,IACC,GAAGR,KAAKR,IAAK,CACZ,MAAOiB,EAAOC,SAAcvB,EAAyB,CAAEwB,WAAYX,KAAKR,MACxEa,GAAgBI,GAAgBC,EAAKL,aACtC,MAAO,GAAGL,KAAKL,IAAK,CACnB,MAAMiB,EAAcZ,KAAKL,IAAIkB,MAAM,KAAKC,IAAIC,GAAKA,EAAEC,SAC5CP,EAAOC,SAActB,EAA6B,CAAEwB,gBAC3DP,GAAgBI,GAAgBC,EAAKL,aACtC,KAAO,CACN,MAAMO,EAAcZ,KAAKJ,KAAKiB,MAAM,KAAKC,IAAIC,GAAKA,EAAEC,SAC7CP,EAAOC,SAAcrB,EAA8B,CAAEuB,gBAC5DP,GAAgBI,GAAgBC,EAAKL,aACtC,CACD,CAAE,MAAMI,GACPJ,GAAgB,CACjB,CAGDL,KAAKiB,kBAAkBZ,EACxB,CAEA,iBAAAY,CAAkBC,GACjB,GAAIlB,KAAKH,OACT,IAAI,MAAMsB,KAAWC,SAASC,iBAAiBrB,KAAKH,QACnDsB,EAAQjB,MAAMC,QAAUe,EAAU,GAAK,MAEzC,EAGDI,OAAOC,eAAeC,OAAO,sBAAuBlC","ignoreList":[]}

package/dist/kempo/icons/create_new_folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M560-320h80v-80h80v-80h-80v-80h-80v80h-80v80h80v80ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/></svg>

package/dist/kempo/icons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "4.2.38",
+  "version": "4.2.40",
   "type": "module",
   "description": "A fullstack CMS framework for creating websites with user authentication",
   "scripts": {

package/server/utils/settings/getPublicSettings.js

@@ -1,14 +1,16 @@
 import db from '../../db/index.js';
 import { setting } from '../../db/schema.js';
-import { eq } from 'drizzle-orm';
+import { eq, and, ne } from 'drizzle-orm';
 import { convertValue } from './helpers.js';
 
 export default async () => {
   try {
+    // isPublic should never be true on a secret (setSetting forces it false), but this is the
+    // one unauthenticated endpoint in the settings system, so exclude 'secret' defensively too.
     const results = await db
       .select()
       .from(setting)
-      .where(eq(setting.isPublic, true));
+      .where(and(eq(setting.isPublic, true), ne(setting.type, 'secret')));
 
     const settings = {};
     for(const s of results){

package/server/utils/settings/getSettingWithMetadata.js

@@ -2,12 +2,13 @@ import db from '../../db/index.js';
 import { setting } from '../../db/schema.js';
 import { eq } from 'drizzle-orm';
 import { convertValue } from './helpers.js';
+import { SECRET_MASK } from './secretCrypto.js';
 
 export default async (owner, name) => {
   if(!owner || !name){
     return [{ code: 400, msg: 'Both owner and name are required' }, null];
   }
-  
+
   try {
     const fullName = `${owner}:${name}`;
     const [result] = await db
@@ -15,12 +16,18 @@ export default async (owner, name) => {
       .from(setting)
       .where(eq(setting.name, fullName))
       .limit(1);
-    
+
     if(!result) return [{ code: 404, msg: 'Setting not found' }, null];
-    
+
+    /*
+      This feeds the HTTP API (GET /kempo/api/settings/[owner]/[name]) — the decrypted value must
+      never travel over the wire, so a secret is masked here rather than passed through convertValue.
+    */
     return [null, {
       name: result.name,
-      value: convertValue(result.value, result.type),
+      value: result.type === 'secret'
+        ? (result.value === null ? null : SECRET_MASK)
+        : convertValue(result.value, result.type),
       type: result.type,
       isPublic: result.isPublic,
       description: result.description,

package/server/utils/settings/helpers.js

@@ -1,6 +1,8 @@
+import { encryptSecret, decryptSecret } from './secretCrypto.js';
+
 export const convertValue = (value, type) => {
   if(value === null) return null;
-  
+
   switch(type){
     case 'number':
       return Number(value);
@@ -8,6 +10,8 @@ export const convertValue = (value, type) => {
       return value === 'true';
     case 'json':
       return JSON.parse(value);
+    case 'secret':
+      return decryptSecret(value);
     case 'string':
     default:
       return value;
@@ -16,10 +20,12 @@ export const convertValue = (value, type) => {
 
 export const serializeValue = (value, type) => {
   if(value === null) return null;
-  
+
   switch(type){
     case 'json':
       return JSON.stringify(value);
+    case 'secret':
+      return encryptSecret(value);
     case 'number':
     case 'boolean':
     case 'string':

package/server/utils/settings/listSettings.js

@@ -1,6 +1,7 @@
 import db from '../../db/index.js';
 import { setting } from '../../db/schema.js';
 import { like, not, and, sql } from 'drizzle-orm';
+import { SECRET_MASK } from './secretCrypto.js';
 
 export default async ({ owner, limit = 50, offset = 0 } = {}) => {
   try {
@@ -16,8 +17,15 @@ export default async ({ owner, limit = 50, offset = 0 } = {}) => {
     const q = db.select().from(setting);
     const cq = db.select({ count: sql`count(*)` }).from(setting);
     if(where){ q.where(where); cq.where(where); }
-    const settings = await q.limit(limit).offset(offset);
+    const results = await q.limit(limit).offset(offset);
     const [{ count }] = await cq;
+
+    // Never send secret ciphertext to the admin UI, not even encrypted.
+    const settings = results.map(s => s.type === 'secret'
+      ? { ...s, value: s.value === null ? null : SECRET_MASK }
+      : s
+    );
+
     return [null, { settings, total: Number(count), limit, offset }];
   } catch(error){
     return [{ code: 500, msg: 'Failed to retrieve settings' }, null];

package/server/utils/settings/secretCrypto.js

@@ -0,0 +1,41 @@
+import crypto from 'crypto';
+
+/*
+  'secret' settings (API keys, webhook signing secrets, etc.) are encrypted at rest with
+  AES-256-GCM. SETTINGS_ENCRYPTION_KEY must be a 64-character hex string (32 bytes) — generate
+  one with `node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"`.
+
+  Losing or rotating this key makes every stored secret unrecoverable, so it belongs in the same
+  place as DATABASE_URL: set once per environment, backed up, never committed.
+*/
+
+export const SECRET_MASK = '••••••••';
+
+const getKey = () => {
+  const raw = process.env.SETTINGS_ENCRYPTION_KEY;
+  if(!raw){
+    throw new Error('SETTINGS_ENCRYPTION_KEY environment variable is required to store secret settings');
+  }
+  const key = Buffer.from(raw, 'hex');
+  if(key.length !== 32){
+    throw new Error('SETTINGS_ENCRYPTION_KEY must be a 64-character hex string (32 bytes)');
+  }
+  return key;
+};
+
+export const encryptSecret = value => {
+  const iv = crypto.randomBytes(12);
+  const cipher = crypto.createCipheriv('aes-256-gcm', getKey(), iv);
+  const ciphertext = Buffer.concat([cipher.update(String(value), 'utf8'), cipher.final()]);
+  return Buffer.concat([iv, cipher.getAuthTag(), ciphertext]).toString('base64');
+};
+
+export const decryptSecret = encoded => {
+  const data = Buffer.from(encoded, 'base64');
+  const iv = data.subarray(0, 12);
+  const authTag = data.subarray(12, 28);
+  const ciphertext = data.subarray(28);
+  const decipher = crypto.createDecipheriv('aes-256-gcm', getKey(), iv);
+  decipher.setAuthTag(authTag);
+  return Buffer.concat([decipher.update(ciphertext), decipher.final()]).toString('utf8');
+};

package/server/utils/settings/setSetting.js

@@ -2,32 +2,53 @@ import db from '../../db/index.js';
 import { setting } from '../../db/schema.js';
 import { eq } from 'drizzle-orm';
 import { serializeValue } from './helpers.js';
+import { SECRET_MASK } from './secretCrypto.js';
 
 export default async (owner, name, value, type = null, isPublic = false, description = null) => {
   if(!owner || !name){
     return [{ code: 400, msg: 'Both owner and name are required' }, null];
   }
-  
+
   try {
     const fullName = `${owner}:${name}`;
     const detectedType = type || (typeof value === 'object' ? 'json' : typeof value);
-    const serializedValue = serializeValue(value, detectedType);
-    
-    const existing = await db
+
+    const [existing] = await db
       .select()
       .from(setting)
       .where(eq(setting.name, fullName))
       .limit(1);
-    
-    if(existing.length > 0){
+
+    /*
+      Secrets are never public, and the admin UI only ever shows SECRET_MASK back for an existing
+      one — if that's what comes back unchanged, keep the stored ciphertext instead of encrypting
+      the mask itself. A masked value with nothing to preserve (no prior secret) means the caller
+      never actually supplied a new one.
+    */
+    let serializedValue;
+    if(detectedType === 'secret'){
+      isPublic = false;
+      if(value === SECRET_MASK){
+        if(!existing || existing.type !== 'secret'){
+          return [{ code: 400, msg: 'A secret value is required' }, null];
+        }
+        serializedValue = existing.value;
+      } else {
+        serializedValue = serializeValue(value, detectedType);
+      }
+    } else {
+      serializedValue = serializeValue(value, detectedType);
+    }
+
+    if(existing){
       await db
         .update(setting)
-        .set({ 
+        .set({
           value: serializedValue,
           type: detectedType,
           isPublic,
           description,
-          updatedAt: new Date() 
+          updatedAt: new Date()
         })
         .where(eq(setting.name, fullName));
     } else {
@@ -41,8 +62,8 @@ export default async (owner, name, value, type = null, isPublic = false, descrip
         updatedAt: new Date()
       });
     }
-    
-    return [null, { name: fullName, value, type: detectedType, isPublic, description }];
+
+    return [null, { name: fullName, value: detectedType === 'secret' ? SECRET_MASK : value, type: detectedType, isPublic, description }];
   } catch(error){
     return [{ code: 500, msg: 'Failed to save setting' }, null];
   }