Firebase auth

.env.example

@@ -7,13 +7,9 @@ NUXT_SITEMINDER_LOGOUT_URL="https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi"
 NUXT_NAMEX_API_URL="https://namex-dev.apps.silver.devops.gov.bc.ca"
 NUXT_NAMEX_API_VERSION="/api/v1"
 
-#vaults keycloak
-NUXT_KEYCLOAK_AUTH_URL="https://dev.loginproxy.gov.bc.ca/auth"
-NUXT_KEYCLOAK_REALM="bcregistry"
-NUXT_KEYCLOAK_CLIENTID="NameX-Dev"
-
 #vaults firebase
 NUXT_API_KEY=
 NUXT_AUTH_DOMAIN=
 NUXT_PROJECT_ID=
-NUXT_APP_ID=
+NUXT_APP_ID=
+GCP_IDP=

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 # Byte-compiled / optimized / DLL files
 __pycache__/
 *.py[cod]

app.vue

@@ -4,3 +4,10 @@
     <NuxtPage />
   </NuxtLayout>
 </template>
+<script setup lang="ts">
+import { useUserStore } from '~/store/user-cache'
+
+const userStore = useUserStore()
+userStore.setUser()
+
+</script>

components/StatusBox.vue

@@ -6,20 +6,29 @@
     </div>
     <div class="my-6 ml-2">
       Not Examined:
-      <span id="notExamined" class="font-bold">{{
-        status.notExaminedNum
-      }}</span>
+      <span
+        id="notExamined"
+        class="font-bold"
+      >{{ notExaminedNum }}</span>
     </div>
     <div class="mb-2 ml-2 mt-6">
-      Hold: <span id="hold" class="font-bold">{{ status.holdNum }}</span>
+      Hold: <span
+        id="hold"
+        class="font-bold"
+      >{{ holdNum }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useStatusStore } from '~/store/status'
+import { useUserStore } from '~/store/user-cache'
 
+const userStore = useUserStore()
 const status = useStatusStore()
 
-onMounted(async () => await status.update())
+const notExaminedNum = computed(() => status.notExaminedNum)
+const holdNum = computed(() => status.holdNum)
+
+watch(userStore, async () => await status.update())
 </script>

components/app_header/Container.vue

@@ -7,49 +7,79 @@
             src="/images/top-nav.png"
             class="min-w-8 h-full"
             alt="Name Examination"
-          />
+          >
         </nuxt-link>
       </div>
 
-      <div v-if="authenticated" class="ml-3 flex gap-10 text-bcgov-blue5">
-        <AppHeaderNavLink text="Admin" :route="Route.Admin" />
-        <AppHeaderNavLink text="Examine Names" :route="Route.Examine" />
-        <AppHeaderNavLink text="Search" :route="Route.Search" />
+      <div
+        v-if="isAuthenticated"
+        class="ml-3 flex gap-10 text-bcgov-blue5"
+      >
+        <AppHeaderNavLink
+          text="Admin"
+          :route="Route.Admin"
+        />
+        <AppHeaderNavLink
+          text="Examine Names"
+          :route="Route.Examine"
+        />
+        <AppHeaderNavLink
+          text="Search"
+          :route="Route.Search"
+        />
       </div>
 
-      <div v-if="authenticated" class="ml-auto flex items-center">
+      <div
+        v-if="isAuthenticated"
+        class="ml-auto flex items-center"
+      >
         <SearchInput
           v-model="searchText"
           class="mx-3"
           placeholder="NR Number Lookup"
         />
 
-        <nuxt-link to="/stats" class="mx-3 text-sm text-blue-800 underline">
+        <nuxt-link
+          to="/stats"
+          class="mx-3 text-sm text-blue-800 underline"
+        >
           <a>Stats</a>
         </nuxt-link>
 
         <div class="flex space-x-2 px-3">
           <ToggleSwitch
-            label="Classify Words"
             v-model="examineOptions.classifyWords"
+            label="Classify Words"
           />
           <ToggleSwitch
-            label="Priority Queue"
             v-model="examineOptions.priorityQueue"
+            label="Priority Queue"
           />
         </div>
 
         <div class="flex flex-col border-l-2 border-gray-300 px-3">
-          <span class="text-sm">{{ $userProfile.username }}</span>
-          <a class="text-sm text-blue-800" href="#" @click="$auth.logout()">
+          <span class="text-sm">{{ userName }}</span>
+          <a
+            class="text-sm text-blue-800"
+            href="#"
+            @click="logout"
+          >
             Log Out
           </a>
         </div>
       </div>
 
-      <div v-else class="mx-5">
-        <IconButton class="font-medium">
-          <ArrowRightOnRectangleIcon class="h-6" />
+      <div
+        v-else
+        class="mx-5"
+      >
+        <IconButton
+          class="font-medium"
+          @click="login"
+        >
+          <ArrowRightOnRectangleIcon
+            class="h-6"
+          />
           Login
         </IconButton>
       </div>
@@ -60,13 +90,16 @@
 <script setup lang="ts">
 import { ArrowRightOnRectangleIcon } from '@heroicons/vue/24/solid'
 import { useExamineOptionsStore } from '~/store/examine-options'
+import { useUserStore } from '~/store/user-cache'
 import { Route } from '~/enums/routes'
-
-const { $auth, $userProfile } = useNuxtApp()
-
-const authenticated = computed(() => $auth.authenticated)
+import { logout, login } from '~/util/firebase-auth'
+import { computed } from 'vue'
 
 const examineOptions = useExamineOptionsStore()
 
+const userStore = useUserStore()
+const isAuthenticated = computed(() => userStore.authenticated)
+const userName = computed(() => userStore.userName)
+
 const searchText = ref('')
 </script>

components/search/ResultsBox.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="h-full overflow-x-auto rounded-md border">
+  <div
+    class="h-full overflow-x-auto rounded-md border"
+  >
     <table class="min-h-fit min-w-full table-auto">
       <thead class="sticky top-0">
         <tr class="h-12 bg-bcgov-blue5 text-left text-sm text-white">
@@ -11,8 +13,8 @@
             <a
               v-if="layout[column].clickable"
               href="#"
-              @click="layout[column].clickable.onClick"
               class="flex items-center"
+              @click="layout[column].clickable.onClick"
             >
               {{ column }}
               <component
@@ -36,13 +38,13 @@
           >
             <input
               v-if="'text_input' in layout[column]"
-              type="text"
               :id="column"
+              type="text"
               :placeholder="layout[column].text_input"
               class="w-full rounded-md border p-1.5"
               :value="search.filters[column as FilterKey]"
               @keyup.enter="updateTextInputFilters()"
-            />
+            >
 
             <ListSelect
               v-else-if="'dropdown' in layout[column]"
@@ -66,13 +68,20 @@
         :class="{ 'opacity-10': search.isLoading }"
       >
         <tr>
-          <td colspan="13" class="border-b border-gray-200 py-4 text-center">
+          <td
+            colspan="13"
+            class="border-b border-gray-200 py-4 text-center"
+          >
             {{ NO_DATA_STRING }}
           </td>
         </tr>
       </tbody>
 
-      <tbody v-else class="text-sm" :class="{ 'opacity-10': search.isLoading }">
+      <tbody
+        v-else
+        class="text-sm"
+        :class="{ 'opacity-10': search.isLoading }"
+      >
         <tr
           v-for="row in search.rows"
           :key="row[SearchColumns.NameRequestNumber]"
@@ -120,12 +129,15 @@ import {
   Priority,
   ClientNotification,
   Submitted,
-  LastUpdate,
+  LastUpdate
 } from '~/enums/filter-dropdowns'
 import { SearchColumns } from '~/enums/search-columns'
 import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/vue/24/outline'
+
+import { useUserStore } from '~/store/user-cache'
 import { StatusSearchFilter, type FilterKey } from '~/types/search'
 
+
 const NO_DATA_STRING = 'No Data Available'
 
 const search = useSearchStore()
@@ -153,57 +165,57 @@ const layout: ILayout = {
     dropdown: Object.values(StatusSearchFilter),
   },
   [SearchColumns.LastModifiedBy]: {
-    text_input: 'Username',
+    text_input: 'Username'
   },
   [SearchColumns.NameRequestNumber]: {
     text_input: 'NR Number',
-    width: 'w-28',
+    width: 'w-28'
   },
   [SearchColumns.Names]: {
     text_input: 'Name',
-    width: 'w-80',
+    width: 'w-80'
   },
   [SearchColumns.ApplicantFirstName]: {
-    text_input: 'First Name',
+    text_input: 'First Name'
   },
   [SearchColumns.ApplicantLastName]: {
-    text_input: 'Last Name',
+    text_input: 'Last Name'
   },
   [SearchColumns.NatureOfBusiness]: {},
   [SearchColumns.ConsentRequired]: {
-    dropdown: Object.values(ConsentRequired),
+    dropdown: Object.values(ConsentRequired)
   },
   [SearchColumns.Priority]: {
-    dropdown: Object.values(Priority),
+    dropdown: Object.values(Priority)
   },
   [SearchColumns.ClientNotification]: {
-    dropdown: Object.values(ClientNotification),
+    dropdown: Object.values(ClientNotification)
   },
   [SearchColumns.Submitted]: {
     dropdown: Object.values(Submitted),
     clickable: {
       icon: computed(() =>
         search.submittedDateOrder === 'asc' ? ArrowDownIcon : ArrowUpIcon
       ),
-      onClick: search.toggleSubmittedDateOrder,
-    },
+      onClick: search.toggleSubmittedDateOrder
+    }
   },
   [SearchColumns.LastUpdate]: {
-    dropdown: Object.values(LastUpdate),
+    dropdown: Object.values(LastUpdate)
   },
-  [SearchColumns.LastComment]: {},
+  [SearchColumns.LastComment]: {}
 }
 
 /**
  * Update all filters that use a text input.
  * This is useful if you edit multiple text inputs and press enter on only one,
  * but want the model values of all the other inputs updated as well.
  */
-function updateTextInputFilters() {
+function updateTextInputFilters () {
   const headCells = filter_inputs.value?.children
   if (headCells == null) return
 
-  for (let headCell of headCells) {
+  for (const headCell of headCells) {
     const filterElement = headCell.children[0]
     if (filterElement?.tagName.toLowerCase() == 'input') {
       // @ts-ignore
@@ -218,19 +230,19 @@ function updateTextInputFilters() {
  * Check if the `Custom` option in the submitted date filter was chosen.
  * If it is, then the date dialog should pop up.
  */
-function checkIfCustomSubmitDateChosen(option: any) {
+function checkIfCustomSubmitDateChosen (option: any) {
   if (option == Submitted.Custom) {
     showDateDialog.value = true
   }
 }
 
-function onDateDialogSubmit(startDate: string, endDate: string) {
+function onDateDialogSubmit (startDate: string, endDate: string) {
   search.customSubmittedStartDate = startDate
   search.customSubmittedEndDate = endDate
   showDateDialog.value = false
 }
 
-function onDateDialogCancel() {
+function onDateDialogCancel () {
   search.filters.Submitted = search.lastSubmittedDateOption
   showDateDialog.value = false
 }
@@ -241,4 +253,11 @@ onMounted(async () => {
   search.resetDisplayAndPage()
   await search.updateRows()
 })
+
+const userStore = useUserStore()
+
+watch(userStore, async () => {
+  await search.updateRows()
+})
+
 </script>