From 95722912993d0f7510fcc61e0be6b4d34fa7a655 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 10 Aug 2025 15:21:43 +0200
Subject: [PATCH] fixes

---
 components/MultipleNationalityInput.vue | 16 ++++---------
 components/PhoneInputWrapper.vue        | 19 ++++++++-------
 pages/auth/verify-success.vue           | 31 +++++++++++--------------
 3 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/components/MultipleNationalityInput.vue b/components/MultipleNationalityInput.vue
index adb9c28..a286899 100644
--- a/components/MultipleNationalityInput.vue
+++ b/components/MultipleNationalityInput.vue
@@ -215,6 +215,7 @@
 
 <script setup lang="ts">
 import { getAllCountries, searchCountries } from '~/utils/countries';
+import { getStaticDeviceInfo } from '~/utils/static-device-detection';
 
 interface Props {
   modelValue?: string; // Comma-separated string like "FR,MC,US"
@@ -241,9 +242,10 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>();
 
 // Static mobile detection (no reactive dependencies)
-const isMobile = ref(false);
-const isMobileSafari = ref(false);
-const needsPerformanceMode = ref(false);
+const deviceInfo = getStaticDeviceInfo();
+const isMobile = ref(deviceInfo.isMobile);
+const isMobileSafari = ref(deviceInfo.isMobileSafari);
+const needsPerformanceMode = ref(deviceInfo.isMobileSafari || deviceInfo.isMobile);
 
 // Parse initial nationalities from comma-separated string
 const parseNationalities = (value: string): string[] => {
@@ -374,14 +376,6 @@ watch(nationalities, () => {
 
 // Initialize the model value on mount if needed
 onMounted(() => {
-  // Apply static device detection - no reactive dependencies
-  const { isMobile: deviceIsMobile, isIos, isSafari } = useDevice();
-  
-  // Set static values once
-  isMobile.value = deviceIsMobile || false;
-  isMobileSafari.value = (deviceIsMobile && isIos && isSafari) || false;
-  needsPerformanceMode.value = isMobileSafari.value || isMobile.value;
-  
   if (!props.modelValue && validNationalities.value.length > 0) {
     updateNationalities();
   }
diff --git a/components/PhoneInputWrapper.vue b/components/PhoneInputWrapper.vue
index d4f03ba..ac2692a 100644
--- a/components/PhoneInputWrapper.vue
+++ b/components/PhoneInputWrapper.vue
@@ -155,6 +155,7 @@
 <script setup lang="ts">
 import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
 import { getPhoneCountriesWithPreferred, searchPhoneCountries, getPhoneCountryByCode, type PhoneCountry } from '~/utils/phone-countries';
+import { getStaticDeviceInfo } from '~/utils/static-device-detection';
 
 interface Props {
   modelValue?: string;
@@ -188,8 +189,9 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>();
 
 // Static mobile detection (no reactive dependencies)
-const isMobile = ref(false);
-const isMobileSafari = ref(false);
+const deviceInfo = getStaticDeviceInfo();
+const isMobile = ref(deviceInfo.isMobile);
+const isMobileSafari = ref(deviceInfo.isMobileSafari);
 
 // Create computed-like object for template compatibility
 const mobileDetection = computed(() => ({
@@ -324,14 +326,13 @@ watch(dropdownOpen, (isOpen) => {
   }
 });
 
-// Apply static device detection on mount
+// Component initialization - values already set from static detection
 onMounted(() => {
-  // Static device detection from Nuxt Device Module - no reactive dependencies
-  const { isMobile: deviceIsMobile, isIos, isSafari } = useDevice();
-  
-  // Apply device state once (static, no reactivity)
-  isMobile.value = deviceIsMobile || false;
-  isMobileSafari.value = (deviceIsMobile && isIos && isSafari) || false;
+  // Device detection already applied statically - no additional setup needed
+  console.log('[PhoneInputWrapper] Initialized with device info:', {
+    isMobile: deviceInfo.isMobile,
+    isMobileSafari: deviceInfo.isMobileSafari
+  });
 });
 </script>
 
diff --git a/pages/auth/verify-success.vue b/pages/auth/verify-success.vue
index d11d4d3..469f846 100644
--- a/pages/auth/verify-success.vue
+++ b/pages/auth/verify-success.vue
@@ -91,6 +91,7 @@
 </template>
 
 <script setup lang="ts">
+import { getStaticDeviceInfo, getDeviceCssClasses, applyMobileSafariOptimizations, getMobileSafariViewportMeta } from '~/utils/static-device-detection';
 
 definePageMeta({
   layout: false,
@@ -102,8 +103,11 @@ const route = useRoute();
 const email = computed(() => route.query.email as string || '');
 const partialWarning = computed(() => route.query.warning === 'partial');
 
-// Static CSS classes based on device (no reactive dependencies)
-const containerClasses = ref('verification-success');
+// Static device detection - no reactive dependencies
+const deviceInfo = getStaticDeviceInfo();
+
+// Static CSS classes - computed once, never reactive
+const containerClasses = ref(getDeviceCssClasses('verification-success'));
 
 // Setup password URL for Keycloak - Fixed URL structure
 const setupPasswordUrl = computed(() => {
@@ -123,7 +127,7 @@ useHead({
       name: 'description',
       content: 'Your email has been successfully verified. You can now log in to the MonacoUSA Portal.'
     },
-    { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
+    { name: 'viewport', content: getMobileSafariViewportMeta() }
   ]
 });
 
@@ -137,26 +141,19 @@ const goToPasswordSetup = () => {
   });
 };
 
-// Track verification
+// Track verification - Safari iOS reload loop prevention
 onMounted(() => {
-  // Static device detection from Nuxt Device Module - no reactive dependencies
-  const { isMobile, isIos, isSafari } = useDevice();
-  
-  // Detect mobile Safari specifically
-  const isMobileSafari = isMobile && isIos && isSafari;
-  
-  // Apply classes once (static, no reactivity)
-  const containerClassList = ['verification-success'];
-  if (isMobile) containerClassList.push('is-mobile');
-  if (isMobileSafari) containerClassList.push('is-mobile-safari');
-  if (isIos) containerClassList.push('is-ios');
-  containerClasses.value = containerClassList.join(' ');
-
   console.log('[verify-success] Email verification completed', { 
     email: email.value,
     partialWarning: partialWarning.value,
     setupPasswordUrl: setupPasswordUrl.value 
   });
+
+  // Apply mobile Safari optimizations early
+  if (deviceInfo.isMobileSafari) {
+    applyMobileSafariOptimizations();
+    console.log('[verify-success] Mobile Safari optimizations applied');
+  }
 });
 </script>