Merge branch 'release/1.1.2'

Release 1.1.2
UI: Allow reverse proxy subdirectories
2026-03-03 20:07:00 +00:00 · 2022-09-14 13:44:23 +12:00 · 2022-09-14 13:44:23 +12:00 · 2022-09-14 13:43:38 +12:00 · 2022-09-14 13:42:13 +12:00 · 2022-09-14 12:11:52 +12:00
18 changed files with 848 additions and 342 deletions
--- a/.chglog/CHANGELOG.tpl.md
+++ b/.chglog/CHANGELOG.tpl.md
@@ -2,7 +2,6 @@

 Notable changes to Mailpit will be documented in this file.

-
 {{ if .Versions -}}
 {{ if .Unreleased.CommitGroups -}}
 ## [Unreleased]
@@ -38,11 +37,11 @@ Notable changes to Mailpit will be documented in this file.
 - {{ if .Scope }}**{{ .Scope }}:** {{ end }}{{ .Subject }}
 {{ end }}
 {{ end }}
-{{ end -}}

 {{- if .MergeCommits -}}
 ### Pull Requests
 {{ range .MergeCommits -}}
 - {{ .Header }}
 {{ end }}
+{{ end }}
 {{ end -}}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,24 @@

 Notable changes to Mailpit will be documented in this file.

+## 1.1.2
+
+### UI
+- Allow reverse proxy subdirectories
+
+
+## 1.1.1
+
+### UI
+- Attachment icons and image thumbnails
+
+
+## 1.1.0
+
+### UI
+- HTML source & highlighting
+- Add previous/next message links
+

 ## 1.0.0

@@ -66,6 +84,9 @@ This release includes a major backend storage change (SQLite) that will render a
 - Minor UI tweaks
 - Update pagination values when new mail arrives when not on first page

+### Pull Requests
+- Merge pull request [#6](https://github.com/axllent/mailpit/issues/6) from KaptinLin/develop
+

 ## 0.1.2

--- a/README.md
+++ b/README.md
@@ -34,7 +34,13 @@ Mailpit is inspired by [MailHog](#why-rewrite-mailhog), but much, much faster.

 ## Installation

-Download a pre-built binary in the [releases](https://github.com/axllent/mailpit/releases/latest). The `mailpit` can be placed in your `$PATH`, or simply run as `./mailpit`. See `mailpit -h` for options, or see [the wiki](https://github.com/axllent/mailpit/wiki/Runtime-options) for additional information.
+Linux & Mac users can install it directly to `/usr/local/bin/mailpit` with:
+
+```bash
+sudo bash < <(curl -sL https://raw.githubusercontent.com/axllent/mailpit/develop/install.sh)
+```
+
+Or download a pre-built binary in the [releases](https://github.com/axllent/mailpit/releases/latest). The `mailpit` can be placed in your `$PATH`, or simply run as `./mailpit`. See `mailpit -h` for options, or see [the wiki](https://github.com/axllent/mailpit/wiki/Runtime-options) for additional information.

 To build Mailpit from source see [building from source](https://github.com/axllent/mailpit/wiki/Building-from-source).

--- a/data/message.go
+++ b/data/message.go
@@ -1,3 +1,4 @@
+// Package data contains the message & mailbox structs
 package data

 import (
@@ -19,6 +20,7 @@ type Message struct {
 	Date        time.Time
 	Text        string
 	HTML        string
+	HTMLSource  string
 	Size        int
 	Inline      []Attachment
 	Attachments []Attachment
--- a/go.mod
+++ b/go.mod
@@ -5,6 +5,7 @@ go 1.18
 require (
 	github.com/GuiaBolso/darwin v0.0.0-20191218124601-fd6d2aa3d244
 	github.com/axllent/semver v0.0.1
+	github.com/disintegration/imaging v1.6.2
 	github.com/gorilla/mux v1.8.0
 	github.com/gorilla/websocket v1.5.0
 	github.com/jhillyerd/enmime v0.10.0
@@ -44,6 +45,7 @@ require (
 	github.com/stretchr/testify v1.7.2 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	golang.org/x/crypto v0.0.0-20220826181053-bd7e27e6170d // indirect
+	golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8 // indirect
 	golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4 // indirect
 	golang.org/x/net v0.0.0-20220826154423-83b083e8dc8b // indirect
 	golang.org/x/sys v0.0.0-20220825204002-c680a09ffe64 // indirect
--- a/go.sum
+++ b/go.sum
@@ -33,6 +33,8 @@ github.com/cznic/zappy v0.0.0-20160723133515-2533cb5b45cc/go.mod h1:Y1SNZ4dRUOKX
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
+github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
 github.com/dustin/go-humanize v1.0.0 h1:VSnTsYCnlFHaM2/igO1h6X3HA71jcobQuxemgkq4zYo=
 github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
 github.com/edsrzf/mmap-go v0.0.0-20170320065105-0bce6a688712 h1:aaQcKT9WumO6JEJcRyTqFVq4XUZiUcKR2/GI31TOcz8=
@@ -136,6 +138,8 @@ golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8U
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20220826181053-bd7e27e6170d h1:3qF+Z8Hkrw9sOhrFHti9TlB1Hkac1x+DNRkv0XQiFjo=
 golang.org/x/crypto v0.0.0-20220826181053-bd7e27e6170d/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
+golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8 h1:hVwzHzIUGRjiF7EcUjqNxk3NCfkPxbDKRdnNE1Rpg0U=
+golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4 h1:6zppjxzCulZykYSLyVDYbneBfbaBIQPYMevg0bEwv2s=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
--- a/install.sh
+++ b/install.sh
@@ -0,0 +1,98 @@
+#!/usr/bin/env bash
+
+GH_REPO="axllent/mailpit"
+TIMEOUT=90
+
+set -e
+
+VERSION=$(curl --silent --location --max-time "${TIMEOUT}" "https://api.github.com/repos/${GH_REPO}/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
+if [ $? -ne 0 ]; then
+    echo -ne "\nThere was an error trying to check what is the latest version of ssbak.\nPlease try again later.\n"
+    exit 1
+fi
+
+# detect the platform
+OS="$(uname)"
+case $OS in
+Linux)
+    OS='linux'
+    ;;
+FreeBSD)
+    OS='freebsd'
+    echo 'OS not supported'
+    exit 2
+    ;;
+NetBSD)
+    OS='netbsd'
+    echo 'OS not supported'
+    exit 2
+    ;;
+OpenBSD)
+    OS='openbsd'
+    echo 'OS not supported'
+    exit 2
+    ;;
+Darwin)
+    OS='darwin'
+    ;;
+SunOS)
+    OS='solaris'
+    echo 'OS not supported'
+    exit 2
+    ;;
+*)
+    echo 'OS not supported'
+    exit 2
+    ;;
+esac
+
+# detect the arch
+OS_type="$(uname -m)"
+case "$OS_type" in
+x86_64 | amd64)
+    OS_type='amd64'
+    ;;
+i?86 | x86)
+    OS_type='386'
+    ;;
+aarch64 | arm64)
+    OS_type='arm64'
+    ;;
+*)
+    echo 'OS type not supported'
+    exit 2
+    ;;
+esac
+
+GH_REPO_BIN="mailpit-${OS}-${OS_type}.tar.gz"
+
+#create tmp directory and move to it with macOS compatibility fallback
+tmp_dir=$(mktemp -d 2>/dev/null || mktemp -d -t 'mailpit-install.XXXXXXXXXX')
+cd "$tmp_dir"
+
+echo "Downloading Mailpit $VERSION"
+LINK="https://github.com/${GH_REPO}/releases/download/${VERSION}/${GH_REPO_BIN}"
+
+curl --silent --location --max-time "${TIMEOUT}" "${LINK}" | tar zxf - || {
+    echo "Error downloading"
+    exit 2
+}
+
+mkdir -p /usr/local/bin || exit 2
+cp mailpit /usr/local/bin/ || exit 2
+chmod 755 /usr/local/bin/mailpit || exit 2
+case "$OS" in
+'linux')
+    chown root:root /usr/local/bin/mailpit || exit 2
+    ;;
+'freebsd' | 'openbsd' | 'netbsd' | 'darwin')
+    chown root:wheel /usr/local/bin/mailpit || exit 2
+    ;;
+*)
+    echo 'OS not supported'
+    exit 2
+    ;;
+esac
+
+rm -rf "$tmp_dir"
+echo "Installed successfully to /usr/local/bin/mailpit"
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
        "bootstrap": "^5.2.0",
        "bootstrap-icons": "^1.9.1",
        "moment": "^2.29.4",
-        "remove": "^0.1.5",
+        "prismjs": "^1.29.0",
        "vue": "^3.2.13"
      },
      "devDependencies": {
@@ -248,17 +248,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/chainsaw": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
-      "integrity": "sha512-nG8PYH+/4xB+8zkV4G844EtfvZ5tTiLFoX3dZ4nhF4t3OCKIb9UvaFyNmeZO2zOSmRWzBoTD+napN6hiL+EgcA==",
-      "dependencies": {
-        "traverse": ">=0.3.0 <0.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -849,17 +838,6 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "dev": true
    },
-    "node_modules/hashish": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
-      "integrity": "sha512-xyD4XgslstNAs72ENaoFvgMwtv8xhiDtC2AtzCG+8yF7W/Knxxm9BX+e2s25mm+HxMKh0rBmXVOEGF3zNImXvA==",
-      "dependencies": {
-        "traverse": ">=0.2.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/immutable": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -1067,6 +1045,14 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1079,14 +1065,6 @@
        "node": ">=8.10.0"
      }
    },
-    "node_modules/remove": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/remove/-/remove-0.1.5.tgz",
-      "integrity": "sha512-AJMA9oWvJzdTjwIGwSQZsjGQiRx73YTmiOWmfCp1fpLa/D4n7jKcpoA+CZiVLJqKcEKUuh1Suq80c5wF+L/qVQ==",
-      "dependencies": {
-        "seq": ">= 0.3.5"
-      }
-    },
    "node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -1125,18 +1103,6 @@
        "node": ">=8.9.0"
      }
    },
-    "node_modules/seq": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
-      "integrity": "sha512-sisY2Ln1fj43KBkRtXkesnRHYNdswIkIibvNe/0UKm2GZxjMbqmccpiatoKr/k2qX5VKiLU8xm+tz/74LAho4g==",
-      "dependencies": {
-        "chainsaw": ">=0.0.7 <0.1",
-        "hashish": ">=0.0.2 <0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1182,14 +1148,6 @@
        "node": ">=8.0"
      }
    },
-    "node_modules/traverse": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -1401,14 +1359,6 @@
        "fill-range": "^7.0.1"
      }
    },
-    "chainsaw": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
-      "integrity": "sha512-nG8PYH+/4xB+8zkV4G844EtfvZ5tTiLFoX3dZ4nhF4t3OCKIb9UvaFyNmeZO2zOSmRWzBoTD+napN6hiL+EgcA==",
-      "requires": {
-        "traverse": ">=0.3.0 <0.4"
-      }
-    },
    "chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1747,14 +1697,6 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "dev": true
    },
-    "hashish": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
-      "integrity": "sha512-xyD4XgslstNAs72ENaoFvgMwtv8xhiDtC2AtzCG+8yF7W/Knxxm9BX+e2s25mm+HxMKh0rBmXVOEGF3zNImXvA==",
-      "requires": {
-        "traverse": ">=0.2.4"
-      }
-    },
    "immutable": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -1905,6 +1847,11 @@
        "source-map-js": "^1.0.2"
      }
    },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+    },
    "readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1914,14 +1861,6 @@
        "picomatch": "^2.2.1"
      }
    },
-    "remove": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/remove/-/remove-0.1.5.tgz",
-      "integrity": "sha512-AJMA9oWvJzdTjwIGwSQZsjGQiRx73YTmiOWmfCp1fpLa/D4n7jKcpoA+CZiVLJqKcEKUuh1Suq80c5wF+L/qVQ==",
-      "requires": {
-        "seq": ">= 0.3.5"
-      }
-    },
    "rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -1948,15 +1887,6 @@
        "source-map-js": ">=0.6.2 <2.0.0"
      }
    },
-    "seq": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
-      "integrity": "sha512-sisY2Ln1fj43KBkRtXkesnRHYNdswIkIibvNe/0UKm2GZxjMbqmccpiatoKr/k2qX5VKiLU8xm+tz/74LAho4g==",
-      "requires": {
-        "chainsaw": ">=0.0.7 <0.1",
-        "hashish": ">=0.0.2 <0.1"
-      }
-    },
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1990,11 +1920,6 @@
        "is-number": "^7.0.0"
      }
    },
-    "traverse": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ=="
-    },
    "universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
    "bootstrap": "^5.2.0",
    "bootstrap-icons": "^1.9.1",
    "moment": "^2.29.4",
-    "remove": "^0.1.5",
+    "prismjs": "^1.29.0",
    "vue": "^3.2.13"
  },
  "devDependencies": {
--- a/server/api.go
+++ b/server/api.go
@@ -90,7 +90,7 @@ func apiOpenMessage(w http.ResponseWriter, r *http.Request) {

 	msg, err := storage.GetMessage(id)
 	if err != nil {
-		httpError(w, err.Error())
+		httpError(w, "Message not found")
 		return
 	}

@@ -121,8 +121,8 @@ func apiDownloadAttachment(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write(a.Content)
 }

-// View the full email source as plain text
-func apiDownloadSource(w http.ResponseWriter, r *http.Request) {
+// Download the full email source as plain text
+func apiDownloadRaw(w http.ResponseWriter, r *http.Request) {
 	vars := mux.Vars(r)

 	id := vars["id"]
--- a/server/server.go
+++ b/server/server.go
@@ -43,8 +43,9 @@ func Listen() {
 	r.HandleFunc("/api/read", apiMarkAllRead).Methods("GET")
 	r.HandleFunc("/api/read", apiMarkSelectedRead).Methods("POST")
 	r.HandleFunc("/api/unread", apiMarkSelectedUnread).Methods("POST")
-	r.HandleFunc("/api/{id}/source", middleWareFunc(apiDownloadSource)).Methods("GET")
+	r.HandleFunc("/api/{id}/raw", middleWareFunc(apiDownloadRaw)).Methods("GET")
 	r.HandleFunc("/api/{id}/part/{partID}", middleWareFunc(apiDownloadAttachment)).Methods("GET")
+	r.HandleFunc("/api/{id}/part/{partID}/thumb", middleWareFunc(apiAttachmentThumbnail)).Methods("GET")
 	r.HandleFunc("/api/{id}/delete", middleWareFunc(apiDeleteOne)).Methods("GET")
 	r.HandleFunc("/api/{id}/unread", middleWareFunc(apiUnreadOne)).Methods("GET")
 	r.HandleFunc("/api/{id}", middleWareFunc(apiOpenMessage)).Methods("GET")
--- a/server/thumbnails.go
+++ b/server/thumbnails.go
@@ -0,0 +1,107 @@
+package server
+
+import (
+	"bufio"
+	"bytes"
+	"image"
+	"image/color"
+	"image/draw"
+	"image/jpeg"
+	"net/http"
+	"strings"
+
+	"github.com/axllent/mailpit/logger"
+	"github.com/axllent/mailpit/storage"
+	"github.com/disintegration/imaging"
+	"github.com/gorilla/mux"
+	"github.com/jhillyerd/enmime"
+)
+
+var (
+	thumbWidth  = 180
+	thumbHeight = 120
+)
+
+// Attachment thumbnail (images only)
+func apiAttachmentThumbnail(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+
+	id := vars["id"]
+	partID := vars["partID"]
+
+	a, err := storage.GetAttachmentPart(id, partID)
+	if err != nil {
+		httpError(w, err.Error())
+		return
+	}
+
+	fileName := a.FileName
+	if fileName == "" {
+		fileName = a.ContentID
+	}
+
+	if !strings.HasPrefix(a.ContentType, "image/") {
+		blankImage(a, w)
+		return
+	}
+
+	buf := bytes.NewBuffer(a.Content)
+
+	img, err := imaging.Decode(buf)
+	if err != nil {
+		// it's not an image, return default
+		logger.Log().Warning(err)
+		blankImage(a, w)
+		return
+	}
+
+	var b bytes.Buffer
+	foo := bufio.NewWriter(&b)
+
+	var dstImageFill *image.NRGBA
+
+	if img.Bounds().Dx() < thumbWidth || img.Bounds().Dy() < thumbHeight {
+		dstImageFill = imaging.Fit(img, thumbWidth, thumbHeight, imaging.Lanczos)
+	} else {
+		dstImageFill = imaging.Fill(img, thumbWidth, thumbHeight, imaging.Center, imaging.Lanczos)
+	}
+	// create white image and paste image over the top
+	// preventing black backgrounds for transparent GIF/PNG images
+	dst := imaging.New(thumbWidth, thumbHeight, color.White)
+	// paste the original over the top
+	dst = imaging.OverlayCenter(dst, dstImageFill, 1.0)
+
+	if err := jpeg.Encode(foo, dst, &jpeg.Options{Quality: 70}); err != nil {
+		logger.Log().Warning(err)
+		blankImage(a, w)
+		return
+	}
+
+	w.Header().Add("Content-Type", "image/jpeg")
+	w.Header().Set("Content-Disposition", "filename=\""+fileName+"\"")
+	_, _ = w.Write(b.Bytes())
+}
+
+// Return a blank image instead of an error when file or image not supported
+func blankImage(a *enmime.Part, w http.ResponseWriter) {
+	rect := image.Rect(0, 0, thumbWidth, thumbHeight)
+	img := image.NewRGBA(rect)
+	background := color.RGBA{255, 255, 255, 255}
+	draw.Draw(img, img.Bounds(), &image.Uniform{background}, image.ZP, draw.Src)
+	var b bytes.Buffer
+	foo := bufio.NewWriter(&b)
+	dstImageFill := imaging.Fill(img, thumbWidth, thumbHeight, imaging.Center, imaging.Lanczos)
+
+	if err := jpeg.Encode(foo, dstImageFill, &jpeg.Options{Quality: 70}); err != nil {
+		logger.Log().Warning(err)
+	}
+
+	fileName := a.FileName
+	if fileName == "" {
+		fileName = a.ContentID
+	}
+
+	w.Header().Add("Content-Type", "image/jpeg")
+	w.Header().Set("Content-Disposition", "filename=\""+fileName+"\"")
+	_, _ = w.Write(b.Bytes())
+}
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -22,6 +22,8 @@ export default {
 			isConnected: false,
 			scrollInPlace: false,
 			message: false,
+			messagePrev: false,
+			messageNext: false,
 			notificationsSupported: false,
 			notificationsEnabled: false,
 			selected: []
@@ -169,6 +171,20 @@ export default {
 				}

 				self.message = d;
+				// generate the prev/next links based on current message list
+				self.messagePrev = false;
+				self.messageNext = false;
+				let found = false;
+				for (let i in self.items) {
+					if (self.items[i].ID == self.message.ID) {
+						found = true;
+					} else if (found && !self.messageNext) {
+						self.messageNext = self.items[i].ID;
+						break;
+					} else {
+						self.messagePrev = self.items[i].ID;
+					}
+				}
 			});
 		},

@@ -259,7 +275,9 @@ export default {
 		// websocket connect
        connect: function () {
            let wsproto = location.protocol == 'https:' ? 'wss' : 'ws';
-            let ws = new WebSocket(wsproto + "://" + document.location.host + "/api/events");
+            let ws = new WebSocket(
+				wsproto + "://" + document.location.host + document.location.pathname + "api/events"
+			);
            let self = this;
            ws.onmessage = function (e) {
 				let response = JSON.parse(e.data);
@@ -416,6 +434,12 @@ export default {
 			<button class="btn btn-outline-secondary me-2" title="Mark unread" v-on:click="markUnread">
 				<i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span>
 			</button>
+			<a class="btn btn-outline-secondary float-end" :class="messageNext ? '':'disabled'" :href="'#'+messageNext" title="View next message">
+				<i class="bi bi-caret-right-fill"></i>
+			</a>
+			<a class="btn btn-outline-secondary ms-2 me-1 float-end" :class="messagePrev ? '': 'disabled'" :href="'#'+messagePrev" title="View previous message">
+				<i class="bi bi-caret-left-fill"></i>
+			</a>
 			<a :href="'api/' + message.ID + '/source?dl=1'" class="btn btn-outline-secondary me-2 float-end" title="Download message">
 				<i class="bi bi-file-arrow-down-fill"></i> <span class="d-none d-md-inline">Download</span>
 			</a>
@@ -459,11 +483,10 @@ export default {
 				<small>
 					<b>{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }}</b> of <b>{{ formatNumber(total) }}</b>
 				</small>
-				<button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
-					v-if="!searching">
+				<button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev" v-if="!searching" :title="'View previous '+limit+' messages'">
 					<i class="bi bi-caret-left-fill"></i>
 				</button>
-				<button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching">
+				<button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching" :title="'View next '+limit+' messages'">
 					<i class="bi bi-caret-right-fill"></i>
 				</button>
 			</span>
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -38,14 +38,14 @@
    color: $gray-500;
 }

-#nav-plain-text,
+#nav-plain-text .text-view,
 #nav-source {
    white-space: pre;
    font-family: Courier New, Courier, System, fixed-width;
    font-size: 0.85em;
 }

-#nav-plain-text {
+#nav-plain-text .text-view {
    white-space: pre-wrap;
 }

@@ -95,3 +95,192 @@ body.blur {
        filter: blur(3px);
    }
 }
+
+.card.attachment {
+    color: $gray-800;
+
+    .icon {
+        position: absolute;
+        top: 18px;
+        left: 0;
+        right: 0;
+        font-size: 3.5rem;
+        text-align: center;
+        color: $gray-300;
+    }
+
+    .card-body {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: hidden;
+        opacity: 0;
+    }
+
+    .card-footer {
+        background: $gray-300;
+
+        .bi {
+            font-size: 1.3em;
+            margin-left: -10px;
+        }
+    }
+
+    &:hover {
+        .card-body {
+            opacity: 1;
+            background: $gray-300;
+        }
+    }
+}
+
+/* PrismJS 1.29.0 - modified!
+https://prismjs.com/download.html#themes=prism-coy&languages=markup+css */
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #000;
+    background: 0 0;
+    font-size: 0.85em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+pre[class*="language-"] {
+    position: relative;
+    overflow: visible;
+}
+pre[class*="language-"] > code {
+    position: relative;
+    z-index: 1;
+}
+code[class*="language-"] {
+    max-height: inherit;
+    height: inherit;
+    padding: 0 1em;
+    display: block;
+    overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    background-color: #fdfdfd;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-bottom: 1em;
+}
+:not(pre) > code[class*="language-"] {
+    position: relative;
+    padding: 0.2em;
+    border-radius: 0.3em;
+    color: #c92c2c;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    display: inline;
+    white-space: normal;
+}
+
+.token.block-comment,
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+    color: #7d8b99;
+}
+.token.punctuation {
+    color: #5f6364;
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.function-name,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+    color: #c92c2c;
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.function,
+.token.inserted,
+.token.selector,
+.token.string {
+    color: #2f9c0a;
+}
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.class-name,
+.token.keyword {
+    color: #1990b8;
+}
+.token.important,
+.token.regex {
+    color: #e90;
+}
+.language-css .token.string,
+.style .token.string {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+}
+.token.important {
+    font-weight: 400;
+}
+.token.bold {
+    font-weight: 700;
+}
+.token.italic {
+    font-style: italic;
+}
+.token.entity {
+    cursor: help;
+}
+.token.namespace {
+    opacity: 0.7;
+}
+@media screen and (max-width: 767px) {
+    pre[class*="language-"]:after,
+    pre[class*="language-"]:before {
+        bottom: 14px;
+        box-shadow: none;
+    }
+}
+pre[class*="language-"].line-numbers.line-numbers {
+    padding-left: 0;
+}
+pre[class*="language-"].line-numbers.line-numbers code {
+    padding-left: 3.8em;
+}
+pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
+    left: 0;
+}
+pre[class*="language-"][data-line] {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+}
+pre[data-line] code {
+    position: relative;
+    padding-left: 4em;
+}
+pre .line-highlight {
+    margin-top: 0;
+}
--- a/server/ui-src/mixins.js
+++ b/server/ui-src/mixins.js
@@ -8,127 +8,183 @@ FakeModal.prototype.show = function () { alert('open fake modal') }

 /* Common mixin functions used in apps */
 const commonMixins = {
-    data() {
-        return {
-            loading: 0,
-        }
-    },
+	data() {
+		return {
+			loading: 0,
+		}
+	},

-    methods: {
-        getFileSize: function (bytes) {
-            var i = Math.floor(Math.log(bytes) / Math.log(1024));
-            return (bytes / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
-        },
+	methods: {
+		getFileSize: function (bytes) {
+			var i = Math.floor(Math.log(bytes) / Math.log(1024));
+			return (bytes / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+		},

-        formatNumber: function (nr) {
-            return new Intl.NumberFormat().format(nr);
-        },
+		formatNumber: function (nr) {
+			return new Intl.NumberFormat().format(nr);
+		},

-        // Ajax error message
-        handleError: function (error) {
-            // handle error
-            if (error.response && error.response.data) {
-                // The request was made and the server responded with a status code
-                // that falls out of the range of 2xx
-                if (error.response.data.Error) {
-                    alert(error.response.data.Error)
-                } else {
-                    alert(error.response.data);
-                }
-            } else if (error.request) {
-                // The request was made but no response was received
-                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-                // http.ClientRequest in node.js
-                alert('Error sending data to the server. Please try again.');
-            } else {
-                // Something happened in setting up the request that triggered an Error
-                alert(error.message);
-            }
-        },
+		// Ajax error message
+		handleError: function (error) {
+			// handle error
+			if (error.response && error.response.data) {
+				// The request was made and the server responded with a status code
+				// that falls out of the range of 2xx
+				if (error.response.data.Error) {
+					alert(error.response.data.Error)
+				} else {
+					alert(error.response.data);
+				}
+			} else if (error.request) {
+				// The request was made but no response was received
+				// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+				// http.ClientRequest in node.js
+				alert('Error sending data to the server. Please try again.');
+			} else {
+				// Something happened in setting up the request that triggered an Error
+				alert(error.message);
+			}
+		},

-        // generic modal get/set function
-        modal: function (id) {
-            let e = document.getElementById(id);
-            if (e) {
-                return bootstrap.Modal.getOrCreateInstance(e);
-            }
-            // in case there are open/close actions
-            return new FakeModal();
-        },
+		// generic modal get/set function
+		modal: function (id) {
+			let e = document.getElementById(id);
+			if (e) {
+				return bootstrap.Modal.getOrCreateInstance(e);
+			}
+			// in case there are open/close actions
+			return new FakeModal();
+		},

-        // generic modal get/set function
-        offcanvas: function (id) {
-            var e = document.getElementById(id);
-            if (e) {
-                return bootstrap.Offcanvas.getOrCreateInstance(e);
-            }
-            // in case there are open/close actions
-            return new FakeModal();
-        },
+		// generic modal get/set function
+		offcanvas: function (id) {
+			var e = document.getElementById(id);
+			if (e) {
+				return bootstrap.Offcanvas.getOrCreateInstance(e);
+			}
+			// in case there are open/close actions
+			return new FakeModal();
+		},

-        /**
-         * Axios GET request
-         *
-         * @params string   url
-         * @params array    array parameters Object/array
-         * @params function callback function
-         */
-        get: function (url, values, callback) {
-            let self = this;
-            self.loading++;
-            axios.get(url, { params: values })
-                .then(callback)
-                .catch(self.handleError)
-                .then(function () {
-                    // always executed
-                    if (self.loading > 0) {
-                        self.loading--;
-                    }
-                });
-        },
+		/**
+		 * Axios GET request
+		 *
+		 * @params string   url
+		 * @params array    array parameters Object/array
+		 * @params function callback function
+		 */
+		get: function (url, values, callback) {
+			let self = this;
+			self.loading++;
+			axios.get(url, { params: values })
+				.then(callback)
+				.catch(self.handleError)
+				.then(function () {
+					// always executed
+					if (self.loading > 0) {
+						self.loading--;
+					}
+				});
+		},

-        /**
-         * Axios Post request
-         *
-         * @params string   url
-         * @params array    array parameters Object/array
-         * @params function callback function
-         */
-        post: function (url, values, callback) {
-            let self = this;
-            self.loading++;
-            axios.post(url, values)
-                .then(callback)
-                .catch(self.handleError)
-                .then(function () {
-                    // always executed
-                    if (self.loading > 0) {
-                        self.loading--;
-                    }
-                });
-        },
+		/**
+		 * Axios Post request
+		 *
+		 * @params string   url
+		 * @params array    array parameters Object/array
+		 * @params function callback function
+		 */
+		post: function (url, values, callback) {
+			let self = this;
+			self.loading++;
+			axios.post(url, values)
+				.then(callback)
+				.catch(self.handleError)
+				.then(function () {
+					// always executed
+					if (self.loading > 0) {
+						self.loading--;
+					}
+				});
+		},

-        /**
-         * Axios DELETE request (REST only)
-         *
-         * @params string   url
-         * @params array    array parameters Object/array
-         * @params function callback function
-         */
-        delete: function (url, values, callback) {
-            let self = this;
-            self.loading++;
-            axios.delete(url, { data: values })
-                .then(callback)
-                .catch(self.handleError)
-                .then(function () {
-                    // always executed
-                    if (self.loading > 0) {
-                        self.loading--;
-                    }
-                });
-        }
-    }
+		/**
+		 * Axios DELETE request (REST only)
+		 *
+		 * @params string   url
+		 * @params array    array parameters Object/array
+		 * @params function callback function
+		 */
+		delete: function (url, values, callback) {
+			let self = this;
+			self.loading++;
+			axios.delete(url, { data: values })
+				.then(callback)
+				.catch(self.handleError)
+				.then(function () {
+					// always executed
+					if (self.loading > 0) {
+						self.loading--;
+					}
+				});
+		},
+
+		allAttachments: function (message) {
+			let a = [];
+			for (let i in message.Attachments) {
+				a.push(message.Attachments[i]);
+			}
+			for (let i in message.OtherParts) {
+				a.push(message.OtherParts[i]);
+			}
+			for (let i in message.Inline) {
+				a.push(message.Inline[i]);
+			}
+
+			return a.length ? a : false;
+		},
+
+		isImage(a) {
+			return a.ContentType.match(/^image\//);
+		},
+
+		attachmentIcon: function (a) {
+			let ext = a.FileName.split('.').pop().toLowerCase();
+
+			if (a.ContentType.match(/^image\//)) {
+				return 'bi-file-image-fill';
+			}
+			if (a.ContentType.match(/\/pdf$/) || ext == 'pdf') {
+				return 'bi-file-pdf-fill';
+			}
+			if (['doc', 'docx', 'odt', 'rtf'].includes(ext)) {
+				return 'bi-file-word-fill';
+			}
+			if (['xls', 'xlsx', 'ods'].includes(ext)) {
+				return 'bi-file-spreadsheet-fill';
+			}
+			if (['ppt', 'pptx', 'key', 'ppt', 'odp'].includes(ext)) {
+				return 'bi-file-slides-fill';
+			}
+			if (['zip', 'tar', 'rar', 'bz2', 'gz', 'xz'].includes(ext)) {
+				return 'bi-file-zip-fill';
+			}
+			if (a.ContentType.match(/^audio\//)) {
+				return 'bi-file-music-fill';
+			}
+			if (a.ContentType.match(/^video\//)) {
+				return 'bi-file-play-fill';
+			}
+			if (a.ContentType.match(/\/calendar$/)) {
+				return 'bi-file-check-fill';
+			}
+			if (a.ContentType.match(/^text\//) || ['txt', 'sh', 'log'].includes(ext)) {
+				return 'bi-file-text-fill';
+			}
+
+			return 'bi-file-arrow-down-fill';
+		}
+	}
 }


--- a/server/ui-src/templates/Attachments.vue
+++ b/server/ui-src/templates/Attachments.vue
@@ -0,0 +1,37 @@
+
+<script>
+import commonMixins from '../mixins.js';
+
+export default {
+	props: {
+		message: Object,
+		attachments: Object
+	},
+
+	mixins: [commonMixins]
+}
+</script>
+
+<template>
+	<div class="mt-4 border-top pt-4">
+		<a v-for="part in attachments" :href="'api/'+message.ID+'/part/'+part.PartID" class="card attachment float-start me-3 mb-3" target="_blank" style="width: 180px">
+			<img v-if="isImage(part)" :src="'api/'+message.ID+'/part/'+part.PartID+'/thumb'" class="card-img-top" alt="">
+			<img v-else src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAB4AQMAAABhKUq+AAAAA1BMVEX///+nxBvIAAAAGUlEQVQYGe3BgQAAAADDoPtTT+EA1QAAgFsLQAAB12s2WgAAAABJRU5ErkJggg==" class="card-img-top" alt="">
+			<div class="icon" v-if="!isImage(part)">
+				<i class="bi" :class="attachmentIcon(part)"></i>
+			</div>
+			<div class="card-body border-0">
+				<p class="mb-1 text-muted">
+					<i class="bi me-1" :class="attachmentIcon(part)"></i>
+					<small>{{ getFileSize(part.Size) }}</small>
+				</p>
+				<p class="card-text mb-0 small">
+					{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
+				</p>
+			</div>
+				<div class="card-footer small border-0 text-center text-truncate">
+				{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
+			</div>
+		</a>
+	</div>
+</template>
--- a/server/ui-src/templates/Message.vue
+++ b/server/ui-src/templates/Message.vue
@@ -1,13 +1,21 @@

 <script>
 import commonMixins from '../mixins.js';
-import moment from 'moment'
+import moment from 'moment';
+import Prism from "prismjs";
+import Attachments from './Attachments.vue';

 export default {
 	props: {
 		message: Object
 	},
+
+	components: {
+		Attachments
+	},
+
 	mixins: [commonMixins],
+
 	data() {
 		return {
 			srcURI: false,
@@ -15,36 +23,28 @@ export default {
 		}
 	},

+	watch: {
+		message: {
+			handler(newQuestion) {
+				let self = this;
+				// delay 100ms to select first tab and add HTML highlighting (prev/next)
+				window.setTimeout(function() {
+					self.renderUI();
+				}, 100)
+			},
+			// force eager callback execution
+			immediate: true
+		}
+
+	},
+
 	mounted() {
-		var self = this;
-
+		let self = this;
 		window.addEventListener("resize", self.resizeIframes);
-
-		// click the first non-disabled tab
-		document.querySelector('#nav-tab button:not([disabled])').click();
-		document.activeElement.blur(); // blur focus
-
-		window.setTimeout(function(){
-			let p = document.getElementById('preview-html');
-
-			if (p) {
-				// make links open in new window
-				let anchorEls = p.contentWindow.document.body.querySelectorAll('a');
-				for (var i = 0; i < anchorEls.length; i++) {
-					let anchorEl = anchorEls[i];
-					let href = anchorEl.getAttribute('href');
-
-					if (href && href.match(/^http/)) {
-						anchorEl.setAttribute('target', '_blank');
-					}
-				}
-				self.resizeIframes();
-			}
-		}, 200);
-
-		var tabEl = document.getElementById('nav-source-tab');
+		self.renderUI();
+		var tabEl = document.getElementById('nav-raw-tab');
 		tabEl.addEventListener('shown.bs.tab', function (event) {
-			self.srcURI = 'api/' + self.message.ID + '/source';
+			self.srcURI = 'api/' + self.message.ID + '/raw';
 		});
 	},
 	
@@ -53,6 +53,37 @@ export default {
 	},

 	methods: {
+		renderUI: function() {
+			let self = this;
+			// click the first non-disabled tab
+			document.querySelector('#nav-tab button:not([disabled])').click();
+			document.activeElement.blur(); // blur focus
+			document.getElementById('message-view').scrollTop = 0;
+
+			window.setTimeout(function(){
+				let p = document.getElementById('preview-html');
+
+				if (p) {
+					// make links open in new window
+					let anchorEls = p.contentWindow.document.body.querySelectorAll('a');
+					for (var i = 0; i < anchorEls.length; i++) {
+						let anchorEl = anchorEls[i];
+						let href = anchorEl.getAttribute('href');
+
+						if (href && href.match(/^http/)) {
+							anchorEl.setAttribute('target', '_blank');
+						}
+					}
+					self.resizeIframes();
+				}
+			}, 200);
+
+			// html highlighting
+			window.Prism = window.Prism || {};
+			window.Prism.manual = true;
+			Prism.highlightAll();
+		},
+		
 		resizeIframe: function(el) {
 			let i = el.target;
 			i.style.height = i.contentWindow.document.body.scrollHeight + 50 + 'px';
@@ -70,20 +101,6 @@ export default {
 			}
 		},

-		allAttachments: function(message){
-			let a = [];
-			for (let i in message.Attachments) {
-				a.push(message.Attachments[i]);
-			}
-			for (let i in message.OtherParts) {
-				a.push(message.OtherParts[i]);
-			}
-			for (let i in message.Inline) {
-				a.push(message.Inline[i]);
-			}
-			
-			return a.length ? a : false;
-		},
 		messageDate: function(d) {
 			return moment(d).format('ddd, D MMM YYYY, h:mm a');
 		}
@@ -92,74 +109,97 @@ export default {
 </script>

 <template>
-	<div v-if="message" class="mh-100" style="overflow-y: scroll;">
-		<table class="messageHeaders">
-			<tbody>
-				<tr class="small">
-					<th>From</th>
-					<td class="privacy">
-						<span v-if="message.From">
-							<span v-if="message.From.Name">{{ message.From.Name + " " }}</span>
-							<span v-if="message.From.Address">&lt;{{ message.From.Address }}&gt;</span>
-						</span>
-						<span v-else>
-							[ Unknown ]
-						</span>
-					</td>
-				</tr>
-				<tr class="small">
-					<th>To</th>
-					<td class="privacy">
-						<span v-if="message.To" v-for="(t, i) in message.To">
-							<template v-if="i > 0">,</template>
-							{{ t.Name + " <" + t.Address +">" }}
-						</span>
-						<span v-else>Undisclosed recipients</span>
-					</td>
-				</tr>
-				<tr v-if="message.Cc" class="small">
-					<th>CC</th>
-					<td class="privacy">
-						<span v-for="(t, i) in message.Cc">
-							<template v-if="i > 0">,</template>
-							{{ t.Name + " <" + t.Address +">" }}
-						</span>
-					</td>
-				</tr>
-				<tr v-if="message.Bcc" class="small">
-					<th>CC</th>
-					<td class="privacy">
-						<span v-for="(t, i) in message.Bcc">
-							<template v-if="i > 0">,</template>
-							{{ t.Name + " <" + t.Address +">" }}
-						</span>
-					</td>
-				</tr>
-				<tr>
-					<th class="small">Subject</th>
-					<td><strong>{{ message.Subject }}</strong></td>
-				</tr>
-			</tbody>
-		</table>
+	<div v-if="message" id="message-view" class="mh-100" style="overflow-y: scroll;">
+		<div class="row w-100">
+			<div class="col-md">
+				<table class="messageHeaders">
+					<tbody>
+						<tr class="small">
+							<th>From</th>
+							<td class="privacy">
+								<span v-if="message.From">
+									<span v-if="message.From.Name">{{ message.From.Name + " " }}</span>
+									<span v-if="message.From.Address">&lt;{{ message.From.Address }}&gt;</span>
+								</span>
+								<span v-else>
+									[ Unknown ]
+								</span>
+							</td>
+						</tr>
+						<tr class="small">
+							<th>To</th>
+							<td class="privacy">
+								<span v-if="message.To" v-for="(t, i) in message.To">
+									<template v-if="i > 0">, </template>
+									<span class="text-nowrap">{{ t.Name + " <" + t.Address +">" }}</span>
+								</span>
+								<span v-else>Undisclosed recipients</span>
+							</td>
+						</tr>
+						<tr v-if="message.Cc" class="small">
+							<th>CC</th>
+							<td class="privacy">
+								<span v-for="(t, i) in message.Cc">
+									<template v-if="i > 0">,</template>
+									{{ t.Name + " <" + t.Address +">" }}
+								</span>
+							</td>
+						</tr>
+						<tr v-if="message.Bcc" class="small">
+							<th>CC</th>
+							<td class="privacy">
+								<span v-for="(t, i) in message.Bcc">
+									<template v-if="i > 0">,</template>
+									{{ t.Name + " <" + t.Address +">" }}
+								</span>
+							</td>
+						</tr>
+						<tr>
+							<th class="small">Subject</th>
+							<td><strong>{{ message.Subject }}</strong></td>
+						</tr>
+						<tr class="d-md-none">
+							<th class="small">Date</th>
+							<td>{{ messageDate(message.Date) }}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="col-md-auto text-md-end mt-md-3">
+				<p class="text-muted small d-none d-md-block"><small>{{ messageDate(message.Date) }}</small></p>
+				<div class="dropdown mt-2" v-if="allAttachments(message)">
+					<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+						Attachment<span v-if="allAttachments(message).length > 1">s</span>
+						({{ allAttachments(message).length }})
+					</button>
+					<ul class="dropdown-menu">
+						<li v-for="part in allAttachments(message)">
+							<a :href="'api/'+message.ID+'/part/'+part.PartID" type="button"
+								class="dropdown-item" target="_blank">
+								<i class="bi" :class="attachmentIcon(part)"></i>
+								{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
+								<small class="text-muted ms-2">{{ getFileSize(part.Size) }}</small>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>

 		<nav>
 			<div class="nav nav-tabs my-3" id="nav-tab" role="tablist">
 				<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab"
 					data-bs-target="#nav-html" type="button" role="tab" aria-controls="nav-html"
-					aria-selected="true" :disabled="message.HTML == ''" :class="message.HTML == '' ? 'disabled':''">HTML</button>
+					aria-selected="true" v-if="message.HTML">HTML</button>
+				<button class="nav-link" id="nav-html-source-tab" data-bs-toggle="tab"
+					data-bs-target="#nav-html-source" type="button" role="tab" aria-controls="nav-html-source"
+					aria-selected="false" v-if="message.HTMLSource">HTML Source</button>
 				<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab"
 					data-bs-target="#nav-plain-text" type="button" role="tab" aria-controls="nav-plain-text"
-					aria-selected="false" :class="message.HTML == '' ? 'show':''">Plain<span class="d-none d-md-inline"> text</span></button>
-				<button class="nav-link" id="nav-source-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-source" type="button" role="tab" aria-controls="nav-source"
-					aria-selected="false">Source</button>
-				<button class="nav-link" id="nav-mime-tab" data-bs-toggle="tab" data-bs-target="#nav-mime"
-					type="button" role="tab" aria-controls="nav-mime" aria-selected="false"
-					:disabled="!allAttachments(message)" :class="!allAttachments(message) ? 'disabled':''"
-					>Attachments <span v-if="allAttachments(message)">({{allAttachments(message).length}})</span></button>
-				<div class="d-none d-lg-block ms-auto small mt-3 me-2 text-muted">
-					<small>{{ messageDate(message.Date) }}</small>
-				</div>
+					aria-selected="false" :class="message.HTML == '' ? 'show':''">Text</button>
+				<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab"
+					data-bs-target="#nav-raw" type="button" role="tab" aria-controls="nav-raw"
+					aria-selected="false">Raw</button>
 			</div>
 		</nav>
 		<div class="tab-content mb-5" id="nav-tabContent">
@@ -168,27 +208,22 @@ export default {
 				<iframe target-blank="" class="tab-pane" id="preview-html" :srcdoc="message.HTML" v-on:load="resizeIframe"
 					seamless frameborder="0" style="width: 100%; height: 100%;">
 				</iframe>
+				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
+			</div>
+			<div class="tab-pane fade" id="nav-html-source" role="tabpanel"
+				aria-labelledby="nav-html-source-tab" tabindex="0" v-if="message.HTMLSource">
+				<pre><code class="language-html">{{ message.HTMLSource }}</code></pre>
 			</div>
 			<div class="tab-pane fade" id="nav-plain-text" role="tabpanel"
 				aria-labelledby="nav-plain-text-tab" tabindex="0" :class="message.HTML == '' ? 'show':''">
-				{{ message.Text }}
+				<div class="text-view">{{ message.Text }}</div>
+				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
 			</div>
-			<div class="tab-pane fade" id="nav-source" role="tabpanel" aria-labelledby="nav-source-tab"
+			<div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab"
 				tabindex="0">
 				<iframe v-if="srcURI" :src="srcURI" v-on:load="resizeIframe"
 					seamless frameborder="0" style="width: 100%; height: 300px;" id="message-src"></iframe>
 			</div>
-			<div class="tab-pane fade" id="nav-mime" role="tabpanel" aria-labelledby="nav-mime-tab"
-				tabindex="0">
-				<div v-if="allAttachments(message)" v-for="part in allAttachments(message)" class="mime-part mb-2">
-					<a :href="'api/'+message.ID+'/part/'+part.PartID" type="button"
-						class="btn btn-outline-secondary btn-sm me-2" target="_blank">
-						<i class="bi bi-file-arrow-down-fill"></i>
-						{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
-					</a>
-					<small class="text-muted">{{ getFileSize(part.Size) }}</small>
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
--- a/storage/database.go
+++ b/storage/database.go
@@ -370,16 +370,17 @@ func GetMessage(id string) (*data.Message, error) {
 	date, _ := env.Date()

 	obj := data.Message{
-		ID:      id,
-		Read:    true,
-		From:    from,
-		Date:    date,
-		To:      addressToSlice(env, "To"),
-		Cc:      addressToSlice(env, "Cc"),
-		Bcc:     addressToSlice(env, "Bcc"),
-		Subject: env.GetHeader("Subject"),
-		Size:    len(raw),
-		Text:    env.Text,
+		ID:         id,
+		Read:       true,
+		From:       from,
+		Date:       date,
+		To:         addressToSlice(env, "To"),
+		Cc:         addressToSlice(env, "Cc"),
+		Bcc:        addressToSlice(env, "Bcc"),
+		Subject:    env.GetHeader("Subject"),
+		Size:       len(raw),
+		Text:       env.Text,
+		HTMLSource: env.HTML,
 	}

 	html := env.HTML
Author	SHA1	Message	Date
Ralph Slooten	66aead387e	Merge branch 'release/1.1.2'	2022-09-14 13:44:23 +12:00
Ralph Slooten	efe1ac732e	Release 1.1.2	2022-09-14 13:44:23 +12:00
Ralph Slooten	33dcd489eb	UI: Allow reverse proxy subdirectories	2022-09-14 13:43:38 +12:00
Ralph Slooten	6b2e5b2e41	mod tidy	2022-09-14 13:42:13 +12:00
Ralph Slooten	812c9b99d1	Update installation instructions	2022-09-14 12:11:52 +12:00
Ralph Slooten	8202c94a43	Merge tag '1.1.1' into develop Release 1.1.1	2022-09-12 22:12:54 +12:00
Ralph Slooten	c1d4a73440	Merge branch 'release/1.1.1'	2022-09-12 22:12:51 +12:00
Ralph Slooten	8e100ff21b	Release 1.1.1	2022-09-12 22:12:51 +12:00
Ralph Slooten	088b772de5	UI: Attachment icons and image thumbnails	2022-09-12 22:11:51 +12:00
Ralph Slooten	faf8bd4a08	Merge tag '1.1.0' into develop Release 1.1.0	2022-09-10 00:00:42 +12:00
Ralph Slooten	0e83a5a985	Merge branch 'release/1.1.0'	2022-09-10 00:00:36 +12:00
Ralph Slooten	3ee91eb6c8	Release 1.1.0	2022-09-10 00:00:36 +12:00
Ralph Slooten	5cd0a6e2f3	UI tweaks	2022-09-09 23:57:53 +12:00
Ralph Slooten	fea733a43e	UI: HTML source & highlighting	2022-09-09 23:34:35 +12:00
Ralph Slooten	d4e520772e	Remove redundant npm dependency ('remove')	2022-09-04 22:04:26 +12:00
Ralph Slooten	e4a7212f89	Reload UI on prev/next message	2022-09-03 23:02:10 +12:00
Ralph Slooten	e6a5fceedd	UI: Add previous/next message links	2022-09-03 22:46:38 +12:00
Ralph Slooten	bf4d5fbc6b	Update changelog format	2022-09-03 19:20:51 +12:00
Ralph Slooten	93c3dec66e	Merge tag '1.0.0' into develop Release 1.0.0	2022-09-03 19:13:46 +12:00