feat(frontend): authorization frontend

docker-compose.yml

@@ -33,7 +33,7 @@ services:
       - external-net
       - internal-net
     ports:
-      - 3000:3000
+      - 3001:3000
     environment:
       - NODE_ENV=production
 
@@ -50,7 +50,7 @@ services:
       - external-net
       - internal-net
     ports:
-      - 3001:3000
+      - 3000:3000
     environment:
       - NODE_ENV=production
 

frontend/.env.dist

@@ -1,20 +1,17 @@
 # AUTH
-# PUBLIC_ENV__AUTH__AUTHORITY and PUBLIC_ENV__AUTH__AUTHORITY_SIGNUP_URI
-# are not default values since the default is to hide the signin/signup buttons
 PUBLIC_ENV__AUTH__AUTHORITY="http://localhost:9000/application/o/dreammallearth/"
 PUBLIC_ENV__AUTH__AUTHORITY_SIGNUP_URI="http://localhost:9000/if/flow/dreammallearth-enrollment/"
 PUBLIC_ENV__AUTH__AUTHORITY_SIGNOUT_URI="http://localhost:9000/if/flow/dreammallearth-invalidation-flow/"
 PUBLIC_ENV__AUTH__CLIENT_ID="G3g0sjCjph1NAyGeeu5Te5ltx1I7WZ0DGB8i6vOI"
-PUBLIC_ENV__AUTH__REDIRECT_URI="http://localhost:3001/auth"
-PUBLIC_ENV__AUTH__SILENT_REDIRECT_URI="http://localhost:3001/silent-refresh"
+PUBLIC_ENV__AUTH__REDIRECT_URI="http://localhost:3000/auth"
+PUBLIC_ENV__AUTH__SILENT_REDIRECT_URI="http://localhost:3000/silent-refresh"
 PUBLIC_ENV__AUTH__RESPONSE_TYPE="code"
 PUBLIC_ENV__AUTH__SCOPE="openid profile posts"
+PUBLIC_ENV__AUTH__UNAUTHORIZED_REDIRECT_URI="http://localhost:3001/"
 
 # Endpoints
 PUBLIC_ENV__ENDPOINTS__GRAPHQL_URI=http://localhost:4000/
 
 # META
 PUBLIC_ENV__META__BASE_URL="http://localhost:3000"
-PUBLIC_ENV__META__DEFAULT_AUTHOR="IT Team 4 Change"
-PUBLIC_ENV__META__DEFAULT_DESCRIPTION="IT4C Frontend Boilerplate"
-PUBLIC_ENV__META__DEFAULT_TITLE="IT4C"
+PUBLIC_ENV__META__DEFAULT_AUTHOR="DreamMall Verlag GbR"

frontend/renderer/utils.ts

@@ -1,19 +1,20 @@
 import { PageContext } from 'vike/types'
 
-import { META } from '#src/env'
+import i18n from '#plugins/i18n'
 
 function getTitle(pageContext: PageContext) {
   // The value exported by /pages/**/+title.js is available at pageContext.config.title
   const val = pageContext.config.title
   if (typeof val === 'string') return val
   if (typeof val === 'function') return String(val(pageContext))
-  return META.DEFAULT_TITLE
+  return i18n.global.t('meta.defaultTitle')
 }
+
 function getDescription(pageContext: PageContext) {
   const val = pageContext.config.description
   if (typeof val === 'string') return val
   if (typeof val === 'function') return val(pageContext)
-  return META.DEFAULT_DESCRIPTION
+  return i18n.global.t('meta.defaultDescription')
 }
 
 export { getTitle, getDescription }

frontend/scripts/tests/plugin.pinia.ts

@@ -1,4 +1,4 @@
 import { createTestingPinia } from '@pinia/testing'
 import { config } from '@vue/test-utils'
 
-config.global.plugins.push(createTestingPinia())
+config.global.plugins.push(createTestingPinia({ stubActions: false }))

frontend/src/components/__snapshots__/PageShell.test.ts.snap

@@ -27,228 +27,7 @@ exports[`PageShell > renders 1`] = `
           <div
             class="v-col"
           >
-            <div
-              class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat ma-2 pa-1"
-              style="background-color: #333; color: #fff; caret-color: #fff; width: 48px; height: 48px;"
-            >
-              <div
-                aria-label=""
-                class="v-responsive v-img v-img--booting"
-              >
-                <div
-                  class="v-responsive__sizer"
-                />
-
-
-                <transition-stub
-                  appear="true"
-                  css="true"
-                  name="fade-transition"
-                  persisted="false"
-                >
-                  <img
-                    alt=""
-                    class="v-img__img v-img__img--cover"
-                    src="/src/assets/it4c-logo2-clean-bg_alpha-128x128.png"
-                    style="display: none;"
-                  />
-                </transition-stub>
-                <transition-stub
-                  appear="false"
-                  css="true"
-                  name="fade-transition"
-                  persisted="false"
-                >
-                  <!---->
-                </transition-stub>
-                <!---->
-                <!---->
-                <!---->
-
-
-                <!---->
-              </div>
-
-              <!---->
-              <span
-                class="v-avatar__underlay"
-              />
-
-            </div>
-          </div>
-          <div
-            class="v-col d-flex align-center justify-center grow"
-          >
-            <a
-              class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
-              href="/"
-            >
-
-              <span
-                class="v-btn__overlay"
-              />
-              <span
-                class="v-btn__underlay"
-              />
-
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
-              >
-
-
-
-                $t('menu.home')
-
-
-
-              </span>
-              <!---->
-              <!---->
-            </a>
-            <a
-              class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
-              href="/app"
-            >
-
-              <span
-                class="v-btn__overlay"
-              />
-              <span
-                class="v-btn__underlay"
-              />
-
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
-              >
-
-
-
-                $t('menu.app')
-
-
-
-              </span>
-              <!---->
-              <!---->
-            </a>
-            <a
-              class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
-              href="/about"
-            >
-
-              <span
-                class="v-btn__overlay"
-              />
-              <span
-                class="v-btn__underlay"
-              />
-
-              <!---->
-              <span
-                class="v-btn__content"
-                data-no-activator=""
-              >
-
-
-
-                $t('menu.about')
-
-
-
-              </span>
-              <!---->
-              <!---->
-            </a>
-          </div>
-          <div
-            class="v-col"
-          >
-            <div
-              class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-locale--is-ltr v-input--dirty v-switch d-flex justify-end mr-5"
-            >
-              <!---->
-              <div
-                class="v-input__control"
-              >
-
-                <div
-                  class="v-selection-control v-selection-control--dirty v-selection-control--density-default"
-                >
-                  <div
-                    class="v-selection-control__wrapper text-success"
-                  >
-
-                    <div
-                      class="v-switch__track bg-success"
-                    >
-                      <!---->
-                      <!---->
-                    </div>
-
-                    <div
-                      class="v-selection-control__input"
-                    >
-
-
-                      <input
-                        aria-describedby="switch-4-messages"
-                        aria-disabled="false"
-                        id="switch-4"
-                        type="checkbox"
-                        value="true"
-                      />
-                      <div
-                        class="v-switch__thumb bg-success"
-                      >
-                        <transition-stub
-                          appear="false"
-                          css="true"
-                          name="scale-transition"
-                          persisted="false"
-                        >
-                          <!---->
-                        </transition-stub>
-                      </div>
-
-
-                    </div>
-                  </div>
-                  <label
-                    class="v-label v-label--clickable"
-                    for="switch-4"
-                  >
-                    <!---->
-
-                    $t('language.german')
-
-                  </label>
-                </div>
-
-              </div>
-              <!---->
-              <div
-                class="v-input__details"
-              >
-                <transition-stub
-                  appear="false"
-                  aria-live="polite"
-                  class="v-messages"
-                  css="true"
-                  id="switch-4-messages"
-                  name="slide-y-transition"
-                  persisted="false"
-                  role="alert"
-                  tag="div"
-                >
-                  <!---->
-                </transition-stub>
-                <!---->
-              </div>
-            </div>
+            <!--v-if-->
           </div>
         </div>
 

frontend/src/components/menu/TopMenu.test.ts

@@ -1,18 +1,84 @@
 import { mount } from '@vue/test-utils'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { h } from 'vue'
 import { VApp } from 'vuetify/components'
 
+import { useAuthStore } from '#stores/authStore'
+import { authService } from '#tests/mock.authService'
+
 import TopMenu from './TopMenu.vue'
 
 describe('TopMenu', () => {
-  const wrapper = mount(VApp, {
-    slots: {
-      default: h(TopMenu),
-    },
+  const Wrapper = () => {
+    return mount(VApp, {
+      slots: {
+        default: h(TopMenu),
+      },
+    })
+  }
+
+  let wrapper: ReturnType<typeof Wrapper>
+
+  beforeEach(() => {
+    wrapper = Wrapper()
   })
 
   it('renders', () => {
     expect(wrapper.element).toMatchSnapshot()
   })
+
+  describe('signout button', () => {
+    const authStore = useAuthStore()
+
+    const authServiceSpy = vi.spyOn(authService, 'signOut')
+    const storeSpy = vi.spyOn(authStore, 'clear')
+
+    beforeEach(() => {
+      vi.clearAllMocks()
+      authStore.save({
+        access_token: 'access_token',
+        profile: {
+          aud: 'aud',
+          sub: 'sub',
+          exp: 1,
+          iat: 1,
+          iss: 'iss',
+        },
+        token_type: 'token_type',
+        session_state: null,
+        state: null,
+        expires_in: 0,
+        expired: false,
+        scopes: ['email'],
+        toStorageString: () => 'toStorageString',
+      })
+    })
+
+    describe('without error', () => {
+      beforeEach(async () => {
+        await wrapper.find('button').trigger('click')
+      })
+
+      it('calls auth service sign out', () => {
+        expect(authServiceSpy).toBeCalled()
+      })
+
+      it('clears the store', () => {
+        expect(storeSpy).toBeCalled()
+      })
+    })
+
+    describe('with error', () => {
+      const consoleSpy = vi.spyOn(console, 'log')
+
+      beforeEach(async () => {
+        authServiceSpy.mockRejectedValue('Error!')
+        await wrapper.find('button').trigger('click')
+      })
+
+      it('logs the error', () => {
+        expect(consoleSpy).toBeCalledWith('auth error', 'Error!')
+      })
+    })
+  })
 })