@iebh/tera-fy 1.0.17 → 1.0.19

package/lib/terafy.server.js

@@ -1,7 +1,8 @@
-import {cloneDeep, has as pathExists, set as pathSet} from 'lodash-es';
+import {cloneDeep, has as pathExists, get as pathGet, set as pathSet} from 'lodash-es';
 import {diffApply, jsonPatchPathConverter as jsPatchConverter} from 'just-diff-apply';
-import {nanoid} from 'nanoid';
 import mixin from '#utils/mixin';
+import {nanoid} from 'nanoid';
+import promiseDefer from '#utils/pDefer';
 import Reflib from '@iebh/reflib';
 
 /**
@@ -21,7 +22,9 @@ export default class TeraFyServer {
 	* @property {Number} subscribeTimeout Acceptable timeout period for subscribers to acklowledge a project change event, failing to respond will result in the subscriber being removed from the available subscriber list
 	* @property {String} restrictOrigin URL to restrict communications to
 	* @property {String} projectId The project to use as the default reference when calling various APIs
-	* @property {Number} The current server mode matching `SERVERMODE_*`
+	* @property {Number} serverMode The current server mode matching `SERVERMODE_*`
+	* @property {String} siteUrl The main site absolute URL
+	* @property {String} sitePathLogin Either an absolute URL or the relative path (taken from `siteUrl`) when trying to log in the user
 	*/
 	settings = {
 		devMode: false,
@@ -29,12 +32,15 @@ export default class TeraFyServer {
 		subscribeTimeout: 2000,
 		projectId: null,
 		serverMode: 0,
+		siteUrl: window.location.href,
+		sitePathLogin: '/login',
 	};
 
 	static SERVERMODE_NONE = 0;
 	static SERVERMODE_EMBEDDED = 1;
-	static SERVERMODE_WINDOW = 2;
-	static SERVERMODE_TERA = 3; // Terafy is running as the main TERA site
+	static SERVERMODE_FRAME = 2;
+	static SERVERMODE_POPUP = 3;
+	static SERVERMODE_TERA = 4; // Terafy is running as the main TERA site
 
 
 	// Contexts - createContext(), getClientContext(), messageEvent, senderRpc() {{{
@@ -94,7 +100,7 @@ export default class TeraFyServer {
 						}
 					},
 				});
-			case TeraFyServer.SERVERMODE_WINDOW:
+			case TeraFyServer.SERVERMODE_FRAME:
 				// Server is the top-level window so we need to send messages to an embedded iFrame
 				var iFrame = document.querySelector('iframe#external');
 				if (!iFrame) throw new Error('Cannot locate TERA-FY top-level->iFrame#external');
@@ -114,6 +120,7 @@ export default class TeraFyServer {
 						}
 					},
 				});
+			case TeraFyServer.SERVERMODE_POPUP:
 		}
 	}
 
@@ -202,10 +209,10 @@ export default class TeraFyServer {
 				TERA: 1,
 				...cloneDeep(message), // Need to clone to resolve promise nasties
 			};
-			this.debug('INFO', 'Parent send', message, '<=>', payload);
+			this.debug('INFO', 'Dispatch response', message, '<=>', payload);
 			(sendVia || globalThis.parent).postMessage(payload, this.settings.restrictOrigin);
 		} catch (e) {
-			this.debug('ERROR', 'Attempted to dispatch payload server->client', payload);
+			this.debug('ERROR', 'Attempted to dispatch response server->client', payload);
 			this.debug('ERROR', 'Message compose server->client:', e);
 		}
 	}
@@ -221,8 +228,11 @@ export default class TeraFyServer {
 			case 'embedded':
 				this.settings.serverMode = TeraFyServer.SERVERMODE_EMBEDDED;
 				break;
-			case 'window':
-				this.settings.serverMode = TeraFyServer.SERVERMODE_WINDOW;
+			case 'frame':
+				this.settings.serverMode = TeraFyServer.SERVERMODE_FRAME;
+				break;
+			case 'popup':
+				this.settings.serverMode = TeraFyServer.SERVERMODE_POPUP;
 				break;
 			default:
 				throw new Error(`Unsupported server mode "${mode}"`);
@@ -330,9 +340,17 @@ export default class TeraFyServer {
 	/**
 	* Fetch the current session user
 	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Boolean} [options.forceRetry=false] Forcabily try to refresh the user state
+	*
 	* @returns {Promise<User>} The current logged in user or null if none
 	*/
-	getUser() {
+	getUser(options) {
+		let settings = {
+			forceRetry: false,
+			...options,
+		};
+
 		let $auth = app.service('$auth');
 		let $subscriptions = app.service('$subscriptions');
 
@@ -340,7 +358,11 @@ export default class TeraFyServer {
 			$auth.promise(),
 			$subscriptions.promise(),
 		])
-			.then(()=> $auth.user.id ? {
+			.then(()=> {
+				if (!$auth.isLoggedIn && settings.forceRetry)
+					return $auth.restoreLogin();
+			})
+			.then(()=> $auth.user?.id ? {
 				id: $auth.user.id,
 				email: $auth.user.email,
 				name: [
@@ -349,6 +371,10 @@ export default class TeraFyServer {
 				].filter(Boolean).join(' '),
 				isSubscribed: $subscriptions.isSubscribed,
 			} : null)
+			.catch(e => {
+				console.warn('Catch', e);
+				debugger;
+			})
 	}
 
 
@@ -361,10 +387,97 @@ export default class TeraFyServer {
 	*/
 	requireUser() {
 		return this.getUser()
-			.then(user => user || this.uiAlert('You must be logged in to <a href="https://tera-tools.com" target="_blank">TERA-tools.com</a> to use this tool', {
+			.then(user => {
+				this.debug('Current user is', user ? user : 'Not valid');
+				if (user) throw 'EXIT'; // Valid user? Escape promise chain
+			})
+			.then(async ()=> { // No user present - try to validate with other methods
+				switch (this.settings.serverMode) {
+					case TeraFyServer.SERVERMODE_EMBEDDED:
+						/* - Doesn't work because Kinde sets the CSP header `frame-ancestors 'self'` which prevents usage within an iFrame
+						const $auth = app.service('$auth');
+						return this.requestFocus(()=>  $auth.login()
+							.then(()=> {
+								console.log('New user state', $auth.isLoggedIn);
+							})
+						);
+						*/
+
+						var focusContent = document.createElement('div');
+						focusContent.innerHTML = '<div>Authenticate with <a href="https://tera-tools.com" target="_blank">TERA-tools.com</a></div>'
+							+ '<div class="mt-2"><a class="btn btn-light">Open Popup...</a></div>';
+
+						// Attach click listner to internal button to re-popup the auth window (in case popups are blocked)
+						focusContent.querySelector('a.btn').addEventListener('click', ()=>
+							this.uiWindow(new URL(this.settings.sitePathLogin, this.settings.siteUrl))
+						);
+
+						// Create a deferred promise which will (eventually) resolve when the downstream window signals its ready
+						let waitOnWindowAuth = promiseDefer();
+
+						// Create a listener for the message from the downstream window to resolve the promise
+						let listenMessages = ({data}) => {
+							if (data.TERA && data.action == 'noop' && data.isLoggedIn) { // Signal sent from landing page - we're logged in, yey!
+								this.debug('Received ok message from popup window');
+								waitOnWindowAuth.resolve();
+							}
+						};
+						window.addEventListener('message', listenMessages);
+
+						// Go fullscreen, try to open the auth window + prompt the user to retry (if popups are blocked) and wait for resolution
+						await this.requestFocus(()=> {
+							// Try opening the popup automatically - this will likely fail if the user has popup blocking enabled
+							this.uiWindow(new URL(this.settings.sitePathLogin, this.settings.siteUrl));
+
+							// Display a message to the user, offering the ability to re-open the popup if it was originally denied
+							this.uiSplat(focusContent, {logo: true});
+
+							this.debug('Begin auth-check deferred wait...');
+							return waitOnWindowAuth.promise;
+						});
+
+						this.debug('Cleaning up popup auth');
+
+						// Remove message subscription
+						window.removeEventListener('message', listenMessages);
+
+						// Disable overlay content
+						this.uiSplat(false);
+
+						// Tell $auth to forcibly refresh its user data
+						await app.service('$auth').restoreLogin();
+
+						// Sanity Check against the login that should have been restored
+						if (!app.service('$auth').isLoggedIn) {
+							console.warn('Expecting tera-server to have restored $auth.user - but its still not logged in!');
+							debugger;
+						}
+
+						// ... then refresh the project list as we're likely going to need it
+						await app.service('$projects').refresh();
+
+						// Go back to start of auth checking loop and repull the user data
+						throw 'REDO';
+
+						break;
+					default:
+						// Pass - Implied - Cannot authenticate via other method so just fall through to scalding the user
+				}
+			})
+			.then(()=> this.uiAlert('You must be logged in to <a href="https://tera-tools.com" target="_blank">TERA-tools.com</a> to use this tool', {
 				title: 'TERA-tools account needed',
 				isHtml: true,
+				buttons: false,
 			}))
+			.then(()=> { throw 'REDO' }) // Go into loop to keep requesting user data
+			.catch(e => {
+				if (e === 'EXIT') {
+					return; // Exit with a valid user
+				} else if (e == 'REDO') {
+					return this.requireUser();
+				}
+				throw e;
+			})
 	}
 
 	// }}}
@@ -576,16 +689,61 @@ export default class TeraFyServer {
 		if (!app.service('$projects').active) throw new Error('No active project');
 		if (typeof path != 'string' && !Array.isArray(path)) throw new Error('setProjectStateDefaults(path, value) - path must be a dotted string or array of path segments');
 
-		pathSet(app.service('$projects').active, path, value)
+		this._pathSet(app.service('$projects').active, path, value);
 
 		return (
-			this.save && this.sync ? this.saveProjectState()
-			: this.save ? void this.saveProjectState()
+			settings.save && settings.sync ? this.saveProjectState()
+			: settings.save ? void this.saveProjectState()
 			: (()=> { throw new Error('setProjectState({sync: true, save: false}) makes no sense') })()
 		);
 	}
 
 
+	/**
+	* Internal recursive path setter used by setProjectState() / setProjectStateDefaults()
+	* The implementation defaults to _.set() unless overriden by a plugin
+	*
+	* @private
+	* @param {Object} subject The base subject to operate on
+	* @param {String|Array} path The path to set in dotted or array notation
+	* @param {*} value The value to set
+	*
+	* @returns {*} The set value
+	*/
+	_pathSet(subject, path, value) {
+		return pathSet(subject, path, value);
+	}
+
+
+	/**
+	* Internal recursive path checker used by setProjectStateDefaults()
+	* The implementation defaults to _.has() unless overriden by a plugin
+	*
+	* @private
+	* @param {Object} subject The base subject to examine
+	* @param {String|Array} path The path to fetch in dotted or array notation
+	* @returns {Boolean} True if the given path already exists within the subject
+	*/
+	_pathHas(subject, path) {
+		return pathExists(subject, path);
+	}
+
+
+	/**
+	* Internal recursive path fetcher
+	* The implementation defaults to _.get() unless overriden by a plugin
+	*
+	* @private
+	* @param {Object} subject The base subject to examine
+	* @param {String|Array} path The path to fetch in dotted or array notation
+	* @param {*} [fallback] Optional fallback to return if the end point does not exist
+	* @returns {*} True if the given path already exists within the subject
+	*/
+	_pathGet(subject, path, fallback) {
+		return pathGet(subject, path, fallback);
+	}
+
+
 	/**
 	* Set a nested value within the project state - just like `setProjectState()` - but only if no value for that path exists
 	*
@@ -599,7 +757,7 @@ export default class TeraFyServer {
 	setProjectStateDefaults(path, value, options) {
 		if (!app.service('$projects').active) throw new Error('No active project');
 
-		if (!pathExists(app.service('$projects').active, path)) {
+		if (!this._pathHas(app.service('$projects').active, path)) {
 			return this.setProjectState(path, value, options)
 				.then(()=> true)
 		} else {
@@ -944,6 +1102,7 @@ export default class TeraFyServer {
 	* @param {Object} [options] Additional options to mutate behaviour
 	* @param {String} [options.title='TERA'] The title of the alert box
 	* @param {Boolean} [options.isHtml=false] If falsy the text is rendered as plain-text otherwise it will be assumed as HTML content
+	* @param {'ok'|false} [options.buttons='ok'] Button set to use or falsy to disable
 	*
 	* @returns {Promise} A promise which resolves when the alert has been dismissed
 	*/
@@ -951,6 +1110,7 @@ export default class TeraFyServer {
 		let settings = {
 			title: 'TERA',
 			isHtml: false,
+			buttons: 'ok',
 			...options,
 		};
 
@@ -958,12 +1118,100 @@ export default class TeraFyServer {
 			app.service('$prompt').dialog({
 				title: settings.title,
 				body: text,
-				buttons: ['ok'],
+				buttons:
+					settings.buttons == 'ok' ? ['ok']
+					: false,
 				isHtml: settings.isHtml,
 				dialogClose: 'resolve',
 			})
 		);
 	}
+
+
+	/**
+	* Open a popup window containing a new site
+	*
+	* @param {String} url The URL to open
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Number} [options.width=500] The desired width of the window
+	* @param {Number} [options.height=600] The desired height of the window
+	* @param {Boolean} [options.center=true] Attempt to center the window on the screen
+	* @param {Object} [options.permissions] Additional permissions to set on opening, defaults to a suitable set of permission for popups (see code)
+	*
+	* @returns {WindowProxy} The opened window object (if `noopener` is not set in permissions)
+	*/
+	uiWindow(url, options) {
+		let settings = {
+			width: 500,
+			height: 600,
+			center: true,
+			permissions: {
+				popup: true,
+				location: false,
+				menubar: false,
+				status: false,
+				scrolbars: false,
+			},
+			...options,
+		};
+
+		return window.open(url, '_blank', Object.entries({
+			...settings.permissions,
+			width: settings.width,
+			height: settings.height,
+			...(settings.center && {
+				left: screen.width/2 - settings.width/2,
+				top: screen.height/2 - settings.height/2,
+			}),
+		})
+			.map(([key, val]) => key + '=' + (
+				typeof val == 'boolean' ? val ? '1' : '0' // Map booleans to 1/0
+				: val
+			))
+			.join(', ')
+		);
+	}
+
+
+	/**
+	* Display HTML content full-screen within TERA
+	* This function is ideally called within a requestFocus() wrapper
+	*
+	* @param {DOMElement|String|false} content Either a prepared DOM element or string to compile, set to falsy to remove existing content
+	*
+	* @param {Object} [options] Additional options to mutate behaviour
+	* @param {Boolean|String} [options.logo=false] Add a logo to the output, if boolean true the Tera-tools logo is used otherwise specify a path or URL
+	*/
+	uiSplat(content, options) {
+		let settings = {
+			logo: false,
+			...options,
+		};
+
+		if (!content) { // Remove content
+			globalThis.document.body.querySelector('.tera-fy-uiSplat').remove();
+			return;
+		}
+
+		let compiledContent = typeof content == 'string'
+			? (()=> {
+				let el = document.createElement('div')
+				el.innerHTML = content;
+				return el;
+			})()
+			: content;
+
+		compiledContent.classList.add('tera-fy-uiSplat');
+
+		if (settings.logo) {
+			let logoEl = document.createElement('div');
+			logoEl.innerHTML = `<img src="${typeof settings.logo == 'string' ? settings.logo : '/assets/logo/logo.svg'}" class="img-logo"/>`;
+			compiledContent.prepend(logoEl);
+		}
+
+		globalThis.document.body.append(compiledContent);
+	}
 	// }}}
 
 	// Utility - debug() {{{

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "TERA website worker",
   "scripts": {
-    "dev": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --sourcemap --serve --servedir=.",
+    "dev": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --serve --servedir=.",
     "build": "concurrently 'npm:build:*'",
-    "build:client": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --sourcemap",
-    "build:client:es2019": "esbuild --platform=browser --format=esm --target=es2019 --bundle lib/terafy.client.js --outfile=dist/terafy.es2019.js --minify --sourcemap",
-    "build:plugins-vue2:es2019": "esbuild --platform=browser --format=esm --target=es2019 --bundle plugins/vue2.js --outfile=dist/plugin.vue2.es2019.js --minify --sourcemap",
+    "build:client": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify",
+    "build:client:es2019": "esbuild --platform=browser --format=esm --target=es2019 --bundle lib/terafy.client.js --outfile=dist/terafy.es2019.js --minify",
+    "build:plugins-vue2:es2019": "esbuild --platform=browser --format=esm --target=es2019 --bundle plugins/vue2.js --outfile=dist/plugin.vue2.es2019.js --minify",
     "build:docs:api": "documentation build lib/terafy.client.js --format html --config documentation.yml --output docs/",
     "build:docs:markdown": "documentation build lib/terafy.client.js --format md --markdown-toc --output api.md",
+    "watch": "nodemon --watch lib/terafy.client.js --exec npm run build",
     "lint": "eslint ."
   },
   "type": "module",
@@ -25,7 +26,8 @@
       "default": "./dist/terafy.js"
     },
     "./server": "./lib/terafy.server.js",
-    "./plugins/*": "./plugins/*.js"
+    "./plugins/*": "./plugins/*.js",
+    "./widgets/*": "./widgets/*.js"
   },
   "repository": {
     "type": "git",
@@ -62,21 +64,23 @@
   "engines": {
     "node": ">=18"
   },
-  "peerDependencies": {
+  "dependencies": {
+    "just-diff": "^6.0.2",
     "lodash-es": "^4.17.21",
+    "mitt": "^3.0.1",
     "nanoid": "^5.0.2"
   },
-  "optionalDependencies": {
-    "just-diff": "^6.0.2",
-    "just-diff-apply": "^5.5.0",
-    "vue": "^3.3.7"
-  },
   "devDependencies": {
     "@momsfriendlydevco/eslint-config": "^1.0.7",
     "concurrently": "^8.2.2",
     "documentation": "^14.0.2",
     "esbuild": "^0.19.5"
   },
+  "optionalDependencies": {
+    "@iebh/reflib": "^2.2.2",
+    "just-diff-apply": "^5.5.0",
+    "vue": "^3.3.7"
+  },
   "eslintConfig": {
     "extends": "@momsfriendlydevco",
     "env": {
@@ -87,9 +91,5 @@
       "ecmaVersion": 13,
       "sourceType": "module"
     }
-  },
-  "dependencies": {
-    "@momsfriendlydevco/supabase-reactive": "^1.0.7",
-    "mitt": "^3.0.1"
   }
 }

package/plugins/vue2.js

@@ -151,6 +151,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 	* @param {Object} options.app Root level Vue app to bind against
 	* @param {Vue} options.Vue Vue@2 instance to bind against
 	* @param {String} [options.globalName='$tera'] Global property to allocate this service as within Vue2
+	* @param {Boolean} [options.requireProject=true] Automatically call requireProject() prior to any operation
 	* @param {Boolean} [options.subscribeState=true] Setup `vm.$tera.state` as a live binding on init
 	* @param {Boolean} [options.subscribeList=true] Setup `vm.$tera.projects` as a list of accesible projects on init
 	* @param {Objecct} [options.stateOptions] Options passed to `bindProjectState()` when setting up the main state
@@ -162,6 +163,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 			app: null,
 			Vue: null,
 			globalName: '$tera',
+			requireProject: true,
 			subscribeState: true,
 			subscribeProjects: true,
 			stateOptions: {
@@ -190,6 +192,7 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 
 		// this.statePromisable becomes the promise we are waiting on to resolve
 		return Promise.resolve()
+			.then(()=> settings.requireProject && this.requireProject())
 			.then(()=> Promise.all([
 				// Bind available project and wait on it
 				settings.subscribeState && this.bindProjectState({
@@ -205,4 +208,69 @@ export default class TeraFyPluginVue2 extends TeraFyPluginBase {
 					.then(()=> this.debug('INFO', 'Loaded projects', this.projects)),
 			]))
 	}
+
+
+	/**
+	* Override the regular _pathSet() handler so that it stays as a Vue observable
+	* This function will correctly populate any missing entities, calling vm.$set on each traversal of the path This is mainly to fix the issue where Vue can't see changes to objects if a key is added or removed
+	* Passing undefined as a value removes the key (unless removeUndefined is set to false)
+	*
+	* @override
+	* @param {Object} [target] The target to set the path of, if omitted the `vm` object is used as the base for traversal
+	* @param {string|array} path The path to set within the target / vm
+	* @param {*} value The value to set
+	* @param {Object} [options] Additional options
+	* @param {boolean} [options.arrayNumeric=true] Process numeric path segments as arrays
+	* @param {boolean} [options.removeUndefined=true] If undefined is specified as a value the key is removed instead of being set
+	* @param {boolean} [options.debug=false] Also print out debugging information when setting the value
+	* @returns {Object} The set value, like $set()
+	*
+	* @example Set a deeply nested path within a target object
+	* vm.$setPath(this, 'foo.bar.baz', 123); // this.$data.foo.bar.baz = 123
+	*
+	* @example Set a deeply nested path, with arrays, assuming VM as the root node
+	* vm.$setPath('foo.1.bar', 123); // vm.$data.foo = [{bar: 123}]
+	*/
+	_pathSet(target, path, value, options) {
+		// Sanity checks {{{
+		if (typeof target != 'object') throw new Error('Cannot use _pathSet on non-object target');
+		// }}}
+
+		let settings = {
+			arrayNumeric: true,
+			debug: false,
+			removeUndefined: true,
+			...options,
+		};
+
+		if (settings.debug) console.log('[_pathSet]', path, '=', value, {target, options});
+
+		let node = target;
+		if (!path) throw new Error('Cannot _pathSet with undefined path');
+		(typeof path == 'string' ? path.split('.') : path).some((chunk, chunkIndex, chunks) => {
+			if (chunkIndex == chunks.length - 1) { // Leaf node
+				if (settings.removeUndefined && value === undefined) {
+					this.Vue.$delete(node, chunk);
+				} else {
+					this.Vue.set(node, chunk, value);
+				}
+			} else if (node[chunk] === undefined) { // This chunk (and all following chunks) does't exist - populate from here
+				chunks.slice(chunkIndex, chunks.length - 1).forEach(chunk => {
+					if (settings.arrayNumeric && isFinite(chunk)) {
+						this.Vue.set(node, chunk, []);
+					} else {
+						this.Vue.set(node, chunk, {});
+					}
+					node = node[chunk];
+				});
+				this.Vue.set(node, chunks[chunks.length - 1], value);
+				return true;
+			} else {
+				node = node[chunk];
+				return false;
+			}
+		});
+
+		return value;
+	}
 }

package/utils/pDefer.js

@@ -0,0 +1,15 @@
+/**
+* Returns a defer object which represents a promise object which can resolve in the future - but without enclosing a function
+* The defer object has the keys {promise, resolve(), reject()}
+* @returns {Defer} A defered promise
+*/
+export default function() {
+	var deferred = {};
+
+	deferred.promise = new Promise((resolve, reject) => {
+		deferred.resolve = resolve;
+		deferred.reject = reject;
+	});
+
+	return deferred;
+}

package/widgets/tera-library-select.vue

@@ -0,0 +1,8 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+	<div>PLACEHOLDER: Library select</div>
+</template>