fix: fixed magic link issues in dev environment

business-registry-dashboard/app/middleware/01.auth.global.ts

@@ -3,7 +3,7 @@ export default defineNuxtRouteMiddleware((to) => {
     const { $keycloak } = useNuxtApp()
     const localePath = useLocalePath()
     if (to.meta.order !== 0 && !$keycloak.authenticated) {
-      return navigateTo(localePath('/'))
+      window.location.href = localePath('/')
     }
   }
 })

business-registry-dashboard/app/middleware/02.magic-link.global.ts

@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const localePath = useLocalePath()
+
+  // Check if path contains affiliationInvitation and extract token
+  if (to.path.includes('affiliationInvitation/acceptToken/')) {
+    const token = to.path.split('acceptToken/')[1]
+    if (token) {
+      sessionStorage.setItem('affiliationToken', token)
+    }
+    window.location.href = localePath('/')
+  }
+})

business-registry-dashboard/app/pages/index.vue

@@ -1,7 +1,78 @@
 <script setup lang="ts">
+const { t } = useI18n()
+const affStore = useAffiliationsStore()
+const brdModal = useBrdModals()
+const toast = useToast()
+
 definePageMeta({
   order: 0
 })
+
+// Token parsing
+const parseToken = (encodedToken: string): AffiliationToken => {
+  try {
+    const tokenObject = encodedToken.split('.')[0]
+    const decoded = atob(tokenObject as string)
+    return JSON.parse(decoded)
+  } catch (error) {
+    console.error('Failed to parse token:', error)
+    throw new Error('Invalid token format')
+  }
+}
+
+onMounted(async () => {
+  // Check for affiliation token from session storage
+  if (sessionStorage.getItem('affiliationToken')) {
+    const affiliationToken = sessionStorage.getItem('affiliationToken') as string
+    // Remove the token from session storage after it's used
+    sessionStorage.removeItem('affiliationToken')
+    try {
+      const parsedToken = parseToken(affiliationToken)
+      // Parse the URL and try to add the affiliation
+      parseUrlAndAddAffiliation(parsedToken, affiliationToken)
+      // Load affiliations to update the table
+      await affStore.loadAffiliations()
+    } catch (e) {
+      console.error('Error accepting affiliation invitation:', e)
+    }
+  }
+})
+
+// Function to parse the URL and extract the parameters, used for magic link email
+const parseUrlAndAddAffiliation = async (token: any, base64Token: string) => {
+  const { businessIdentifier: identifier, id: invitationId } = token
+
+  try {
+    // 1. Accept invitation
+    const response = await affiliationInvitationService.acceptInvitation(invitationId, base64Token)
+
+    // 2. Adding magic link success
+    if (response.status === AffiliationInvitationStatus.Accepted) {
+      toast.add({ title: t('modal.manageBusiness.success.toast', { identifier }) }) // add success toast
+    }
+  } catch (error: any) {
+    console.error(error)
+    // 3. Unauthorized
+    if (error.response?.status === 401) {
+      brdModal.openMagicLinkModal(t('error.magicLinkUnauthorized.title'), t('error.magicLinkUnauthorized.description'))
+      return
+    }
+    // 4. Expired
+    if (error.response?.status === 400 &&
+      error.response?._data.code === MagicLinkInvitationStatus.EXPIRED_AFFILIATION_INVITATION) {
+      brdModal.openMagicLinkModal(t('error.magicLinkExpired.title'), t('error.magicLinkExpired.description', { identifier }))
+      return
+    }
+    // 5. Already Added
+    if (error.response?.status === 400 &&
+      error.response?._data.code === MagicLinkInvitationStatus.ACTIONED_AFFILIATION_INVITATION) {
+      brdModal.openMagicLinkModal(t('error.magicLinkAlreadyAdded.title'), t('error.magicLinkAlreadyAdded.description', { identifier }))
+      return
+    }
+    // 6. Generic Error
+    brdModal.openBusinessAddError()
+  }
+}
 </script>
 <template>
   <NuxtLayout name="dashboard">

business-registry-dashboard/package.json

@@ -2,7 +2,7 @@
   "name": "business-registry-dashboard",
   "private": true,
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

business-registry-dashboard/tests/unit/pages/index.test.ts

@@ -1,10 +1,17 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { BusinessLookup, TableAffiliatedEntity } from '#components'
 import Dashboard from '~/layouts/dashboard.vue'
 import { enI18n } from '~~/tests/mocks/i18n'
 import Index from '~/pages/index.vue'
 
+// Sample parsed token data structure for testing
+const mockParsedToken = {
+  fromOrgId: '12345',
+  businessIdentifier: 'BC12345',
+  id: '87654'
+}
+
 describe('Index Page', () => {
   function mountPage () {
     return mountSuspended(Index, {
@@ -29,4 +36,30 @@ describe('Index Page', () => {
     expect(wrapper.findComponent(BusinessLookup).exists()).toBe(true)
     expect(wrapper.findComponent(TableAffiliatedEntity).exists()).toBe(true)
   })
+
+  describe('Token Parsing', () => {
+    it('successfully parses a valid token', async () => {
+      const wrapper = await mountPage()
+      const component = wrapper.vm as any
+
+      // Mock parseToken to return expected data structure
+      vi.spyOn(component, 'parseToken').mockReturnValue(mockParsedToken)
+
+      const token = component.parseToken('dummy-token')
+      expect(token).toEqual(mockParsedToken)
+    })
+
+    it('throws error for invalid token', async () => {
+      const wrapper = await mountPage()
+      const component = wrapper.vm as any
+
+      // Mock parseToken to simulate parsing failure
+      vi.spyOn(component, 'parseToken').mockImplementation(() => {
+        throw new Error('Invalid token format')
+      })
+
+      expect(() => component.parseToken('invalid-token'))
+        .toThrow('Invalid token format')
+    })
+  })
 })