Skip to content

Commit

Permalink
Merge pull request #213 from ninoseki/renew-frontend
Browse files Browse the repository at this point in the history
refactor: renew frontend
  • Loading branch information
ninoseki authored Apr 11, 2024
2 parents c73a90c + 574eea8 commit 4b48936
Show file tree
Hide file tree
Showing 31 changed files with 1,218 additions and 1,092 deletions.
643 changes: 401 additions & 242 deletions frontend/package-lock.json

Large diffs are not rendered by default.

31 changes: 18 additions & 13 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,30 @@
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
},
"dependencies": {
"@fortawesome/fontawesome-free": "6.5.1",
"@fortawesome/fontawesome-svg-core": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@fortawesome/vue-fontawesome": "^3.0.6",
"@vueuse/core": "^10.9.0",
"axios": "1.6.8",
"bulma": "0.9.4",
"bulma": "1.0.0",
"email-regex": "5.0.0",
"font-awesome-animation": "^1.1.1",
"js-base64": "^3.7.7",
"qs": "6.12.0",
"vue": "3.4.21",
"vue-concurrency": "5.0.0",
"vue-json-pretty": "^2.3.0"
"vue-json-pretty": "^2.4.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.7.2",
"@tsconfig/node20": "^20.1.2",
"@rushstack/eslint-patch": "^1.10.2",
"@tsconfig/node20": "^20.1.4",
"@types/js-base64": "^3.3.1",
"@types/jsdom": "^21.1.6",
"@types/node": "^20.11.28",
"@types/qs": "^6.9.12",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@types/node": "^20.12.7",
"@types/qs": "^6.9.14",
"@typescript-eslint/eslint-plugin": "^7.6.0",
"@typescript-eslint/parser": "^7.6.0",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
Expand All @@ -42,13 +47,13 @@
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-simple-import-sort": "^12.0.0",
"eslint-plugin-vue": "^9.23.0",
"eslint-plugin-vue": "^9.24.1",
"jsdom": "^24.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^3.2.5",
"typescript": "~5.4.2",
"vite": "^5.1.6",
"typescript": "~5.4.5",
"vite": "^5.2.8",
"vitest": "^1.4.0",
"vue-tsc": "^2.0.6"
"vue-tsc": "^2.0.12"
}
}
32 changes: 10 additions & 22 deletions frontend/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,14 @@
<template>
<div id="app">
<Navbar></Navbar>
<section class="section is-medium">
<div class="container">
<h2 class="subtitle">URL fingerprinting made easy.</h2>
<Calculator></Calculator>
</div>
</section>
</div>
<Navbar />
<section class="section is-medium">
<div class="container">
<h2 class="subtitle">URL fingerprinting made easy.</h2>
<Calculator />
</div>
</section>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import Calculator from "@/components/Calculator.vue"
import Navbar from "@/components/Navbar.vue"
export default defineComponent({
name: "App",
components: {
Navbar,
Calculator
}
})
<script setup lang="ts">
import Calculator from "@/components/CalculatorItem.vue"
import Navbar from "@/components/NavbarItem.vue"
</script>
109 changes: 0 additions & 109 deletions frontend/src/components/Calculator.vue

This file was deleted.

69 changes: 69 additions & 0 deletions frontend/src/components/CalculatorItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<script setup lang="ts">
import { ref } from "vue"
import { useAsyncTask } from "vue-concurrency"
import { API } from "@/api"
import ErrorMessage from "@/components/ErrorMessage.vue"
import FingerprintComponent from "@/components/Fingerprint.vue"
import Loading from "@/components/LoadingItem.vue"
import BinaryEdge from "@/components/services/BinaryEdgeItem.vue"
import Censys from "@/components/services/CensysItem.vue"
import Fofa from "@/components/services/FofaItem.vue"
import Onyphe from "@/components/services/OnypheItem.vue"
import SecurityTrails from "@/components/services/SecurityTrailsItem.vue"
import Shodan from "@/components/services/ShodanItem.vue"
import SpyOnWeb from "@/components/services/SpyOnWebItem.vue"
import Urlscan from "@/components/services/UrlscanItem.vue"
import VirusTotal from "@/components/services/VirusTotalItem.vue"
import ZoomEye from "@/components/services/ZoomEyeItem.vue"
import type { Fingerprint } from "@/types"
const url = ref<string>("https://example.com")
const calculateTask = useAsyncTask<Fingerprint, []>(async () => {
return await API.calculateFingerprint(url.value || "")
})
const calculate = async () => {
if (!url.value) {
return
}
await calculateTask.perform()
}
</script>

<template>
<div class="field">
<div class="control is-clearfix">
<input
type="url"
autocomplete="on"
class="input"
placeholder="http://example.com"
v-model="url"
/>
</div>
</div>
<div class="block has-text-centered">
<button type="button" class="button is-light" @click="calculate">
<span>Calculate</span>
</button>
</div>
<Loading v-if="calculateTask.isRunning" />
<ErrorMessage :error="calculateTask.last?.error" v-if="calculateTask.isError" />
<div v-if="calculateTask.last?.value">
<FingerprintComponent :fingerprint="calculateTask.last.value" />
<hr />
<BinaryEdge :fingerprint="calculateTask.last.value" />
<Censys :fingerprint="calculateTask.last.value" />
<Fofa :fingerprint="calculateTask.last.value" />
<Onyphe :fingerprint="calculateTask.last.value" />
<SecurityTrails :fingerprint="calculateTask.last.value" />
<Shodan :fingerprint="calculateTask.last.value" />
<SpyOnWeb :fingerprint="calculateTask.last.value" />
<Urlscan :fingerprint="calculateTask.last.value" />
<VirusTotal :fingerprint="calculateTask.last.value" />
<ZoomEye :fingerprint="calculateTask.last.value" />
</div>
</template>
58 changes: 27 additions & 31 deletions frontend/src/components/ErrorMessage.vue
Original file line number Diff line number Diff line change
@@ -1,39 +1,35 @@
<template>
<article class="message is-warning">
<div class="message-header">
<p>Warning</p>
</div>
<div class="message-body">
<div v-if="error?.detail">
<VueJsonPretty :data="anyError"></VueJsonPretty>
</div>
<div v-else>Something went wrong...</div>
</div>
</article>
</template>

<script lang="ts">
<script setup lang="ts">
import "vue-json-pretty/lib/styles.css"
import { computed, defineComponent, type PropType } from "vue"
import { AxiosError } from "axios"
import { computed } from "vue"
import VueJsonPretty from "vue-json-pretty"
import type { ErrorData } from "@/types"
import type { ErrorDataType } from "@/types"
const props = defineProps({
error: {
type: AxiosError,
required: true
}
})
export default defineComponent({
name: "ErrorMessage",
props: {
error: {
type: Object as PropType<ErrorData>,
required: false
}
},
components: { VueJsonPretty },
setup(props) {
const anyError = computed(() => {
return props.error as any
})
return { anyError }
const data = computed<ErrorDataType | undefined>(() => {
if (props.error.response) {
return props.error.response?.data as ErrorDataType
}
return undefined
})
</script>

<template>
<div class="notification is-danger is-light">
<div v-if="data?.detail">
<div v-if="typeof data.detail === 'string'">
{{ data.detail }}
</div>
<VueJsonPretty :data="data.detail" v-else />
</div>
<p v-else>{{ error }}</p>
</div>
</template>
15 changes: 0 additions & 15 deletions frontend/src/components/Loading.vue

This file was deleted.

9 changes: 9 additions & 0 deletions frontend/src/components/LoadingItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<div class="has-text-centered">
<div class="fa-3x">
<font-awesome-icon icon="spinner" spin></font-awesome-icon>
</div>
</div>
</template>

<script setup lang="ts"></script>
Loading

0 comments on commit 4b48936

Please sign in to comment.