add button to set seen flag on front

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

@@ -9,7 +9,6 @@ const props = defineProps({
 
 const iframe = ref<HTMLIFrameElement>();
 
-// todo dompurify
 // background vs color
 const htmlDefault = (html: string) => {
     return `
@@ -33,7 +32,9 @@ function setIframeContent(content: string | undefined) {
     if (!content) return;
     const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document;
     if (!doc) return;
-    const html = DOMPurify.sanitize(content);
+    // todo dompurify for image
+    const html = DOMPurify.sanitize(content, { FORBID_TAGS: ["style"] });
+
     doc.open();
     doc.write(htmlDefault(html));
     doc.close();

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

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { defineProps, ref, PropType } from "vue";
+import { defineProps, PropType } from "vue";
 import { decodeEmojis } from "../../../utils/string";
 import { removeDuplicates } from "../../../utils/array";
 import { Address, Message } from "@/store/models/model";
 import Content from "./Content.vue";
+import Options from "./Options.vue";
+import { isSeenFc } from "@/utils/flagsUtils";
 
 const props = defineProps({
     msg: Object as PropType<Message>,
     members: Array as PropType<Address[]>,
+    mailboxId: Number,
+    roomId: Number,
 });
 
 const displayAddresses = (addressIds: string[] | undefined): string => {
@@ -22,15 +26,13 @@ const displayAddresses = (addressIds: string[] | undefined): string => {
 };
 
 const classes = (): string => {
-    const flags = props.msg?.flags?.split(",");
-
-    // not flags implies no seen flag
-    if (!flags) return "msg-notSeen";
+    const flags = props.msg?.flags;
 
     // Important takes the priority on Seen flag
-    if (flags.includes("\\Important")) {
+    if (flags?.includes("\\Important")) {
         return "msg-important";
-    } else if (!flags.includes("\\Seen")) {
+    }
+    if (!isSeenFc(flags)) {
         return "msg-notSeen";
     }
     return "msg-basic";
@@ -64,7 +66,7 @@ const classes = (): string => {
         </div>
         <div class="content" :class="[classes()]">
             <Content :content="props.msg?.content" />
-            <div class="options">options {{ props?.msg?.flags }}</div>
+            <Options class="options" :mailboxId="props.mailboxId" :roomId="props.roomId" :msg="props.msg" />
         </div>
     </div>
 </template>

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

@@ -1,23 +1,49 @@
 <script setup lang="ts">
-import { defineProps, onMounted, ref, watch, PropType } from "vue";
-import { decodeEmojis } from "../../../utils/string";
-import { removeDuplicates } from "../../../utils/array";
-import DOMPurify from "dompurify";
-import { Address, Message } from "@/store/models/model";
+import { defineProps, PropType } from "vue";
+import { Message } from "@/store/models/model";
+import API from "@/services/imapAPI";
+import store from "@/store/store";
+import { isSeenFc } from "@/utils/flagsUtils";
 
 const props = defineProps({
     msg: Object as PropType<Message>,
+    mailboxId: Number,
+    roomId: Number,
 });
+
+const setFlag = (flag: string) => {
+    // todo loading
+    if (!props.mailboxId || !props.msg) return;
+    let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
+    apiCall({
+        mailboxId: props.mailboxId,
+        messageId: props.msg?.id,
+        flag: flag,
+    })
+        .then((res) => {
+            if (isSeenFc(props.msg?.flags)) {
+                store.commit("removeFlag", { roomId: props.roomId, messageId: props.msg?.id, flag: flag });
+            } else {
+                store.commit("addFlag", { roomId: props.roomId, messageId: props.msg?.id, flag: flag });
+            }
+        })
+        .catch((err) => {
+            console.log(err);
+        });
+};
 </script>
 <template>
     <div>
-        <div>mark as not read</div>
+        <div class="button" @click="setFlag('\\Seen')">
+            {{ isSeenFc(props.msg?.flags) ? "Mark as not read" : "Mark as read" }}
+        </div>
         <div>flag favorite</div>
         <div>reply</div>
         <div>delete from all</div>
         <div>delete from remote</div>
         <div>transfer</div>
         <div>see source</div>
+        <div>{{ props.msg?.flags }}</div>
     </div>
 </template>
 
@@ -25,4 +51,16 @@ const props = defineProps({
 div {
     text-align: center;
 }
+
+.button {
+    border: solid 1px;
+    border-radius: 6px;
+    display: initial;
+    padding: 1px 5px;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: var(--selected);
+}
 </style>