Merge pull request #150 from buggregator/issue/#149-smtp-improves

Issue/#149 smtp improves

Author: butschster

pages/smtp/[id].vue

@@ -5,7 +5,7 @@ import { useRoute, useRouter, useFetch, useHead, useNuxtApp } from "#app"; // es
 import { PageHeader } from "~/src/widgets/ui";
 import { useSmtp } from "~/src/entities/smtp";
 import type { SMTP } from "~/src/entities/smtp/types";
-import { REST_API_URL } from "~/src/shared/lib/io";
+import { htmlEncode } from "~/src/shared/lib/helpers";
 import { useEvents } from "~/src/shared/lib/use-events";
 import type { Attachment, EventId, ServerEvent } from "~/src/shared/types";
 
@@ -35,7 +35,7 @@ const event = computed(() =>
 const attachments = computed(() => serverAttachments.value);
 
 const html = computed(
-  () => `<iframe src="${REST_API_URL}/api/smtp/${eventId}/html"/>`
+  () => `<iframe srcdoc="${htmlEncode(serverEvent.value.payload.html)}"/>`
 );
 
 const onDelete = () => {

src/widgets/ui/layout-sidebar/layout-sidebar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
-import { useNuxtApp, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { useConnectionStore } from "~/src/shared/stores/connections";
 import { useProfileStore } from "~/src/shared/stores/profile";
 import type { Profile } from "~/src/shared/types";
@@ -55,6 +55,8 @@ const logout = () => {
   const router = useRouter();
   router.push("/login");
 };
+
+const { path } = useRoute();
 </script>
 
 <template>
@@ -72,22 +74,38 @@ const logout = () => {
         <IconSvg class="layout-sidebar__link-icon" name="events" />
       </NuxtLink>
 
-      <NuxtLink to="/sentry" title="Sentry logs" class="layout-sidebar__link">
+      <NuxtLink
+        to="/sentry"
+        title="Sentry logs"
+        class="layout-sidebar__link"
+        :class="{ 'router-link-active': path.includes('/sentry') }"
+      >
         <IconSvg class="layout-sidebar__link-icon" name="sentry" />
       </NuxtLink>
 
-      <NuxtLink to="/profiler" title="Profiler" class="layout-sidebar__link">
+      <NuxtLink
+        to="/profiler"
+        title="Profiler"
+        class="layout-sidebar__link"
+        :class="{ 'router-link-active': path.includes('/profiler') }"
+      >
         <IconSvg class="layout-sidebar__link-icon" name="profiler" />
       </NuxtLink>
 
-      <NuxtLink to="/smtp" title="SMTP mails" class="layout-sidebar__link">
+      <NuxtLink
+        to="/smtp"
+        title="SMTP mails"
+        class="layout-sidebar__link"
+        :class="{ 'router-link-active': path.includes('/smtp') }"
+      >
         <IconSvg class="layout-sidebar__link-icon" name="smtp" />
       </NuxtLink>
 
       <NuxtLink
         to="/http-dumps"
         title="Http dumps"
         class="layout-sidebar__link"
+        :class="{ 'router-link-active': path.includes('/http-dumps') }"
       >
         <IconSvg class="layout-sidebar__link-icon" name="http-dumps" />
       </NuxtLink>
@@ -96,6 +114,7 @@ const logout = () => {
         to="/inspector"
         title="Inspector logs"
         class="layout-sidebar__link"
+        :class="{ 'router-link-active': path.includes('/inspector') }"
       >
         <IconSvg class="layout-sidebar__link-icon" name="inspector" />
       </NuxtLink>