Merge pull request #863 from SlideRuleEarth/carlos-dev4

Prompt user to enter new credentials for google base layer if needed …

Author: cugarteblair

web-client/src/App.vue

@@ -18,7 +18,9 @@ import SrClearCache from '@/components/SrClearCache.vue'
 import { useSysConfigStore } from '@/stores/sysConfigStore'
 import { useJwtStore } from '@/stores/SrJWTStore'
 import { useAuthDialogStore } from '@/stores/authDialogStore'
+import { useGoogleApiKeyStore } from '@/stores/googleApiKeyStore'
 import SrJsonDisplayDialog from '@/components/SrJsonDisplayDialog.vue'
+import SrGoogleApiKeyInput from '@/components/SrGoogleApiKeyInput.vue'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
 import Button from 'primevue/button'
@@ -39,6 +41,7 @@ const tourStore = useTourStore()
 const sysConfigStore = useSysConfigStore()
 const jwtStore = useJwtStore()
 const authDialogStore = useAuthDialogStore()
+const googleApiKeyStore = useGoogleApiKeyStore()
 const route = useRoute()
 
 // Global login dialog state
@@ -864,6 +867,17 @@ async function handleLongTourButtonClick() {
         </div>
       </form>
     </Dialog>
+
+    <!-- Google API Key Dialog -->
+    <Dialog
+      v-model:visible="googleApiKeyStore.dialogVisible"
+      header="Google API Key Required"
+      :modal="true"
+      :closable="true"
+      style="width: 600px; max-width: 95vw"
+    >
+      <SrGoogleApiKeyInput />
+    </Dialog>
   </div>
 </template>
 

web-client/src/components/SrAnalysisMap.vue

@@ -41,6 +41,7 @@ import SrBaseLayerControl from '@/components/SrBaseLayerControl.vue'
 import SrGraticuleControl from '@/components/SrGraticuleControl.vue'
 import { findSrViewKey, srViews } from '@/composables/SrViews'
 import { addLayersForCurrentView } from '@/composables/SrLayers'
+import { useGoogleApiKeyStore } from '@/stores/googleApiKeyStore'
 import { useFieldNameStore } from '@/stores/fieldNameStore'
 import { selectSrViewForExtent } from '@/utils/srViewSelector'
 import SrLocationFinder from '@/components/SrLocationFinder.vue'
@@ -93,6 +94,7 @@ const atlChartFilterStore = useAtlChartFilterStore()
 const activeTabStore = useActiveTabStore()
 const fieldNameStore = useFieldNameStore()
 const debugStore = useDebugStore()
+const googleApiKeyStore = useGoogleApiKeyStore()
 const controls = ref([])
 const tooltipRef = ref<InstanceType<typeof SrCustomTooltip> | null>(null)
 const showContextMenu = ref(false)
@@ -285,6 +287,17 @@ watch(
   }
 )
 
+// Watch for Google API key validation to refresh the map
+watch(
+  () => googleApiKeyStore.refreshTrigger,
+  async (newValue, oldValue) => {
+    if (newValue > oldValue) {
+      logger.debug('Google API key validated, refreshing map')
+      await updateAnalysisMapView('Google API key validated')
+    }
+  }
+)
+
 onMounted(async () => {
   logger.debug('SrAnalysisMap onMounted', { selectedReqId: props.selectedReqId })
   await fieldNameStore.loadMetaForReqId(props.selectedReqId) // async but don't await

web-client/src/components/SrGoogleApiKeyInput.vue

@@ -88,6 +88,7 @@ async function validateAndSave() {
       life: 3000
     })
     inputKey.value = ''
+    googleApiKeyStore.hideDialog()
   } else {
     const errorType = googleApiKeyStore.getLastError()
     toast.add({

web-client/src/composables/SrLayers.ts

@@ -984,19 +984,19 @@ export const getLayer = (
 
         if (!googleApiKeyStore.hasValidKey()) {
           logger.warn('[SrLayers] Google layer requested but no valid API key configured')
-          // Return undefined - the UI will prompt the user for an API key
+          // Prompt the user to configure their API key
+          googleApiKeyStore.showDialog()
           return undefined
         }
 
         const apiKey = googleApiKeyStore.getApiKey()
         const sessionToken = googleApiKeyStore.getSessionToken()
 
         // Session should exist from when the key was validated
-        // If not, the user needs to re-enter their key in Settings
+        // If not, the user needs to re-enter their key
         if (!sessionToken) {
-          logger.error(
-            '[SrLayers] No Google session token available - please re-validate your API key in Settings'
-          )
+          logger.error('[SrLayers] No Google session token available - prompting for API key')
+          googleApiKeyStore.showDialog()
           return undefined
         }
 

web-client/src/stores/googleApiKeyStore.ts

@@ -18,7 +18,9 @@ export const useGoogleApiKeyStore = defineStore('googleApiKey', {
     validationStatus: 'unknown' as ValidationStatus,
     lastError: null as ErrorType,
     sessionToken: null as string | null,
-    sessionExpiry: null as number | null
+    sessionExpiry: null as number | null,
+    dialogVisible: false,
+    refreshTrigger: 0
   }),
   persist: {
     // Use sessionStorage - persists within tab until closed
@@ -107,6 +109,7 @@ export const useGoogleApiKeyStore = defineStore('googleApiKey', {
             this.setSessionToken(data.session, 23 * 60 * 60)
           }
           logger.debug('API key validated successfully')
+          this.triggerMapRefresh()
           return true
         } else {
           const errorData = await response.json().catch(() => ({}))
@@ -194,6 +197,16 @@ export const useGoogleApiKeyStore = defineStore('googleApiKey', {
         })
         return false
       }
+    },
+    triggerMapRefresh() {
+      this.refreshTrigger++
+      logger.debug('Map refresh triggered', { refreshTrigger: this.refreshTrigger })
+    },
+    showDialog() {
+      this.dialogVisible = true
+    },
+    hideDialog() {
+      this.dialogVisible = false
     }
   }
 })