⚒ #23 Views & styles fixs

saferwall · Jan 19, 2022 · ee7a634 · ee7a634
1 parent 1a2080a
commit ee7a634
Show file tree

Hide file tree

Showing 17 changed files with 124 additions and 9,661 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@tiptap/starter-kit": "^2.0.0-beta.112",
     "@tiptap/vue-3": "^2.0.0-beta.64",
     "axios": "^0.21.1",
+    "buffer-hexdump": "^1.0.0",
     "core-js": "^3.6.5",
     "dateformat": "^4.5.1",
     "feather-icons": "^4.28.0",

diff --git a/src/common/components/Progress.vue b/src/common/components/Progress.vue
@@ -13,7 +13,7 @@
             :stroke-dasharray="circumference + ' ' + circumference"
             :style="{ strokeDashoffset: strokeDashoffset }"
             :stroke-width="stroke"
-            fill="rgba(25,25,25,0.05)"
+            fill="rgba(25,25,25,0.0)"
             :r="normalizedRadius"
             :cx="radius"
             :cy="radius"

diff --git a/...common/components/content/PageContent.vue → ...common/components/content/FileContent.vue b/...common/components/content/PageContent.vue → ...common/components/content/FileContent.vue
@@ -71,15 +71,15 @@
           <btn :link="downloadLink" :target="'_blank'">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="19.004"
-              height="17.708"
-              viewBox="0 0 19.004 17.708"
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
             >
               <path
                 d="M14.81,9.36,9.252,14.529,3.694,9.36l1.022-.951,3.813,3.546V0H9.975V11.955l3.813-3.546Zm3.694,6.5H0v1.344H18.5Zm0,0"
                 transform="translate(0.25 0.25)"
-                fill="#0d9677"
-                stroke="#0d9677"
+                fill="currentColor"
+                stroke="currentColor"
                 stroke-width="0.5"
               />
             </svg>
@@ -89,6 +89,26 @@
           <btn-like @click="toggleLike" :liked="dliked">
             {{ dliked ? "Unlike" : "Like" }}
           </btn-like>
+          <a
+            :href="'https://twitter.com/intent/tweet?text=' + getShareTweet"
+            target="_blank"
+          >
+            <btn>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                fill="currentColor"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
+                />
+              </svg>
+              Share
+            </btn>
+          </a>
         </div>
       </div>
     </div>
@@ -103,7 +123,7 @@ import APP_CONFIGS from "@/common/config";
 
 import Btn from "@/common/components/elements/button/Btn.vue";
 import BtnLike from "@/common/components/elements/button/BtnLike.vue";
-import { fileGetters, fileActions } from "@/state/helpers";
+import { fileGetters, fileMethods, fileActions } from "@/state/helpers";
 
 export default {
   components: { Btn, BtnLike },
@@ -121,9 +141,13 @@ export default {
   }),
   computed: {
     ...fileGetters,
+    getShareTweet() {
+      return encodeURI(window.location.href);
+    },
   },
   methods: {
     ...fileActions,
+    ...fileMethods,
     goBack() {
       this.$router.go(-1);
     },
@@ -132,17 +156,25 @@ export default {
 
       if (this.dliked) {
         return this.doUnLike({ id: this.hash }).then(() => {
-          this.dliked = false;
+          this.updateLike(false);
         });
       }
       this.doLike({ id: this.hash }).then(() => {
-        this.dliked = true;
+        this.updateLike(true);
       });
     },
     async refreshContent() {
       this.file = await this.getFile;
+
       this.hash = this.file.sha256;
       this.downloadLink = `${APP_CONFIGS.apiURL}files/${this.hash}/download/`;
+
+      this.dliked = this.file.liked;
+    },
+    updateLike(liked) {
+      this.dliked = liked == true;
+      console.log("update like : ", liked);
+      this.updateRefreshStatus(true);
     },
   },
   async beforeMount() {

diff --git a/src/common/components/elements/ActivityBlock.vue b/src/common/components/elements/ActivityBlock.vue
@@ -3,7 +3,7 @@
     <div class="header border text-center z-10">
       <router-link class="profile-link" :to="`/user/${author.username}`">
         <avatar :username="author.username" />
-        <router-link :to="getFileSummaryRoute" class="info mt-3">
+        <router-link :to="getFileRoute" class="info mt-3">
           <h3 class="text-xl font-bold">{{ author.username }}</h3>
           <p class="text-gray">Member since {{ getJoinedAgo }}</p>
         </router-link>
@@ -23,7 +23,7 @@
       </div>
       <template v-else-if="isFollow">
         <router-link class="profile-link target" :to="`/user/${target}`">
-          <router-link :to="getFileSummaryRoute" class="info mt-3">
+          <router-link :to="getFileRoute" class="info mt-3">
             <h3 class="text-xl font-bold">{{ target }}</h3>
             <p class="text-gray">Member since {{ getJoinedAgo }}</p>
           </router-link>
@@ -37,7 +37,7 @@
       v-if="!isFollow"
     >
       <router-link
-        :to="getFileSummaryRoute"
+        :to="getFileRoute"
         class="info"
         :class="(!hasTags && 'col-span-4') || 'col-span-3'"
       >
@@ -166,7 +166,7 @@ export default {
     getClassification() {
       return getClass(this.file.class);
     },
-    getFileSummaryRoute() {
+    getFileRoute() {
       return `/file/${this.file.hash}/summary`;
     },
     isFollow() {

diff --git a/src/common/components/partials/Sidebar.vue b/src/common/components/partials/Sidebar.vue
@@ -75,7 +75,10 @@
             class="sub-items"
             :class="isMenuOpen('static-analysis') ? '' : 'hide'"
           >
-            <li :class="isPageActive('static-analysis/pe') ? 'active' : ''">
+            <li
+              v-if="isPE"
+              :class="isPageActive('static-analysis/pe') ? 'active' : ''"
+            >
               <router-link :to="getPageLink('static-analysis/pe')">
                 PE
               </router-link>
@@ -190,6 +193,9 @@ export default {
   }),
   computed: {
     ...fileGetters,
+    isPE() {
+      return this.file && `${this.file.file_format}`.toLowerCase() === "pe";
+    },
   },
   methods: {
     getPageLink(to) {

diff --git a/src/layouts/SidebarLayout.vue b/src/layouts/SidebarLayout.vue
@@ -31,7 +31,7 @@ import BaseLayout from "@/layouts/BaseLayout.vue";
 
 import Navbar from "@/common/components/partials/Navbar.vue";
 import Sidebar from "@/common/components/partials/Sidebar.vue";
-import Content from "@/common/components/content/PageContent.vue";
+import Content from "@/common/components/content/FileContent.vue";
 import Footer from "@/common/components/partials/Footer.vue";
 
 export default {

diff --git a/src/middlewares/file.js b/src/middlewares/file.js
@@ -20,5 +20,9 @@ export default async ({ store, to, next }) => {
         return next();
     }
 
+    if (await store.getters['file/getRefrehStatus']) {
+        await store.dispatch('file/fetchFile', fileHash);
+    }
+
     return next();
 }
diff --git a/src/modules/file/components/Tiptap.vue b/src/modules/file/components/Tiptap.vue
@@ -4,7 +4,6 @@
 
 <script>
 import { Editor, EditorContent } from "@tiptap/vue-3";
-import StarterKit from "@tiptap/starter-kit";
 
 export default {
   components: {

diff --git a/src/modules/file/pages/Summary.vue b/src/modules/file/pages/Summary.vue
@@ -219,7 +219,7 @@ export default {
   },
   created() {},
   async beforeMount() {
-    this.file = await this.getFileSummary;
+    this.file = await this.getFile;
   },
 };
 </script>
diff --git a/src/modules/file/pages/static-analysis/Antivirus.vue b/src/modules/file/pages/static-analysis/Antivirus.vue
@@ -96,7 +96,7 @@ export default {
   },
   created() {},
   async beforeMount() {
-    this.file = await this.getFileSummary;
+    this.file = await this.getFile;
   },
 };
 </script>

diff --git a/src/modules/file/pages/static-analysis/PE.vue b/src/modules/file/pages/static-analysis/PE.vue
@@ -10,14 +10,7 @@
         >
           <!-- Start DosHeader -->
           <card-tab :active="'DosHeader' == currentTab">
-            <table-cols
-              :bordered="true"
-              :columns="[
-                { key: 'member', title: 'Member' },
-                { key: 'value', title: 'Value' },
-              ]"
-              :lines="get_DosHeader"
-            />
+            <dos-header :items="getItems"></dos-header>
           </card-tab>
           <!-- End DosHeader -->
 
@@ -211,6 +204,7 @@ import Card from "@/common/components/elements/Card.vue";
 import CardTab from "@/common/components/elements/CardTab.vue";
 import CardTabs from "@/common/components/elements/CardTabs.vue";
 import TableCols from "@/common/components/tables/TableCols.vue";
+import DosHeader from "./PE/DosHeader.vue";
 
 import { capitalize } from "@vue/shared";
 import { fileGetters } from "@/state/helpers";
@@ -222,7 +216,7 @@ import {
 } from "@/common/utils/translate";
 
 export default {
-  components: { Card, CardTab, CardTabs, TableCols },
+  components: { Card, CardTab, CardTabs, TableCols, DosHeader },
   data() {
     return {
       hexa: true,
@@ -285,23 +279,15 @@ export default {
   },
   computed: {
     ...fileGetters,
+    getItems() {
+      return this.getFilePE[this.currentTab];
+    },
     getFirstTree() {
       return Object.keys(this.getFilePE).map((item) => ({
         name: item,
         title: capitalize(item),
       }));
     },
-    get_DosHeader() {
-      let items = this.getFilePE[this.currentTab];
-      return Object.keys(items).map((key) => {
-        let val = translateValue(key, items[key]);
-
-        return {
-          member: translateKey(key),
-          value: this.hexa && !isNaN(val) ? decToHexString(val) : val,
-        };
-      });
-    },
     get_NtHeader() {
       let items = this.getFilePE[this.currentTab];
 
@@ -468,7 +454,7 @@ export default {
     },
   },
   async beforeMount() {
-    this.file = await this.getFileSummary;
+    this.file = await this.getFile;
 
     this.treeList = this.getFirstTree.filter(
       (key) => !["Is32", "Is64"].includes(key.name)

diff --git a/src/modules/file/pages/static-analysis/PE/DosHeader.vue b/src/modules/file/pages/static-analysis/PE/DosHeader.vue
@@ -0,0 +1,37 @@
+<template>
+  <table-cols
+    :bordered="true"
+    :columns="[
+      { key: 'member', title: 'Member' },
+      { key: 'value', title: 'Value' },
+    ]"
+    :lines="get_DosHeader"
+  />
+</template>
+<script>
+import TableCols from "@/common/components/tables/TableCols.vue";
+import {
+  translateKey,
+  translateValue,
+  decToHexString,
+} from "@/common/utils/translate";
+
+export default {
+  components: [TableCols],
+  props: {
+    items: {},
+  },
+  computed: {
+    get_DosHeader() {
+      return Object.keys(this.items).map((key) => {
+        let val = translateValue(key, this.items[key]);
+
+        return {
+          member: translateKey(key),
+          value: this.hexa && !isNaN(val) ? decToHexString(val) : val,
+        };
+      });
+    },
+  },
+};
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
@@ -30,14 +30,6 @@ const fileModuleRoutes = [
         component: () => import('@/modules/file/pages/Summary.vue'),
         meta: {
             title: 'File Summary',
-            middleware: [
-                async ({ store, to, next }) => {
-                    let file = await store.dispatch('file/fetchFileSummary', to.params.id);
-                    to.meta.page.title = file.properties.SHA256;
-
-                    next();
-                }
-            ]
         }
     },
     {

diff --git a/src/state/helpers.js b/src/state/helpers.js
@@ -39,14 +39,15 @@ const followActions = mapActions('actions', ['doFollow', 'doUnFollow']);
  * file
  */
 const fileMethods = mapActions('file', [
-    'fetchFileSummary',
+    'fetchFile',
     'fetchFileComments',
     'fetchFileAvs',
     'fetchFilePE',
+    'updateRefreshStatus'
 ]);
 const fileGetters = mapGetters('file', [
     'getFile',
-    'getFileSummary',
+    'getFile',
     'getFileComments',
     'getFileAvs',
     'getFilePE',

diff --git a/src/state/modules/auth.js b/src/state/modules/auth.js
@@ -108,7 +108,11 @@ export const actions = {
   },
 
   logOut({ commit }) {
-    commit('LOGOUT');
+    return axios
+      .delete('/auth/logout/')
+      .then(() => {
+        commit('LOGOUT');
+      });
   },
 
   // Validates the current session's token and refreshes it