add link to the thread of a message

back/abl/Message-abl.ts

@@ -34,11 +34,11 @@ export default class MessageAbl {
     }
 
     static async addFlag(body, res: Response) {
-        await this.changeFlag(body, res, false);
+        await MessageAbl.changeFlag(body, res, false);
     }
 
     static async removeFlag(body, res: Response) {
-        await this.changeFlag(body, res, true);
+        await MessageAbl.changeFlag(body, res, true);
     }
 
     static async deleteRemoteUtil(message: Message, mailboxId: number, res, isFull: boolean): Promise<boolean> {
@@ -80,7 +80,7 @@ export default class MessageAbl {
     static deleteRemoteOnly = async (body, res: Response) => {
         const { mailboxId, messageId } = body;
         const message = new Message().setMessageId(messageId);
-        await this.deleteRemoteUtil(message, mailboxId, res, true);
+        await MessageAbl.deleteRemoteUtil(message, mailboxId, res, true);
     };
 
     static deleteEverywhere = async (body, res: Response) => {
@@ -97,7 +97,7 @@ export default class MessageAbl {
 
         // if message not deleted remotly, delete it
         if (!message.isDeleted) {
-            const success = await this.deleteRemoteUtil(message, mailboxId, res, false);
+            const success = await MessageAbl.deleteRemoteUtil(message, mailboxId, res, false);
             if (!success) {
                 return;
             }
@@ -106,7 +106,7 @@ export default class MessageAbl {
         const room = await new Room().setRoomIdOnMessageId(messageId);
         try {
             await message.delete();
-            if (room.roomId && room.shouldDelete()) {
+            if (room.roomId && await room.shouldDelete()) {
                 await room.delete();
                 res.status(statusCode.OK).json({ deleteRoom: true }).send();
                 return;

back/abl/Room-abl.ts

@@ -8,6 +8,7 @@ import MailBuilder from "../mails/utils/mailBuilder";
 import { getAddresses } from "../db/utils/mail";
 import { getMembers, getMessages, getRooms } from "../db/api-db";
 import logger from "../system/Logger";
+import Room from "../mails/room/Room";
 
 function rmUserFromAddrs(addresses: { email: string }[], user: string) {
     let index = addresses.findIndex((a) => a.email == user);
@@ -27,7 +28,7 @@ export default class RoomAbl {
             const mailBuilder = new MailBuilder();
             mailBuilder.from(user).to(ownerEmail).text(text).html(html);
 
-            emailManager.getSmtp(user).sendMail(mailBuilder.message);
+            emailManager.getSmtp(user)?.sendMail(mailBuilder.message);
             res.status(statusCode.OK).send();
         } else if (roomType === RoomType.GROUP || roomType === RoomType.THREAD) {
             const lastMsgData = (await getLastMsgData(roomId))[0];
@@ -52,7 +53,7 @@ export default class RoomAbl {
                 .to(to.map((a) => a.email))
                 .cc(cc.map((a) => a.email));
 
-            emailManager.getSmtp(user).sendMail(mailBuilder.message);
+            emailManager.getSmtp(user)?.sendMail(mailBuilder.message);
             res.status(statusCode.OK).send();
         } else {
             res.status(statusCode.FORBIDDEN).send({ error: "Cannot add a new message in a room or a channel." });
@@ -71,14 +72,22 @@ export default class RoomAbl {
             });
     }
 
-    static async getMembers(body, res) {
+    static async getMembers(body, res: Response) {
         const { roomId } = body;
-        getMembers(roomId).then((addresses) => {
-            res.status(statusCode.OK).json(addresses);
-        }).catch((err) => {
-            logger.err(err)
-            res.status(statusCode.INTERNAL_SERVER_ERROR);
-        });
+        getMembers(roomId)
+            .then((addresses) => {
+                res.status(statusCode.OK).json(addresses);
+            })
+            .catch((err) => {
+                logger.err(err);
+                res.status(statusCode.INTERNAL_SERVER_ERROR);
+            });
+    }
+
+    static async delete(body, res: Response) {
+        const { roomId } = body;
+        console.log("delete", roomId);
+        const room = new Room().setRoomId(roomId);
+        // todo
     }
-    
 }

back/db/api-db.ts

@@ -38,6 +38,7 @@ export async function getRooms(mailboxId: number) {
             room.room_type AS roomType,
             mailbox_message.mailbox_id AS mailboxId,
             app_thread.parent_id
+            
         FROM app_room room
         INNER JOIN message ON message.message_id = room.message_id
         INNER JOIN mailbox_message ON mailbox_message.message_id = message.message_id
@@ -55,6 +56,7 @@ export async function getRooms(mailboxId: number) {
                 )
         ) notSeenRoom ON notSeenRoom.room_id = room.room_id
 
+        -- get not seen in thread
         LEFT JOIN (
             SELECT app_room_message.message_id, app_thread.parent_id
             FROM app_room
@@ -89,7 +91,8 @@ export async function getMessages(roomId: number) {
             subjectT.value AS subject,
             content.text AS content,
             message.idate AS date,
-            GROUP_CONCAT(flagT.flag_name) AS flags
+            GROUP_CONCAT(flagT.flag_name) AS flags,
+            thread.room_id AS thread
         FROM app_room_message msg
 
         ${queryFromId} fromT ON msg.message_id = fromT.message_id
@@ -104,9 +107,10 @@ export async function getMessages(roomId: number) {
                 field_name.field_id = header_field.field_id AND
                 field_name.field_name = 'subject'
         ) subjectT ON msg.message_id = subjectT.message_id
-        
+
         LEFT JOIN (
-            SELECT bodypart.text, header_field.message_id FROM bodypart
+            SELECT bodypart.text, header_field.message_id
+            FROM bodypart
             INNER JOIN header_field
             INNER JOIN field_name
             WHERE
@@ -120,6 +124,13 @@ export async function getMessages(roomId: number) {
 
         INNER JOIN message ON message.message_id = msg.message_id
 
+        -- get room_id of thread room with this message as origin
+        LEFT JOIN app_room thread ON (
+            thread.message_id = msg.message_id AND
+            msg.room_id != thread.room_id AND
+            thread.room_type = 4
+        )
+        
         WHERE msg.room_id = ?
         GROUP BY msg.message_id
         ORDER BY message.idate ASC;

back/db/utils/mail.ts

@@ -40,6 +40,12 @@ export async function getMessageUid(messageId: number): Promise<{uid: number}[]>
     return await execQueryAsync(query, values);
 }
 
+export async function getMessageIdOnID(messageID: string): Promise<{message_id: number}[]> {
+    const query = `SELECT message_id FROM message WHERE messageID = ?`;
+    const values = [messageID];
+    return await execQueryAsync(query, values);
+}
+
 export async function findRoomByOwner(ownerId: number): Promise<{ room_id: number }[]> {
     const query = `SELECT room_id FROM app_room WHERE owner_id = ?`;
     const values = [ownerId];

back/mails/imap/ImapInstance.ts

@@ -4,7 +4,6 @@ import Imap from "imap";
 import { getAllMailboxes, registerMailbox } from "../../db/imap/imap-db";
 import logger from "../../system/Logger";
 import Mailbox from "./Mailbox";
-import { rejects } from "assert";
 
 export class ImapInstance {
     imap: Imap;

back/mails/imap/Mailbox.ts

@@ -166,7 +166,7 @@ export default class Mailbox {
             });
 
             f.once("error", (err) => {
-                logger.err("Fetch error: " + err);
+                logger.err("Fetch error when fetching in uid range: " + err);
                 reject(1);
             });
 

back/mails/message/saveMessage.ts

@@ -11,7 +11,7 @@ import {
     getThreadInfoOnId,
 } from "../../db/message/saveMessage-db";
 
-import { findRoomByOwner, getAddressId, getUserIdOfMailbox } from "../../db/utils/mail";
+import { findRoomByOwner, getAddressId, getMessageIdOnID, getUserIdOfMailbox } from "../../db/utils/mail";
 import { nbMembers } from "../utils/envelopeUtils";
 import logger from "../../system/Logger";
 import { Attrs, Envelope, User } from "../../interfaces/mail/attrs.interface";
@@ -55,93 +55,6 @@ export default class RegisterMessageInApp {
         this.inReplyTo = "";
     }
 
-    async init() {
-        if (this.envelope.from) {
-            this.ownerId = await getAddressId(createAddress(this.envelope.from[0])); // todo use sender or from ?
-        } else {
-            throw new Error("Envelope must have a 'from' field");
-        }
-    }
-
-    isDm = () => nbMembers(this.envelope) == 2;
-
-    async isFromUs() {
-        if (this.userId == -1) {
-            await getUserIdOfMailbox(this.boxId).then((res) => {
-                this.userId = res[0]?.user_id;
-            });
-        }
-        return this.ownerId == this.userId;
-    }
-
-    async registerMembers(roomId: number) {
-        getAllMembers(this.messageId).then((res) => {
-            if (res.lenght == 0) return;
-            const data = res[0].id.split(",");
-            data.forEach(async (memberId: number) => {
-                await registerMember(roomId, memberId);
-            });
-        });
-    }
-
-    async initiateRoom(owner: number, roomType: RoomType) {
-        try {
-            const roomId = await createRoom(this.envelope.subject, owner, this.messageId, roomType);
-            await registerMessageInRoom(this.messageId, roomId, this.envelope.date);
-            await this.registerMembers(roomId);
-            return roomId;
-        } catch (err) {
-            logger.err(err);
-        }
-    }
-
-    async createOrRegisterOnExistence(owner: number, roomType: RoomType) {
-        await findRoomByOwner(owner).then(async (res) => {
-            if (res.length == 0) {
-                // first message with this sender
-                await this.initiateRoom(owner, roomType);
-            } else {
-                // not a reply, add to the list of message if this sender
-                await registerMessageInRoom(this.messageId, res[0].room_id, this.envelope.date);
-            }
-        });
-    }
-
-    async initiateThread() {
-        await createRoom(this.envelope.subject, this.ownerId, this.messageId, RoomType.THREAD).then(
-            async (threadId: number) => {
-                // find parent room infos
-                let roomId: number;
-                let root_id: number;
-                await getThreadInfo(this.inReplyTo).then(async (room) => {
-                    // todo room not lenght, reply to transfer ?
-                    roomId = room[0].room_id;
-                    root_id = room[0].root_id;
-                    if (root_id === undefined) root_id = roomId;
-                    await registerThread(threadId, roomId, root_id);
-                });
-                // impl register previous message or go back
-                await registerMessageInRoom(this.messageId, threadId, this.envelope.date);
-                await this.registerMembers(threadId);
-            },
-        );
-    }
-
-    async createOrRegisterOnMembers(roomId: number, isThread?: boolean) {
-        const hasSameMembers = await hasSameMembersAsParent(this.messageId, this.inReplyTo);
-        if (hasSameMembers) {
-            await registerMessageInRoom(this.messageId, roomId, this.envelope.date);
-            if (isThread) {
-                await getThreadInfoOnId(roomId).then(async (res) => {
-                    let root_id = res[0].root_id;
-                    if (root_id == undefined) root_id = res[0].room_id;
-                });
-            }
-        } else {
-            await this.initiateThread();
-        }
-    }
-
     async save() {
         await this.init();
         if (this.envelope.inReplyTo) {
@@ -194,4 +107,98 @@ export default class RegisterMessageInApp {
             }
         });
     }
+
+    async init() {
+        if (this.envelope.from) {
+            this.ownerId = await getAddressId(createAddress(this.envelope.from[0])); // todo use sender or from ?
+        } else {
+            throw new Error("Envelope must have a 'from' field");
+        }
+    }
+
+    isDm = () => nbMembers(this.envelope) == 2;
+
+    async isFromUs() {
+        if (this.userId == -1) {
+            await getUserIdOfMailbox(this.boxId).then((res) => {
+                this.userId = res[0]?.user_id;
+            });
+        }
+        return this.ownerId == this.userId;
+    }
+
+    /**
+     * add all members of the message to the room
+     */
+    async registerMembers(roomId: number) {
+        getAllMembers(this.messageId).then((res) => {
+            if (res.lenght == 0) return;
+            const data = res[0].id.split(",");
+            data.forEach(async (memberId: number) => {
+                await registerMember(roomId, memberId);
+            });
+        });
+    }
+
+    async initiateRoom(owner: number, roomType: RoomType) {
+        try {
+            const roomId = await createRoom(this.envelope.subject, owner, this.messageId, roomType);
+            await registerMessageInRoom(this.messageId, roomId, this.envelope.date);
+            await this.registerMembers(roomId);
+            return roomId;
+        } catch (err) {
+            logger.err(err);
+        }
+    }
+
+    async createOrRegisterOnExistence(owner: number, roomType: RoomType) {
+        await findRoomByOwner(owner).then(async (res) => {
+            if (res.length == 0) {
+                // first message with this sender
+                await this.initiateRoom(owner, roomType);
+            } else {
+                // not a reply, add to the list of message if this sender
+                await registerMessageInRoom(this.messageId, res[0].room_id, this.envelope.date);
+            }
+        });
+    }
+
+    async initiateThread() {
+        const inReplyToId = (await getMessageIdOnID(this.inReplyTo))[0]?.message_id;
+        await createRoom(this.envelope.subject, this.ownerId, inReplyToId, RoomType.THREAD).then(
+            async (threadId: number) => {
+                // find parent room infos
+                let roomId: number;
+                let root_id: number;
+                await getThreadInfo(this.inReplyTo).then(async (room) => {
+                    // todo room not lenght, reply to transfer ?
+                    roomId = room[0].room_id;
+                    root_id = room[0].root_id;
+                    if (root_id === undefined) root_id = roomId;
+                    await registerThread(threadId, roomId, root_id);
+                });
+
+                // add original message
+                await registerMessageInRoom(inReplyToId, threadId, this.envelope.date);
+                // add reply message
+                await registerMessageInRoom(this.messageId, threadId, this.envelope.date);
+                await this.registerMembers(threadId);
+            },
+        );
+    }
+
+    async createOrRegisterOnMembers(roomId: number, isThread?: boolean) {
+        const hasSameMembers = await hasSameMembersAsParent(this.messageId, this.inReplyTo);
+        if (hasSameMembers) {
+            await registerMessageInRoom(this.messageId, roomId, this.envelope.date);
+            if (isThread) {
+                await getThreadInfoOnId(roomId).then(async (res) => {
+                    let root_id = res[0].root_id;
+                    if (root_id == undefined) root_id = res[0].room_id;
+                });
+            }
+        } else {
+            await this.initiateThread();
+        }
+    }
 }

back/mails/room/Room.ts

@@ -23,6 +23,7 @@ export default class Room {
         return this;
     }
 
+    // check if the room have threads or messages
     async shouldDelete(): Promise<boolean> {
         if (!this._roomId) {
             throw "shouldDelete needs to have a roomId set.";

back/mails/utils/mailBuilder.ts

@@ -49,4 +49,5 @@ export default class MailBuilder {
         this.message.subject = "RE: " + originSubject;
         return this;
     }
+    // https://cr.yp.to/immhf/thread.html
 }

back/routes/room.ts

@@ -21,4 +21,8 @@ router.post("/response", async (req, res) => {
     await validator.validate("response", req.body, res, RoomAbl.response);
 });
 
+router.post("/delete", async (req, res) => {
+    await validator.validate("deleteRoom", req.body, res, RoomAbl.delete);
+});
+
 export default router;

back/validator/schemas/deleteRoom-schema.json

@@ -0,0 +1,12 @@
+{
+    "type": "object",
+    "properties": {
+        "roomId": {
+            "type": "number"
+        }
+    },
+    "required": [
+        "roomId"
+    ],
+    "additionalProperties": false
+}

back/validator/validator.ts

@@ -11,6 +11,7 @@ import getMembersSchema from "./schemas/getMembers-schema.json";
 import setFlagSchema from "./schemas/setFlag-schema.json";
 import responseSchema from "./schemas/response-schema.json";
 import deleteSchema from "./schemas/delete-schema.json";
+import deleteRoomSchema from "./schemas/deleteRoom-schema.json";
 import { Request, Response } from "express";
 import statusCodes from "../utils/statusCodes";
 import logger from "../system/Logger";
@@ -24,6 +25,7 @@ class Validator {
     validateSetFlag: any;
     validateResponse: any;
     delete: any;
+    deleteRoom: any;
 
     constructor() {
         this.validateCreateAccount = ajv.compile(createAccountSchema);
@@ -34,6 +36,7 @@ class Validator {
         this.validateSetFlag = ajv.compile(setFlagSchema);
         this.validateResponse = ajv.compile(responseSchema);
         this.delete = ajv.compile(deleteSchema);
+        this.deleteRoom = ajv.compile(deleteRoomSchema);
     }
 
     _getSchema(name: string): any {
@@ -55,6 +58,8 @@ class Validator {
                 return this.validateResponse;
             case "delete":
                 return this.delete;
+            case "deleteRoom":
+                return this.deleteRoom;
             default:
                 logger.err(`Schema ${name} not found`);
                 break;

front/src/assets/css/main.css

@@ -26,6 +26,7 @@
     /* 343a46 */
 }
 /* .badge-primary { */
+/* https://angel-rs.github.io/css-color-filter-generator/ */
 
 .selected {
     background-color: var(--selected);

front/src/assets/svg/expand-left-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.4143 4.58594L10.4142 11.0003L16.0003 11.0004L16.0003 13.0004L10.4142 13.0003L10.4141 19.4144L3 12.0002L10.4143 4.58594ZM18.0002 19.0002V5.00018H20.0002V19.0002H18.0002Z"></path></svg>

front/src/assets/svg/pushpin-2-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 3V5H17V11L19 14V16H13V23H11V16H5V14L7 11V5H6V3H18ZM9 5V11.6056L7.4037 14H16.5963L15 11.6056V5H9Z"></path></svg>

front/src/assets/svg/pushpin-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.8273 1.68994L22.3126 10.1752L20.8984 11.5894L20.1913 10.8823L15.9486 15.125L15.2415 18.6605L13.8273 20.0747L9.58466 15.8321L4.63492 20.7818L3.2207 19.3676L8.17045 14.4179L3.92781 10.1752L5.34202 8.76101L8.87756 8.0539L13.1202 3.81126L12.4131 3.10416L13.8273 1.68994ZM14.5344 5.22548L9.86358 9.89631L7.0417 10.4607L13.5418 16.9608L14.1062 14.1389L18.7771 9.46812L14.5344 5.22548Z"></path></svg>

front/src/components/basic/Button.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { defineProps } from "vue";
+const props = defineProps({
+    onClick: { type: Function },
+    text: { type: String },
+    class: { type: String },
+});
+</script>
+
+<template>
+    <span>
+        <button :class="props.class" @click="props.onClick">{{ props.text }}</button>
+    </span>
+</template>
+
+<style scoped lang="scss">
+button {
+    padding: 5px;
+    padding: 7px 18px;
+    background-color: #09a35b;
+    color: var(--primary-text);
+    border-radius: 5px;
+    border: none;
+    text-decoration: none;
+    display: inline-block;
+    transition: opacity 0.5s;
+
+    &:hover {
+        opacity: 0.6;
+    }
+
+    &.danger {
+        background-color: var(--danger);
+    }
+
+    &.cancel {
+        background-color: var(--quaternary-background);
+    }
+}
+</style>

front/src/components/basic/Input.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, withDefaults } from "vue";
+
+export interface Props {
+    type: string;
+    required: boolean;
+    onChange: any;
+    placeholder: string;
+    label: string;
+    vModel: string;
+    modelValue: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    required: () => false,
+});
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+    <span>
+        <label v-show="props.label">{{ props.label }}</label>
+        <input
+            :value="modelValue"
+            @input="$emit('update:modelValue', $event.target.value)"
+            :type="props.type"
+            :required="props.required"
+            @change="props.onChange"
+            :placeholder="props.placeholder"
+        />
+    </span>
+</template>
+
+<style scoped lang="scss">
+label {
+    color: var(--secondary-text);
+}
+
+input {
+    -webkit-box-flex: 1;
+    background-color: var(--quaternary-background);
+    border: none;
+    border-radius: 4px;
+    color: var(--primary-text);
+    -ms-flex: 1;
+    flex: 1;
+    font-family: inherit;
+    font-size: 1.4rem;
+    font-weight: 400;
+    min-width: 0;
+    padding: 8px 9px;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+/* Firefox */
+input[type="number"] {
+    appearance: textfield;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+</style>

front/src/components/modals/AddAccountModal.vue

@@ -2,6 +2,8 @@
 import { ref, computed, watchEffect } from "vue";
 import Modal from "./Modal";
 import API from "../../services/imapAPI";
+import Input from "../basic/Input.vue";
+import Button from "../basic/Button.vue";
 
 const modal = ref(false);
 
@@ -9,35 +11,49 @@ const email = ref("");
 const pwd = ref("");
 const xoauth = ref("");
 const xoauth2 = ref("");
-const host = ref("");
-const port = ref(993);
+const imapHost = ref("");
+const imapPort = ref(993);
+const smtpHost = ref("");
+const smtpPort = ref(465);
 
 const error = ref("");
 
 const knownHosts = {
     "outlook.com": {
-        host: "outlook.office365.com",
+        imap: "outlook.office365.com",
+        smtp: "outlook.office365.com",
     },
     "hotmail.com": {
-        host: "outlook.office365.com",
+        imap: "outlook.office365.com",
+        smtp: "outlook.office365.com",
     },
     "live.com": {
-        host: "outlook.office365.com",
+        imap: "outlook.office365.com",
+        smtp: "outlook.office365.com",
     },
     "zoho.com": {
-        host: "imap.zoho.eu",
+        imap: "imap.zoho.eu",
+        smtp: "smtp.zoho.eu",
     },
     "yahoo.com": {
-        host: "imap.mail.yahoo.com",
+        imap: "imap.mail.yahoo.com",
+        smtp: "smtp.mail.yahoo.com",
     },
     "icloud.com": {
-        host: "imap.mail.me.com",
+        imap: "imap.mail.me.com",
+        smtp: "smtp.mail.me.com",
     },
 };
 
-const refHost = computed({
+const refSmtpHost = computed({
     set: (val) => {
-        host.value = val;
+        smtpHost.value = val;
+    },
+});
+
+const refImapHost = computed({
+    set: (val) => {
+        imapHost.value = val;
     },
 });
 
@@ -60,7 +76,7 @@ function checkError() {
         err.value = "You need at least one authentification method.";
     } else if ([pwd.value, xoauth.value, xoauth2.value].filter((val) => val != "").length > 1) {
         err.value = "You need only one authentification method.";
-    } else if (host.value == "" || port.value == "") {
+    } else if (smtpHost.value == "" || smtpPort.value == "" || imapHost.value == "" || imapPort.value == "") {
         err.value = "You need to complete the port and the host.";
     } else {
         err.value = "";
@@ -75,8 +91,10 @@ function addAccountRequest() {
         pwd: pwd.value,
         xoauth: xoauth.value,
         xoauth2: xoauth2.value,
-        host: host.value,
-        port: port.value,
+        imapHost: imapHost.value,
+        imapPort: imapPort.value,
+        smtpHost: smtpHost.value,
+        smtpPort: smtpPort.value,
         tls: true,
     };
 
@@ -98,76 +116,75 @@ watchEffect(() => {
 function mailChange() {
     if (email.value.includes("@")) {
         const domain = email.value.split("@")[1];
-        if (!knownHosts[domain]) {
-            refHost.value = "imap." + domain;
-        } else {
-            refHost.value = knownHosts[domain].host;
+        if (imapHost.value == "") {
+            refImapHost.value = knownHosts[domain]?.imap ?? `imap.${domain}`;
+        }
+        if (smtpHost.value == "") {
+            refSmtpHost.value = knownHosts[domain]?.smtp ?? `smtp.${domain}`;
         }
-        // todo check if manual
     }
 }
 </script>
 
 <template>
     <div>
-        <button @click="modal = true">Add Account</button>
+        <Button :onClick="() => (modal = true)" text="Add Account" />
         <Modal v-if="modal" title="Add new account" @close-modal="modal = false">
             <template v-slot:body>
                 <div class="field">
-                    <label>Email: </label>
-                    <input @change="mailChange" v-model="email" type="email" required />
+                    <Input
+                        label="Email:"
+                        :onChange="mailChange"
+                        v-model="email"
+                        type="email"
+                        placeholder="email"
+                        required
+                    />
                 </div>
 
-                <fieldset>
+                <!-- <fieldset>
                     <legend>Authentification method</legend>
                     <div class="field">
-                        <label>Plain password:</label>
-                        <input v-model="pwd" type="password" />
+                        <Input label="Plain password:" v-model="pwd" type="password" />
                     </div>
                     <div class="field">
-                        <label>Xoauth:</label>
-                        <input v-model="xoauth" type="text" />
+                        <Input label="Xoauth:" v-model="xoauth" type="text" />
                     </div>
                     <div class="field">
-                        <label>Xoauth2:</label>
-                        <input v-model="xoauth2" type="text" />
+                        <Input label="Xoauth2:" v-model="xoauth2" type="text" />
                     </div>
-                </fieldset>
+                </fieldset> -->
 
-                <div class="config">
-                    <input v-model="host" id="host" type="text" placeholder="imap host" />
-                    <input v-model="port" id="port" type="number" placeholder="port" />
-                </div>
-                <!-- tls -->
-                <div>
-                    <button :disabled="error != ''" @click="addAccountRequest">Add</button>
-                    {{ error }}
-                </div>
+                <fieldset class="config">
+                    <legend>Imap</legend>
+                    <Input v-model="imapHost" class="host" type="text" placeholder="host" />
+                    <Input v-model="imapPort" class="port" type="number" placeholder="port" />
+                </fieldset>
+                <fieldset class="config">
+                    <legend>Smtp</legend>
+                    <Input v-model="smtpHost" class="host" type="text" placeholder="host" />
+                    <Input v-model="smtpPort" class="port" type="number" placeholder="port" />
+                </fieldset>
+            </template>
+            <!-- tls -->
+            <template v-slot:actions>
+                <Button :disabled="error != ''" :onClick="addAccountRequest" text="Add" />
+                {{ error }}
             </template>
         </Modal>
     </div>
 </template>
 
-<style>
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
-    appearance: textfield;
-}
-
+<style lang="scss">
 .field {
     margin-bottom: 5px;
 }
 
-.field > input {
-    margin-top: 2px;
-    width: 95%;
+.field {
+    input {
+        margin-top: 2px;
+        width: 95%;
+    }
 }
 
 fieldset {
@@ -179,54 +196,16 @@ fieldset {
 }
 
 .config {
+    display: block;
     margin: 10px 0;
 }
 
-#host {
+.host {
     margin-right: 8px;
-    width: calc(95% - 100px);
 }
 
-#port {
+.port {
+    display: inline-flex;
     width: 70px;
 }
-
-button {
-    padding: 5px;
-    padding: 7px 18px;
-    background-color: #09a35b;
-    color: var(--primary-text);
-    border-radius: 5px;
-    border: none;
-    text-decoration: none;
-    display: inline-block;
-    transition: opacity 0.5s;
-}
-
-button:hover {
-    opacity: 0.6;
-}
-
-input {
-    -webkit-box-flex: 1;
-    background-color: var(--quaternary-background);
-    border: none;
-    border-radius: 4px;
-    color: var(--primary-text);
-    -ms-flex: 1;
-    flex: 1;
-    font-family: inherit;
-    font-size: 1.4rem;
-    font-weight: 400;
-    min-width: 0;
-    padding: 8px 9px;
-}
-
-label {
-    color: var(--secondary-text);
-}
-
-input:focus {
-    outline: none;
-}
 </style>

front/src/components/modals/ConfirmationModal.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, defineProps, withDefaults } from "vue";
+import Modal from "./Modal.vue";
+import Button from "../basic/Button.vue";
+
+const modal = ref(false);
+
+export interface Props {
+    title: string;
+    isDanger: boolean;
+    onConfirmation: any;
+    onCancel?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    title: () => "Confirmation",
+    isDanger: () => true,
+});
+
+const error = ref("");
+
+const handleContinue = async () => {
+    try {
+        if (props.onConfirmation) {
+            await props.onConfirmation();
+        }
+        modal.value = false;
+    } catch (err: any) {
+        error.value = err.message;
+    }
+};
+
+const handleCancel = async () => {
+    if (props.onCancel) {
+        await props.onCancel();
+    }
+    modal.value = false;
+};
+</script>
+
+<template>
+    <div>
+        <Modal v-if="modal" :title="props.title" @close-modal="modal = false">
+            <template v-slot:body> Are you sure you want to do that ? </template>
+            <template v-slot:actions>
+                <Button :onClick="handleCancel" class="cancel" text="Cancel" />
+                <Button :onClick="handleContinue" :class="props.isDanger ? 'danger' : ''" text="Confirm" />
+                {{ error }}
+            </template>
+        </Modal>
+    </div>
+</template>
+
+<style lang="scss"></style>

front/src/components/modals/Modal.vue

@@ -33,6 +33,9 @@ onUnmounted(() => {
             <div class="modal-body">
                 <slot name="body"> This is the default body! </slot>
             </div>
+            <div class="modal-actions">
+                <slot name="actions"></slot>
+            </div>
         </div>
     </div>
 </template>
@@ -58,13 +61,29 @@ onUnmounted(() => {
     border-radius: 5px;
     color: var(--primary-text);
     background-color: var(--secondary-background);
-    padding: 20px;
+    padding: 10px;
+    min-width: 220px;
 }
 
 .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 10px;
 }
 
+.modal-body {
+    margin: 10px;
+}
+
+.modal-actions {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
 h2 {
     display: inline-block;
     font-size: 2.4rem;

front/src/components/structure/message/Composer.vue

@@ -84,6 +84,19 @@ function sendMessage() {
     });
 }
 
+const getClasses = (isActive, disabled = false) => {
+    let classes = [];
+    if (isActive) {
+        classes.push("is-active");
+    }
+    if (!disabled) {
+        classes.push("selectable");
+    } else {
+        classes.push("disabled");
+    }
+    return classes.join(",");
+};
+
 // todo subject input when dm of group...
 // Font selection: choose the font family, size, color, and style
 // Images: insert pictures and graphics into your email
@@ -99,31 +112,31 @@ function sendMessage() {
                 <SvgLoader
                     svg="bold"
                     @click="editor.chain().focus().toggleBold().run()"
-                    :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('bold'))"
                     v-tooltip="{ text: 'Bold', shortcut: ['Ctrl', 'B'] }"
                 />
                 <SvgLoader
                     svg="italic"
                     @click="editor.chain().focus().toggleItalic().run()"
-                    :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('italic'))"
                     v-tooltip="{ text: 'Italic', shortcut: ['Ctrl', 'I'] }"
                 />
                 <SvgLoader
                     svg="strikethrough"
                     @click="editor.chain().focus().toggleStrike().run()"
-                    :class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('strike'))"
                     v-tooltip="{ text: 'Strike', shortcut: ['Ctrl', 'Shift', 'X'] }"
                 />
                 <SvgLoader
                     svg="underline"
                     @click="editor.chain().focus().toggleUnderline().run()"
-                    :class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('underline'))"
                     v-tooltip="{ text: 'Underline', shortcut: ['Ctrl', 'U'] }"
                 />
                 <SvgLoader
                     svg="font-color"
                     @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
-                    :class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('highlight'))"
                     v-tooltip="{ text: 'Highlight', shortcut: ['Ctrl', 'Shift', 'H'] }"
                 />
             </span>
@@ -131,19 +144,19 @@ function sendMessage() {
                 <SvgLoader
                     svg="h-2"
                     @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                    :class="[{ 'is-active': editor.isActive({ level: 2 }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ level: 2 }))"
                     v-tooltip="{ text: 'Heading 2', shortcut: ['Ctrl', 'Alt', '2'] }"
                 />
                 <SvgLoader
                     svg="h-3"
                     @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-                    :class="[{ 'is-active': editor.isActive({ level: 3 }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ level: 3 }))"
                     v-tooltip="{ text: 'Heading 3', shortcut: ['Ctrl', 'Alt', '3'] }"
                 />
                 <SvgLoader
                     svg="h-4"
                     @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
-                    :class="[{ 'is-active': editor.isActive({ level: 4 }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ level: 4 }))"
                     v-tooltip="{ text: 'Heading 4', shortcut: ['Ctrl', 'Alt', '4'] }"
                 />
             </span>
@@ -156,13 +169,13 @@ function sendMessage() {
                 <SvgLoader
                     svg="list-ordered"
                     @click="editor.chain().focus().toggleOrderedList().run()"
-                    :class="[{ 'is-active': editor.isActive('orderedList') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('orderedList'))"
                     v-tooltip="{ text: 'Ordered List', shortcut: ['Ctrl', 'Alt', '7'] }"
                 />
                 <SvgLoader
                     svg="list-unordered"
                     @click="editor.chain().focus().toggleBulletList().run()"
-                    :class="[{ 'is-active': editor.isActive('bulletList') }, 'editorOption']"
+                    :classes="getClasses(editor.isActive('bulletList'))"
                     v-tooltip="{ text: 'Unordered List', shortcut: ['Ctrl', 'Alt', '8'] }"
                 />
             </span>
@@ -170,25 +183,25 @@ function sendMessage() {
                 <SvgLoader
                     svg="align-left"
                     @click="editor.chain().focus().setTextAlign('left').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'left' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'left' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'L'] }"
                 />
                 <SvgLoader
                     svg="align-center"
                     @click="editor.chain().focus().setTextAlign('center').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'center' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'center' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'E'] }"
                 />
                 <SvgLoader
                     svg="align-right"
                     @click="editor.chain().focus().setTextAlign('right').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'right' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'right' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'R'] }"
                 />
                 <SvgLoader
                     svg="align-justify"
                     @click="editor.chain().focus().setTextAlign('justify').run()"
-                    :class="[{ 'is-active': editor.isActive({ textAlign: 'justify' }) }, 'editorOption']"
+                    :classes="getClasses(editor.isActive({ textAlign: 'justify' }))"
                     v-tooltip="{ text: 'Align Left', shortcut: ['Ctrl', 'Shift', 'J'] }"
                 />
             </span>
@@ -207,14 +220,14 @@ function sendMessage() {
                 <SvgLoader
                     svg="indent-increase"
                     @click="!$event.disabled ? editor.chain().focus().sinkListItem('listItem').run() : ''"
-                    :class="[{ disabled: !editor.can().sinkListItem('listItem') }, 'editorOption']"
+                    :classes="getClasses(false, !editor.can().sinkListItem('listItem'))"
                     :isDisabled="!editor.can().sinkListItem('listItem')"
                     v-tooltip="{ text: 'Sink Item', shortcut: ['Tab'] }"
                 />
                 <SvgLoader
                     svg="indent-decrease"
                     @click="!$event.disabled ? editor.chain().focus().liftListItem('listItem').run() : ''"
-                    :class="[{ disabled: !editor.can().liftListItem('listItem') }, 'editorOption']"
+                    :classes="getClasses(false, !editor.can().liftListItem('listItem'))"
                     :isDisabled="!editor.can().liftListItem('listItem')"
                     v-tooltip="{ text: 'Lift Item', shortcut: ['Shift', 'Tab'] }"
                 />
@@ -238,7 +251,8 @@ function sendMessage() {
             <SvgLoader
                 svg="italic"
                 @click="editor.chain().focus().toggleItalic().run()"
-                :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
+                :class="[{ 'is-active,selectable': editor.isActive('italic') }, 'editorOption']"
+                :classes="[{ 'is-active,selectable': editor.isActive('italic') }, 'selectable'].join()"
             />
             <SvgLoader
                 svg="strikethrough"
@@ -321,20 +335,6 @@ function sendMessage() {
     padding: 2px;
 }
 
-.editorOption {
-    border-radius: 6px;
-    cursor: pointer;
-
-    &:hover,
-    &.is-active {
-        background-color: var(--selected);
-    }
-}
-
-.disabled {
-    opacity: 0.5;
-}
-
 .actions {
     display: flex;
     flex-direction: column;

front/src/components/structure/message/Message.vue

@@ -7,6 +7,7 @@ import Content from "./Content.vue";
 import Options from "./Options.vue";
 import { isSeenFc } from "@/utils/flagsUtils";
 import SvgLoader from "@/components/utils/SvgLoader.vue";
+import { useRouter } from "vue-router";
 
 export interface Props {
     msg: Message;
@@ -43,6 +44,8 @@ const classes = (): string => {
     }
     return "msg-basic";
 };
+
+const router = useRouter();
 </script>
 <!-- to if to is more than me
         cc -->
@@ -81,16 +84,34 @@ const classes = (): string => {
             />
             <Options class="options" :msg="props.msg" />
         </div>
+        <div id="thread-link" v-if="props.msg?.thread" @click="router.push(`/${props.msg?.thread}`)">
+            <SvgLoader svg="expand-left-fill" />
+            <!-- <SvgLoader svg="expand-left-fill" :loading="true" /> -->
+            <span>Go to the full conversation.</span>
+        </div>
     </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .message {
     width: auto;
     /* border: white 1px solid; */
     margin: 10px 5px 0px 5px;
 }
 
+#thread-link {
+    &:hover {
+        background-color: var(--selected);
+    }
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--quaternary-background);
+    padding: 3px 10px;
+    border-radius: 4px 4px 0 0;
+    cursor: pointer;
+}
+
 #context {
     display: flex;
     flex-direction: row;

front/src/components/structure/message/Options.vue

@@ -144,16 +144,4 @@ const deleteRemoteOnly = () => {
     justify-content: center;
     align-items: center;
 }
-
-.button {
-    border: solid 1px;
-    border-radius: 6px;
-    display: initial;
-    padding: 1px 5px;
-    cursor: pointer;
-
-    &:hover {
-        background-color: var(--selected);
-    }
-}
 </style>

front/src/components/utils/SvgLoader.vue

@@ -21,22 +21,25 @@ const classes = () => props.classes?.split(",") ?? "";
 
 <style lang="scss" scoped>
 .mainSvg {
-    display: inherit;
-    min-width: 26px;
-    min-height: 26px;
-}
-
-.mainSvg.selectable {
-    border-radius: 6px;
-    cursor: pointer;
-    &:hover,
-    &.is-active {
-        background-color: var(--selected);
+    display: flex;
+    &.selectable {
+        display: inline-block;
+        border-radius: 6px;
+        cursor: pointer;
+        &:hover,
+        &.is-active {
+            background-color: var(--selected);
+        }
+    }
+    .disabled {
+        opacity: 0.5;
     }
 }
 
 img {
     padding: 1px;
+    min-width: 26px;
+    min-height: 26px;
     filter: var(--svg-primary-text);
     &.danger {
         filter: var(--svg-danger);

front/src/services/imapAPI.ts

@@ -31,4 +31,7 @@ export default {
     deleteEverywhere(data: { mailboxId: number; messageId: number }) {
         return API().post(`/message/delete`, data);
     },
+    deleteRoom(id: number) {
+        return API().post(`/room/delete`, { roomId: id });
+    },
 };

front/src/store/models/model.ts

@@ -15,6 +15,7 @@ export interface Message {
     content: string;
     date: string;
     flags: string[];
+    threads: number | null;
 }
 
 export enum LoadingState {

front/src/views/room/Header.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { defineProps, PropType } from "vue";
 import Badge from "@/components/Badge.vue";
+import SvgLoader from "@/components/utils/SvgLoader.vue";
 import { RoomType, Address, Room } from "@/store/models/model";
 import MemberList from "./MemberList.vue";
+import imapAPI from "@/services/imapAPI";
 
 const props = defineProps({ id: Number, room: Object as PropType<Room> });
 
@@ -14,21 +16,38 @@ const roomTitle = () => {
     return props.room?.roomName;
 };
 
+const handleDelete = () => {
+    console.log(props.room);
+    if (props.room?.id) {
+        imapAPI.deleteRoom(props.room.id);
+    }
+    // todo loading, delete
+};
+
 // todo remove us from list
 const to = () => props.room?.members.filter((member: Address) => member.type == "to");
 const cc = () => props.room?.members.filter((member: Address) => member.type == "cc");
 </script>
 
 <template>
-    <div class="main">
+    <div>
         <div class="context">
             <div class="infos">
                 <Badge :value="RoomType[room?.roomType ?? 0]" />
                 {{ roomTitle() }}
             </div>
-            <div class="action">action: threads message important</div>
+            <div class="action">
+                <SvgLoader svg="list-unordered" classes="selectable" v-tooltip="{ text: 'Thread list' }" />
+                <SvgLoader svg="pushpin-line" classes="selectable" v-tooltip="{ text: 'Important messages' }" />
+                <SvgLoader
+                    svg="delete-bin-4-line"
+                    @click="handleDelete()"
+                    classes="danger,selectable"
+                    v-tooltip="{ text: 'Delete room' }"
+                />
+            </div>
         </div>
-        <div class="members" v-if="room?.roomType != RoomType.DM">
+        <div v-if="room?.roomType != RoomType.DM">
             <MemberList class="members-list" v-if="to()?.length ?? 0 > 0" type="to" :members="to()" />
             <MemberList class="members-list" v-if="cc()?.length ?? 0 > 0" type="cc" :members="cc()" />
         </div>
@@ -36,8 +55,6 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
 </template>
 
 <style scoped>
-.main {
-}
 .context {
     display: flex;
     flex-direction: row;
@@ -52,9 +69,6 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
     padding: 3px 5px;
     border-bottom: 1px solid var(--border-color);
 }
-.members {
-}
-
 .infos {
     margin-left: 15px;
 }

front/src/views/room/RoomView.vue

@@ -7,6 +7,7 @@ import Header from "./Header.vue";
 import Message from "../../components/structure/message/Message.vue";
 import MessageViewModal from "@/components/modals/MessageViewModal.vue";
 import Composer from "@/components/structure/message/Composer.vue";
+import ConfirmationModal from "@/components/modals/ConfirmationModal.vue";
 
 const store = useStore();
 const route = useRoute();
@@ -72,6 +73,8 @@ provide("room", room);
         </div>
         <Composer v-if="shouldDisplayComposer() || true" />
         <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
+        <!-- todo -->
+        <!-- <ConfirmationModal /> -->
     </div>
 </template>
 

front/src/views/sidebar/accounts/Accounts.vue

@@ -1,3 +1,17 @@
+<script setup>
+import Account from "./Account";
+import AddAccountModal from "@/components/modals/AddAccountModal";
+import store from "@/store/store";
+import { onMounted } from "vue";
+import { computed } from "@vue/reactivity";
+
+onMounted(() => {
+    store.dispatch("fetchAccounts");
+});
+
+const accounts = computed(() => store.state.accounts);
+</script>
+
 <template>
     <div id="main">
         <div id="userMenu">
@@ -6,32 +20,10 @@
         <span class="divider"></span>
         <Account v-for="(account, index) in accounts" :key="index" :data="account" />
         <span class="divider"></span>
-
         <AddAccountModal />
     </div>
 </template>
 
-<script>
-import { mapState } from "vuex";
-import Account from "./Account";
-import AddAccountModal from "@/components/modals/AddAccountModal";
-import store from "@/store/store";
-
-export default {
-    name: "Accounts",
-    components: {
-        Account,
-        AddAccountModal,
-    },
-    computed: {
-        ...mapState(["accounts"]),
-    },
-    created() {
-        store.dispatch("fetchAccounts");
-    },
-};
-</script>
-
 <style scoped>
 #main {
     display: flex;