feat(frontend): enhance validation for HTTP server configuration

Lasim · Lasim · commit 4c6a684f0e86 · 2025-12-12T16:09:58.000+01:00
diff --git a/services/frontend/src/components/admin/mcp-catalog/McpServerAddFormWizard.vue b/services/frontend/src/components/admin/mcp-catalog/McpServerAddFormWizard.vue
@@ -192,8 +192,47 @@ const canProceedFromGitHub = computed(() => {
 })
 
 const canProceedFromClaudeConfig = computed(() => {
-  return formData.value.claudeConfig.claude_desktop_config &&
-         Object.keys(formData.value.claudeConfig.claude_desktop_config).length > 0
+  const config = formData.value.claudeConfig.claude_desktop_config as any
+
+  if (!config || Object.keys(config).length === 0) {
+    return false
+  }
+
+  // Check if this is an HTTP config (fake structure with 'remote-server')
+  if (config.mcpServers && config.mcpServers['remote-server']) {
+    const remoteServer = config.mcpServers['remote-server']
+    // For HTTP: URL must be non-empty and valid
+    if (!remoteServer.url || remoteServer.url.trim() === '') {
+      return false
+    }
+    // Strict URL validation
+    try {
+      const parsedUrl = new URL(remoteServer.url)
+
+      // Must use HTTP or HTTPS
+      if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
+        return false
+      }
+
+      // Must have a valid hostname (not empty, not just a single character)
+      const hostname = parsedUrl.hostname
+      if (!hostname || hostname.length < 2) {
+        return false
+      }
+
+      // For non-localhost, require at least one dot (domain.tld format)
+      if (hostname !== 'localhost' && !hostname.includes('.')) {
+        return false
+      }
+
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  // For stdio config: if we got here, it's valid (already validated in StdioServerInput)
+  return true
 })
 
 const canSubmit = computed(() => {
diff --git a/services/frontend/src/components/admin/mcp-catalog/TechnicalStep.vue b/services/frontend/src/components/admin/mcp-catalog/TechnicalStep.vue
@@ -860,7 +860,7 @@ onUnmounted(() => {
       </div>
 
       <!-- Configuration Preview (when valid) -->
-      <div v-if="isValid" class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+      <div v-if="isValid && isStdioTransport" class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
         <dt class="text-sm/6 font-medium text-gray-900">{{ t('mcpCatalog.form.technical.claudeConfig.preview.title') }}</dt>
         <dd class="mt-1 sm:col-span-2 sm:mt-0">
           <div class="space-y-4">
diff --git a/services/frontend/src/components/admin/mcp-catalog/steps/ClaudeDesktopConfigStep/ClaudeConfigJsonInput.vue b/services/frontend/src/components/admin/mcp-catalog/steps/ClaudeDesktopConfigStep/ClaudeConfigJsonInput.vue
@@ -19,6 +19,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
+const hasContent = computed(() => props.modelValue.trim().length > 0)
 const statusIcon = computed(() => props.isValid ? CheckCircle : AlertCircle)
 const statusColor = computed(() => props.isValid ? 'text-green-600' : 'text-red-600')
 
@@ -31,7 +32,7 @@ const handleFormat = () => {
   <div class="space-y-2">
     <div class="flex items-center justify-between">
       <Label for="claude-config">{{ t('mcpCatalog.form.claudeConfig.label') }}</Label>
-      <div class="flex items-center gap-2">
+      <div v-if="hasContent" class="flex items-center gap-2">
         <component :is="statusIcon" :class="['h-4 w-4', statusColor]" />
         <span :class="['text-sm', statusColor]">
           {{ isValid ? t('mcpCatalog.form.claudeConfig.validConfiguration') : t('mcpCatalog.form.claudeConfig.invalidConfiguration') }}
diff --git a/services/frontend/src/components/admin/mcp-catalog/steps/ClaudeDesktopConfigStep/HttpServerInput.vue b/services/frontend/src/components/admin/mcp-catalog/steps/ClaudeDesktopConfigStep/HttpServerInput.vue
@@ -2,16 +2,14 @@
 import { ref, computed, watch } from 'vue'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { AlertCircle, CheckCircle, Link as LinkIcon } from 'lucide-vue-next'
+import { AlertCircle, CheckCircle } from 'lucide-vue-next'
 
 interface Props {
   modelValue?: {
@@ -38,16 +36,31 @@ const isValid = ref(false)
 
 // Validate URL
 const validateUrl = (url: string) => {
+  // Allow empty URLs (optional field)
   if (!url.trim()) {
-    return { isValid: false, error: 'URL is required' }
+    return { isValid: false, error: null }
   }
 
   try {
     const parsedUrl = new URL(url)
+
+    // Must use HTTP or HTTPS
     if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
       return { isValid: false, error: 'URL must use HTTP or HTTPS protocol' }
     }
-    return { isValid: true }
+
+    // Must have a valid hostname (not empty, not just a single character)
+    const hostname = parsedUrl.hostname
+    if (!hostname || hostname.length < 2) {
+      return { isValid: false, error: 'Invalid hostname' }
+    }
+
+    // For non-localhost, require at least one dot (domain.tld format)
+    if (hostname !== 'localhost' && !hostname.includes('.')) {
+      return { isValid: false, error: 'Invalid domain format' }
+    }
+
+    return { isValid: true, error: null }
   } catch {
     return { isValid: false, error: 'Please enter a valid URL' }
   }
@@ -66,7 +79,7 @@ const emitUpdate = () => {
       type: transportType.value
     })
   } else {
-    validationError.value = validation.error || 'Invalid URL'
+    validationError.value = validation.error
     isValid.value = false
 
     // Still emit for editing purposes
@@ -83,6 +96,7 @@ watch([urlInput, transportType], () => {
 }, { immediate: true })
 
 // Computed properties
+const hasUrl = computed(() => urlInput.value.trim().length > 0)
 const statusIcon = computed(() => isValid.value ? CheckCircle : AlertCircle)
 const statusColor = computed(() => isValid.value ? 'text-green-600' : 'text-red-600')
 </script>
@@ -122,7 +136,7 @@ const statusColor = computed(() => isValid.value ? 'text-green-600' : 'text-red-
     <div class="space-y-2">
       <div class="flex items-center justify-between">
         <Label for="server-url">Server URL</Label>
-        <div class="flex items-center gap-2">
+        <div v-if="hasUrl" class="flex items-center gap-2">
           <component :is="statusIcon" :class="['h-4 w-4', statusColor]" />
           <span :class="['text-sm', statusColor]">
             {{ isValid ? 'Valid URL' : 'Invalid URL' }}
@@ -143,34 +157,5 @@ const statusColor = computed(() => isValid.value ? 'text-green-600' : 'text-red-
       </p>
     </div>
 
-    <!-- Validation Error -->
-    <Alert v-if="validationError" variant="destructive">
-      <AlertCircle class="h-4 w-4" />
-      <AlertDescription>
-        {{ validationError }}
-      </AlertDescription>
-    </Alert>
-
-    <!-- Configuration Preview -->
-    <Card v-if="isValid" class="border-green-200 bg-green-50">
-      <CardHeader>
-        <CardTitle class="text-sm text-green-800">Configuration Preview</CardTitle>
-      </CardHeader>
-      <CardContent class="space-y-3">
-        <div>
-          <Label class="text-xs text-green-700">Transport Type</Label>
-          <code class="ml-2 text-sm bg-green-100 px-2 py-1 rounded">
-            {{ transportType === 'sse' ? 'SSE (Server-Sent Events)' : 'HTTP (Streamable)' }}
-          </code>
-        </div>
-        <div>
-          <Label class="text-xs text-green-700">Server URL</Label>
-          <div class="flex items-center gap-2 mt-1">
-            <LinkIcon class="h-4 w-4 text-green-600" />
-            <code class="text-sm bg-green-100 px-2 py-1 rounded break-all">{{ urlInput }}</code>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
   </div>
 </template>
diff --git a/services/frontend/src/components/admin/mcp-catalog/steps/ClaudeDesktopConfigStep/StdioServerInput.vue b/services/frontend/src/components/admin/mcp-catalog/steps/ClaudeDesktopConfigStep/StdioServerInput.vue
@@ -5,7 +5,6 @@ import { Alert, AlertDescription } from '@/components/ui/alert'
 import { AlertCircle } from 'lucide-vue-next'
 import ClaudeConfigJsonInput from './ClaudeConfigJsonInput.vue'
 import ClaudeConfigPreview from './ClaudeConfigPreview.vue'
-import ClaudeConfigExamples from './ClaudeConfigExamples.vue'
 
 interface Props {
   modelValue: {
@@ -33,7 +32,7 @@ const extractedEnvVars = ref<string[]>([])
 const validateJson = (jsonString: string) => {
   try {
     if (!jsonString.trim()) {
-      return { isValid: false, error: t('mcpCatalog.form.claudeConfig.validation.required') }
+      return { isValid: false, error: null }
     }
 
     const parsed = JSON.parse(jsonString)
@@ -98,7 +97,7 @@ watch(jsonInput, (newValue) => {
       raw_json: newValue
     })
   } else {
-    validationError.value = validation.error || 'Invalid configuration'
+    validationError.value = validation.error
     isValid.value = false
     extractedServerName.value = ''
     extractedCommand.value = ''
@@ -157,8 +156,5 @@ const formatJson = () => {
       :is-url-based-server="false"
       :headers="[]"
     />
-
-    <!-- Examples Component -->
-    <ClaudeConfigExamples />
   </div>
 </template>
