show mail attachments in frontend

web/src/components/AuthenticatedDataLink.vue

@@ -0,0 +1,48 @@
+<template>
+    <a :href="image_data">{{ download }}</a>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+
+import {mapActions} from "vuex";
+
+export default {
+    name: "AuthenticatedDataLink",
+    props: {
+        href: {
+            type: String,
+            required: true
+        },
+        download: {
+            type: String,
+            required: false,
+            default: "unnamed"
+        }
+    },
+    data() {
+        return {
+            image_data: "",
+            servers: []
+        }
+    },
+    methods: {
+        ...mapActions(['fetchImage']),
+        loadImage() {
+            this.fetchImage(this.href).then((response) => {
+                const mime_type = response.headers.get("content-type");
+                response.arrayBuffer().then((buf) => {
+                    const base64 = btoa(new Uint8Array(buf)
+                        .reduce((data, byte) => data + String.fromCharCode(byte), ""));
+                    this.image_data = "data:" + mime_type + ";base64," + base64;
+                });
+            })
+        }
+    },
+    mounted() {
+        this.loadImage();
+    }
+}
+</script>

web/src/components/TimelineMail.vue

@@ -18,6 +18,14 @@
                 <font-awesome-icon icon="user"/>
             </button-->
             </div>
+            <div class="card-footer" v-if="item.attachments.length">
+                <ul>
+                    <li v-for="attachment in item.attachments">
+                        <AuthenticatedImage :src="`/media/2/256/${attachment.hash}/`" :alt="attachment.name" v-if="attachment.mime_type.startsWith('image/')"/>
+                        <AuthenticatedDataLink :href="`/media/2/256/${attachment.hash}/`" :download="attachment.name" v-else/>
+                    </li>
+                </ul>
+            </div>
         </div>
         <!--button class="show-replies">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
@@ -44,8 +52,12 @@
 
 <script>
 
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
+
 export default {
     name: 'TimelineMail',
+    components: {AuthenticatedImage, AuthenticatedDataLink},
     props: {
         'item': {
             type: Object,