Improve handling of undefined senders

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

3 files changed, 38 insertions, 17 deletions

diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index 3589f3261..381c7f852 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -2,6 +2,7 @@
   - @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
   -
   - @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+  - @author 2021 Richard Steinmetz <richard@steinmetz.cloud>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -33,8 +34,8 @@
 
 <script>
 import BaseAvatar from '@nextcloud/vue/dist/Components/Avatar'
-
 import { fetchAvatarUrlMemoized } from '../service/AvatarService'
+import logger from '../logger'
 
 export default {
 	name: 'Avatar',
@@ -70,11 +71,16 @@ export default {
 			return this.avatarUrl !== undefined
 		},
 	},
-	mounted() {
-		fetchAvatarUrlMemoized(this.email).then((url) => {
-			this.avatarUrl = url
-			this.loading = false
-		})
+	async mounted() {
+		if (this.email !== '') {
+			try {
+				this.avatarUrl = await fetchAvatarUrlMemoized(this.email)
+			} catch {
+				logger.debug('Could not fetch avatar', { email: this.email })
+			}
+		}
+
+		this.loading = false
 	},
 }
 </script>
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index 93cae90da..054db222c 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -4,7 +4,7 @@
 			accountId: data.accountId ? data.accountId : mailbox.accountId,
 			mailboxId: data.mailboxId,
 			envelopeId: data.databaseId,
-			draggableLabel: `${data.subject} (${data.from[0].label})`,
+			draggableLabel,
 			selectedEnvelopes,
 		}"
 		class="list-item-style"
@@ -288,7 +288,7 @@ export default {
 				return recipients.length > 0 ? recipients.join(', ') : t('mail', 'Blind copy recipients only')
 			}
 			// Show sender label/address in other mailbox types
-			return this.data.from.length === 0 ? '?' : this.data.from[0].label || this.data.from[0].email
+			return this.data.from[0]?.label ?? this.data.from[0]?.email ?? '?'
 		},
 		avatarEmail() {
 			// Show first recipients' avatar in a sent mailbox (or undefined when sent to Bcc only)
@@ -296,14 +296,14 @@ export default {
 				const recipients = [this.data.to, this.data.cc].flat().map(function(recipient) {
 					return recipient.email
 				})
-				return recipients.length > 0 ? recipients[0] : undefined
+				return recipients.length > 0 ? recipients[0] : ''
 			}
 
 			// Show sender avatar in other mailbox types
 			if (this.data.from.length > 0) {
 				return this.data.from[0].email
 			} else {
-				return undefined
+				return ''
 			}
 		},
 		isImportant() {
@@ -314,6 +314,14 @@ export default {
 		tags() {
 			return this.$store.getters.getEnvelopeTags(this.data.databaseId).filter((tag) => tag.imapLabel !== '$label1')
 		},
+		draggableLabel() {
+			let label = this.data.subject
+			const sender = this.data.from[0]?.label ?? this.data.from[0]?.email
+			if (sender) {
+				label += ` (${sender})`
+			}
+			return label
+		},
 	},
 	methods: {
 		setSelected(value) {
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 09ef0ad25..312f4a60c 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -8,13 +8,15 @@
 					@click="displayIframe">
 					{{ t('mail', 'Show images temporarily') }}
 				</ActionButton>
-				<ActionButton icon="icon-toggle"
+				<ActionButton v-if="sender"
+					icon="icon-toggle"
 					@click="onShowBlockedContent">
-					{{ t('mail', 'Always show images from {sender}', {sender: message.from[0].email}) }}
+					{{ t('mail', 'Always show images from {sender}', { sender }) }}
 				</ActionButton>
-				<ActionButton icon="icon-toggle"
+				<ActionButton v-if="domain"
+					icon="icon-toggle"
 					@click="onShowBlockedContentForDomain">
-					{{ t('mail', 'Always show images from {domain}', {domain: getDomain()}) }}
+					{{ t('mail', 'Always show images from {domain}', { domain }) }}
 				</ActionButton>
 			</Actions>
 		</div>
@@ -70,6 +72,14 @@ export default {
 			isSenderTrusted: this.message.isSenderTrusted,
 		}
 	},
+	computed: {
+		sender() {
+			return this.message.from[0]?.email
+		},
+		domain() {
+			return this.sender?.split('@').pop()
+		},
+	},
 	beforeMount() {
 		scout.on('beforeprint', this.onBeforePrint)
 		scout.on('afterprint', this.onAfterPrint)
@@ -126,9 +136,6 @@ export default {
 			this.displayIframe()
 			await trustSender(this.message.from[0].email, 'individual', true)
 		},
-		getDomain() {
-			return this.message.from[0].email.split('@').pop()
-		},
 		async onShowBlockedContentForDomain() {
 			this.displayIframe()
 			// TODO: there might be more than one @ in an email address