matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes
Build And Push Image / docker (push) Has been cancelled Details

This commit is contained in:
Matt 2025-08-10 15:21:43 +02:00
parent 30136117ce
commit 9572291299
3 changed files with 29 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/MultipleNationalityInput.vue
View File

@ -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();
}

19
components/PhoneInputWrapper.vue
View File

@ -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>

31
pages/auth/verify-success.vue
View File

@ -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>