From d87f9823ed13470f379e5e95065b7627608f81ed Mon Sep 17 00:00:00 2001
From: Tino Hager <tino.hager@nager.at>
Date: Fri, 19 Jul 2024 21:38:15 +0200
Subject: [PATCH] optimize code

---
 .../src/components/LetterWithEnvelope.vue     |  95 +++++++
 src/Frontend/src/components/MailDetailBox.vue |  37 +++
 src/Frontend/src/components/MailFlowTable.vue |   2 -
 src/Frontend/src/pages/IndexPage.vue          | 268 +++++-------------
 4 files changed, 201 insertions(+), 201 deletions(-)
 create mode 100644 src/Frontend/src/components/LetterWithEnvelope.vue
 create mode 100644 src/Frontend/src/components/MailDetailBox.vue

diff --git a/src/Frontend/src/components/LetterWithEnvelope.vue b/src/Frontend/src/components/LetterWithEnvelope.vue
new file mode 100644
index 0000000..6b5a430
--- /dev/null
+++ b/src/Frontend/src/components/LetterWithEnvelope.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+
+interface Props {
+  from?: string
+  to?: string
+  subject?: string
+  returnPath?: string
+}
+
+defineProps<Props>()
+
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xml:space="preserve"
+    width="100%"
+    height="600"
+    version="1.1"
+    viewBox="0 0 32 32"
+  >
+    <g id="mail"><path
+      d="m2.43 29.04 13.55-9.88 13.55 9.88"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
+    /><path
+      d="m2.43 13.55 3.25-2.35"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
+    /><path
+      d="m26.48 11.2 3.05 2.46"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
+    /><path
+      d="M5.48 15.94c.12-.3 0-14.43 0-14.43H20.5l6.15 6.15v8.13"
+      style="fill:none;stroke:#666666;stroke-width:.8;"
+    /><path
+      d="M7 12 20 12 Z"
+      style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
+    /><path
+      d="M7 14 24 14 Z"
+      style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
+    /><path
+      d="M7 16 24 16 Z"
+      style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
+    /><path
+      d="m11.6 20.16-9.17-6.61v16.87h27.1V13.66l-9.09 6.5"
+      style="fill:none;stroke:#263238;stroke-width:.8;stroke-linejoin:round;"
+    /></g>
+
+    <g
+      id="letter"
+      transform="translate(0,-2)"
+    >
+      <text
+        x="7"
+        y="5.9"
+        style="font:normal 0.5px sans-serif; fill: #666;;"
+      >From</text>
+      <text
+        x="7"
+        y="6.8"
+        style="font:normal 0.7px sans-serif;"
+      >{{ from }}</text>
+
+      <text
+        x="7"
+        y="7.6"
+        style="font:normal 0.5px sans-serif; fill: #666;;"
+      >To</text>
+      <text
+        x="7"
+        y="8.5"
+        style="font:normal 0.7px sans-serif;"
+      >{{ to }}</text>
+
+      <text
+        x="7"
+        y="12"
+        style="font:normal 0.7px sans-serif; font-weight: bold;"
+      >{{ subject?.slice(0, 50) }}</text>
+    </g>
+
+    <g>
+      <text
+        x="11"
+        y="26"
+        style="font:normal 0.5px sans-serif; fill: #666;;"
+      >ReturnPath</text>
+      <text
+        x="11"
+        y="27"
+        style="font:italic 1.0px sans-serif;"
+      >{{ returnPath }}</text>
+    </g>
+  </svg>
+</template>
diff --git a/src/Frontend/src/components/MailDetailBox.vue b/src/Frontend/src/components/MailDetailBox.vue
new file mode 100644
index 0000000..ef7d5ee
--- /dev/null
+++ b/src/Frontend/src/components/MailDetailBox.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+interface Props {
+  name: string
+  details?: string[]
+  preformatted: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  details: undefined,
+  preformatted: false
+})
+
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-2 bg-grey-4 q-pa-sm">
+      {{ name }}
+    </div>
+    <div class="col-10 q-pa-sm bg-grey text-white">
+      <div
+        v-for="(detail, index) in details"
+        :key="`detail-${index}`"
+      >
+        <template v-if="preformatted">
+          <pre style="margin: 0px;">{{ detail }}</pre>
+        </template>
+        <template v-else>
+          <div style="font-family: monospace;">
+            {{ detail }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/Frontend/src/components/MailFlowTable.vue b/src/Frontend/src/components/MailFlowTable.vue
index 9787868..25814f6 100644
--- a/src/Frontend/src/components/MailFlowTable.vue
+++ b/src/Frontend/src/components/MailFlowTable.vue
@@ -73,12 +73,10 @@ const columns : QTableProps['columns'] = [
 <template>
   <q-table
     flat
-
     bordered
     :rows="receivedHeaders"
     :columns="columns"
     :rows-per-page-options="[0]"
-
     no-paginate
   >
     <template #body-cell-dateTime="props">
diff --git a/src/Frontend/src/pages/IndexPage.vue b/src/Frontend/src/pages/IndexPage.vue
index 620a483..0ac7c64 100644
--- a/src/Frontend/src/pages/IndexPage.vue
+++ b/src/Frontend/src/pages/IndexPage.vue
@@ -6,6 +6,8 @@ import { ReceivedHeaderParts } from 'src/models/ReceivedHeaderParts'
 
 import { mailHelper } from 'src/helpers/mailHelper'
 
+import LetterWithEnvelope from 'src/components/LetterWithEnvelope.vue'
+import MailDetailBox from 'src/components/MailDetailBox.vue'
 import MailFlow from 'src/components/MailFlow.vue'
 import MailFlowTable from 'src/components/MailFlowTable.vue'
 
@@ -14,9 +16,12 @@ const MailHeaders = {
   To: 'To',
   Subject: 'Subject',
   Received: 'Received',
+  ReplyTo: 'Reply-To',
   ReturnPath: 'Return-Path',
   MessageId: 'Message-Id',
-  Date: 'Date'
+  Date: 'Date',
+  DkimSignature: 'DKIM-Signature',
+  AuthenticationResults: 'Authentication-Results'
 }
 
 const mailHeader = ref<string>()
@@ -103,7 +108,7 @@ const dateHeaders = computed(() => {
 })
 
 const messageIdHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.MessageId)
+  return mailHeaderParts.value?.filter(header => header.headerName.toLowerCase() === MailHeaders.MessageId.toLowerCase())
 })
 
 const subjectHeaders = computed(() => {
@@ -139,8 +144,16 @@ const receivedHeaders = computed<ReceivedHeaderParts[] | undefined>(() => {
   return items
 })
 
+const replyToHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.ReplyTo)
+})
+
 const authenticationResultsHeaders = computed(() => {
-  return mailHeaderParts.value?.filter(header => header.headerName === 'Authentication-Results')
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.AuthenticationResults)
+})
+
+const dkimSignatureHeaders = computed(() => {
+  return mailHeaderParts.value?.filter(header => header.headerName === MailHeaders.DkimSignature)
 })
 
 const otherHeaders = computed(() => {
@@ -149,7 +162,7 @@ const otherHeaders = computed(() => {
 
   const filterTerm = filter.value?.toLowerCase()
   if (filterTerm) {
-    return filteredHeaders?.filter(header => header.headerName.toLowerCase().includes(filterTerm))
+    return mailHeaderParts.value?.filter(header => header.headerName.toLowerCase().includes(filterTerm))
   }
   return filteredHeaders
 })
@@ -174,202 +187,69 @@ const otherHeaders = computed(() => {
       class="row"
     >
       <div class="col-12 col-md-6">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xml:space="preserve"
-          width="100%"
-          height="600"
-          version="1.1"
-          viewBox="0 0 32 32"
-        >
-          <g id="mail"><path
-            d="m2.43 29.04 13.55-9.88 13.55 9.88"
-            style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
-          /><path
-            d="m2.43 13.55 3.25-2.35"
-            style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
-          /><path
-            d="m26.48 11.2 3.05 2.46"
-            style="fill:none;stroke:#263238;stroke-width:.8;stroke-dasharray:none;"
-          /><path
-            d="M5.48 15.94c.12-.3 0-14.43 0-14.43H20.5l6.15 6.15v8.13"
-            style="fill:none;stroke:#666666;stroke-width:.8;"
-          /><path
-            d="M7 12 20 12 Z"
-            style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
-          /><path
-            d="M7 14 24 14 Z"
-            style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
-          /><path
-            d="M7 16 24 16 Z"
-            style="fill:none;stroke:#CCCCCC;stroke-width:.3;"
-          /><path
-            d="m11.6 20.16-9.17-6.61v16.87h27.1V13.66l-9.09 6.5"
-            style="fill:none;stroke:#263238;stroke-width:.8;stroke-linejoin:round;"
-          /></g>
-
-          <g
-            id="letter"
-            transform="translate(0,-2)"
-          >
-            <text
-              x="7"
-              y="5.9"
-              style="font:normal 0.5px sans-serif; fill: #666;;"
-            >From</text>
-            <text
-              x="7"
-              y="6.8"
-              style="font:normal 0.7px sans-serif;"
-            >{{ from }}</text>
-
-            <text
-              x="7"
-              y="7.6"
-              style="font:normal 0.5px sans-serif; fill: #666;;"
-            >To</text>
-            <text
-              x="7"
-              y="8.5"
-              style="font:normal 0.7px sans-serif;"
-            >{{ to }}</text>
-
-            <text
-              x="7"
-              y="12"
-              style="font:normal 0.7px sans-serif; font-weight: bold;"
-            >{{ subject }}</text>
-          </g>
-
-          <g>
-            <text
-              x="11"
-              y="26"
-              style="font:normal 0.5px sans-serif; fill: #666;;"
-            >ReturnPath</text>
-            <text
-              x="11"
-              y="27"
-              style="font:italic 1.0px sans-serif;"
-            >{{ returnPath }}</text>
-          </g>
-        </svg>
+        <LetterWithEnvelope
+          :to="to"
+          :from="from"
+          :subject="subject"
+          :return-path="returnPath"
+        />
       </div>
       <div class="col-12 col-md-6">
         <div class="q-my-md">
           <div class="q-gutter-sm">
-            <div
+            <MailDetailBox
               v-if="returnPathHeaders && returnPathHeaders.length > 0"
-              class="row"
-            >
-              <div class="col-2 bg-grey-4 q-pa-sm">
-                Return-Path
-              </div>
-              <div class="col-10 q-pa-sm bg-grey text-white">
-                <div
-                  v-for="(returnPathHeader, index) in returnPathHeaders"
-                  :key="`returnPathHeader-${index}`"
-                >
-                  {{ returnPathHeader.headerData }}
-                </div>
-              </div>
-            </div>
-            <div
+              name="Return-Path"
+              :details="returnPathHeaders?.map(o => o.headerData)"
+            />
+            <MailDetailBox
               v-if="fromHeaders && fromHeaders.length > 0"
-              class="row"
-            >
-              <div class="col-2 bg-grey-4 q-pa-sm">
-                From
-              </div>
-              <div class="col-10 q-pa-sm bg-grey text-white">
-                <div
-                  v-for="(fromHeader, index) in fromHeaders"
-                  :key="`fromHeader-${index}`"
-                >
-                  {{ fromHeader.headerData }}
-                </div>
-              </div>
-            </div>
-            <div
+              name="From"
+              :details="fromHeaders?.map(o => o.headerData)"
+            />
+
+            <MailDetailBox
               v-if="toHeaders && toHeaders.length > 0"
-              class="row"
-            >
-              <div class="col-2 bg-grey-4 q-pa-sm">
-                To
-              </div>
-              <div class="col-10 q-pa-sm bg-grey text-white">
-                <div
-                  v-for="(toHeader, index) in toHeaders"
-                  :key="`toHeader-${index}`"
-                >
-                  {{ toHeader.headerData }}
-                </div>
-              </div>
-            </div>
-            <div
+              name="To"
+              :details="toHeaders?.map(o => o.headerData)"
+            />
+
+            <MailDetailBox
+              v-if="replyToHeaders && replyToHeaders.length > 0"
+              name="Reply-To"
+              :details="replyToHeaders?.map(o => o.headerData)"
+            />
+
+            <MailDetailBox
               v-if="messageIdHeaders && messageIdHeaders.length > 0"
-              class="row"
-            >
-              <div class="col-2 bg-grey-4 q-pa-sm">
-                Message-Id
-              </div>
-              <div class="col-10 q-pa-sm bg-grey text-white">
-                <div
-                  v-for="(messageIdHeader, index) in messageIdHeaders"
-                  :key="`messageIdHeader-${index}`"
-                >
-                  {{ messageIdHeader.headerData }}
-                </div>
-              </div>
-            </div>
-            <div
+              name="Message-Id"
+              :details="messageIdHeaders?.map(o => o.headerData)"
+            />
+
+            <MailDetailBox
               v-if="dateHeaders && dateHeaders.length > 0"
-              class="row"
-            >
-              <div class="col-2 bg-grey-4 q-pa-sm">
-                Date
-              </div>
-              <div class="col-10 q-pa-sm bg-grey text-white">
-                <div
-                  v-for="(dateHeader, index) in dateHeaders"
-                  :key="`dateHeader-${index}`"
-                >
-                  {{ dateHeader.headerData }}
-                </div>
-              </div>
-            </div>
-            <div
+              name="Date"
+              :details="dateHeaders?.map(o => o.headerData)"
+            />
+
+            <MailDetailBox
               v-if="subjectHeaders && subjectHeaders.length > 0"
-              class="row"
-            >
-              <div class="col-2 bg-grey-4 q-pa-sm">
-                Subject
-              </div>
-              <div class="col-10 q-pa-sm bg-grey text-white">
-                <div
-                  v-for="(subjectHeader, index) in subjectHeaders"
-                  :key="`subjectHeader-${index}`"
-                >
-                  {{ subjectHeader.headerData }}
-                </div>
-              </div>
-            </div>
-            <div
+              name="Subject"
+              :details="subjectHeaders?.map(o => o.headerData)"
+            />
+
+            <MailDetailBox
               v-if="authenticationResultsHeaders && authenticationResultsHeaders.length > 0"
-              class="row"
-            >
-              <div class="col-2 bg-grey-4 q-pa-sm">
-                Authentication-Results
-              </div>
-              <div class="col-10 q-pa-sm bg-grey text-white">
-                <div
-                  v-for="(authenticationResultsHeader, index) in authenticationResultsHeaders"
-                  :key="`subjectHeader-${index}`"
-                >
-                  <pre style="margin: 0px;">{{ authenticationResultsHeader.headerData.split(';').map(o=>o.trim()).join('\n') }}</pre>
-                </div>
-              </div>
-            </div>
+              name="Authentication-Results"
+              :details="authenticationResultsHeaders?.map(o => o.headerData.split(';').map(o=>o.trim()).join('\n'))"
+              :preformatted="true"
+            />
+
+            <MailDetailBox
+              v-if="dkimSignatureHeaders && dkimSignatureHeaders.length > 0"
+              name="Dkim Signature"
+              :details="dkimSignatureHeaders?.map(o => o.headerData)"
+            />
           </div>
         </div>
       </div>
@@ -382,16 +262,6 @@ const otherHeaders = computed(() => {
       >
         <MailFlow :received-headers="receivedHeaders" />
         <MailFlowTable :received-headers="receivedHeaders" />
-
-        <!-- <div>
-          <div
-            v-for="(received, index) in receivedHeaders"
-            :key="index"
-            class="q-pa-sm col-2 bg-grey text-white q-mb-sm"
-          >
-            <pre style="margin: 0px; white-space: pre-wrap;">{{ received }}</pre>
-          </div>
-        </div> -->
       </div>
 
       <h2>Other Headers</h2>