Skip to content

Commit

Permalink
Merge pull request #233 from ninoseki/renew-frontend
Browse files Browse the repository at this point in the history
refactor: refacotring frontend
  • Loading branch information
ninoseki committed May 25, 2024
2 parents 7295e94 + 6fbe960 commit 4609b1f
Show file tree
Hide file tree
Showing 25 changed files with 1,088 additions and 1,671 deletions.
8 changes: 4 additions & 4 deletions frontend/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!doctype html>
<html lang="en" class="theme-light">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Expand All @@ -10,8 +10,8 @@
<body>
<noscript>
<strong
>We're sorry but EML Analyzer doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>We're sorry but EML Analyzer doesn't work properly without JavaScript enabled. Please
enable it to continue.</strong
>
</noscript>
<div id="app"></div>
Expand Down
1,843 changes: 696 additions & 1,147 deletions frontend/package-lock.json

Large diffs are not rendered by default.

54 changes: 26 additions & 28 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,58 +13,56 @@
"format": "prettier --write src/"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/vue-fontawesome": "^3.0.6",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/vue-fontawesome": "^3.0.8",
"@vueuse/core": "^10.9.0",
"@vueuse/router": "^10.9.0",
"@wooorm/starry-night": "^3.2.0",
"axios": "^1.6.7",
"bulma": "^0.9.4",
"axios": "^1.7.2",
"bulma": "^1.0.1",
"bulma-helpers": "^0.4.3",
"dayjs": "1.11.10",
"dayjs": "1.11.11",
"filesize.js": "2.0.0",
"font-awesome-animation": "^1.1.1",
"hast-util-to-html": "^9.0.0",
"highlight.js": "11.9.0",
"ioc-extractor": "^8.0.3",
"ioc-extractor": "^8.0.4",
"js-base64": "3.7.7",
"js-file-download": "^0.4.12",
"js-sha256": "0.11.0",
"just-truncate": "^2.2.0",
"linkify-string": "^4.1.3",
"linkifyjs": "^4.1.3",
"pinia": "^2.1.7",
"qs": "6.12.0",
"qs": "6.12.1",
"shiki": "^1.6.0",
"url-parse": "1.5.10",
"vue": "^3.4.21",
"vue-concurrency": "^5.0.0",
"vue-json-pretty": "^2.3.0",
"vue-router": "^4.3.0",
"zod": "^3.22.4"
"vue": "^3.4.27",
"vue-concurrency": "^5.0.1",
"vue-json-pretty": "^2.4.0",
"vue-router": "^4.3.2",
"zod": "^3.23.8"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.7.2",
"@tsconfig/node20": "^20.1.2",
"@rushstack/eslint-patch": "^1.10.3",
"@tsconfig/node20": "^20.1.4",
"@types/js-base64": "3.3.1",
"@types/jsdom": "^21.1.6",
"@types/node": "^20.11.25",
"@types/qs": "6.9.12",
"@types/node": "^20.12.12",
"@types/qs": "6.9.15",
"@types/url-parse": "1.4.11",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
"@vue/test-utils": "^2.4.4",
"@vue/test-utils": "^2.4.6",
"@vue/tsconfig": "^0.5.1",
"eslint": "^8.57.0",
"eslint-plugin-simple-import-sort": "^12.0.0",
"eslint-plugin-vue": "^9.22.0",
"eslint-plugin-simple-import-sort": "^12.1.0",
"eslint-plugin-vue": "^9.26.0",
"jsdom": "^24.0.0",
"npm-run-all2": "^6.1.2",
"npm-run-all2": "^6.2.0",
"prettier": "^3.2.5",
"typescript": "~5.4.2",
"vite": "^5.1.5",
"vitest": "^1.3.1",
"vue-tsc": "^2.0.6"
"typescript": "~5.4.5",
"vite": "^5.2.11",
"vitest": "^1.6.0",
"vue-tsc": "^2.0.19"
}
}
44 changes: 14 additions & 30 deletions frontend/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,25 @@
<template>
<Navbar></Navbar>
<section class="section is-medium">
<div class="container">
<router-view />
</div>
</section>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
<script setup lang="ts">
import { onMounted } from 'vue'
import Navbar from '@/components/Navbar.vue'
import { useStatusStore } from '@/store'
export default defineComponent({
name: 'App',
components: {
Navbar
},
setup() {
const store = useStatusStore()
const store = useStatusStore()
onMounted(async () => {
store.getStatus()
})
}
onMounted(async () => {
await store.getStatus()
})
</script>

<template>
<Navbar />
<section class="section is-medium">
<div class="container">
<router-view />
</div>
</section>
</template>

<style>
html {
background-color: #fafafa !important;
Expand All @@ -43,12 +35,4 @@ pre {
table.is-fullwidth th {
width: 360px;
}
.dropdowns .dropdown {
margin-bottom: 0.5rem;
}
.dropdowns .dropdown:not(:last-child):not(.is-fullwidth) {
margin-right: 0.5rem;
}
</style>
25 changes: 0 additions & 25 deletions frontend/src/components/Eml.vue

This file was deleted.

21 changes: 21 additions & 0 deletions frontend/src/components/EmlItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script setup lang="ts">
import { type PropType } from 'vue'
import Attachments from '@/components/attachments/AttachmentsItem.vue'
import Bodies from '@/components/bodies/BodiesItem.vue'
import Headers from '@/components/headers/Headers.vue'
import type { EmlType } from '@/schemas'
defineProps({
eml: {
type: Object as PropType<EmlType>,
required: true
}
})
</script>

<template>
<Headers :header="eml.header" />
<Bodies :bodies="eml.bodies" v-if="eml.bodies.length > 0" />
<Attachments :attachments="eml.attachments" v-if="eml.attachments.length > 0" />
</template>
100 changes: 48 additions & 52 deletions frontend/src/components/IndicatorButton.vue
Original file line number Diff line number Diff line change
@@ -1,3 +1,33 @@
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import truncate from 'just-truncate'
import { computed } from 'vue'
import { Links } from '@/links'
import type { IndicatorType } from '@/schemas'
import { getIndicatorType } from '@/utils'
const props = defineProps({
value: {
type: String,
required: true
}
})
const indicatorType = computed<IndicatorType | undefined>(() => {
return getIndicatorType(props.value)
})
const links = computed(() => {
return Links.filter((link) => link.type === indicatorType.value)
})
const copyToClipboard = () => {
const { copy } = useClipboard()
copy(props.value)
}
</script>

<template>
<div class="dropdown is-hoverable is-right">
<div class="dropdown-trigger">
Expand All @@ -10,59 +40,25 @@
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<div class="dropdown-item">
<button class="button is-borderless is-small" @click="copyToClipboard">
<span class="icon">
<font-awesome-icon icon="copy"></font-awesome-icon>
</span>
<span>Copy to clipboard</span>
</button>
</div>
<div class="dropdown-item" v-for="(link, index) in links" :key="index">
<a :href="link.href(value)" class="button is-borderless is-small" target="_blank">
<span class="icon">
<img :src="link.favicon" alt="favicon" />
</span>
<span>{{ link.name }}</span>
</a>
</div>
<a class="dropdown-item" @click="copyToClipboard">
<span class="icon">
<font-awesome-icon icon="copy"></font-awesome-icon>
</span>
<span>Copy to clipboard</span>
</a>
<a
:href="link.href(value)"
class="dropdown-item"
target="_blank"
v-for="(link, index) in links"
:key="index"
>
<span class="icon">
<img :src="link.favicon" alt="favicon" />
</span>
<span>{{ link.name }}</span>
</a>
</div>
</div>
</div>
</template>

<script lang="ts">
import { useClipboard } from '@vueuse/core'
import truncate from 'just-truncate'
import { computed, defineComponent } from 'vue'
import { Links } from '@/links'
import type { IndicatorType } from '@/schemas'
import { getIndicatorType } from '@/utils'
export default defineComponent({
name: 'IndicatorButton',
props: {
value: {
type: String,
required: true
}
},
setup(props) {
const indicatorType = computed<IndicatorType | undefined>(() => {
return getIndicatorType(props.value)
})
const links = computed(() => {
return Links.filter((link) => link.type === indicatorType.value)
})
const copyToClipboard = () => {
const { copy } = useClipboard()
copy(props.value)
}
return { truncate, links, indicatorType, copyToClipboard }
}
})
</script>
42 changes: 0 additions & 42 deletions frontend/src/components/Lookup.vue

This file was deleted.

31 changes: 31 additions & 0 deletions frontend/src/components/LookupItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script setup lang="ts">
import { onMounted } from 'vue'
import { useAsyncTask } from 'vue-concurrency'
import { API } from '@/api'
import ErrorMessage from '@/components/ErrorMessage.vue'
import Loading from '@/components/Loading.vue'
import Response from '@/components/ResponseItem.vue'
import type { ResponseType } from '@/schemas'
const props = defineProps({
id: {
type: String,
required: true
}
})
const lookupTask = useAsyncTask<ResponseType, []>(async () => {
return await API.lookup(props.id)
})
onMounted(async () => {
await lookupTask.perform()
})
</script>

<template>
<Loading v-if="lookupTask.isRunning" />
<ErrorMessage :error="lookupTask.last?.error" v-if="lookupTask.isError" />
<Response :response="lookupTask.last.value" v-if="lookupTask.last?.value" />
</template>
Loading

0 comments on commit 4609b1f

Please sign in to comment.