Merge #27 - Fix & Upgrades - File Pages , Strings, PE:Header

2022 - Fix & Upgrades - File Pages , Strings, PE:Header

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",

src/common/components/Progress.vue

@@ -1,22 +1,43 @@
 <template>
-  <div class="progress grid grid-cols-11 gap-2">
+  <div
+    class="
+      progress
+      flex flex-col
+      md:flex-row
+      items-center
+      justify-between
+      gap-2
+    "
+  >
     <div
-      class="flex md:flex-row flex-col items-center col-span-6"
+      class="flex md:flex-row flex-col items-center gap-4"
       :class="`type${getRateColor}`"
     >
       <div class="circle">
-        <strong class="rate">{{ rate.value }}</strong>
-        <span>/{{ rate.count }}</span>
-        <svg :height="radius * 2" :width="radius * 2" class="circle-rate">
-          <circle
-            :class="`type${getRateColor}`"
-            :stroke-dasharray="circumference + ' ' + circumference"
-            :style="{ strokeDashoffset: strokeDashoffset }"
-            :stroke-width="stroke"
-            fill="rgba(25,25,25,0.05)"
-            :r="normalizedRadius"
-            :cx="radius"
-            :cy="radius"
+        <div
+          class="z-50 flex flex-col items-center justify-center content-center"
+        >
+          <strong class="rate">{{ rate.value }}</strong>
+          <span>/{{ rate.count }}</span>
+        </div>
+        <svg
+          viewBox="0 0 36 36"
+          :class="'absolute'"
+          :height="radius * 2"
+          :width="radius * 2"
+        >
+          <path
+            class="circle-bg"
+            d="M18 2.0845
+          a 15.9155 15.9155 0 0 1 0 31.831
+          a 15.9155 15.9155 0 0 1 0 -31.831"
+          />
+          <path
+            class="circle"
+            stroke-dasharray="30, 100"
+            d="M18 2.0845
+          a 15.9155 15.9155 0 0 1 0 31.831
+          a 15.9155 15.9155 0 0 1 0 -31.831"
           />
         </svg>
       </div>
@@ -41,7 +62,7 @@
       </div>
     </div>
 
-    <div class="submission grid col-span-5">
+    <div class="submission flex items-center md:items-start flex-col gap-4">
       <strong class="uppercase text-gray"> First Submission </strong>
       <time class="font-bold">{{ getDateSubmission }}</time>
     </div>
@@ -76,20 +97,13 @@ export default {
     },
   },
   data(props) {
-    const normalizedRadius = this.radius - this.stroke * 2;
-    const circumference = normalizedRadius * 2 * Math.PI;
     const progress = (props.rate.value / props.rate.count) * 100;
 
     return {
-      normalizedRadius,
-      circumference,
       progress,
     };
   },
   computed: {
-    strokeDashoffset() {
-      return this.circumference - (this.progress / 100) * this.circumference;
-    },
     getDateSubmission() {
       let d = new Date(1970, 0, 1);
       d.setSeconds(this.submission);
@@ -113,8 +127,6 @@ export default {
 
 <style lang="scss" scoped>
 .progress {
-  @apply flex flex-wrap content-center items-center;
-
   .message {
     @apply flex  text-black font-bold;
   }
@@ -136,33 +148,53 @@ export default {
     }
   }
 
-  .btn-circle {
-    @apply p-0 m-0 h-20 w-20 rounded-full;
-  }
-
-  .buttons {
-    @apply flex items-end content-end justify-end;
-
-    .btn {
-      @apply mr-6;
-    }
-  }
-
   .submission {
     @apply px-5;
-    border-left: $border-color 1.5px solid;
+    @apply md:border-l md:border-gray-light;
   }
 
   .typedanger {
-    @apply stroke-danger text-danger;
+    &,
+    .circle {
+      @apply stroke-danger;
+    }
+    @apply text-danger;
   }
 
   .typewarning {
-    @apply stroke-warning text-warning;
+    &,
+    .circle {
+      @apply stroke-warning;
+    }
+    @apply text-warning;
   }
 
   .typesuccess {
-    @apply stroke-success text-success;
+    &,
+    .circle {
+      @apply stroke-success;
+    }
+    @apply text-success;
+  }
+}
+
+svg .circle-bg {
+  @apply stroke-gray-2xlight;
+
+  fill: none;
+  stroke-width: 3.8;
+}
+
+svg .circle {
+  fill: none;
+  stroke-width: 2.8;
+  stroke-linecap: round;
+  animation: progress 1s ease-out forwards;
+}
+
+@keyframes progress {
+  0% {
+    stroke-dasharray: 0 100;
   }
 }
 </style>

src/common/components/content/PageContent.vue → src/common/components/content/FileContent.vue

@@ -46,7 +46,7 @@
               </g>
             </svg>
 
-            Rescan File
+            Refile File
           </btn>
           <btn v-if="false" class="disabled">
             <svg
@@ -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 { scanGetters, fileActions } from "@/state/helpers";
+import { fileGetters, fileMethods, fileActions } from "@/state/helpers";
 
 export default {
   components: { Btn, BtnLike },
@@ -120,10 +140,14 @@ export default {
     downloadLink: null,
   }),
   computed: {
-    ...scanGetters,
+    ...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() {

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() {

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>
@@ -101,7 +104,7 @@
           :class="isPageActive('dynamic-analysis') ? 'active' : ''"
           class="disabled cursor-not-allowed"
         >
-          <a class="bg-gray-2xlight">
+          <a class="bg-gray-2xlight w-full">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               class="h-6 w-6 ml-2"
@@ -123,14 +126,14 @@
               />
             </svg>
 
-            Dynamic Analysis
+            <span class="text-base">Dynamic Analysis</span>
             <span
               class="
                 rounded-full
                 bg-red-500
                 px-2
-                py-1
-                text-xs
+                py-0
+                text-[0.5em]
                 font-bold
                 text-white
               "
@@ -174,7 +177,7 @@
 </template>
 
 <script>
-import { scanGetters } from "@/state/helpers";
+import { fileGetters } from "@/state/helpers";
 
 import Logo from "@/common/components/elements/Logo.vue";
 import Btn from "@/common/components/elements/button/Btn.vue";
@@ -189,7 +192,10 @@ export default {
     },
   }),
   computed: {
-    ...scanGetters,
+    ...fileGetters,
+    isPE() {
+      return this.file && `${this.file.file_format}`.toLowerCase() === "pe";
+    },
   },
   methods: {
     getPageLink(to) {
@@ -237,7 +243,7 @@ export default {
 
       li {
         a {
-          @apply text-base text-gray flex items-center gap-4 py-4 my-1 p-4 w-9/10 rounded-r-md;
+          @apply text-base text-gray flex items-center gap-4 py-4 my-1 p-2 w-11/12 rounded-r-md;
         }
         &.active > a,
         > a:hover {
@@ -247,7 +253,7 @@ export default {
     }
 
     .sub-items {
-      @apply pl-8 ml-6 mr-1;
+      @apply pl-8 ml-4 mr-1;
 
       max-height: 300px;
       opacity: 1;