Share plugin: Add warning prompt

plugins/tiddlywiki/share/rawmarkup.js

@@ -19,7 +19,7 @@ if(rawHash.charAt(0) === "#") {
 	try{
 		hash = decodeURIComponent(rawHash.substring(1));
 	} catch(ex) {
-		console.log("Error decoding location hash",ex);
+		console.log("Share plugin: Error decoding location hash",ex);
 	}
 	// Try to parse the hash as JSON
 	if(hash) {
@@ -27,17 +27,88 @@ if(rawHash.charAt(0) === "#") {
 		try {
 			tiddlers= JSON.parse(hash);
 		} catch(ex) {
-			console.log("Error parsing JSON from location hash",ex);
+			console.log("Share plugin: Error parsing JSON from location hash",ex);
 		}
 		if(tiddlers) {
 			// Need to initialise these because we run before bootprefix.js and boot.js
 			window.$tw = window.$tw || {};
 			$tw.boot = $tw.boot || {};
 			$tw.preloadTiddlers = $tw.preloadTiddlers || [];
-			// Load our tiddlers
-			$tw.preloadTiddlers = $tw.preloadTiddlers.concat(tiddlers);
-		}		
+			// Prevent TiddlyWiki from booting
+			$tw.boot.suppressBoot = true;
+			// Load our styles
+			var stylesWrapper = document.createElement("style");
+			stylesWrapper.innerHTML = tiddlywikiSharePluginStartupWarningCss;
+			document.documentElement.appendChild(stylesWrapper);
+			// Display the warning banner
+			var warningWrapper = document.createElement("div");
+			warningWrapper.innerHTML = tiddlywikiSharePluginStartupWarningHtml;
+			document.documentElement.appendChild(warningWrapper);
+			// Add our event handlers
+			document.getElementById("startup-warning-proceed").addEventListener("click",actionProceed,false);
+			document.getElementById("startup-warning-cancel").addEventListener("click",actionCancel,false);
+			// Sort the incoming tiddlers by title
+			tiddlers = tiddlers.sort(function(a,b) {
+				if(a.title < b.title) {
+					return -1;
+				} else if(a.title > b.title) {
+					return +1;
+				} else {
+					return 0;
+				}
+			});
+			// Load the tiddler preview						
+			var previewWrapper = document.getElementById("startup-warning-preview");
+			for(var index=0; index < tiddlers.length; index++) {
+				var tiddler = tiddlers[index],
+					tiddlerWrapper = document.createElement("li"),
+					titleTextWrapper = document.createElement("span"),
+					titleText = document.createTextNode(tiddler.title),
+					fieldsTable = document.createElement("table"),
+					fieldsTableBody = document.createElement("tbody");
+				titleTextWrapper.appendChild(titleText);
+				titleTextWrapper.className = "tiddler-title";
+				tiddlerWrapper.appendChild(titleTextWrapper);
+				fieldsTable.appendChild(fieldsTableBody);
+				var fields = Object.keys(tiddler).sort();
+				for(var fieldIndex = 0; fieldIndex < fields.length; fieldIndex++) {
+					var fieldName = fields[fieldIndex],
+						fieldValue = tiddler[fieldName];
+					if(fieldName !== "title") {
+						var fieldRow = document.createElement("tr"),
+							fieldRowHeader = document.createElement("th"),
+							fieldRowValue = document.createElement("td");
+						fieldRowHeader.appendChild(document.createTextNode(fieldName));
+						fieldRowValue.appendChild(document.createTextNode(fieldValue));
+						fieldRow.appendChild(fieldRowHeader);
+						fieldRow.appendChild(fieldRowValue);
+						fieldsTableBody.appendChild(fieldRow);
+					}
+				}
+				tiddlerWrapper.appendChild(fieldsTable);
+				previewWrapper.appendChild(tiddlerWrapper);
+			}
+		}
 	}
 }
 
+function actionProceed() {
+	// Remove the banner, load our tiddlers, and boot TiddlyWiki
+	removeWarningBanner();
+	$tw.preloadTiddlers = $tw.preloadTiddlers.concat(tiddlers);
+	$tw.boot.boot();
+}
+
+function actionCancel() {
+	// Remove the banner, clear the location hash, and boot TiddlyWiki
+	removeWarningBanner();
+	document.location.hash = "#";
+	$tw.boot.boot();
+}
+
+function removeWarningBanner() {
+	warningWrapper.parentNode.removeChild(warningWrapper);
+	stylesWrapper.parentNode.removeChild(stylesWrapper);
+}
+
 })();

plugins/tiddlywiki/share/rawmarkup.tid

@@ -2,5 +2,7 @@ title: $:/plugins/tiddlywiki/share/rawmarkup
 tags: $:/tags/RawMarkupWikified
 
 `<script>`
+`var tiddlywikiSharePluginStartupWarningHtml = "`<$view tiddler="$:/plugins/tiddlywiki/share/startup-warning.html" format="jsencoded"/>`";`
+`var tiddlywikiSharePluginStartupWarningCss = "`<$view tiddler="$:/plugins/tiddlywiki/share/startup-warning.css" format="jsencoded"/>`";`
 {{$:/plugins/tiddlywiki/share/rawmarkup.js}}
 `</script>`

plugins/tiddlywiki/share/startup-warning.css

@@ -0,0 +1,87 @@
+
+.startup-warning-wrapper {
+	font-family: sans-serif;
+	line-height: 1.4;
+	width: 50%;
+	margin: 1em auto 0 auto;
+	padding: 0 1em;
+	border: 6px solid transparent;
+	border-radius: 8px;
+	background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 25%, transparent 0, transparent 50%) 0 / .6em .6em;
+	animation: marching-ants 20s linear infinite;
+}
+
+@media (max-width: 600px) {
+	.startup-warning-wrapper {
+		width: 85%;
+	}
+}
+
+#startup-warning-preview {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+#startup-warning-preview .tiddler-title {
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
+#startup-warning-preview table {
+	margin-left: 1em;
+}
+
+#startup-warning-preview th {
+	vertical-align: top;
+	font-weight: normal;
+}
+
+#startup-warning-preview td {
+	font-family: monospace;
+    white-space: pre-wrap;
+    background: #f8f8f8;
+}
+
+.startup-warning-wrapper button {
+    padding: 0.3em;
+    border-radius: 4px;
+    font-size: 1.5em;
+}
+
+#startup-warning-cancel {
+	background: #DB2828;
+	color: #fff;
+}
+
+#startup-warning-cancel:hover {
+	background: #E75C60;
+	color: #fff;
+}
+
+#startup-warning-cancel:active {
+	background: #ec8d8d;
+	color: #fff;
+}
+
+#startup-warning-proceed {
+	background: #24BA4C;
+	color: #fff;
+}
+
+#startup-warning-proceed:hover {
+	background: #59e27e;
+	color: #fff;
+}
+
+#startup-warning-proceed:active {
+	background: #ABF5BD;
+	color: #fff;
+}
+
+.startup-warning-wrapper h1,
+.startup-warning-wrapper h2 {
+	font-weight: bold;
+}
+ 
+@keyframes marching-ants { to { background-position: 100% 100% } }
+

plugins/tiddlywiki/share/startup-warning.css.meta

@@ -0,0 +1,2 @@
+title: $:/plugins/tiddlywiki/share/startup-warning.css
+type: text/css

plugins/tiddlywiki/share/startup-warning.html

@@ -0,0 +1,47 @@
+<div class="startup-warning-wrapper">
+<h1>
+Warning: This site is designed to share untrusted content
+</h1>
+<h2>
+Please do not proceed unless you are certain you understand the warnings below
+</h2>
+<p>
+This is a special site that allows users to share content for <a href="https://tiddlywiki.com/" target="_blank" rel="noopener noreferrer">TiddlyWiki</a> without needing conventional hosting. Instead, the content is encoded in the URL used to access the site. This means that there are no controls or protections on the content that is shared, and as such it may contain malicious links or any kind of content.
+</p>
+<p>
+Viewing links to this site in the browser is generally safe because web pages are designed to run in a sandbox that prevents them from accessing or harming your data. However, please exercise caution before downloading content to your own computer, or importing content into your own TiddlyWiki.
+</p>
+
+<details>
+<summary>
+Click here to see the tiddlers that are being shared
+</summary>
+<ul id="startup-warning-preview">
+</ul>
+</details>
+
+<p>
+<strong><em>Only continue if you understand the risks</em></strong>
+</p>
+
+<p>
+<button id="startup-warning-proceed">
+Proceed
+</button>
+<button id="startup-warning-cancel">
+Cancel
+</button>
+</p>
+
+<h2>
+Technical details
+</h2>
+
+<p>
+This web page is a <a href="https://tiddlywiki.com/" target="_blank" rel="noopener noreferrer">TiddlyWiki</a> loaded with the <a href="https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/share" target="_blank" rel="noopener noreferrer">Share plugin</a>. It has the special capability that at startup it can load raw tiddlers from a block of JSON encoded into the location hash part of the URL (ie the part after the # character).
+</p>
+<p>
+This is useful because it enables people to share working examples of TiddlyWikis without needing to arrange special hosting. The only restriction is that browsers and other Internet infrastructure frequently limit the length of URLs to a few tens of kilobytes.
+</p>
+
+</div>

plugins/tiddlywiki/share/startup-warning.html.meta

@@ -0,0 +1,2 @@
+title: $:/plugins/tiddlywiki/share/startup-warning.html
+type: text/html