basic ui

web/client/package.json

@@ -21,9 +21,9 @@
     "vue": "2.6.12",
     "vue-class-component": "7.2.6",
     "vue-json-viewer": "^2.2.22",
+    "vue-phone-number-input": "^1.12.13",
     "vue-property-decorator": "9.1.2",
     "vue-router": "3.5.1",
-    "vue-tel-input-vuetify": "^1.5.3",
     "vuex": "3.6.2"
   },
   "devDependencies": {

web/client/src/config/index.ts

@@ -2,5 +2,5 @@ export default {
   appName: "PhoneInfoga",
   appDescription:
     "Advanced information gathering & OSINT tool for phone numbers",
-  apiUrl: "http://localhost:3000/api", // /api
+  apiUrl: "/api",
 };

web/client/src/router/index.ts

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Scan from "../views/Scan.vue";
+import Number from "../views/Number.vue";
 import NotFound from "../views/NotFound.vue";
 
 Vue.use(VueRouter);
@@ -11,6 +12,11 @@ const routes = [
     name: "Scan",
     component: Scan,
   },
+  {
+    path: "/numbers/:number",
+    name: "Number",
+    component: Number,
+  },
   {
     path: "*",
     name: "NotFound",

web/client/src/shims-vue.d.ts

@@ -3,3 +3,4 @@ declare module "*.vue" {
   export default Vue;
 }
 declare module "vue-json-viewer" {}
+declare module "vue-phone-number-input" {}

web/client/src/views/Number.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <b-container v-if="isLookup" class="border p-4 mb-3">
+      <h3 class="text-center">Local</h3>
+      <b-container>
+        <b-row v-for="(value, name) in localData" :key="name" align-v="center">
+          <h5 class="text-capitalize m-0 mr-4">{{ name }}:</h5>
+          <p class="m-0">{{ value }}</p>
+        </b-row>
+      </b-container>
+    </b-container>
+
+    <b-container v-if="isLookup" class="border p-4">
+      <h3 class="text-center">Scanners</h3>
+      <Scanner name="GoogleSearch" scanId="googlesearch" />
+      <Scanner name="Numverify Scan" scanId="numverify" />
+      <Scanner name="OVH Telecom scan" scanId="ovh" />
+    </b-container>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { mapMutations, mapState } from "vuex";
+import { formatNumber, isValid } from "../utils";
+import Scanner from "../components/Scanner.vue";
+import axios, { AxiosResponse } from "axios";
+import config from "@/config";
+
+interface Data {
+  loading: boolean;
+  isLookup: boolean;
+  localData: {
+    raw_local: string;
+    local: string;
+    e164: string;
+    international: string;
+    country_code: string;
+    country: string;
+  };
+}
+
+export type ScanResponse<T> = AxiosResponse<{
+  success: boolean;
+  result: T;
+  error: string;
+}>;
+
+export default Vue.extend({
+  components: { Scanner },
+  computed: {
+    ...mapState(["number"]),
+    ...mapMutations(["pushError"]),
+  },
+  data(): Data {
+    return {
+      loading: false,
+      isLookup: false,
+      localData: {
+        raw_local: "",
+        local: "",
+        e164: "",
+        international: "",
+        country_code: "",
+        country: "",
+      },
+    };
+  },
+  mounted() {
+    this.runScans();
+  },
+  methods: {
+    async runScans(): Promise<void> {
+      if (!isValid(this.$route.params.number)) {
+        this.$store.commit("pushError", { message: "Number is not valid." });
+        return;
+      }
+
+      this.loading = true;
+
+      this.$store.commit("setNumber", formatNumber(this.$route.params.number));
+
+      try {
+        const res = await axios.get(
+          `${config.apiUrl}/numbers/${this.$store.state.number}/scan/local`,
+          {
+            validateStatus: () => true,
+          }
+        );
+
+        this.localData = res.data.result;
+      } catch (error) {
+        this.$store.commit("pushError", { message: error });
+      }
+
+      this.isLookup = true;
+      this.loading = false;
+    },
+  },
+});
+</script>

web/client/src/views/Scan.vue

@@ -7,35 +7,40 @@
         label-for="input-1"
         description="Only accepts E164 and International formats as input."
       >
-        <b-form-input
-          id="input-number"
-          v-model="inputNumber"
-          type="text"
-          required
-          placeholder="e.g: 33678132393"
-          :disabled="loading"
-        ></b-form-input>
+        <b-input-group>
+          <!-- <b-form-input
+            id="input-number"
+            v-model="inputNumber"
+            type="text"
+            required
+            placeholder="e.g: 33678132393"
+            :disabled="loading"
+          ></b-form-input> -->
+          <VuePhoneNumberInput
+            v-model="inputNumberVal"
+            :disabled="loading"
+            @update="updateInputNumber"
+          />
+          <b-button
+            size="sm"
+            variant="dark"
+            v-on:click="runScans"
+            :disabled="loading"
+          >
+            <b-icon-play-fill></b-icon-play-fill>
+            Lookup
+          </b-button>
+
+          <b-button
+            variant="light"
+            size="sm"
+            v-on:click="clearData"
+            v-show="number"
+            :disabled="loading"
+            >Reset
+          </b-button>
+        </b-input-group>
       </b-form-group>
-
-      <b-button
-        size="sm"
-        variant="dark"
-        v-on:click="runScans"
-        :disabled="loading"
-        class="m-1"
-      >
-        <b-icon-play-fill></b-icon-play-fill>
-        Lookup
-      </b-button>
-
-      <b-button
-        variant="light"
-        size="sm"
-        v-on:click="clearData"
-        v-show="number"
-        :disabled="loading"
-        >Reset
-      </b-button>
     </b-form>
 
     <hr />
@@ -68,6 +73,7 @@
 import Vue from "vue";
 import { mapMutations, mapState } from "vuex";
 import { formatNumber, isValid } from "../utils";
+import VuePhoneNumberInput from "vue-phone-number-input";
 import Scanner from "../components/Scanner.vue";
 // import LocalScan from "../components/LocalScan.vue";
 // import NumverifyScan from "../components/NumverifyScan.vue";
@@ -80,6 +86,7 @@ interface Data {
   loading: boolean;
   isLookup: boolean;
   inputNumber: string;
+  inputNumberVal: string;
   scanEvent: Vue;
   localData: {
     raw_local: string;
@@ -98,7 +105,7 @@ export type ScanResponse<T> = AxiosResponse<{
 }>;
 
 export default Vue.extend({
-  components: { Scanner },
+  components: { Scanner, VuePhoneNumberInput },
   computed: {
     ...mapState(["number"]),
     ...mapMutations(["pushError"]),
@@ -108,6 +115,7 @@ export default Vue.extend({
       loading: false,
       isLookup: false,
       inputNumber: "",
+      inputNumberVal: "",
       scanEvent: new Vue(),
       localData: {
         raw_local: "",
@@ -159,6 +167,12 @@ export default Vue.extend({
     onSubmit(evt: Event) {
       evt.preventDefault();
     },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateInputNumber(val: any) {
+      this.inputNumber = val.e164;
+    },
   },
 });
 </script>
+
+<style src="vue-phone-number-input/dist/vue-phone-number-input.css"></style>