feat(new tool): Bounce Email Parser

Parse SMTP bounce emails

components.d.ts

@@ -20,6 +20,7 @@ declare module '@vue/runtime-core' {
     Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
     BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
     Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
+    BounceParser: typeof import('./src/tools/bounce-parser/bounce-parser.vue')['default']
     CAlert: typeof import('./src/ui/c-alert/c-alert.vue')['default']
     'CAlert.demo': typeof import('./src/ui/c-alert/c-alert.demo.vue')['default']
     CameraRecorder: typeof import('./src/tools/camera-recorder/camera-recorder.vue')['default']
@@ -130,18 +131,18 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NSpace: typeof import('naive-ui')['NSpace']
+    NP: typeof import('naive-ui')['NP']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

package.json

@@ -59,6 +59,7 @@
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.6",
+    "email-bounce-parser-browser": "^1.0.22",
     "email-normalizer": "^1.0.0",
     "emojilib": "^3.0.10",
     "figlet": "^1.7.0",
@@ -86,6 +87,7 @@
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "randexp": "^0.5.3",
+    "re2-wasm": "^1.0.2",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",

src/tools/bounce-parser/bounce-parser.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// import { RE2 } from 're2-wasm';
+import EmailBounceParse from 'email-bounce-parser-browser';
+
+window.Module = { chier: 12 };
+
+const emailContent = ref('');
+
+const parsedBounce = computed(() => {
+  try {
+    return { email: new EmailBounceParse().read(emailContent.value) };
+  }
+  catch (e: any) {
+    return { parsingError: e.toString() };
+  }
+});
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Input" mb-2>
+      <c-input-text
+        v-model:value="emailContent"
+        label="Bounce Email Textual Content"
+        multiline
+        placeholder="Put your email text content here..."
+        rows="15"
+        mb-2
+      />
+    </c-card>
+
+    <c-card v-if="parsedBounce && emailContent" title="Output">
+      <n-p v-if="parsedBounce.email?.bounce" style="color: green">
+        This mail is a bounce email
+      </n-p>
+      <n-p v-if="!parsedBounce.email?.bounce" style="color: red">
+        This mail is NOT a bounce email
+      </n-p>
+      <c-alert v-if="!parsedBounce.parsingError">
+        {{ parsedBounce.parsingError }}
+      </c-alert>
+      <input-copyable v-if="parsedBounce.email?.recipient" label="Recipient" :value="parsedBounce.email?.recipient" />
+      <input-copyable v-if="parsedBounce.email?.server?.hostname" label="Server (Host)" :value="parsedBounce.email?.server?.hostname" />
+      <input-copyable v-if="parsedBounce.email?.server?.ip" label="Server (IP)" :value="parsedBounce.email?.server?.ip" />
+      <input-copyable v-if="parsedBounce.email?.server?.port" label="Server (Port)" :value="parsedBounce.email?.server?.port" />
+      <input-copyable v-if="parsedBounce.email?.command" label="Recipient" :value="parsedBounce.email?.command" />
+      <c-card v-if="parsedBounce.email?.data" title="Details" mb-2>
+        <textarea-copyable :value="JSON.stringify(parsedBounce.email?.data, null, 2)" />
+      </c-card>
+      <c-card v-if="parsedBounce.email?.email?.error" title="Raw Error" mb-2>
+        <textarea-copyable :value="parsedBounce.email?.email?.error" />
+      </c-card>
+    </c-card>
+  </div>
+</template>

src/tools/bounce-parser/email-bounce-parser-browser.d.ts

@@ -0,0 +1,18 @@
+declare module "email-bounce-parser-browser" {
+    export default class EmailBounceParse {
+        read(emailContent: string): {
+            bounce: boolean
+            recipient?: string
+            data: any
+            command: string
+            server?: {
+                hostname: string
+                ip: string
+                port: string
+            }
+            email?: {
+                error?: string
+            }
+        }
+    } 
+}

src/tools/bounce-parser/index.ts

@@ -0,0 +1,12 @@
+import { Mailbox } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Bounce Email Parser',
+  path: '/bounce-parser',
+  description: 'Parse SMTP Bounce Emails',
+  keywords: ['bounce', 'email', 'smtp', 'parser'],
+  component: () => import('./bounce-parser.vue'),
+  icon: Mailbox,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as bounceParser } from './bounce-parser';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -137,6 +138,7 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      bounceParser,
     ],
   },
   {

vite.config.ts

@@ -113,4 +113,7 @@ export default defineConfig({
   build: {
     target: 'esnext',
   },
+  optimizeDeps: {
+    include: ['re2-wasm'], // optionally specify dependency name
+  },
 });