fix: better UI

2024-10-07 22:24:08 +02:00 · 2024-10-07 22:24:08 +02:00 · 7170450aba
commit 7170450aba
parent e86e9212d5
5 changed files with 1026 additions and 1606 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/TextareaCopyable.vue
+++ b/src/components/TextareaCopyable.vue
@ -7,8 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import bashHljs from 'highlight.js/lib/languages/bash';
 import markdownHljs from 'highlight.js/lib/languages/markdown';
+import jsHljs from 'highlight.js/lib/languages/javascript';
+import cssHljs from 'highlight.js/lib/languages/css';
+import goHljs from 'highlight.js/lib/languages/go';
+import csharpHljs from 'highlight.js/lib/languages/csharp';
+import { Base64 } from 'js-base64';
 import { useCopy } from '@/composable/copy';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';

 const props = withDefaults(
  defineProps<{
@ -17,12 +24,17 @@ const props = withDefaults(
    language?: string
    copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
    copyMessage?: string
+    wordWrap?: boolean
+    downloadFileName?: string
+    downloadButtonText?: string
  }>(),
  {
    followHeightOf: null,
    language: 'txt',
    copyPlacement: 'top-right',
    copyMessage: 'Copy to clipboard',
+    downloadFileName: '',
+    downloadButtonText: 'Download',
  },
 );
 hljs.registerLanguage('sql', sqlHljs);
@ -31,13 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('bash', bashHljs);
 hljs.registerLanguage('markdown', markdownHljs);
+hljs.registerLanguage('css', cssHljs);
+hljs.registerLanguage('javascript', jsHljs);
+hljs.registerLanguage('go', goHljs);
+hljs.registerLanguage('csharp', csharpHljs);

-const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
+const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };

 const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
 const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
+
+const valueBase64 = computed(() => Base64.encode(value.value));
+const { download } = useDownloadFileFromBase64(
+  {
+    source: valueBase64,
+    filename: downloadFileName,
+  });
 </script>

 <template>
@ -49,11 +73,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
        :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
      >
        <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
        </n-config-provider>
      </n-scrollbar>
-      <div absolute right-10px top-10px>
-        <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
+      <div
+        v-if="value && copyPlacement !== 'none'"
+        absolute right-10px
+        :top-10px="copyPlacement === 'top-right' ? '' : 'no'"
+        :bottom-10px="copyPlacement === 'bottom-right' ? '' : 'no'"
+      >
+        <c-tooltip v-if="value && copyPlacement !== 'outside'" :tooltip="tooltipText" position="left">
          <c-button circle important:h-10 important:w-10 @click="copy()">
            <n-icon size="22" :component="Copy" />
          </c-button>
@ -65,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
        {{ tooltipText }}
      </c-button>
    </div>
+    <div v-if="downloadFileName !== '' && value !== ''" mt-5 flex justify-center>
+      <c-button secondary @click="download">
+        {{ downloadButtonText }}
+      </c-button>
+    </div>
  </div>
 </template>

--- a/src/composable/downloadBase64.ts
+++ b/src/composable/downloadBase64.ts
@ -1,6 +1,7 @@
 import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
-import type { Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import _ from 'lodash';
+import { get } from '@vueuse/core';

 export {
  getMimeTypeFromBase64,
@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
 }

 function useDownloadFileFromBase64(
-  { source, filename, extension, fileMimeType }:
-  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
-  return {
-    download() {
-      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
-    },
-  };
-}
-
-function useDownloadFileFromBase64Refs(
  { source, filename, extension }:
-  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  { source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
  return {
    download() {
-      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+      downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
    },
  };
 }
@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {

  return img;
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}
--- a/src/tools/bounce-parser/bounce-parser.vue
+++ b/src/tools/bounce-parser/bounce-parser.vue
@ -26,27 +26,41 @@ const parsedBounce = computed(() => {
      />
    </c-card>

-    <c-card v-if="parsedBounce && emailContent" title="Output">
-      <n-p v-if="parsedBounce.email?.bounce" style="color: green">
+    <c-card v-if="parsedBounce && emailContent" title="Output" mb-2>
+      <n-p v-if="parsedBounce.email?.email?.error" style="color: green" mb-2>
        This mail is a bounce email
      </n-p>
-      <n-p v-if="!parsedBounce.email?.bounce" style="color: red">
+      <n-p v-if="!parsedBounce.email?.email?.error" style="color: red" mb-2>
        This mail is NOT a bounce email
      </n-p>
-      <c-alert v-if="parsedBounce.parsingError">
+      <c-alert v-if="parsedBounce.parsingError" mb-2>
        {{ 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>
+      <input-copyable v-if="parsedBounce.email?.data?.recipient" label="Recipient" :value="parsedBounce.email?.data?.recipient" mb-2 />
+      <div v-if="parsedBounce.email?.email?.error">
+        <c-card title="Error" mb-2>
+          <input-copyable v-if="parsedBounce.email?.data?.command" label="Command" :value="parsedBounce.email?.data?.command" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.code?.basic || parsedBounce.email?.data?.error?.code?.enhanced" label="Code" :value="`${parsedBounce.email?.data?.error?.code?.basic}/${parsedBounce.email?.data?.error?.code?.enhanced}`" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.label" label="Label" :value="parsedBounce.email?.data?.error?.label" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.type" label="Type" :value="parsedBounce.email?.data?.error?.type" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.temporary" label="Temporary" :value="parsedBounce.email?.data?.error?.temporary" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.permanent" label="Permanent" :value="parsedBounce.email?.data?.error?.permanent" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.data?.type" label="Subtype" :value="parsedBounce.email?.data?.error?.data?.type" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.data?.blocked" label="Blocked" :value="parsedBounce.email?.data?.error?.data?.blocked" />
+          <input-copyable v-if="parsedBounce.email?.data?.error?.data?.spam" label="Spam" :value="parsedBounce.email?.data?.error?.data?.spam" />
+        </c-card>
+        <c-card v-if="parsedBounce.email?.data?.server?.hostname || parsedBounce.email?.data?.server?.ip" title="Server" mb-2>
+          <input-copyable v-if="parsedBounce.email?.data?.server?.hostname" label="Host" :value="parsedBounce.email?.data?.server?.hostname" />
+          <input-copyable v-if="parsedBounce.email?.data?.server?.ip" label="IP" :value="parsedBounce.email?.data?.server?.ip" />
+          <input-copyable v-if="parsedBounce.email?.data?.server?.port" label="Port" :value="parsedBounce.email?.data?.server?.port" />
+        </c-card>
+        <c-card 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 title="Raw Error" mb-2>
+          <textarea-copyable :value="parsedBounce.email?.email?.error" word-wrap />
        </c-card>
+      </div>
    </c-card>
  </div>
 </template>
--- a/src/tools/bounce-parser/email-bounce-parser-browser.d.ts
+++ b/src/tools/bounce-parser/email-bounce-parser-browser.d.ts
@ -2,17 +2,35 @@ 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?: {
+                body?: string
+                intro?: string
                error?: string
            }
+            data?: {
+                error?: {
+                code?: {
+                    basic?: string
+                    enhanced?:string
+                }
+                label?: string
+                type?: string
+                temporary?: boolean
+                permanent?: boolean
+                data?: {
+                    type?: string
+                    blocked?: boolean
+                    spam?: boolean
+                }
+                }
+                recipient?:string
+                server?: {
+                hostname?: string
+                ip?: string
+                port?: string
+                }
+                command?: string
+            }
        }
    } 
 }