Fixes some auth problems

layouts/default.vue

@@ -21,6 +21,7 @@ import { useEvents } from "~/src/shared/lib/use-events";
 import { useSettings } from "~/src/shared/lib/use-settings";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
 import { version } from "../package.json";
+import {useProfileStore} from "~/stores/profile";
 import { useSettingsStore } from "~/stores/settings";
 
 export default defineComponent({
@@ -32,14 +33,14 @@ export default defineComponent({
     SfdumpWrap(window.document);
 
     const settingsStore = useSettingsStore();
+    const profileStore = useProfileStore();
     const { themeType, isFixedHeader } = storeToRefs(settingsStore);
 
     const {
-      api: { getVersion, getProfile },
+      api: { getVersion },
     } = useSettings();
 
     const apiVersion = await getVersion();
-    const profile = await getProfile();
 
     const { events } = useEvents();
 
@@ -57,7 +58,7 @@ export default defineComponent({
         ? `v${apiVersion}`
         : `@${apiVersion}`,
       clientVersion,
-      profile,
+      profile: profileStore.profile,
     };
   },
 });

middleware/auth.global.ts

@@ -1,22 +1,30 @@
 import { useNuxtApp, navigateTo } from "#app"
+import { useSettings } from "~/src/shared/lib/use-settings";
+import { useProfileStore } from "~/stores/profile"
 
-export default defineNuxtRouteMiddleware(async (to, from) => {
+export default defineNuxtRouteMiddleware(async (to) => {
   const app = useNuxtApp()
-  const {localStorage} = window;
 
   if (!app.$appSettings.auth.enabled) {
-    return;
+    return
   }
 
-  // todo: move token to a store
-  if (to.name !== 'login' && !app.$authToken.token) {
-    return navigateTo('/login');
+  const store = useProfileStore()
+  store.fetchToken()
+
+  if (store.isAuthenticated) {
+    const {api: {getProfile}} = useSettings();
+    const profile = await getProfile();
+    store.setProfile(profile)
+    return
+  }
+
+  if (to.name !== 'login' && !store.isAuthenticated) {
+    return navigateTo('/login')
   }
 
   if (to.name === 'login' && to?.query?.token) {
-    localStorage?.setItem('token', to.query.token);
-    // todo: use store
-    app.$authToken.token = to.query.token;
-    return navigateTo('/');
+    store.setToken(to.query.token)
+    return navigateTo('/')
   }
 })

pages/login.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { useNuxtApp, navigateTo } from "#app"
 import { REST_API_URL } from "~/src/shared/lib/io";
 import { IconSvg } from "~/src/shared/ui";
+import {useProfileStore} from "~/stores/profile";
 
 definePageMeta({
   layout: 'blank'
 })
 
 const app = useNuxtApp()
+const store = useProfileStore()
+
+if (store.isAuthenticated) {
+  await navigateTo('/')
+}
 
 const redirect = async () => {
   await navigateTo(`${REST_API_URL}/${app.$appSettings.auth.login_url}`, {
@@ -29,7 +35,8 @@
             Continue to SSO
           </button>
         </div>
-        <div class="login-form-right-block"
+        <div
+class="login-form-right-block"
              style="background: url('/bg.jpg'); background-size: cover; background-position: center center;">
         </div>
       </div>

pages/settings.vue

@@ -79,6 +79,8 @@
     const { changeTheme, changeNavbar } = settingsStore;
     const { themeType, isFixedHeader } = storeToRefs(settingsStore);
 
+    console.log(settingsStore)
+
     return {
       themeType,
       isFixedHeader,

pages/smtp/[id].vue

@@ -28,7 +28,7 @@ import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disa
 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 { EventId, ServerEvent } from "~/src/shared/types";
 import { SmtpPage } from "~/src/screens/smtp";
@@ -63,7 +63,7 @@ export default defineComponent({
       serverEvent: event,
       pending,
       eventId,
-      html: `<iframe src="${REST_API_URL}/api/smtp/${eventId}/html"/>`,
+      html: `<iframe srcdoc="${htmlEncode(event.value.payload.html)}"/>`,
       clearEvent: () => events.removeById(eventId),
     };
   },

plugins/auth.ts

@@ -1,7 +1,5 @@
 import { useSettings } from "~/src/shared/lib/use-settings";
 
-const {localStorage} = window;
-
 // todo: use store for token
 export default defineNuxtPlugin(async () => {
   const {
@@ -25,18 +23,16 @@ export default defineNuxtPlugin(async () => {
   if (!settings.auth.enabled) {
     return {
       provide: {
-        authToken: {token: null},
-        appSettings: settings
+        appSettings: settings,
+        authToken: {token: null}
       }
     }
   }
 
-  const token: string | null = localStorage?.getItem('token')
-
   return {
     provide: {
-      authToken: {token},
-      appSettings: settings
+      appSettings: settings,
+      authToken: {token: null}
     }
   }
 })

src/entities/ray/mocks/index.ts

@@ -1,3 +1,5 @@
+import rayBooleanFalseMock from './ray-boolean-false.json';
+import rayBooleanTrueMock from './ray-boolean-true.json';
 import rayCallerMock from './ray-caller.json';
 import rayCarbonMock from './ray-carbon.json';
 import rayColorMock from './ray-color.json';
@@ -18,8 +20,6 @@ import raySizeMock from './ray-size.json';
 import rayTableMock from './ray-table.json';
 import rayTextMock from './ray-text.json';
 import rayTraceMock from './ray-trace.json';
-import rayBooleanTrueMock from './ray-boolean-true.json';
-import rayBooleanFalseMock from './ray-boolean-false.json';
 
 export {
   rayCallerMock,

src/entities/smtp/types.ts

@@ -4,6 +4,7 @@ export interface SMTPUser {
   name: string,
   email: string,
 }
+
 export interface SMTP {
   id: string,
   from: SMTPUser[],

src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
 import type { ComponentProps } from "vue-component-type-helpers";
+import {htmlEncode} from "~/src/shared/lib/helpers";
 import { HTMLCode } from '~/src/shared/mocks'
 import SmtpPagePreview from './smtp-page-preview.vue';
 
@@ -13,7 +14,11 @@ export default {
         args,
       };
     },
-    template: `<SmtpPagePreview v-bind="args">${HTMLCode}</SmtpPagePreview>`,
+    template: `<div style="height: 100vh">
+      <SmtpPagePreview v-bind="args">
+        <iframe srcdoc="<html>${htmlEncode(HTMLCode)}</html>"></iframe>
+      </SmtpPagePreview>
+    </div>`,
   })
 } as Meta<typeof SmtpPagePreview>;
 

src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue

@@ -83,7 +83,7 @@ const currentDevice = ref(props.device);
 }
 
 .smtp-page-preview__device {
-  @apply flex-1 flex flex-col items-center bg-gray-50 dark:bg-gray-900;
+  @apply flex flex-col items-center bg-gray-50 dark:bg-gray-900;
 
   html.dark & {
     @apply text-gray-800;

src/screens/smtp/ui/smtp-page/smtp-page.vue

@@ -2,7 +2,7 @@
 import moment from "moment";
 import { computed, ref } from "vue";
 import { Tab, Tabs } from "vue3-tabs-component";
-import { SMTP } from "~/src/entities/smtp/types";
+import type { SMTP } from "~/src/entities/smtp/types";
 import type { NormalizedEvent, Attachment } from "~/src/shared/types";
 import {
   TableBase,

src/shared/lib/helpers/htmlEncode.ts

@@ -0,0 +1,3 @@
+export function htmlEncode(input: string): string {
+  return input.replace(/./gm, (s: string) => (s.match(/[a-z0-9\s]+/i)) ? s : `&#${  s.charCodeAt(0)  };`);
+}

src/shared/lib/helpers/index.ts

@@ -0,0 +1 @@
+export * from './htmlEncode';

src/shared/lib/io/use-events-requests.ts

@@ -1,6 +1,6 @@
+import { useNuxtApp } from "#app"
 import type { EventId, EventType, ServerEvent } from '../../types';
 import { REST_API_URL } from "./constants";
-import { useNuxtApp } from "#app"
 
 type TUseEventsRequests = () => {
   getAll: () => Promise<ServerEvent<unknown>[]>,
@@ -16,7 +16,7 @@
 
 export const useEventsRequests: TUseEventsRequests = () => {
   const app = useNuxtApp()
-  const token: string | null = app.$authToken.token
+  const {token} = app.$authToken
   const headers = {"X-Auth-Token": token}
   const getEventRestUrl = (param?: string): string => `${REST_API_URL}/api/event${param ? `/${param}` : 's'}`
 

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -4,12 +4,11 @@ import { useCentrifuge, useEventsRequests } from "../io";
 import { useConnectionStore } from "~/stores/connections";
 import { useEventStore } from "~/stores/events";
 
-const CHECK_CONNECTION_INTERVAL: number = 10000
-let isEventsEmitted: boolean = false
+let isEventsEmitted = false
 
 export const useApiTransport = () => {
   const nuxtApp = useNuxtApp()
-  const token = nuxtApp.$authToken.token
+  const {token} = nuxtApp.$authToken
   const {centrifuge} = useCentrifuge()
   const eventsStore = useEventStore()
   const connectionStore = useConnectionStore()

src/shared/types/index.ts

@@ -1,4 +1,5 @@
 export * from "./events";
+export * from "./profile";
 export * from "./generics";
 export * from "./local-storage";
 export * from "./partials";

src/shared/types/profile.ts

@@ -0,0 +1,5 @@
+export interface Profile {
+  username: string,
+  email: string,
+  avatar: string,
+}