package-lock.json

@@ -1,17 +1,18 @@
 {
   "name": "uvpn.shop",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "uvpn.shop",
-      "version": "0.5.3",
+      "version": "0.5.4",
       "dependencies": {
         "@lucide/vue": "^1.16.0",
         "@tailwindcss/vite": "^4.3.0",
         "@tresjs/cientos": "^5.7.1",
         "@tresjs/core": "^5.8.1",
+        "@tw-labs/countries": "^0.0.2",
         "@vueuse/head": "^0.9.8",
         "marked": "^18.0.5",
         "swiper": "^12.1.4",
@@ -1202,6 +1203,20 @@
         "vue": ">=3.4"
       }
     },
+    "node_modules/@tw-labs/countries": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@tw-labs/countries/-/countries-0.0.2.tgz",
+      "integrity": "sha512-mnCpRLhpMPTCMTnV18nKjLrdZ+4bUZSxdOgFWqdsZSM62RwPk1ddQCTN2XtRAR2zcLzlX91iTg2kSJ006qmXlA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tweenjs/tween.js": {
       "version": "23.1.3",
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "@tailwindcss/vite": "^4.3.0",
     "@tresjs/cientos": "^5.7.1",
     "@tresjs/core": "^5.8.1",
+    "@tw-labs/countries": "^0.0.2",
     "@vueuse/head": "^0.9.8",
     "marked": "^18.0.5",
     "swiper": "^12.1.4",

src/components/IpSecurity.vue

@@ -33,15 +33,16 @@
           <img 
             v-if="flagUrl" 
             :src="flagUrl" 
-            :alt="ipData.location.country_code"
+            :alt="countryCode"
             class="w-4 h-3 object-cover rounded-sm"
             @error="handleFlagError"
           />
-          <span v-if="ipData.location.city" class="hidden sm:inline">{{ ipData.location.city }}</span>
-          <span v-if="ipData.location.country" class="text-gray-600 dark:text-gray-300 font-medium">
+          <span v-if="countryEmoji" class="text-base">{{ countryEmoji }}</span>
+          <span v-if="ipData.location?.city" class="hidden sm:inline">{{ ipData.location.city }}</span>
+          <span v-if="ipData.location?.country" class="text-gray-600 dark:text-gray-300 font-medium">
             {{ ipData.location.country }}
           </span>
-          <span v-if="ipData.asn.name" class="hidden md:inline text-gray-400">
+          <span v-if="ipData.asn?.name" class="hidden md:inline text-gray-400">
             • {{ truncateText(ipData.asn.name, 30) }}
           </span>
         </div>
@@ -72,12 +73,36 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { getAllCountries, withFlags } from '@tw-labs/countries'
 
 const ipData = ref(null)
 const loading = ref(true)
 const error = ref(false)
 const flagError = ref(false)
 
+// Загружаем список стран один раз
+const countriesList = getAllCountries()
+
+// Функция поиска страны по названию
+function findCountryByName(countryName) {
+  if (!countryName) return null
+  
+  // Точное совпадение
+  const found = countriesList.find(
+    c => c.label.toLowerCase() === countryName.toLowerCase()
+  )
+  
+  if (found) return found
+  
+  // Частичное совпадение (для "Russian Federation" vs "Russia" и т.п.)
+  const partial = countriesList.find(
+    c => countryName.toLowerCase().includes(c.label.toLowerCase()) ||
+         c.label.toLowerCase().includes(countryName.toLowerCase())
+  )
+  
+  return partial || null
+}
+
 async function fetchIp() {
   loading.value = true
   error.value = false
@@ -87,7 +112,27 @@ async function fetchIp() {
     const response = await fetch('/api/v1/ip')
     if (!response.ok) throw new Error(`HTTP ${response.status}`)
     
-    ipData.value = await response.json()
+    const data = await response.json()
+    
+    // Находим код страны по названию
+    const countryName = data.location?.country
+    const foundCountry = findCountryByName(countryName)
+    const countryCode = foundCountry?.code || null
+    
+    // Добавляем флаговые данные через withFlags
+    let countryWithFlags = null
+    if (foundCountry) {
+      countryWithFlags = withFlags(foundCountry)
+    }
+    
+    ipData.value = {
+      ...data,
+      location: {
+        ...data.location,
+        computed_country_code: countryCode
+      },
+      _flags: countryWithFlags
+    }
     
   } catch (err) {
     console.error('IP fetch error:', err)
@@ -100,13 +145,31 @@ async function fetchIp() {
 
 const isProtected = computed(() => {
   if (!ipData.value) return false
-  return ipData.value.security.vpn || ipData.value.security.proxy || ipData.value.security.tor
+  return ipData.value.security?.vpn || ipData.value.security?.proxy || ipData.value.security?.tor
 })
 
+// Код страны (вычисленный)
+const countryCode = computed(() => {
+  return ipData.value?.location?.computed_country_code || null
+})
+
+// Emoji флага из withFlags
+const countryEmoji = computed(() => {
+  return ipData.value?._flags?.flagEmoji || null
+})
+
+// URL флага
 const flagUrl = computed(() => {
-  const countryCode = ipData.value?.location?.country_code
-  if (!countryCode || flagError.value) return null
-  return `https://flagcdn.com/${countryCode.toLowerCase()}.svg`
+  // Сначала пробуем взять SVG из withFlags
+  if (ipData.value?._flags?.flagSvg && !flagError.value) {
+    return ipData.value._flags.flagSvg
+  }
+  
+  // Если нет — формируем сами через flagcdn
+  const code = countryCode.value
+  if (!code || flagError.value) return null
+  
+  return `https://flagcdn.com/${code.toLowerCase()}.svg`
 })
 
 function handleFlagError() {