update component

src/components/IpSecurity.vue

@@ -33,16 +33,16 @@
           <img 
             v-if="flagUrl" 
             :src="flagUrl" 
-            :alt="ipData.country_code"
+            :alt="ipData.location.country_code"
-            class="w-4 h-3 object-cover"
+            class="w-4 h-3 object-cover rounded-sm"
             @error="handleFlagError"
           />
-          <span v-if="ipData.city" class="hidden sm:inline">{{ ipData.city }}</span>
+          <span v-if="ipData.location.city" class="hidden sm:inline">{{ ipData.location.city }}</span>
-          <span v-if="ipData.country" class="text-gray-600 dark:text-gray-300 font-medium">
+          <span v-if="ipData.location.country" class="text-gray-600 dark:text-gray-300 font-medium">
-            {{ ipData.country }}
+            {{ ipData.location.country }}
           </span>
-          <span v-if="ipData.org" class="hidden md:inline text-gray-400">
+          <span v-if="ipData.asn.name" class="hidden md:inline text-gray-400">
-            • {{ ipData.org.split(' ').slice(0, 2).join(' ') }}
+            • {{ truncateText(ipData.asn.name, 30) }}
           </span>
         </div>
       </div>
@@ -76,36 +76,18 @@ import { ref, computed, onMounted } from 'vue'
 const ipData = ref(null)
 const loading = ref(true)
 const error = ref(false)
-const isProtected = ref(false)
 const flagError = ref(false)
 
-// Определение VPN по org / asn
-const vpnKeywords = ['vpn', 'vpn service', 'vpnserver', 'mullvad', 'nordvpn', 
-  'expressvpn', 'protonvpn', 'wireguard', 'openvpn', 'surfshark', 
-  'cyberghost', 'ivpn', 'vyprvpn', 'torguard', 'uvpn']
-
 async function fetchIp() {
   loading.value = true
   error.value = false
   flagError.value = false
   
   try {
-    const response = await fetch('/api/ip')
+    const response = await fetch('/api/v1/ip')
-    if (!response.ok) throw new Error()
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
     
-    const data = await response.json()
+    ipData.value = await response.json()
-    
-    ipData.value = {
-      ip: data.ip,
-      country_code: data.location?.country_code || null,
-      city: data.location?.city || null,
-      org: data.isp?.org || data.isp?.isp || null,
-      country: data.location?.country || null
-    }
-    
-    // Определяем защищённость
-    const orgStr = (ipData.value.org || '').toLowerCase()
-    isProtected.value = vpnKeywords.some(keyword => orgStr.includes(keyword))
     
   } catch (err) {
     console.error('IP fetch error:', err)
@@ -116,18 +98,26 @@ async function fetchIp() {
   }
 }
 
-// URL флага через flagcdn.com (более надёжный)
+const isProtected = computed(() => {
+  if (!ipData.value) return false
+  return ipData.value.security.vpn || ipData.value.security.proxy || ipData.value.security.tor
+})
+
 const flagUrl = computed(() => {
-  if (!ipData.value?.country_code || flagError.value) return null
+  const countryCode = ipData.value?.location?.country_code
-  const countryCode = ipData.value.country_code.toLowerCase()
+  if (!countryCode || flagError.value) return null
-  // Используем flagcdn.com с автоматическим кэшированием
+  return `https://flagcdn.com/${countryCode.toLowerCase()}.svg`
-  return `https://flagcdn.com/${countryCode}.svg`
 })
 
 function handleFlagError() {
   flagError.value = true
 }
 
+function truncateText(text, maxLength) {
+  if (!text) return ''
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
+}
+
 onMounted(() => {
   fetchIp()
 })