Merge pull request #126 from buggregator/hotfix/auth

butschster · web-flow · commit 5966bdeef876 · 2024-04-11T23:41:32.000+04:00
Fixes some auth problems
diff --git a/layouts/default.vue b/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,
     };
   },
 });
diff --git a/middleware/auth.global.ts b/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('/')
   }
 })
diff --git a/pages/login.vue b/pages/login.vue
@@ -2,12 +2,18 @@
 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 @@ const redirect = async () => {
             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>
diff --git a/pages/settings.vue b/pages/settings.vue
@@ -79,6 +79,8 @@ export default defineComponent({
     const { changeTheme, changeNavbar } = settingsStore;
     const { themeType, isFixedHeader } = storeToRefs(settingsStore);
 
+    console.log(settingsStore)
+
     return {
       themeType,
       isFixedHeader,
diff --git a/pages/smtp/[id].vue b/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),
     };
   },
diff --git a/plugins/auth.ts b/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}
     }
   }
 })
diff --git a/src/entities/ray/mocks/index.ts b/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,
diff --git a/src/entities/smtp/types.ts b/src/entities/smtp/types.ts
@@ -4,6 +4,7 @@ export interface SMTPUser {
   name: string,
   email: string,
 }
+
 export interface SMTP {
   id: string,
   from: SMTPUser[],
diff --git a/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.stories.ts b/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>;
 
diff --git a/src/screens/smtp/ui/smtp-page-preview/smtp-page-preview.vue b/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;
diff --git a/src/screens/smtp/ui/smtp-page/smtp-page.vue b/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,
diff --git a/src/shared/lib/helpers/htmlEncode.ts b/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)  };`);
+}
diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
@@ -0,0 +1 @@
+export * from './htmlEncode';
diff --git a/src/shared/lib/io/use-events-requests.ts b/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 @@ type TUseEventsRequests = () => {
 
 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'}`
 
diff --git a/src/shared/lib/use-api-transport/use-api-transport.ts b/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()
diff --git a/src/shared/types/index.ts b/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";
diff --git a/src/shared/types/profile.ts b/src/shared/types/profile.ts
@@ -0,0 +1,5 @@
+export interface Profile {
+  username: string,
+  email: string,
+  avatar: string,
+}
diff --git a/src/shared/ui/icon-svg/icon-svg-originals/logout.svg b/src/shared/ui/icon-svg/icon-svg-originals/logout.svg
@@ -1,3 +1 @@
-<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22">
-  <path d="M6 0a6 6 0 0 0-6 6v10a6 6 0 0 0 6 6h12a6 6 0 0 0 6-6v-.5a1 1 0 1 0-2 0v.5a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v.5a1 1 0 1 0 2 0V6a6 6 0 0 0-6-6H6Zm8.4 4.9a1 1 0 0 0-1.5.8v3c0 .6-.5 1-1 1H6.2a1.2 1.2 0 0 0 0 2.5H12c.5 0 1 .5 1 1v3a1 1 0 0 0 1.5 1l9.1-5.3a1 1 0 0 0 0-1.8L14.4 5Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" version="1.0"><path style="stroke-linejoin:round;stroke:#fff;stroke-linecap:round;stroke-width:5;fill:none" transform="translate(50)" d="M-12.5 11.7v7.8a16 16 0 0 1-7.6 30.2 16 16 0 0 1-7.4-30.2v-7.7a23.3 23.3 0 0 0-15.4 25.4A23.3 23.3 0 0 0-20.2 57a23.3 23.3 0 0 0 7.8-45.1h-.1z"/><path style="stroke-linejoin:round;stroke:#fff;stroke-linecap:round;stroke-width:12.5;fill:none" transform="translate(50)" d="M-20 6.9v24.5"/><path style="fill-rule:evenodd;fill:#000" transform="translate(1.4 1.5) scale(.95176)" d="M37.9 10.7V19a16.8 16.8 0 0 1-8 31.7A16.8 16.8 0 0 1 22 18.8v-8A24.4 24.4 0 0 0 6 37.5a24.4 24.4 0 0 0 23.9 20.7A24.4 24.4 0 0 0 38 10.8h-.1z"/><path style="stroke-linejoin:round;stroke:#000;stroke-linecap:round;stroke-width:7.9794;fill:none" transform="translate(1.8 3.8) scale(.93992)" d="M30 3.3v26"/></svg>
diff --git a/src/shared/ui/icon-svg/icon-svg.vue b/src/shared/ui/icon-svg/icon-svg.vue
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.stories.ts b/src/widgets/ui/layout-sidebar/layout-sidebar.stories.ts
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
diff --git a/stores/events.ts b/stores/events.ts
diff --git a/stores/profile.ts b/stores/profile.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,5 @@`
`1`	`1`	`import { useSettings } from "~/src/shared/lib/use-settings";`
`2`	`2`
`3`		`-const {localStorage} = window;`
`4`		`-`
`5`	`3`	`// todo: use store for token`
`6`	`4`	`export default defineNuxtPlugin(async () => {`
`7`	`5`	`const {`
`@@ -25,18 +23,16 @@ export default defineNuxtPlugin(async () => {`
`25`	`23`	`if (!settings.auth.enabled) {`
`26`	`24`	`return {`
`27`	`25`	`provide: {`
`28`		`- authToken: {token: null},`
`29`		`- appSettings: settings`
	`26`	`+ appSettings: settings,`
	`27`	`+ authToken: {token: null}`
`30`	`28`	`}`
`31`	`29`	`}`
`32`	`30`	`}`
`33`	`31`
`34`		`- const token: string \| null = localStorage?.getItem('token')`
`35`		`-`
`36`	`32`	`return {`
`37`	`33`	`provide: {`
`38`		`- authToken: {token},`
`39`		`- appSettings: settings`
	`34`	`+ appSettings: settings,`
	`35`	`+ authToken: {token: null}`
`40`	`36`	`}`
`41`	`37`	`}`
`42`	`38`	`})`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ export interface SMTPUser {`
`4`	`4`	`name: string,`
`5`	`5`	`email: string,`
`6`	`6`	`}`
	`7`	`+`
`7`	`8`	`export interface SMTP {`
`8`	`9`	`id: string,`
`9`	`10`	`from: SMTPUser[],`
Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ const currentDevice = ref(props.device);`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`.smtp-page-preview__device {`
`86`		`- @apply flex-1 flex flex-col items-center bg-gray-50 dark:bg-gray-900;`
	`86`	`+ @apply flex flex-col items-center bg-gray-50 dark:bg-gray-900;`
`87`	`87`
`88`	`88`	`html.dark & {`
`89`	`89`	`@apply text-gray-800;`