✂ #34 Copy Button , fix auth

src/common/components/content/FileContent.vue

@@ -117,7 +117,7 @@
 </template>
 
 <script>
-import APP_CONFIGS from "@/common/config";
+import Config from "@/common/config";
 
 import Btn from "@/common/components/elements/button/Btn.vue";
 import BtnLike from "@/common/components/elements/button/BtnLike.vue";
@@ -180,7 +180,9 @@ export default {
       this.file = await this.getFile;
       this.hash = this.file.sha256;
       this.dliked = this.file.liked;
-      this.downloadLink = `${APP_CONFIGS.apiURL}files/${this.hash}/download/`;
+      this.downloadLink = `${Config.value("apiURL")}files/${
+        this.hash
+      }/download/`;
     },
     updateLike(liked) {
       this.dliked = liked == true;

src/common/components/elements/button/BtnCopy.vue

@@ -1,35 +1,96 @@
 <template>
-  <span @click="copyContent($event)" class="text-red-500">
+  <div
+    @click="copyContent($event)"
+    @mouseenter="showCopyIcon($event)"
+    @mouseleave="removeCopyIcon($event)"
+  >
     <slot />
-  </span>
+  </div>
 </template>
 
 
 <script>
+const svgCopyIcon = `
+<span data-copy-btn><svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/></svg><label>Copy</label></span>`;
 export default {
   methods: {
     copyContent(event) {
-      this.selectContent(event);
-      this.updateClipboard(event.target.innerText);
+      // clone node and remove copy button
+      const nodeContent = event.target.parentNode.cloneNode(true);
+      nodeContent.querySelector("div[data-copy-element]").remove();
+
+      this.selectContent(event.target.parentNode);
+      this.updateClipboard(nodeContent.textContent, () => {
+        const copySvg = this.getCopyButton(event);
+        if (!copySvg) return;
+
+        copySvg.querySelector("label").innerText = "Copied !";
+      });
+    },
+    showCopyIcon(event) {
+      event.target.setAttribute("data-copy-parent", 1);
+
+      const copySvg = this.getCopyButton(event);
+      if (copySvg) return;
+
+      const copyElement = document.createElement("div");
+      copyElement.setAttribute("data-copy-element", 1);
+      copyElement.innerHTML = svgCopyIcon;
+
+      event.target.prepend(copyElement);
+    },
+    removeCopyIcon(event) {
+      const copySvg = this.getCopyButton(event);
+      if (!copySvg) return;
+
+      copySvg.remove();
+    },
+    getCopyButton(event) {
+      return event.target.parentNode.querySelector("div[data-copy-element]");
     },
-    selectContent(event) {
+    selectContent(node) {
       var r = document.createRange();
-      r.selectNodeContents(event.target);
+      r.selectNodeContents(node);
       var sel = window.getSelection();
       sel.removeAllRanges();
       sel.addRange(r);
     },
-    updateClipboard(content) {
-      navigator.clipboard.writeText(content).then(
-        function () {
-          /* clipboard successfully set */
-        },
-        function () {
-          /* clipboard write failed */
-          alert("Copy action is not granted");
-        }
-      );
+    updateClipboard(content, done = () => {}) {
+      navigator.clipboard &&
+        navigator.clipboard.writeText(content).then(
+          () => {
+            done();
+          },
+          function () {
+            /* clipboard write failed */
+            console.error("Copy action is not granted");
+          }
+        );
     },
   },
 };
-</script>
+</script>
+
+
+<style lang="scss" >
+*[data-copy-parent] {
+  @apply relative;
+
+  label {
+    @apply text-xs;
+  }
+}
+div[data-copy-element] {
+  @apply bg-green-500 bg-opacity-10;
+  @apply absolute flex items-center justify-center;
+  @apply w-full h-full;
+
+  @apply select-none;
+
+  span[data-copy-btn] {
+    @apply text-white;
+    @apply flex items-center justify-center gap-x-1;
+    @apply p-1 px-2 bg-primary bg-opacity-90 rounded;
+  }
+}
+</style>

src/common/components/partials/Sidebar.vue

@@ -140,6 +140,59 @@
               >SOON</span
             >
           </a>
+
+          <ul
+            class="sub-items"
+            :class="isMenuOpen('dynamic-analysis') ? '' : 'hide'"
+          >
+            <li
+              :class="isPageActive('dynamic-analysis/overview') ? 'active' : ''"
+            >
+              <router-link :to="getPageLink('dynamic-analysis/overview')">
+                Overview
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/api-calls') ? 'active' : ''
+              "
+            >
+              <router-link :to="getPageLink('dynamic-analysis/api-calls')">
+                API Calls
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/dropped-files') ? 'active' : ''
+              "
+            >
+              <router-link :to="getPageLink('dynamic-analysis/dropped-files')">
+                Dropped Files
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/memory-buffers') ? 'active' : ''
+              "
+            >
+              <router-link :to="getPageLink('dynamic-analysis/memory-buffers')">
+                Memory Buffers
+              </router-link>
+            </li>
+            <li
+              :class="
+                isPageActive('dynamic-analysis/network-analysis')
+                  ? 'active'
+                  : ''
+              "
+            >
+              <router-link
+                :to="getPageLink('dynamic-analysis/network-analysis')"
+              >
+                Network Analysis
+              </router-link>
+            </li>
+          </ul>
         </li>
 
         <li :class="isPageActive('comments') ? 'active' : ''">
@@ -189,6 +242,7 @@ export default {
     hash: null,
     menuOpen: {
       "static-analysis": true,
+      "dynamic-analysis": true,
     },
   }),
   computed: {
@@ -275,7 +329,7 @@ export default {
         a {
           @apply text-gray-medium;
           @apply border-transparent;
-          @apply py-2 pl-6 border-l-4;
+          @apply py-1 pl-6 border-l-4;
         }
       }
     }

src/main.js

@@ -30,7 +30,7 @@ import titleMixin from '@/common/mixins/titleMixin'
  */
 import setupInterceptors from '@/services/setupInterceptors';
 
-setupInterceptors(router);
+setupInterceptors({ router, store });
 
 /**
  * Vue Application 

src/services/setupInterceptors.js

@@ -1,6 +1,6 @@
 import axios from '@/services/axios'
 
-const setup = (router) => {
+const setup = ({ router }) => {
     axios.interceptors.response.use(
         (res) => {
             return res;

src/state/modules/auth.js

@@ -10,7 +10,7 @@ export const state = {
 }
 
 export const mutations = {
-  SET_CURRENT_SESSION(state, session) {
+  SET_SESSION(state, session) {
     if (session === null) {
       state.session = null;
       setDefaultAuthHeaders(state);
@@ -34,7 +34,7 @@ export const mutations = {
     saveState('auth.session', sessionState)
   },
   LOGOUT(state) {
-    mutations.SET_CURRENT_SESSION(state, null);
+    mutations.SET_SESSION(state, null);
 
     router.go('/auth/login');
   }
@@ -90,7 +90,7 @@ export const actions = {
       .post('/auth/login/', { username, password })
       .then(async (response) => {
         const session = response.data;
-        commit('SET_CURRENT_SESSION', session)
+        commit('SET_SESSION', session)
 
         return await dispatch('user/fetchCurrentUser', username, { root: true });
       })