Login button visible (#1350)

* Update BaseAuthButton.vue wrong conditional on login button * Fixed login button showing login button was showing even though the user was authenticated. removed it and removed from the router all instances of hasLogin because it gets set in the router but never actually used anywhere except in BaseAuthButton. BaseAuthButton can already check if the user is authenticated by the store though.
bcgov · May 13, 2024 · 90079c6 · 90079c6
1 parent d65b92f
commit 90079c6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 63 deletions.
diff --git a/app/frontend/src/components/base/BaseAuthButton.vue b/app/frontend/src/components/base/BaseAuthButton.vue
@@ -1,16 +1,12 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 
 const authStore = useAuthStore();
 
 const { authenticated, ready } = storeToRefs(authStore);
 const { lang } = storeToRefs(useFormStore());
-
-const hasLogin = computed(() => useRoute()?.meta?.hasLogin);
 </script>
 
 <template>
@@ -25,7 +21,7 @@ const hasLogin = computed(() => useRoute()?.meta?.hasLogin);
       <span :lang="lang">{{ $t('trans.baseAuthButton.logout') }}</span>
     </v-btn>
     <v-btn
-      v-if="hasLogin"
+      v-if="!authenticated"
       id="loginButton"
       color="white"
       variant="outlined"

diff --git a/app/frontend/src/router.js b/app/frontend/src/router.js
@@ -40,9 +40,6 @@ export default function getRouter(basePath = '/') {
         path: '/',
         name: 'About',
         component: () => import('~/views/About.vue'),
-        meta: {
-          hasLogin: true,
-        },
       },
       {
         path: '/admin',
@@ -68,7 +65,6 @@ export default function getRouter(basePath = '/') {
         ],
         meta: {
           requiresAuth: true,
-          hasLogin: true,
         },
       },
       {
@@ -82,7 +78,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Form Designer',
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -93,7 +88,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Publish Form',
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: (route) => {
               return {
@@ -112,7 +106,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Form Designer',
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: (route) => {
               return {
@@ -135,7 +128,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Submissions Export',
               requiresAuth: true,
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -146,7 +138,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Manage Form',
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -158,7 +149,6 @@ export default function getRouter(basePath = '/') {
               breadcrumbTitle: 'Preview Form',
               formSubmitMode: true,
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -169,7 +159,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Submissions',
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -206,7 +195,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Email Management',
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -217,7 +205,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'Team Management',
               requiresAuth: 'primary',
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -228,7 +215,6 @@ export default function getRouter(basePath = '/') {
             meta: {
               breadcrumbTitle: 'View Submission',
               requiresAuth: true,
-              hasLogin: true,
               formSubmitMode: true,
             },
             props: createProps,
@@ -336,7 +322,6 @@ export default function getRouter(basePath = '/') {
         component: () => import('~/components/bcgov/BCGovAlertBanner.vue'),
         meta: {
           formSubmitMode: true,
-          hasLogin: true,
         },
         props: createProps,
       },
@@ -346,7 +331,6 @@ export default function getRouter(basePath = '/') {
         component: () => import('~/views/Error.vue'),
         meta: {
           formSubmitMode: true,
-          hasLogin: true,
         },
         props: createProps,
       },
@@ -360,7 +344,6 @@ export default function getRouter(basePath = '/') {
             component: () => import('~/views/file/Download.vue'),
             meta: {
               requiresAuth: true,
-              hasLogin: true,
             },
             props: createProps,
           },
@@ -399,9 +382,6 @@ export default function getRouter(basePath = '/') {
         path: '/:pathMatch(.*)*',
         name: 'NotFound',
         component: () => import('~/views/NotFound.vue'),
-        meta: {
-          hasLogin: true,
-        },
       },
     ],
     scrollBehavior(_to, _from, savedPosition) {

diff --git a/app/frontend/tests/unit/components/base/BaseAuthButton.spec.js b/app/frontend/tests/unit/components/base/BaseAuthButton.spec.js
@@ -11,10 +11,6 @@ import { useAuthStore } from '~/store/auth';
 import { useIdpStore } from '~/store/identityProviders';
 import { useAppStore } from '~/store/app';
 
-vi.mock('vue-router', () => ({
-  useRoute: vi.fn(),
-}));
-
 describe('BaseAuthButton.vue', () => {
   const pinia = createPinia();
   setActivePinia(pinia);
@@ -37,29 +33,7 @@ describe('BaseAuthButton.vue', () => {
     };
   });
 
-  it('renders nothing when not authenticated and does not hasLogin', () => {
-    useRoute.mockImplementationOnce(() => ({
-      meta: {
-        hasLogin: false,
-      },
-    }));
-    authStore.authenticated = false;
-    authStore.ready = true;
-    const wrapper = mount(BaseAuthButton, {
-      global: {
-        plugins: [pinia],
-      },
-    });
-
-    expect(wrapper.text()).toEqual('');
-  });
-
-  it('renders login when not authenticated and hasLogin', () => {
-    useRoute.mockImplementationOnce(() => ({
-      meta: {
-        hasLogin: true,
-      },
-    }));
+  it('renders login button when not authenticated', () => {
     authStore.authenticated = false;
     authStore.ready = true;
     const wrapper = mount(BaseAuthButton, {
@@ -96,11 +70,6 @@ describe('BaseAuthButton.vue', () => {
   });
 
   it('login button redirects to login url', async () => {
-    useRoute.mockImplementationOnce(() => ({
-      meta: {
-        hasLogin: true,
-      },
-    }));
     const loginSpy = vi.spyOn(authStore, 'login');
     loginSpy.mockImplementationOnce(() => {});
     authStore.authenticated = false;
@@ -124,11 +93,6 @@ describe('BaseAuthButton.vue', () => {
   });
 
   it('logout button redirects to logout url', async () => {
-    useRoute.mockImplementationOnce(() => ({
-      meta: {
-        hasLogin: true,
-      },
-    }));
     const logoutSpy = vi.spyOn(authStore, 'logout');
     logoutSpy.mockImplementationOnce(() => {});
     authStore.authenticated = true;

diff --git a/app/frontend/tests/unit/views/form/Create.spec.js b/app/frontend/tests/unit/views/form/Create.spec.js
@@ -51,6 +51,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
@@ -120,6 +124,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
@@ -179,6 +187,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
@@ -243,6 +255,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',

diff --git a/app/frontend/tests/unit/views/form/Design.spec.js b/app/frontend/tests/unit/views/form/Design.spec.js
@@ -5,7 +5,6 @@ import { createTestingPinia } from '@pinia/testing';
 import { mount } from '@vue/test-utils';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ref } from 'vue';
 
 import { useFormStore } from '~/store/form';
 import Design from '~/views/form/Design.vue';
@@ -44,6 +43,10 @@ describe('Design.vue', () => {
             },
             template: '<div class="form-designer-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
         },
       },
     });