Add OAuth-2 login via GitHub to query SlideRuleEarth membership #866

Author: cugarteblair

web-client/src/components/SrDeployConfig.vue

@@ -6,6 +6,7 @@ import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import { useGitHubAuthStore } from '@/stores/githubAuthStore'
 import { useDeployConfigStore } from '@/stores/deployConfigStore'
+import { useClusterReachability } from '@/composables/useClusterReachability'
 import { storeToRefs } from 'pinia'
 
 const githubAuthStore = useGitHubAuthStore()
@@ -15,6 +16,19 @@ const deployConfigStore = useDeployConfigStore()
 const { domain, clusterName, desiredVersion, currentNodes, canConnectNodes } =
   storeToRefs(deployConfigStore)
 
+// Use deployableClusters directly from the store (exclude "*" wildcard from dropdown)
+const clusterList = computed(() =>
+  (githubAuthStore.deployableClusters || []).filter((c) => c !== '*')
+)
+
+// Check if deployableClusters contains wildcard "*" to enable editable mode
+const allowCustomCluster = computed(
+  () => githubAuthStore.deployableClusters?.includes('*') ?? false
+)
+
+// Use composable for cluster reachability
+const { refreshClusterReachability } = useClusterReachability(clusterList, domain)
+
 async function refreshStatus() {
   deployConfigStore.resetStatus()
   if (clusterName.value) {
@@ -25,9 +39,6 @@ async function refreshStatus() {
   }
 }
 
-// Use deployableClusters directly from the store
-const clusterList = computed(() => githubAuthStore.deployableClusters || [])
-
 // Transform cluster options to include disabled state and status label
 const clusterOptionsWithStatus = computed(() => {
   return clusterList.value.map((c) => {
@@ -40,9 +51,12 @@ const clusterOptionsWithStatus = computed(() => {
   })
 })
 
-// Refresh stack status for all clusters when dropdown opens
+// Refresh stack status and reachability for all clusters when dropdown opens
 async function refreshClusterStatus() {
-  await deployConfigStore.refreshAllClusterStatus(clusterList.value)
+  await Promise.all([
+    deployConfigStore.refreshAllClusterStatus(clusterList.value),
+    refreshClusterReachability()
+  ])
 }
 
 // Set default cluster name when options become available
@@ -91,6 +105,7 @@ const isDomainDisabled = computed(() => !githubAuthStore.isOwner)
         <Select
           id="deploy-cluster"
           v-model="clusterName"
+          :editable="allowCustomCluster"
           :options="clusterOptionsWithStatus"
           optionLabel="label"
           optionValue="value"

web-client/src/components/SrSysConfig.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, watch, onMounted, ref } from 'vue'
+import { computed, watch, onMounted } from 'vue'
 import Select from 'primevue/select'
 import Button from 'primevue/button'
 import { useGitHubAuthStore } from '@/stores/githubAuthStore'
 import { useSysConfigStore } from '@/stores/sysConfigStore'
 import { useLegacyJwtStore } from '@/stores/SrLegacyJwtStore'
-import { fetchServerVersionInfo as fetchVersionUtil } from '@/utils/fetchUtils'
+import { useClusterReachability } from '@/composables/useClusterReachability'
 import { storeToRefs } from 'pinia'
 
 const props = defineProps<{
@@ -44,33 +44,11 @@ const clusterOptions = computed(() => {
   return ['sliderule']
 })
 
-// Track cluster reachability for disabling unreachable clusters in dropdown
-const clusterReachability = ref<Record<string, boolean>>({})
-
-async function checkClusterReachability(clusterName: string): Promise<boolean> {
-  const result = await fetchVersionUtil(clusterName, domain.value)
-  return result.success
-}
-
-async function refreshClusterReachability() {
-  const clusters = clusterOptions.value
-  const results: Record<string, boolean> = {}
-  await Promise.all(
-    clusters.map(async (c) => {
-      results[c] = await checkClusterReachability(c)
-    })
-  )
-  clusterReachability.value = results
-}
-
-// Transform options to include disabled state for unreachable clusters
-const clusterOptionsWithState = computed(() => {
-  return clusterOptions.value.map((c) => ({
-    label: c,
-    value: c,
-    disabled: clusterReachability.value[c] === false
-  }))
-})
+// Use composable for cluster reachability
+const { refreshClusterReachability, clusterOptionsWithState } = useClusterReachability(
+  clusterOptions,
+  domain
+)
 
 // Available domain options - testsliderule.org only for org owners
 const domainOptions = computed(() => {
@@ -86,7 +64,7 @@ const isPublicCluster = computed(
 )
 
 // Reset to public cluster
-async function resetToPublicCluster() {
+function resetToPublicCluster() {
   legacyJwtStore.clearAllJwts()
   sysConfigStore.$reset()
   // Set defaults: slideruleearth.io and sliderule

web-client/src/composables/useClusterReachability.ts

@@ -0,0 +1,60 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import { fetchServerVersionInfo } from '@/utils/fetchUtils'
+
+export interface ClusterOption {
+  label: string
+  value: string
+  disabled: boolean
+}
+
+export interface UseClusterReachabilityReturn {
+  clusterReachability: Ref<Record<string, boolean>>
+  checkClusterReachability: (_clusterName: string) => Promise<boolean>
+  refreshClusterReachability: () => Promise<void>
+  clusterOptionsWithState: ComputedRef<ClusterOption[]>
+}
+
+/**
+ * Composable for checking and tracking cluster reachability.
+ *
+ * @param clusters - Reactive ref to the list of cluster names
+ * @param domain - Reactive ref to the current domain
+ * @returns Object with reachability state and helper functions
+ */
+export function useClusterReachability(
+  clusters: Ref<string[]> | ComputedRef<string[]>,
+  domain: Ref<string>
+): UseClusterReachabilityReturn {
+  const clusterReachability = ref<Record<string, boolean>>({})
+
+  async function checkClusterReachability(clusterName: string): Promise<boolean> {
+    const result = await fetchServerVersionInfo(clusterName, domain.value)
+    return result.success
+  }
+
+  async function refreshClusterReachability(): Promise<void> {
+    const clusterList = clusters.value
+    const results: Record<string, boolean> = {}
+    await Promise.all(
+      clusterList.map(async (c) => {
+        results[c] = await checkClusterReachability(c)
+      })
+    )
+    clusterReachability.value = results
+  }
+
+  const clusterOptionsWithState = computed<ClusterOption[]>(() => {
+    return clusters.value.map((c) => ({
+      label: c,
+      value: c,
+      disabled: clusterReachability.value[c] === false
+    }))
+  })
+
+  return {
+    clusterReachability,
+    checkClusterReachability,
+    refreshClusterReachability,
+    clusterOptionsWithState
+  }
+}