display mail in iframe, add design for thread and unseen

back/db/api.js

@@ -41,11 +41,12 @@ async function getRooms(mailboxId) {
             INNER JOIN message
             INNER JOIN mailbox_message
             INNER JOIN address
-            WHERE 
+        WHERE 
-                message.message_id = app_room.message_id AND
+            message.message_id = app_room.message_id AND
-                mailbox_message.mailbox_id = ? AND 
+            mailbox_message.mailbox_id = ? AND 
-                mailbox_message.message_id = message.message_id AND
+            mailbox_message.message_id = message.message_id AND
-                address.address_id = app_room.owner_id
+            address.address_id = app_room.owner_id
+        ORDER BY app_room.lastUpdate DESC
         `;
     const values = [mailboxId];
     return await execQueryAsync(query, values);

back/db/mail.js

@@ -12,13 +12,6 @@ async function getAddresseId(email, name) {
     return await execQueryAsyncWithId(query, values);
 }
 
-function getMailboxId(email) {
-    return new Promise((resolve, reject) => {
-        resolve(0)
-    });
-    // todo
-}
-
 async function getFieldId(field) {
     const query = `INSERT INTO field_name (field_name) VALUES (?) ON DUPLICATE KEY UPDATE field_id=LAST_INSERT_ID(field_id)`;
     const values = [field]
@@ -33,7 +26,6 @@ async function findRoomByOwner(ownerId) {
 
 module.exports = {
     getAddresseId,
-    getMailboxId,
     getFieldId,
     findRoomByOwner,
 };

back/db/saveMessage.js

@@ -1,3 +1,4 @@
+const { transformEmojis } = require("../utils/string.js");
 const { db, execQuery, execQueryAsync, execQueryAsyncWithId } = require("./db.js");
 const DEBUG = require("../utils/debug").DEBUG;
 
@@ -30,12 +31,14 @@ function registerBodypart(messageId, part, bodypartId, bytes, nbLines) {
 }
 
 async function saveBodypart(bytes, hash, text, data) {
+    text = transformEmojis(text);
     const query = `INSERT IGNORE INTO bodypart (bytes, hash, text, data) VALUES (?, ?, ?, ?)`;
     const values = [bytes, hash, text, data];
     return await execQueryAsyncWithId(query, values);
 }
 
 async function saveHeader_fields(messageId, fieldId, bodypartId, part, value) {
+    value = transformEmojis(value);
     const query = `
         INSERT IGNORE INTO header_field
             (message_id, field_id, bodypart_id, part, value) VALUES (?, ?, ?, ?, ?)
@@ -54,7 +57,7 @@ async function saveAddress_fields(messageId, fieldId, addressId, number) {
 }
 
 function saveSource(messageId, content) {
-    content = Buffer.from(content);
+    content = transformEmojis(content);
     const query = `
         INSERT INTO source (message_id, content) VALUES (?, ?)
             ON DUPLICATE KEY UPDATE content = ?

back/db/saveMessageApp.js

@@ -1,28 +1,32 @@
-const { db, execQueryAsync, execQueryAsyncWithId } = require("./db.js");
+const { transformEmojis } = require("../utils/string.js");
+const { db, execQueryAsync, execQueryAsyncWithId, execQuery } = require("./db.js");
 const { queryFromId, queryToId, queryCcId } = require("./utils/addressQueries.js");
 const DEBUG = require("../utils/debug").DEBUG;
 
 async function createRoom(roomName, ownerId, messageId) {
+    roomName = transformEmojis(roomName);
     const query = `INSERT INTO app_room (room_name, owner_id, message_id) VALUES (?, ?, ?)`;
     const values = [roomName.substring(0, 255), ownerId, messageId];
     return await execQueryAsyncWithId(query, values);
     // todo add members
 }
 
-async function registerMessageInRoom(messageId, roomId, isSeen) {
+async function registerMessageInRoom(messageId, roomId, isSeen, idate) {
     const query = `INSERT IGNORE INTO app_room_message (message_id, room_id) VALUES (?, ?)`;
     const values = [messageId, roomId];
     await execQueryAsync(query, values);
 
-    updateLastUpdateRoom(roomId);
+    updateLastUpdateRoom(roomId, idate);
 
     if (!isSeen) {
         incrementNotSeenRoom(roomId);
     }
 }
 
-function updateLastUpdateRoom(roomId) {
+function updateLastUpdateRoom(roomId, idate) {
-    // todo
+    const query = `UPDATE app_room SET lastUpdate = ? WHERE room_id = ?`;
+    const values = [idate, roomId];
+    execQuery(query, values);
 }
 
 function incrementNotSeenRoom(roomId) {
@@ -41,18 +45,10 @@ async function createThread(threadName, ownerId, messageId, parentRoomId, isDm)
 async function registerMessageInThread(messageId, threadId, isSeen) {
     // todo check if it is still a thread or should be a room
     // todo isdm
-    const query = `INSERT IGNORE INTO app_space_message
+    console.log("register message in thread")
-        (message_id, thread_id) VALUES (?, ?)`;
-    const values = [messageId, threadId];
-    await execQueryAsync(query, values);
-    updateLastUpdateThread(threadId);
-
-    if (!isSeen) {
-        incrementNotSeenThread(threadId);
-    }
 }
 
-function updateLastUpdateRoom(threadId) {
+function updateLastUpdateThread(threadId) {
     // todo
     // check for parent
 }

back/db/structureV2.sql

@@ -67,7 +67,7 @@ CREATE TABLE bodypart (
   bodypart_id   INT AUTO_INCREMENT,
   bytes         INT NOT NULL,
   hash          TEXT NOT NULL,
-  text          TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci,
+  text          TEXT,
   data          BINARY,
   PRIMARY KEY (bodypart_id)
 );
@@ -75,10 +75,10 @@ CREATE TABLE bodypart (
 -- 7
 CREATE TABLE source (
   message_id    INT NOT NULL,
-  content       BLOB NOT NULL,
+  content       TEXT NOT NULL,
   PRIMARY KEY (message_id),
   FOREIGN KEY (message_id) REFERENCES message(message_id) ON DELETE CASCADE
-)
+);
 
 -- 8
 CREATE TABLE field_name (
@@ -94,7 +94,7 @@ CREATE TABLE header_field (
   field_id        INT NOT NULL,
   bodypart_id     INT,
   part            VARCHAR(128),
-  value           TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci,
+  value           TEXT,
   UNIQUE KEY (message_id, field_id, bodypart_id),
   UNIQUE KEY (message_id, field_id, part),
   FOREIGN KEY (message_id) REFERENCES message(message_id) ON DELETE CASCADE,

back/mails/imap/Box.js

@@ -25,7 +25,6 @@ class Box {
     sync(savedUid, currentUid) {
         const promises = [];
         const mails = [];
-        console.log(savedUid, currentUid);
         const f = this.imap.seq.fetch(`${savedUid}:${currentUid}`, {
             size: true,
             envelope: true,

back/mails/index.js

@@ -1,87 +0,0 @@
-const Imap = require("imap");
-const { simpleParser } = require("mailparser");
-const inspect = require("util").inspect;
-const saveMessage = require("./storeMessage").saveMessage;
-const registerMessageInApp = require("./saveMessage").registerMessageInApp;
-const imapConfig = require("./config.json").mail;
-
-const fs = require("fs");
-const { DEBUG } = require("../utils/debug");
-const imap = new Imap({
-    user: imapConfig.user,
-    password: imapConfig.password,
-    tlsOptions: { servername: "imap.gmail.com" },
-    host: "imap.gmail.com",
-    port: 993,
-    tls: true,
-});
-
-// reset table;
-
-let shouldReset = false;
-// let shouldReset = true;
-
-if (shouldReset) {
-    const { execQuery, execQueryAsync } = require("../db/db");
-    const query = "SELECT table_name FROM INFORMATION_SCHEMA.tables WHERE table_schema = 'mail'";
-    execQueryAsync(query).then((results) => {
-        execQuery("SET FOREIGN_KEY_CHECKS=0");
-        results.map((table) => {
-            execQuery("DELETE FROM " + table.table_name);
-            // execQuery("DROP TABLE " + table.table_name);
-        });
-    });
-    return;
-}
-
-imap.once("ready", function () {
-    const readOnly = true;
-    imap.openBox("INBOX", readOnly, (err, box) => {
-        // console.log(box); // uidvalidty uidnext, messages total and new
-        // imap.search(["ALL"], function (err, results) {
-        //     console.log(results[results.length - 1]);
-        // });
-
-        // const f = imap.fetch(970, {
-        //     size: true,
-        //     envelope: true,
-        // });
-        const promises = [];
-        const mails = [];
-        const f = imap.seq.fetch('1:10', {
-            size: true,
-            envelope: true
-          });
-        f.on("message", function (msg, seqno) {
-            msg.once("attributes", (attrs) => {
-                // todo find boxId
-                const boxId = 1;
-                // mails.push(attrs);
-                // promises.push(saveMessage(attrs, boxId, imap));
-            });
-        });
-
-        f.once("error", function (err) {
-            DEBUG.log("Fetch error: " + err);
-        });
-        f.once("end", async function () {
-            Promise.all(promises).then(async (res) => {
-                DEBUG.log("Done fetching all messages!");
-                for (let i = 0; i < mails.length; i++) {
-                    await registerMessageInApp(res[i], mails[i]);
-                }
-            });
-        });
-        //    imap.end()
-    });
-});
-
-imap.once("error", function (err) {
-    console.log(err);
-});
-
-imap.once("end", function () {
-    console.log("Connection ended");
-});
-
-imap.connect();

back/mails/saveMessage.js

@@ -30,11 +30,11 @@ async function registerMessageInApp(messageId, attrs) {
                 if (res.length == 0) {
                     // first message of this sender
                     await createRoom(envelope.subject, ownerId, messageId).then(async (roomId) => {
-                        await registerMessageInRoom(messageId, roomId, isSeen);
+                        await registerMessageInRoom(messageId, roomId, isSeen, envelope.date);
                     });
                 } else {
                     // not a reply, add to the list of message if this sender
-                    await registerMessageInRoom(messageId, res[0].room_id, isSeen);
+                    await registerMessageInRoom(messageId, res[0].room_id, isSeen, envelope.date);
                 }
             });
         }
@@ -54,7 +54,7 @@ async function registerReplyMessage(envelope, messageId, isSeen, ownerId) {
                 if (isGroup) {
                     const hasSameMembers = await hasSameMembersAsParent(messageID, envelope.inReplyTo);
                     if (hasSameMembers) {
-                        await registerMessageInRoom(messageId, rooms[0].room_id, isSeen);
+                        await registerMessageInRoom(messageId, rooms[0].room_id, isSeen, envelope.date);
                     } else {
                         // is a group and has not the same member as the previous message
                         // some recipient has been removed create a thread

back/mails/storeMessage.js

@@ -2,7 +2,6 @@ const { getAddresseId } = require("../db/mail");
 const { DEBUG } = require("../utils/debug");
 const { simpleParser } = require("mailparser");
 const moment = require("moment");
-const fs = require("fs");
 const {
     registerMessage,
     registerMailbox_message,

back/utils/string.js

@@ -0,0 +1,25 @@
+function transformEmojis(str) {
+    if (!str) return str;
+    // Use a regular expression to match emojis in the string
+    const regex =
+        /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1F1E0}-\u{1F1FF}]/gu;
+
+    // Replace each matched emoji with its Unicode code point
+    const transformedStr = str.replace(regex, (match) => {
+        return "\\u{" + match.codePointAt(0).toString(16).toUpperCase() + "}";
+    });
+
+    return transformedStr;
+}
+
+function decodeEmojis(text) {
+    const regex = /\\u{([^}]+)}/g;
+    const decodedText = text.replace(regex, (_, hex) => String.fromCodePoint(parseInt(hex, 16)));
+    return decodedText;
+}
+
+
+module.exports = {
+    transformEmojis,
+    decodeEmojis
+}

front/package.json

@@ -12,6 +12,7 @@
     "@vueuse/core": "^9.13.0",
     "axios": "^1.3.4",
     "core-js": "^3.8.3",
+    "dompurify": "^3.0.1",
     "vue": "^3.2.13",
     "vue-router": "^4.1.6",
     "vuex": "^4.0.2"

front/src/components/Badge.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="wrapper">
+        <slot class="badge" name="body">
+            0
+        </slot>
+    </div>
+</template>
+
+<style scoped>
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #4d5970;
+    height: 1.6rem;
+    width: 1.6rem;
+    min-width: 1.6rem;
+    min-height: 1.6rem;
+    border-radius: 1.6rem;
+}
+
+.badge {
+    color: #fff;
+    font-size: 1.1rem;
+    line-height: 1.4rem;
+}
+
+</style>

front/src/store/models/Room.js

@@ -1,13 +1,23 @@
 export default class Room {
-    constructor(id, user, userId, roomName, mailboxId) {
+    constructor(room, thread) {
-        this.id = id;
+        this.id = room.id;
-        this.user = user;
+        this.user = room.user;
-        this.userId = userId;
+        this.userId = room.userId;
-        this.roomName = roomName;
+        this.roomName = room.roomName;
-        this.mailboxId = mailboxId;
+        this.mailboxId = room.mailboxId;
+        this.unseen = room.unseen;
 
         this.messages = [];
         this.messagesFetched = false;
-        this.threads = [];
+        
+        if (!thread) {
+            this.threads = [
+                new Room({id:12, user: this.user, roomName: "thread 1", mailbboxId:this.mailboxId}, true),
+                new Room({id:12, user: this.user, roomName: "thread 1", mailbboxId:this.mailboxId}, true),
+                new Room({id:12, user: this.user, roomName: "thread 1", mailbboxId:this.mailboxId}, true),
+            ];
+        } else {
+            this.threads = [];
+        }
     }
 }

front/src/store/store.js

@@ -6,7 +6,7 @@ import Account from "./models/Account";
 const store = createStore({
     state() {
         return {
-            rooms: [],
+            rooms: [new Room({id:12, user: "user", roomName: "room name", mailbboxId:2})],
             messages: [],
             accounts: [new Account(0, "ALL")],
             activeAccount: 0,
@@ -21,23 +21,8 @@ const store = createStore({
         },
         setActiveRoom(state, payload) {
             state.activeRoom = payload;
-            // todo call actions
-            // fetch messages for this room if not already fetched
             const room = state.rooms.find((room) => room.id == payload);
-            if (!room || room?.fetched == false) {
+            store.dispatch("fetchMessages", { roomId: payload, room: room });
-                console.log("add messages");
-                API.getMessages(payload)
-                    .then((res) => {
-                        // todo add if not exist
-                        room.fetched = true;
-                        res.data.forEach((msg) => {
-                            state.messages.push(msg);
-                        });
-                    })
-                    .catch((err) => {
-                        console.log(err);
-                    });
-            }
         },
         addAccounts(state, payload) {
             payload.forEach((account) => {
@@ -47,11 +32,13 @@ const store = createStore({
         addRooms(state, payload) {
             // todo add if not exist
             payload.rooms.forEach((room) => {
-                state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
+                state.rooms.push(new Room(room));
             });
         },
         addMessages(state, payload) {
+            // todo add if not exist
             const room = state.rooms.find((room) => room.id == payload.roomId);
+            if (!room) return;
             payload.messages.forEach((message) => {
                 room.messages.push(message);
             });
@@ -65,6 +52,7 @@ const store = createStore({
         },
         messages: (state) => (roomId) => {
             const room = state.rooms.find((room) => room.id == roomId);
+            if (!room) return [];
             if (!room.messagesFetched) {
                 store.dispatch("fetchMessages", { roomId: room.id });
             }
@@ -94,15 +82,15 @@ const store = createStore({
             }
         },
         fetchMessages: async (context, data) => {
-            console.log(data)
+            if (!data.room || data.room?.fetched == false) {
-            API.getMessages(data.roomId)
+                API.getMessages(data.roomId)
-                .then((res) => {
+                    .then((res) => {
-                    console.log(res.data);
+                        context.commit("addMessages", { messages: res.data, roomId: data.roomId });
-                    context.commit("addMessages", { messages: res.data, roomId: data.roomId });
+                    })
-                })
+                    .catch((err) => {
-                .catch((err) => {
+                        console.log(err);
-                    console.log(err);
+                    });
-                });
+            }
         },
     },
 });

front/src/utils/string.js

@@ -0,0 +1,5 @@
+export function decodeEmojis(text) {
+    const regex = /\\u{([^}]+)}/g;
+    const decodedText = text.replace(regex, (_, hex) => String.fromCodePoint(parseInt(hex, 16)));
+    return decodedText;
+}

front/src/views/room/Message.vue

@@ -1,8 +1,35 @@
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, onMounted, ref } from "vue";
+import { decodeEmojis } from "../../utils/string";
+import DOMPurify from 'dompurify';
 
 const props = defineProps({ data: Object });
 const date = new Date(props.data.date);
+
+const iframe = ref(null);
+
+onMounted(() => {
+    const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
+    const html = DOMPurify.sanitize(props.data.content);
+    doc.open();
+    // todo dompurify
+    // background vs color
+    doc.write(`
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Document</title>
+        </head>
+        <body style="margin: 0;">
+            ${html}
+        </body>
+        </html>
+    `);
+    doc.close();
+});
 </script>
 <!-- to if to is more than me
         cc -->
@@ -13,7 +40,7 @@ const date = new Date(props.data.date);
     <div class="message">
         <div id="context">
             <div class="left" id="profile">Carrefour@emailing .carrefor.fr "carrefour"</div>
-            <div class="middle">{{ props.data.subject }}</div>
+            <div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
             <div class="right" id="date">
                 {{
                     date.toLocaleString("en-GB", {
@@ -28,9 +55,7 @@ const date = new Date(props.data.date);
                 }}
             </div>
         </div>
-        <div id="content">
+        <iframe ref="iframe"></iframe>
-            <div v-html="props.data.content"></div>
-        </div>
     </div>
 </template>
 
@@ -46,25 +71,22 @@ const date = new Date(props.data.date);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
 }
 
-#content {
+iframe {
-    overflow: auto;
+    overflow-y: auto;
     max-height: 300px;
-    width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    width: 100%;
+    max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
 }
 
 .left,
 .right {
-    display: flex;
+    white-space: nowrap;
-    align-items: center;
 }
 
 .middle {
     margin: 0 10px;
-    flex: 1;
+    text-align: center;
-    align-self: center;
-    display: contents;
 }
 </style>

front/src/views/sidebar/rooms/Room.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { useRouter } from "vue-router"
+import { useRouter } from "vue-router";
-import { defineProps } from 'vue'
+import { defineProps } from "vue";
-import BaseAvatar from '../../avatars/BaseAvatar.vue'
+import BaseAvatar from "../../avatars/BaseAvatar.vue";
-import ThreadList from './threads/ThreadList.vue'
+import Badge from "../../../components/Badge.vue";
+import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
+import { decodeEmojis } from "@/utils/string";
 
 const props = defineProps({
     data: {
@@ -12,40 +14,50 @@ const props = defineProps({
         user: String,
         userId: Number,
         notSeen: Number,
-        mailboxId: Number
+        mailboxId: Number,
-    }
+        threads: [Object],
-})
+    },
+});
 
 const router = useRouter();
-
 </script>
 
 <template>
     <div>
-        <div class="room" @click="router.push(`/${props.data.id}`)" v-bind:class = " store.state.activeRoom == props.data.id ? 'selected' : ''">
+        <div
-            <BaseAvatar url="vue.png"/>
+            class="room"
+            @click="router.push(`/${props.data.id}`)"
+            v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
+        >
+            <BaseAvatar url="vue.png" />
             <div id="content">
                 <div id="sender">{{ props.data.user }}</div>
-                <div id="object">{{ props.data.roomName }}</div>
+                <div id="object">{{ decodeEmojis(props.data.roomName) }}</div>
             </div>
+            <Badge class="badge" v-if="props.data.unseen > 0"
+                ><template v-slot:body>{{ props.data.unseen }}</template>
+            </Badge>
         </div>
-        <ThreadList />
+        <ThreadList :threads="props.data.threads" />
     </div>
 </template>
 
 <style scoped>
+.badge {
+    margin: auto 7px auto 1px;
+}
 .room {
     box-sizing: border-box;
     contain: content;
     display: flex;
-    margin-bottom: 4px;
     margin: 4px;
     padding: 4px;
     cursor: pointer;
 }
 
-.room:hover, .selected {
+.room:hover,
-    background-color: #41474f;;
+.selected {
+    background-color: #41474f;
     border-radius: 8px;
 }
 
@@ -78,5 +90,4 @@ const router = useRouter();
     overflow: hidden;
     width: 100%;
 }
-
+</style>
-</style>

front/src/views/sidebar/rooms/Rooms.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="test">
       <Room v-for="(room, index) in rooms()" :key="index" :data="room" />
     </div>
 </template>
@@ -23,10 +23,11 @@ export default {
 </script>
 
 <style scoped>
-div {
+.test {
   display: flex;
   flex-direction: column;
   background-color: #24242B;
+  overflow: auto;
 }
 
 </style>

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const props = defineProps({
+    thread: Object
+})
+console.log(props.thread)
+
+</script>
+
+<template>
+    <div class="room">
+        {{props.thread.roomName}} 
+    </div>
+</template>
+
+<style scoped>
+.room {
+    box-sizing: border-box;
+    contain: content;
+    display: flex;
+    margin: -4px 4px 1px 4px;
+    padding: 4px;
+    cursor: pointer;
+    color: #a9b2bc;
+}
+
+.room:hover, .selected {
+    background-color: #41474f;;
+    border-radius: 8px;
+}
+
+.room::before {
+    content: "|";
+    margin: 0 10px;
+    color: white;
+}
+</style>

front/src/views/sidebar/rooms/threads/ThreadList.vue

@@ -1,17 +1,16 @@
+<script setup>
+import Thread from './Thread.vue';
+import { defineProps } from 'vue'
+const props = defineProps({ threads: [Object] });
+console.log(props.threads)
+</script>
+
 <template>
     <div>
+      <Thread v-for="(thread, index) in props.threads" :key="index" :thread="thread" />
     </div>
 </template>
 
-<script>
-
-export default {
-  name: 'ThreadList',
-  props: {
-  },
- 
-}
-</script>
 
 <style scoped>
 </style>

front/yarn.lock

@@ -2821,6 +2821,11 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+dompurify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.1.tgz#a0933f38931b3238934dd632043b727e53004289"
+  integrity sha512-60tsgvPKwItxZZdfLmamp0MTcecCta3avOhsLgPZ0qcWt96OasFfhkeIRbJ6br5i0fQawT1/RBGB5L58/Jpwuw==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz"