@iebh/tera-fy 1.0.20 → 1.0.21

package/lib/terafy.server.js

@@ -403,57 +403,8 @@ export default class TeraFyServer {
 						);
 						*/
 
-						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 == 'popupUserState' && data.user) { // Signal sent from landing page - we're logged in, yey!
-								let $auth = app.service('$auth');
-
-								// Accept user polyfill from opener
-								$auth.state = 'user';
-								$auth.ready = true;
-								$auth.isLoggedIn = true;
-								$auth.user = data.user;
-
-								this.debug('Received user auth from popup window', {'$auth.user': $auth.user});
-								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);
-
-						// ... then refresh the project list as we're likely going to need it
-						await app.service('$projects').refresh();
+						// Try to restore state via Popup workaround
+						await this.getUserViaEmbedWorkaround();
 
 						// Go back to start of auth checking loop and repull the user data
 						throw 'REDO';
@@ -479,6 +430,99 @@ export default class TeraFyServer {
 			})
 	}
 
+
+	/**
+	* In embed mode only - create a popup window and try to auth via that
+	*
+	* When in embed mode we can't store local state (Cookies without SameSite + LocalStorage etc.) so the only way to auth the user in the restricted envionment:
+	*
+	* 1. Try to read state from LocalStorage (if so, skip everything else)
+	* 2. Create a popup - which can escape the security container - and trigger a login
+	* 3. Listen locally for a message from the popup which it will transmit the authed user to its original window opener
+	* 3. Stash the state in LocalStorage to avoid this in future
+	*
+	* This workaround is only needed when developing with TERA in an embed window - i.e. local dev / stand alone websites
+	* Its annoying but I've tried everything else as a security method to get Non-Same-Origin sites to talk to each other
+	* - MC 2024-04-03
+	*
+	* @returns {Promise} A promise which resolves when the operation has completed
+	*/
+	async getUserViaEmbedWorkaround() {
+		let lsState = window.localStorage.getItem('tera.embedUser');
+		if (lsState) {
+			try {
+				lsState = JSON.parse(lsState);
+
+				let $auth = app.service('$auth');
+				$auth.state = 'user';
+				$auth.ready = true;
+				$auth.isLoggedIn = true;
+				$auth.user = lsState;
+
+				this.debug('Restored local user state from LocalStorage', {'$auth.user': $auth.user});
+
+				await app.service('$projects').refresh();
+				return;
+			} catch (e) {
+				throw new Error(`Failed to decode local dev state - ${e.toString()}`);
+			}
+		}
+
+		let 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}) => {
+			this.debug('Recieved message from popup window', {data});
+			if (data.TERA && data.action == 'popupUserState' && data.user) { // Signal sent from landing page - we're logged in, yey!
+				let $auth = app.service('$auth');
+
+				// Accept user polyfill from opener
+				$auth.state = 'user';
+				$auth.ready = true;
+				$auth.isLoggedIn = true;
+				$auth.user = data.user;
+
+				window.localStorage.setItem('tera.embedUser', JSON.stringify(data.user));
+
+				this.debug('Received user auth from popup window', {'$auth.user': $auth.user});
+				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);
+
+		// ... then refresh the project list as we're likely going to need it
+		await app.service('$projects').refresh();
+	}
 	// }}}
 
 	// Projects - getProject(), getProjects(), requireProject(), selectProject() {{{
@@ -811,7 +855,7 @@ export default class TeraFyServer {
 	}
 	// }}}
 
-	// Project files - selectProjectFile(), getProjectFiles() {{{
+	// Project files - selectProjectFile(), getProjectFiles(), getProjectFile(), setProjectFile() {{{
 
 	/**
 	* Data structure for a project file
@@ -921,6 +965,33 @@ export default class TeraFyServer {
 				meta: settings.meta,
 			}))
 	}
+
+
+	/**
+	* Fetch a project file
+	* @param {String} path File path to read
+	* @returns {Promise<Blob>} The eventual fetched file as a blob
+	*/
+	getProjectFile(path) {
+		return app.service('$supabase').fileGet(path, {
+			toast: false,
+		});
+	}
+
+
+	/**
+	* Replace a project files contents
+	*
+	* @param {String} path File path to write
+	* @param {File|Blob|FormData|Object|Array} contents The new file contents
+	* @returns {Promise} A promise which will resolve when the write operation has completed
+	*/
+	setProjectFile(path, contents) {
+		return app.service('$supabase').fileGet(path, {
+			overwrite: true,
+			toast: false,
+		});
+	}
 	// }}}
 
 	// Project Libraries - selectProjectLibrary(), parseProjectLibrary(), setProjectLibrary() {{{
@@ -980,7 +1051,7 @@ export default class TeraFyServer {
 		let settings = {
 			format: 'pojo',
 			autoRequire: true,
-			filter: file => true,
+			filter: file => true, // eslint-disable-line
 			find: files => files.at(0),
 			...options,
 		};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iebh/tera-fy",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "TERA website worker",
   "scripts": {
     "dev": "esbuild --platform=browser --format=esm --bundle lib/terafy.client.js --outfile=dist/terafy.js --minify --serve --servedir=.",
@@ -8,9 +8,9 @@
     "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",
+    "build:docs:api": "documentation build lib/terafy.client.js lib/projectFile.js --format html --config documentation.yml --output docs/",
+    "build:docs:markdown": "documentation build lib/terafy.client.js lib/projectFile.js --format md --markdown-toc --output api.md",
+    "watch": "nodemon --watch lib --exec npm run build",
     "lint": "eslint ."
   },
   "type": "module",
@@ -65,6 +65,7 @@
     "node": ">=18"
   },
   "dependencies": {
+    "filesize": "^10.1.1",
     "just-diff": "^6.0.2",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",

package/widgets/tera-file-select.vue

@@ -0,0 +1,136 @@
+<script>
+/**
+* Simple Vue widget to pick a project file via TERA-fy
+* Most of the options are copied from the $teraFy.selectProjectFile() API call that this component wraps
+* @see https://github.com/IEBH/TERA-fy
+*
+* @param {String} [title="Select a citation library"] The title of the file selection display
+* @param {String|Array<String>} [hint] Hints to identify the library to select in array order of preference. Generally corresponds to the previous stage
+* @param {Boolean} [allowUpload=true] Allow uploading new files
+* @param {Boolean} [allowRefresh=true] Allow the user to manually refresh the file list
+* @param {Boolean} [allowDownloadZip=true] Allow the user to download a Zip of all files
+* @param {Boolean} [allowCancel=true] Allow cancelling the operation. Will throw `'CANCEL'` as the promise rejection if acationed
+* @param {Boolean} [autoRequire=true] Run `requireProject()` automatically before continuing
+* @param {FileFilters} [filters] Optional file filters, defaults to citation library selection only
+* @param {String} [placeholder="Select a file..."] Placeholder text to show when no file is selected
+*
+* @fires change Fired as `(file:ProjectFile)` when the contents changes
+*
+* @slot selected Slot to show when a file is selected. Contains the bindings `({selected})`
+* @slot deselected Slot to show when no file is selected. Contains the bindings `({})`
+*/
+export default {
+	data() { return {
+		/**
+		* The currently selected library, if any
+		* @type {null|ProjectFile}
+		*/
+		selected: null,
+	}},
+	props: {
+		// Props passed to $teraFy.selectProjectFile()
+		title: {type: String, default: 'Select a citation library'},
+		hint: {type: [String, Array]},
+		allowUpload: {type: Boolean, default: true},
+		allowRefresh: {type: Boolean, default: true},
+		allowDownloadZip: {type: Boolean, default: true},
+		allowCancel: {type: Boolean, default: true},
+		autoRequire: {type: Boolean, default: true},
+		filters: {type: Object, default: ()=> ({
+			library: true,
+		})},
+
+		// Props specific to this component
+		placeholder: {type: String, default: 'Select a file...'},
+	},
+	methods: {
+		/**
+		* Trigger the file selection functionality within TERA-fy
+		* This sets the `selected` data property to the newly selected file + fires @change
+		*
+		* @fires change Fired as `(file:ProjectFile)` when the contents changes
+		* @returns {ProjectFile} file The selected file
+		*/
+		async choose() {
+			this.selected = await this.$tera.selectProjectFile({
+				title: this.title,
+				hint: this.hint,
+				allowUpload: this.allowUpload,
+				allowRefresh: this.allowRefresh,
+				allowDownloadZip: this.allowDownloadZip,
+				allowCancel: this.allowCancel,
+				autoRequire: this.autoRequire,
+				filters: this.filters,
+			});
+
+			this.$emit('change', this.selected);
+			return this.selected;
+		},
+	},
+}
+</script>
+
+<template>
+	<div
+		class="tera-library-select"
+		:class="selected && 'active'"
+		@click="choose"
+	>
+		<slot v-if="selected" name="selected" :selected="selected">
+			<a class="tera-library-select-selected">
+				<div class="file-name">
+					{{selected.parsedName.filename}}
+				</div>
+				<div class="file-meta">
+					(last edit {{selected.modifiedFormatted}} / {{selected.sizeFormatted}})
+				</div>
+			</a>
+		</slot>
+		<slot v-else name="deselected">
+			<a class="tera-library-select-deselected">
+				<div class="file-placeholder">
+					{{placeholder}}
+				</div>
+			</a>
+		</slot>
+	</div>
+</template>
+
+<style>
+/* NOTE: This is basic, minimal CSS to maintain compatibility downstream - so no SCSS, just plain */
+
+.tera-library-select {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	padding: 6px 10px;
+	border-radius: 5px;
+	width: 100%;
+	border: 1px solid #ced4da;
+	cursor: pointer;
+	min-height: 55px;
+}
+
+.tera-library-select a {
+	text-decoration: none;
+	color: inherit;
+}
+
+.tera-library-select a:hover {
+	text-decoration: none;
+}
+
+.tera-library-select.active {
+	border-color: #28a745;
+}
+
+.tera-library-select:hover .file-name,
+.tera-library-select:hover .file-placeholder {
+	color: #0056b3;
+}
+
+.tera-library-select .file-meta {
+	font-size: xx-small;
+}
+</style>

package/widgets/tera-library-select.vue

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