refactor: use composition-api

frontend/package.json

@@ -10,27 +10,26 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "5.14.0",
-    "@mdi/font": "5.6.55",
+    "@fortawesome/fontawesome-free": "5.15.4",
+    "@mdi/font": "5.9.55",
+    "@vue/composition-api": "^1.0.5",
+    "@vueuse/core": "^5.2.0",
     "axios": "0.21.1",
     "buefy": "0.9.8",
-    "core-js": "3.6.5",
-    "dayjs": "1.8.36",
+    "core-js": "3.16.1",
+    "dayjs": "1.10.6",
     "filesize.js": "2.0.0",
-    "highlight.js": "10.4.1",
-    "js-base64": "3.5.2",
+    "highlight.js": "11.2.0",
+    "js-base64": "3.6.1",
     "js-sha256": "0.9.0",
-    "qs": "6.9.4",
-    "url-parse": "1.4.7",
+    "qs": "6.10.1",
+    "url-parse": "1.5.3",
     "vue": "2.6.14",
-    "vue-class-component": "7.2.6",
+    "vue-concurrency": "^2.1.2",
     "vue-markdown": "2.2.4",
-    "vue-mixin-decorator": "1.2.0",
-    "vue-property-decorator": "9.0.0",
     "vue-router": "3.5.2"
   },
   "devDependencies": {
-    "@types/highlight.js": "9.12.4",
     "@types/jest": "26.0.20",
     "@types/js-base64": "3.0.0",
     "@types/qs": "6.9.5",
@@ -44,7 +43,7 @@
     "@vue/cli-service": "4.5.13",
     "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-typescript": "5.1.0",
-    "@vue/test-utils": "1.2.1",
+    "@vue/test-utils": "1.2.2",
     "eslint": "7.23.0",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-simple-import-sort": "5.0.3",

frontend/src/App.vue

@@ -10,16 +10,16 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { defineComponent } from "@vue/composition-api";
 
 import Navbar from "@/components/ui/Navbar.vue";
 
-@Component({
+export default defineComponent({
+  name: "App",
   components: {
     Navbar,
   },
-})
-export default class App extends Vue {}
+});
 </script>
 
 <style>

frontend/src/api.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+
+import { Response } from "@/types";
+
+const client = axios.create();
+
+export const API = {
+  async analyzeFile(file: File | undefined): Promise<Response> {
+    const formData = new FormData();
+    if (file !== undefined) {
+      formData.append("file", file);
+    }
+
+    const res = await client.post<Response>("/api/analyze/file", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+    return res.data;
+  },
+};

frontend/src/components/Eml.vue

@@ -1,27 +1,26 @@
 <template>
   <div>
-    <Headers v-bind:header="eml.header" />
-    <Bodies v-bind:bodies="eml.bodies" />
-    <Attachments v-bind:attachments="eml.attachments" />
+    <Headers :header="eml.header" />
+    <Bodies :bodies="eml.bodies" />
+    <Attachments :attachments="eml.attachments" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { defineComponent, PropType } from "@vue/composition-api";
 
 import Attachments from "@/components/attachments/Attachments.vue";
 import Bodies from "@/components/bodies/Bodies.vue";
 import Headers from "@/components/headers/Headers.vue";
 import { Eml } from "@/types";
-
-@Component({
-  components: {
-    Attachments,
-    Bodies,
-    Headers,
+export default defineComponent({
+  name: "DnsRecords",
+  props: {
+    eml: {
+      type: Object as PropType<Eml>,
+      required: true,
+    },
   },
-})
-export default class EmlComponent extends Vue {
-  @Prop() private eml!: Eml;
-}
+  components: { Attachments, Bodies, Headers },
+});
 </script>

frontend/src/components/Response.vue

@@ -1,24 +1,24 @@
 <template>
   <div>
-    <Verdicts v-bind:verdicts="response.verdicts" />
-    <Eml v-bind:eml="response.eml" />
+    <Verdicts :verdicts="response.verdicts" />
+    <Eml :eml="response.eml" />
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { defineComponent, PropType } from "@vue/composition-api";
 
 import Eml from "@/components/Eml.vue";
 import Verdicts from "@/components/verdicts/Verdicts.vue";
 import { Response } from "@/types";
-
-@Component({
-  components: {
-    Eml,
-    Verdicts,
+export default defineComponent({
+  name: "Response",
+  props: {
+    response: {
+      type: Object as PropType<Response>,
+      required: true,
+    },
   },
-})
-export default class ResponseComponent extends Vue {
-  @Prop() private response!: Response;
-}
+  components: { Eml, Verdicts },
+});
 </script>

frontend/src/components/attachments/Attachment.vue

@@ -21,7 +21,7 @@
           </tr>
           <tr>
             <th>Size</th>
-            <td>{{ filesize }}</td>
+            <td>{{ fileSize(attachment.size) }}</td>
           </tr>
           <tr>
             <th>MIME type</th>
@@ -30,7 +30,7 @@
           <tr>
             <th>Hash</th>
             <td>
-              <Indicators v-bind:type="sha256Type" v-bind:values="values" />
+              <Indicators :type="sha256Type" v-bind:values="values" />
             </td>
           </tr>
         </tbody>
@@ -40,27 +40,37 @@
 </template>
 
 <script lang="ts">
+import { computed, defineComponent, PropType } from "@vue/composition-api";
 import fileSize from "filesize.js";
-import { Component, Prop, Vue } from "vue-property-decorator";
 
 import Indicators from "@/components/indicators/Indicators.vue";
 import Submitters from "@/components/submitters/Submitters.vue";
 import H3 from "@/components/ui/h3.vue";
 import { Attachment } from "@/types";
 
-@Component({
-  components: { Indicators, H3, Submitters },
-})
-export default class AttachmentComponent extends Vue {
-  @Prop() private attachment!: Attachment;
-  @Prop() private index!: number;
+export default defineComponent({
+  name: "Attachement",
+  props: {
+    attachment: {
+      type: Object as PropType<Attachment>,
+      required: true,
+    },
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  components: { H3, Submitters, Indicators },
+  setup(props) {
+    const header = computed(() => {
+      return `#${props.index + 1}`;
+    });
+    const values = computed(() => {
+      return [props.attachment.hash.sha256];
+    });
+    const sha256Type = "sha256";
 
-  private header = `#${this.index + 1}`;
-  private values = [this.attachment.hash.sha256];
-  private sha256Type = "sha256";
-
-  get filesize(): string {
-    return fileSize(this.attachment.size);
-  }
-}
+    return { header, values, sha256Type, fileSize };
+  },
+});
 </script>

frontend/src/components/attachments/Attachments.vue

@@ -4,9 +4,9 @@
     <div v-if="hasAttachments">
       <AttachmentComponent
         v-for="(attachment, index) in attachments"
-        v-bind:key="attachment.hash.md5"
-        v-bind:attachment="attachment"
-        v-bind:index="index"
+        :key="attachment.hash.md5"
+        :attachment="attachment"
+        :index="index"
       />
     </div>
     <div v-else>
@@ -16,23 +16,26 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed, defineComponent, PropType } from "@vue/composition-api";
 
 import AttachmentComponent from "@/components/attachments/Attachment.vue";
 import H2 from "@/components/ui/h2.vue";
 import { Attachment } from "@/types";
 
-@Component({
-  components: {
-    AttachmentComponent,
-    H2,
+export default defineComponent({
+  name: "Attachements",
+  props: {
+    attachments: {
+      type: Array as PropType<Attachment[]>,
+      required: true,
+    },
   },
-})
-export default class Attachments extends Vue {
-  @Prop() private attachments!: Attachment[];
-
-  get hasAttachments(): boolean {
-    return this.attachments.length > 0;
-  }
-}
+  components: { AttachmentComponent, H2 },
+  setup(props) {
+    const hasAttachments = computed((): boolean => {
+      return props.attachments.length > 0;
+    });
+    return { hasAttachments };
+  },
+});
 </script>

frontend/src/components/bodies/Bodies.vue

@@ -4,9 +4,9 @@
     <div v-if="hasBodies">
       <BodyComponent
         v-for="(body, index) in bodies"
-        v-bind:key="body.hash"
-        v-bind:body="body"
-        v-bind:index="index"
+        :key="body.hash"
+        :body="body"
+        :index="index"
       />
     </div>
     <div v-else>
@@ -16,23 +16,25 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed, defineComponent, PropType } from "@vue/composition-api";
 
 import BodyComponent from "@/components/bodies/Body.vue";
 import H2 from "@/components/ui/h2.vue";
 import { Body } from "@/types";
-
-@Component({
-  components: {
-    BodyComponent,
-    H2,
+export default defineComponent({
+  name: "Bodies",
+  props: {
+    bodies: {
+      type: Array as PropType<Body[]>,
+      required: true,
+    },
   },
-})
-export default class Bodies extends Vue {
-  @Prop() private bodies!: Body[];
-
-  hasBodies(): boolean {
-    return this.bodies.length > 0;
-  }
-}
+  components: { BodyComponent, H2 },
+  setup(props) {
+    const hasBodies = computed((): boolean => {
+      return props.bodies.length > 0;
+    });
+    return { hasBodies };
+  },
+});
 </script>