From 90079c6c6ce44791e05357f5368b16943f2efdf8 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Mon, 13 May 2024 16:27:46 -0700
Subject: [PATCH] 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.
---
 .../src/components/base/BaseAuthButton.vue    |  6 +--
 app/frontend/src/router.js                    | 20 ----------
 .../components/base/BaseAuthButton.spec.js    | 38 +------------------
 .../tests/unit/views/form/Create.spec.js      | 16 ++++++++
 .../tests/unit/views/form/Design.spec.js      |  5 ++-
 5 files changed, 22 insertions(+), 63 deletions(-)

diff --git a/app/frontend/src/components/base/BaseAuthButton.vue b/app/frontend/src/components/base/BaseAuthButton.vue
index 8a559a6e9..e07fb38d1 100755
--- a/app/frontend/src/components/base/BaseAuthButton.vue
+++ b/app/frontend/src/components/base/BaseAuthButton.vue
@@ -1,7 +1,5 @@
 <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';
 
@@ -9,8 +7,6 @@ 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
index dbdbfbd87..be3bab6ac 100644
--- 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
index dfa8134d3..91b5451d5 100644
--- 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
index eeeb27018..baf063a73 100644
--- 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
index 6f516e6b6..60a8ee1fa 100644
--- 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>',
+          },
         },
       },
     });