should implement continuous syncing

style to implement flags and options on message
show list of users in rooms
2023-04-07 17:15:28 +02:00 · 2023-04-07 16:52:13 +02:00 · 2023-04-07 16:10:23 +02:00 · 2023-04-07 15:15:49 +02:00
13 changed files with 321 additions and 70 deletions
--- a/back/mails/imap/ImapInstance.ts
+++ b/back/mails/imap/ImapInstance.ts
@ -3,12 +3,12 @@ import { Account } from "./ImapSync";
 import Imap from "imap";
 import { getAllMailboxes, registerMailbox } from "../../db/imap/imap-db";
 import logger from "../../system/Logger";
-import Box from "./Box";
+import Mailbox from "./Mailbox";

 export class ImapInstance {
    imap: Imap;
    account: Account;
-    boxes: Box[];
+    boxes: Mailbox[];

    constructor(account) {
        this.imap = new Imap({
@ -44,13 +44,13 @@ export class ImapInstance {
    imapReady() {
        getAllMailboxes(this.account.id).then((mailboxes) => {
            if (mailboxes.length > 0) {
-                this.boxes.push(new Box(this.imap, mailboxes[0].mailbox_id, mailboxes[0].mailbox_name));
+                this.boxes.push(new Mailbox(this.imap, mailboxes[0].mailbox_id, mailboxes[0].mailbox_name));
            } else {
                this.imap.getBoxes("", (err, boxes) => {
                    if (err) logger.err(err);
                    const allBoxName = this.getAllBox(boxes);
                    registerMailbox(this.account.id, allBoxName).then((mailboxId) => {
-                        this.boxes.push(new Box(this.imap, mailboxId, allBoxName));
+                        this.boxes.push(new Mailbox(this.imap, mailboxId, allBoxName));
                    });
                });
            }
--- a/back/mails/imap/Mailbox.ts
+++ b/back/mails/imap/Mailbox.ts
@ -1,47 +1,68 @@
-import Imap, { ImapMessageAttributes, MailBoxes } from "imap";
+import Imap, { ImapMessageAttributes, Box } from "imap";
 import { getMailbox, updateMailbox } from "../../db/imap/imap-db";
 import { Attrs, AttrsWithEnvelope } from "../../interfaces/mail/attrs.interface";
 import logger from "../../system/Logger";
 import RegisterMessageInApp from "../saveMessage";
 import { saveMessage } from "../storeMessage";

-export default class Box {
+export default class Mailbox {
    imap: Imap;
    boxName: string;
    id: number;
-    box: MailBoxes;
+    box: Box;
+    msgToSync: number;
+    syncing: boolean;

    constructor(_imap, _boxId, _boxName) {
        this.imap = _imap;
        this.boxName = _boxName;
        this.id = _boxId;
        this.box;
+        this.msgToSync = 0;
+        this.syncing = false;
        this.init();
    }

    async init() {
+        // get mailbox from the database
        this.box = (await getMailbox(this.id))[0];

        const readOnly = true;
        this.imap.openBox(this.boxName, readOnly, (err, box) => {
            if (err) logger.err(err);
-            this.sync(this.box.uidnext, box.uidnext);
+
+            // sync only if has new messages
+            if (this.box.uidnext < box.uidnext) {
+                this.sync(this.box.uidnext, box.uidnext);
+            } else {
+                logger.log("Already up to date")
+            }
+
+            this.imap.on("mail", (numNewMsgs: number) => {
+                if (!this.syncing) {
+                    // if not syncing restart a sync
+                    this.sync(this.box.uidnext, this.box.uidnext + numNewMsgs);
+                } else {
+                    // else save number of message to sync latter
+                    this.msgToSync += numNewMsgs;
+                }
+            });
        });
    }

-    sync(savedUid, currentUid) {
+    async sync(savedUid: number, currentUid: number) {
+        this.syncing = true;
        const promises: Promise<unknown>[] = [];
        const mails: Attrs[] = [];
        logger.log(`Syncing from ${savedUid} to ${currentUid} uid`);
        const f = this.imap.seq.fetch(`${savedUid}:${currentUid}`, {
-        // const f = this.imap.seq.fetch(`${savedUid}:${currentUid}`, {
            size: true,
            envelope: true,
        });

        f.on("message", (msg, seqno) => {
            msg.once("attributes", (attrs: AttrsWithEnvelope) => {
-                console.log(attrs.envelope)
+                console.log(attrs.envelope);
                mails.push(attrs);
                promises.push(saveMessage(attrs, this.id, this.imap));
            });
@ -53,7 +74,6 @@ export default class Box {

        f.once("end", async () => {
            let step = 20;
-            logger.log(promises.length)
            for (let i = 0; i < promises.length; i += step) {
                for (let j = i; j < (i + step && promises.length); j++) {
                    await new Promise((resolve, reject) => {
@ -72,6 +92,16 @@ export default class Box {
                updateMailbox(this.id, mails[i].uid);
            }
            updateMailbox(this.id, currentUid);
+            this.syncing = false;
+
+            // if has receive new msg during last sync then start a new sync
+            if (this.msgToSync > 0) {
+                const currentUid = this.box.uidnext;
+                this.box.uidnext += this.msgToSync;
+                // reset value to allow to detect new incoming message while syncing
+                this.msgToSync = 0;
+                this.sync(currentUid, this.box.uidnext);
+            }
        });
    }
-}
+}
--- a/front/package-lock.json
+++ b/front/package-lock.json
@ -16,6 +16,7 @@
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@babel/preset-typescript": "^7.21.4",
+        "@types/dompurify": "^3.0.1",
        "@types/jest": "^27.0.1",
        "@typescript-eslint/eslint-plugin": "^5.4.0",
        "@typescript-eslint/parser": "^5.4.0",
@ -2816,6 +2817,17 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/dompurify/-/dompurify-3.0.1.tgz",
+      "integrity": "sha512-ubq8VKmf8W+U48jUOiZO4BoSGS7NnbITPMvrF+7HgMN4L+eezCKv8QBPB8p3o4YPicLMmNeTyDkE5X4c2ViHJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/jsdom": "*",
+        "@types/trusted-types": "*"
+      }
+    },
    "node_modules/@types/eslint": {
      "version": "8.21.0",
      "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.21.0.tgz",
@ -2935,6 +2947,44 @@
        "pretty-format": "^27.0.0"
      }
    },
+    "node_modules/@types/jsdom": {
+      "version": "21.1.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/jsdom/-/jsdom-21.1.1.tgz",
+      "integrity": "sha512-cZFuoVLtzKP3gmq9eNosUL1R50U+USkbLtUQ1bYVgl/lKp0FZM7Cq4aIHAL8oIvQ17uSHi7jXPtfDOdjPwBE7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      }
+    },
+    "node_modules/@types/jsdom/node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@types/jsdom/node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -3064,6 +3114,20 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.2",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
+      "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.3",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/trusted-types/-/trusted-types-2.0.3.tgz",
+      "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/web-bluetooth": {
      "version": "0.0.16",
      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
@ -17897,6 +17961,16 @@
        "@types/node": "*"
      }
    },
+    "@types/dompurify": {
+      "version": "3.0.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/dompurify/-/dompurify-3.0.1.tgz",
+      "integrity": "sha512-ubq8VKmf8W+U48jUOiZO4BoSGS7NnbITPMvrF+7HgMN4L+eezCKv8QBPB8p3o4YPicLMmNeTyDkE5X4c2ViHJQ==",
+      "dev": true,
+      "requires": {
+        "@types/jsdom": "*",
+        "@types/trusted-types": "*"
+      }
+    },
    "@types/eslint": {
      "version": "8.21.0",
      "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.21.0.tgz",
@ -18004,6 +18078,34 @@
        "pretty-format": "^27.0.0"
      }
    },
+    "@types/jsdom": {
+      "version": "21.1.1",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/jsdom/-/jsdom-21.1.1.tgz",
+      "integrity": "sha512-cZFuoVLtzKP3gmq9eNosUL1R50U+USkbLtUQ1bYVgl/lKp0FZM7Cq4aIHAL8oIvQ17uSHi7jXPtfDOdjPwBE7A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.4.0",
+          "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/entities/-/entities-4.4.0.tgz",
+          "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+          "dev": true
+        },
+        "parse5": {
+          "version": "7.1.2",
+          "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-7.1.2.tgz",
+          "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+          "dev": true,
+          "requires": {
+            "entities": "^4.4.0"
+          }
+        }
+      }
+    },
    "@types/json-schema": {
      "version": "7.0.11",
      "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -18116,6 +18218,18 @@
      "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
      "dev": true
    },
+    "@types/tough-cookie": {
+      "version": "4.0.2",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
+      "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
+      "dev": true
+    },
+    "@types/trusted-types": {
+      "version": "2.0.3",
+      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/trusted-types/-/trusted-types-2.0.3.tgz",
+      "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
+      "dev": true
+    },
    "@types/web-bluetooth": {
      "version": "0.0.16",
      "resolved": "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
--- a/front/package.json
+++ b/front/package.json
@ -17,6 +17,7 @@
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@babel/preset-typescript": "^7.21.4",
+    "@types/dompurify": "^3.0.1",
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
--- a/front/src/assets/css/main.css
+++ b/front/src/assets/css/main.css
@ -8,5 +8,6 @@
    --tertiary-background: #2a2a33;
    --quaternary-background: #303a46;
    --selected: #41474f;
+    /* 343a46 */
 }
 /* .badge-primary { */
--- a/front/src/components/User.vue
+++ b/front/src/components/User.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { defineProps, PropType } from "vue";
+import { Address } from "@/store/models/model";
+import Badge from "./Badge.vue";
+
+const props = defineProps({ address: Object as PropType<Address> });
+const value = props.address?.name ? props.address?.name : props.address?.email;
+</script>
+
+<template>
+    <div class="main">
+        {{ value }}
+    </div>
+</template>
+
+<style scoped>
+.main {
+    align-items: center;
+    background-color: var(--quaternary-background);
+    border-radius: 1.6rem;
+    color: var(--primary-text);
+    display: inline-flex;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0.1rem 0.4em;
+}
+</style>
--- a/front/src/store/models/model.ts
+++ b/front/src/store/models/model.ts
@ -8,6 +8,8 @@ export enum RoomType {

 export interface Message {
    fromA: string;
+    toA: string;
+    ccA?: string;
    subject: string;
    content: string;
    date: string;
--- a/front/src/utils/array.ts
+++ b/front/src/utils/array.ts
@ -1,5 +1,5 @@
-export function removeDuplicates(array: []) {
-    const unique: [] = [];
+export function removeDuplicates(array: any[]) {
+    const unique: any[] = [];
    for (let i = 0; i < array.length; i++) {
        if (!unique.includes(array[i])) {
            unique.push(array[i]);
--- a/front/src/utils/string.ts
+++ b/front/src/utils/string.ts
@ -1,7 +1,7 @@
 // todo optimize

-export function decodeEmojis(text: string): string {
-    if (!text) return text;
+export function decodeEmojis(text: string | undefined): string {
+    if (!text) return "";
    const regex = /\\u{([^}]+)}/g;
    const decodedText = text.replace(regex, (_: string, hex: string) => String.fromCodePoint(parseInt(hex, 16)));
    return decodedText;
--- a/front/src/views/room/Header.vue
+++ b/front/src/views/room/Header.vue
@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { defineProps, PropType } from "vue";
 import Badge from "@/components/Badge.vue";
-import { RoomType, Address } from "@/store/models/model";
+import { RoomType, Address, Room } from "@/store/models/model";
 import MemberList from "./MemberList.vue";

-const props = defineProps({ id: Number, room: Object });
+const props = defineProps({ id: Number, room: Object as PropType<Room> });

 const roomTitle = () => {
    const type = props.room?.roomType;
@ -14,6 +14,7 @@ const roomTitle = () => {
    return props.room?.roomName;
 };

+// 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>
@ -22,21 +23,20 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
    <div class="main">
        <div class="context">
            <div class="infos">
-                <Badge :value="RoomType[room?.roomType]" />
+                <Badge :value="RoomType[room?.roomType ?? 0]" />
                {{ roomTitle() }}
            </div>
            <div class="action">action: threads message important</div>
        </div>
        <div class="members" v-if="room?.roomType != RoomType.DM">
-            <MemberList v-if="to()?.length > 0" type="to" :members="to()" />
-            <MemberList v-if="cc()?.length > 0" type="cc" :members="cc()" />
+            <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>
    </div>
 </template>

 <style scoped>
 .main {
-    border-bottom: 1px solid #505050;
 }
 .context {
    display: flex;
@ -48,6 +48,10 @@ const cc = () => props.room?.members.filter((member: Address) => member.type ==
    height: 35px;
 }

+.members-list {
+    padding: 3px 5px;
+    border-bottom: 1px solid #505050;
+}
 .members {
 }

--- a/front/src/views/room/MemberList.vue
+++ b/front/src/views/room/MemberList.vue
@ -1,19 +1,37 @@
 <script setup lang="ts">
+import Badge from "@/components/Badge.vue";
+import User from "@/components/User.vue";
 import { Address } from "@/store/models/model";
-import { defineProps } from "vue";
+import { defineProps, PropType } from "vue";

-const props = defineProps({ type: String, members: Object });
-let emails = "";
-props.members?.forEach((member: Address) => {
-    emails += member.email + "; ";
-});
+const props = defineProps({ type: String, members: Object as PropType<Address[]> });
+// const members: Address[] = [];
+
+// for (let i = 0; i < 4; i++) {
+//     if (!props.members) continue;
+//     members?.push(props?.members[0]);
+// }
+// todo deal with long list and responsive
 </script>

 <template>
    <div class="main">
-        {{ props.type }}:
-        {{ emails }}
+        <Badge :value="props.type + ': '" />
+        <div class="users">
+            <User class="user" v-for="(member, index) in props?.members" :key="index" :address="member" />
+        </div>
    </div>
 </template>

-<style scoped></style>
+<style scoped>
+.main {
+    display: flex;
+}
+.users {
+    display: flex;
+}
+
+.user {
+    margin-left: 5px;
+}
+</style>
--- a/front/src/views/room/Message.vue
+++ b/front/src/views/room/Message.vue
@ -1,23 +1,19 @@
-<script setup>
-import { defineProps, onMounted, ref, watch } from "vue";
+<script setup lang="ts">
+import { defineProps, onMounted, ref, watch, PropType, Prop } from "vue";
 import { decodeEmojis } from "../../utils/string";
 import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
+import { Address, Message } from "@/store/models/model";

 const props = defineProps({
-    data: {
-        fromA: String,
-        subject: String,
-        content: String,
-        date: String,
-    },
-    members: Array,
+    msg: Object as PropType<Message>,
+    members: Array as PropType<Address[]>,
 });
-const iframe = ref(null);
+const iframe = ref<HTMLIFrameElement>();

 // todo dompurify
 // background vs color
-const htmlDefault = (html) => {
+const htmlDefault = (html: string) => {
    return `
        <!DOCTYPE html>
        <html lang="en">
@ -34,8 +30,11 @@ const htmlDefault = (html) => {
    `;
 };

-function setIframeContent(content) {
-    const doc = iframe.value.contentDocument || iframe.value.contentWindow.document;
+function setIframeContent(content: string | undefined) {
+    if (!iframe.value) return;
+    if (!content) return;
+    const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document;
+    if (!doc) return;
    const html = DOMPurify.sanitize(content);
    doc.open();
    doc.write(htmlDefault(html));
@ -43,21 +42,22 @@ function setIframeContent(content) {
 }

 watch(
-    () => props.data,
-    (newData) => {
-        setIframeContent(newData.content);
+    () => props.msg,
+    (newData: Message | undefined) => {
+        setIframeContent(newData?.content);
    },
 );

 onMounted(() => {
-    setIframeContent(props.data.content);
+    setIframeContent(props.msg?.content);
 });

-const displayAddresses = (addressesId) => {
-    addressesId = removeDuplicates(addressesId);
+const displayAddresses = (addressIds: string[] | undefined): string => {
+    if (!addressIds) return "";
+    addressIds = removeDuplicates(addressIds);
    let res = "";
-    addressesId.forEach((addressId) => {
-        const address = props.members.find((member) => member.id == addressId);
+    addressIds.forEach((addressId) => {
+        const address = props.members?.find((member) => member.id === parseInt(addressId));
        if (address) res += address.email;
    });
    return res;
@ -72,24 +72,27 @@ const displayAddresses = (addressesId) => {
    <div class="message">
        <div id="context">
            <div class="left" id="profile">
-                {{ displayAddresses(props.data.fromA?.split(",")) }} - {{ props.data.fromA }}
+                {{ displayAddresses(props.msg?.fromA?.split(",")) }} - {{ props.msg?.fromA }}
            </div>
-            <div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
+            <div class="middle">{{ decodeEmojis(props.msg?.subject) }}</div>
            <div class="right" id="date">
                {{
-                    new Date(props.data.date).toLocaleString("en-GB", {
+                    new Date(props.msg?.date ?? "").toLocaleString("en-GB", {
                        weekday: "short",
                        year: "numeric",
                        month: "2-digit",
                        day: "2-digit",
                        hour: "2-digit",
                        minute: "2-digit",
-                        timezone: "UTC+1",
+                        timeZone: "Europe/Paris",
                    })
                }}
            </div>
        </div>
-        <iframe ref="iframe"></iframe>
+        <div class="content">
+            <iframe ref="iframe"></iframe>
+            <div class="options">options</div>
+        </div>
    </div>
 </template>

@ -106,17 +109,7 @@ const displayAddresses = (addressesId) => {
    justify-content: space-between;
    background-color: var(--quaternary-background);
    padding: 3px 10px;
-    margin-bottom: 6px;
-    border-radius: 4px;
-}
-
-iframe {
-    overflow-y: auto;
-    max-height: 300px;
-    width: 100%;
-    border: none;
-    max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
-    background-color: rgb(234, 234, 234);
+    border-radius: 4px 4px 0 0;
 }

 .left,
@ -128,4 +121,26 @@ iframe {
    margin: 0 10px;
    text-align: center;
 }
+
+.content {
+    display: flex;
+    padding-top: 6px;
+    flex-direction: row;
+    /* background-color: #ec7a4342;
+    background-color: #353c6261; */
+}
+
+iframe {
+    overflow-y: auto;
+    max-height: 300px;
+    flex-basis: 100%;
+    border: none;
+    max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    background-color: rgb(234, 234, 234);
+}
+
+.options {
+    flex: 1;
+    text-align: center;
+}
 </style>
--- a/front/yarn.lock
+++ b/front/yarn.lock
@ -1515,6 +1515,14 @@
  dependencies:
    "@types/node" "*"

+"@types/dompurify@^3.0.1":
+  version "3.0.1"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/dompurify/-/dompurify-3.0.1.tgz"
+  integrity sha512-ubq8VKmf8W+U48jUOiZO4BoSGS7NnbITPMvrF+7HgMN4L+eezCKv8QBPB8p3o4YPicLMmNeTyDkE5X4c2ViHJQ==
+  dependencies:
+    "@types/jsdom" "*"
+    "@types/trusted-types" "*"
+
 "@types/eslint-scope@^3.7.3":
  version "3.7.4"
  resolved "https://registry.npmmirror.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz"
@ -1606,6 +1614,15 @@
    jest-matcher-utils "^27.0.0"
    pretty-format "^27.0.0"

+"@types/jsdom@*":
+  version "21.1.1"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/jsdom/-/jsdom-21.1.1.tgz"
+  integrity sha512-cZFuoVLtzKP3gmq9eNosUL1R50U+USkbLtUQ1bYVgl/lKp0FZM7Cq4aIHAL8oIvQ17uSHi7jXPtfDOdjPwBE7A==
+  dependencies:
+    "@types/node" "*"
+    "@types/tough-cookie" "*"
+    parse5 "^7.0.0"
+
 "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
  version "7.0.11"
  resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz"
@ -1698,6 +1715,16 @@
  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz"
  integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==

+"@types/tough-cookie@*":
+  version "4.0.2"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/tough-cookie/-/tough-cookie-4.0.2.tgz"
+  integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
+
+"@types/trusted-types@*":
+  version "2.0.3"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/trusted-types/-/trusted-types-2.0.3.tgz"
+  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
+
 "@types/web-bluetooth@^0.0.16":
  version "0.0.16"
  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz"
@ -3797,6 +3824,11 @@ entities@^2.0.0:
  resolved "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz"
  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==

+entities@^4.4.0:
+  version "4.4.0"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/entities/-/entities-4.4.0.tgz"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
+
 error-ex@^1.3.1:
  version "1.3.2"
  resolved "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz"
@ -6301,6 +6333,13 @@ parse5@^6.0.1:
  resolved "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz"
  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==

+parse5@^7.0.0:
+  version "7.1.2"
+  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-7.1.2.tgz"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
 parse5@6.0.1:
  version "6.0.1"
  resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/parse5/-/parse5-6.0.1.tgz"
Author	SHA1	Message	Date
grimhilt	d641b01758	should implement continuous syncing	2023-04-07 17:15:28 +02:00
grimhilt	20fe48974f	style to implement flags and options on message	2023-04-07 16:52:13 +02:00
grimhilt	398d243eac	show list of users in rooms	2023-04-07 16:10:23 +02:00
grimhilt	649bccb01e	move message to typescript	2023-04-07 15:15:49 +02:00