From 69064e2ad08b03636bcc45cd9ba168a750c555ad Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Tue, 7 Feb 2023 10:23:10 +0100
Subject: [PATCH] Image whitelist shortcuts as discussed in #201

---
 dev/Model/Message.js                          | 40 +++++++++++++------
 dev/View/User/MailBox/MessageView.js          |  7 ++++
 .../templates/Views/User/MailMessageView.html |  8 +++-
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/dev/Model/Message.js b/dev/Model/Message.js
index ed160a461..d7064fafe 100644
--- a/dev/Model/Message.js
+++ b/dev/Model/Message.js
@@ -150,8 +150,19 @@ export class MessageModel extends AbstractModel {
 					}
 				});
 				return tagOptions
-			}
+			},
 
+			whitelistOptions: () => {
+				let options = [];
+				if ('match' === SettingsUserStore.viewImages()) {
+					let from = this.from[0],
+						list = SettingsUserStore.viewImagesWhitelist();
+					from && options.push(from.email);
+					this.html().match(/src=["'][^"']+/g)?.forEach(m => options.push(m.replace(/^.+(:\/\/[^/]+).+$/, '$1')));
+					options = options.filter(txt => !list.includes(txt));
+				}
+				return options.unique();
+			}
 		});
 	}
 
@@ -283,18 +294,7 @@ export class MessageModel extends AbstractModel {
 					this.showExternalImages();
 				}
 				if ('match' === SettingsUserStore.viewImages()) {
-					let regex = SettingsUserStore.viewImagesWhitelist()
-						.trim()
-						.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')
-						.replace(/[\s\r\n,;:]+/g, '|')
-						.replace(/\|+/g, '|');
-					if (regex.length) {
-						console.log('whitelist images = '+regex);
-						regex = new RegExp(regex);
-						this.showExternalImages(
-							(this.from[0]?.email.match(regex)/* || this.sender[0]?.email.match(regex)*/) ? null : regex
-						);
-					}
+					this.showExternalImages(1);
 				}
 			}
 
@@ -386,6 +386,20 @@ export class MessageModel extends AbstractModel {
 	showExternalImages(regex) {
 		const body = this.body;
 		if (body && this.hasImages()) {
+			if (regex) {
+				regex = SettingsUserStore.viewImagesWhitelist()
+					.trim()
+					.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&')
+					.replace(/[\s\r\n,;:]+/g, '|')
+					.replace(/\|+/g, '|');
+				if (regex) {
+					console.log('whitelist images = '+regex);
+					regex = new RegExp(regex);
+					if (this.from[0]?.email.match(regex)) {
+						regex = 0;
+					}
+				}
+			}
 			let hasImages = false,
 				isValid = src => {
 					if (!regex || src.match(regex)) {
diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js
index 55eb2aab5..b3e6002eb 100644
--- a/dev/View/User/MailBox/MessageView.js
+++ b/dev/View/User/MailBox/MessageView.js
@@ -499,6 +499,13 @@ export class MailMessageView extends AbstractViewRight {
 		currentMessage().showExternalImages();
 	}
 
+	whitelistText(txt) {
+		let value = (SettingsUserStore.viewImagesWhitelist().trim() + '\n' + txt).trim();
+		SettingsUserStore.viewImagesWhitelist(value);
+		Remote.saveSetting('ViewImagesWhitelist', value);
+		currentMessage().showExternalImages(1);
+	}
+
 	/**
 	 * @returns {string}
 	 */
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
index 82642abb7..81b804924 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
@@ -279,8 +279,12 @@
 							</span>
 						</div>
 
-						<div class="showImages" data-bind="visible: message().hasImages(), click: showImages"
-							data-icon="🖼" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></div>
+						<div class="showImages" data-bind="visible: message().hasImages()">
+							<div class="btn" data-bind="click: showImages" data-icon="🖼" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></div>
+							<div data-bind="foreach: message().whitelistOptions()">
+								<div class="btn" data-bind="click: $root.whitelistText, text: $data" data-icon="🖼"></div>
+							</div>
+						</div>
 					</div>
 
 					<div class="openpgp-control encrypted" data-bind="visible: message().pgpEncrypted(), css: {'success': message().pgpDecrypted()}">