Refactor mobile detection to use unified composable
Build And Push Image / docker (push) Successful in 2m52s
Details
Build And Push Image / docker (push) Successful in 2m52s
Details
- Add useMobileDetection composable to centralize device detection logic - Replace direct utility imports with composable usage across components - Update MultipleNationalityInput, PhoneInputWrapper, and auth pages - Simplify mobile-specific styling and behavior handling - Improve code maintainability by consolidating detection logic
This commit is contained in:
parent
d14008efd4
commit
2b2cd5891f
|
|
@ -214,12 +214,8 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getAllCountries, getCountryName } from '~/utils/countries';
|
||||
import {
|
||||
getDeviceInfo,
|
||||
needsPerformanceOptimization,
|
||||
getOptimizedClasses
|
||||
} from '~/utils/mobile-safari-utils';
|
||||
import { getAllCountries, searchCountries } from '~/utils/countries';
|
||||
import { useMobileDetection } from '~/composables/useMobileDetection';
|
||||
|
||||
interface Props {
|
||||
modelValue?: string; // Comma-separated string like "FR,MC,US"
|
||||
|
|
@ -245,10 +241,10 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// Mobile Safari detection
|
||||
const deviceInfo = ref(getDeviceInfo());
|
||||
const isMobileSafari = computed(() => deviceInfo.value.isMobileSafari);
|
||||
const needsPerformanceMode = computed(() => needsPerformanceOptimization());
|
||||
// Use unified mobile detection
|
||||
const mobileDetection = useMobileDetection();
|
||||
const isMobileSafari = computed(() => mobileDetection.isMobileSafari);
|
||||
const needsPerformanceMode = computed(() => mobileDetection.isMobileSafari || mobileDetection.isMobile);
|
||||
|
||||
// Parse initial nationalities from comma-separated string
|
||||
const parseNationalities = (value: string): string[] => {
|
||||
|
|
@ -344,6 +340,14 @@ const updateNationalities = () => {
|
|||
emit('update:modelValue', result);
|
||||
};
|
||||
|
||||
// Helper methods
|
||||
const getCountryName = (countryCode: string): string => {
|
||||
if (!countryCode) return '';
|
||||
const countries = getAllCountries();
|
||||
const country = countries.find(c => c.code === countryCode);
|
||||
return country?.name || '';
|
||||
};
|
||||
|
||||
// Mobile Safari specific methods
|
||||
const getSelectedCountryName = (countryCode: string): string => {
|
||||
if (!countryCode) return '';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="phone-input-wrapper" :class="{ 'phone-input-wrapper--mobile': isMobile }">
|
||||
<div class="phone-input-wrapper" :class="{ 'phone-input-wrapper--mobile': mobileDetection.isMobile }">
|
||||
<v-text-field
|
||||
v-model="localNumber"
|
||||
:label="label"
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
:required="required"
|
||||
:disabled="disabled"
|
||||
variant="outlined"
|
||||
:density="isMobile ? 'default' : 'comfortable'"
|
||||
:density="mobileDetection.isMobile ? 'default' : 'comfortable'"
|
||||
class="phone-text-field"
|
||||
@input="handleInput"
|
||||
@blur="handleBlur"
|
||||
|
|
@ -21,13 +21,11 @@
|
|||
<v-menu
|
||||
v-model="dropdownOpen"
|
||||
:close-on-content-click="false"
|
||||
:location="isMobile ? undefined : 'bottom start'"
|
||||
:offset="isMobile ? 0 : 4"
|
||||
:min-width="isMobile ? undefined : '280'"
|
||||
:transition="isMobile ? 'fade-transition' : 'fade-transition'"
|
||||
:no-click-animation="isMobile"
|
||||
:attach="isMobile"
|
||||
:strategy="isMobile ? 'fixed' : 'absolute'"
|
||||
location="bottom start"
|
||||
:offset="4"
|
||||
:min-width="mobileDetection.isMobile ? '90vw' : '280'"
|
||||
transition="fade-transition"
|
||||
:no-click-animation="true"
|
||||
>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<div
|
||||
|
|
@ -35,7 +33,7 @@
|
|||
class="country-selector"
|
||||
:class="{
|
||||
'country-selector--open': dropdownOpen,
|
||||
'country-selector--mobile': isMobile
|
||||
'country-selector--mobile': mobileDetection.isMobile
|
||||
}"
|
||||
>
|
||||
<img
|
||||
|
|
@ -46,7 +44,7 @@
|
|||
/>
|
||||
<span class="country-code">{{ selectedCountry.dialCode }}</span>
|
||||
<v-icon
|
||||
:size="isMobile ? 18 : 16"
|
||||
:size="mobileDetection.isMobile ? 18 : 16"
|
||||
class="dropdown-icon"
|
||||
:class="{ 'dropdown-icon--rotated': dropdownOpen }"
|
||||
>
|
||||
|
|
@ -55,23 +53,14 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Mobile Full-Screen Overlay -->
|
||||
<div
|
||||
v-if="isMobile && dropdownOpen"
|
||||
class="mobile-overlay"
|
||||
@click="closeDropdown"
|
||||
@touchstart="handleOverlayTouch"
|
||||
/>
|
||||
|
||||
<!-- Dropdown Content -->
|
||||
<v-card
|
||||
class="country-dropdown"
|
||||
:class="{ 'country-dropdown--mobile': isMobile }"
|
||||
elevation="8"
|
||||
:style="isMobile ? 'display: block !important;' : ''"
|
||||
:class="{ 'country-dropdown--mobile': mobileDetection.isMobile }"
|
||||
:elevation="mobileDetection.isMobile ? 24 : 8"
|
||||
>
|
||||
<!-- Mobile Header -->
|
||||
<div v-if="isMobile" class="mobile-header">
|
||||
<div v-if="mobileDetection.isMobile" class="mobile-header">
|
||||
<h3 class="mobile-title">Select Country</h3>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
|
|
@ -88,11 +77,11 @@
|
|||
v-model="searchQuery"
|
||||
placeholder="Search countries..."
|
||||
variant="outlined"
|
||||
:density="isMobile ? 'default' : 'compact'"
|
||||
:density="mobileDetection.isMobile ? 'default' : 'compact'"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
hide-details
|
||||
class="search-input"
|
||||
:autofocus="!isMobile"
|
||||
:autofocus="!mobileDetection.isMobile"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -100,8 +89,8 @@
|
|||
<!-- Country List -->
|
||||
<v-list
|
||||
class="country-list"
|
||||
:class="{ 'country-list--mobile': isMobile }"
|
||||
:density="isMobile ? 'default' : 'compact'"
|
||||
:class="{ 'country-list--mobile': mobileDetection.isMobile }"
|
||||
:density="mobileDetection.isMobile ? 'default' : 'compact'"
|
||||
>
|
||||
<v-list-item
|
||||
v-for="country in filteredCountries"
|
||||
|
|
@ -110,25 +99,24 @@
|
|||
'country-item': true,
|
||||
'country-item--selected': country.iso2 === selectedCountry.iso2,
|
||||
'country-item--preferred': isPreferredCountry(country.iso2),
|
||||
'country-item--mobile': isMobile
|
||||
'country-item--mobile': mobileDetection.isMobile
|
||||
}"
|
||||
@click="selectCountry(country)"
|
||||
@touchstart="handleCountryTouch"
|
||||
:ripple="isMobile"
|
||||
:ripple="mobileDetection.isMobile"
|
||||
>
|
||||
<template #prepend>
|
||||
<img
|
||||
:src="getCountryFlagUrl(country.iso2)"
|
||||
:alt="`${country.name} flag`"
|
||||
class="list-flag"
|
||||
:class="{ 'list-flag--mobile': isMobile }"
|
||||
:class="{ 'list-flag--mobile': mobileDetection.isMobile }"
|
||||
@error="handleFlagError"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-list-item-title
|
||||
class="country-name"
|
||||
:class="{ 'country-name--mobile': isMobile }"
|
||||
:class="{ 'country-name--mobile': mobileDetection.isMobile }"
|
||||
>
|
||||
{{ country.name }}
|
||||
</v-list-item-title>
|
||||
|
|
@ -136,7 +124,7 @@
|
|||
<template #append>
|
||||
<span
|
||||
class="dial-code"
|
||||
:class="{ 'dial-code--mobile': isMobile }"
|
||||
:class="{ 'dial-code--mobile': mobileDetection.isMobile }"
|
||||
>
|
||||
{{ country.dialCode }}
|
||||
</span>
|
||||
|
|
@ -145,7 +133,7 @@
|
|||
</v-list>
|
||||
|
||||
<!-- Mobile Footer -->
|
||||
<div v-if="isMobile" class="mobile-footer">
|
||||
<div v-if="mobileDetection.isMobile" class="mobile-footer">
|
||||
<v-btn
|
||||
block
|
||||
variant="text"
|
||||
|
|
@ -165,6 +153,7 @@
|
|||
<script setup lang="ts">
|
||||
import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
|
||||
import { getPhoneCountriesWithPreferred, searchPhoneCountries, getPhoneCountryByCode, type PhoneCountry } from '~/utils/phone-countries';
|
||||
import { useMobileDetection } from '~/composables/useMobileDetection';
|
||||
|
||||
interface Props {
|
||||
modelValue?: string;
|
||||
|
|
@ -197,6 +186,9 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// Use unified mobile detection
|
||||
const mobileDetection = useMobileDetection();
|
||||
|
||||
// Get comprehensive countries list
|
||||
const countries = getPhoneCountriesWithPreferred(props.preferredCountries);
|
||||
|
||||
|
|
@ -208,26 +200,9 @@ const selectedCountry = ref<PhoneCountry>(
|
|||
getPhoneCountryByCode(props.defaultCountry) || countries[0]
|
||||
);
|
||||
|
||||
// Mobile detection
|
||||
const isMobile = ref(false);
|
||||
|
||||
// Computed
|
||||
const flagUrl = computed(() => getCountryFlagUrl(selectedCountry.value.iso2));
|
||||
|
||||
// Mobile detection on mount
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth <= 768 || 'ontouchstart' in window;
|
||||
};
|
||||
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile);
|
||||
});
|
||||
});
|
||||
|
||||
const filteredCountries = computed(() => {
|
||||
return searchPhoneCountries(searchQuery.value, props.preferredCountries);
|
||||
});
|
||||
|
|
@ -241,18 +216,10 @@ const isPreferredCountry = (iso2: string) => {
|
|||
return props.preferredCountries.includes(iso2);
|
||||
};
|
||||
|
||||
const toggleDropdown = () => {
|
||||
if (!props.disabled) {
|
||||
dropdownOpen.value = !dropdownOpen.value;
|
||||
if (dropdownOpen.value) {
|
||||
searchQuery.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const selectCountry = (country: PhoneCountry) => {
|
||||
selectedCountry.value = country;
|
||||
dropdownOpen.value = false;
|
||||
searchQuery.value = ''; // Clear search on selection
|
||||
emit('country-changed', country);
|
||||
|
||||
// Reformat existing number with new country
|
||||
|
|
@ -314,25 +281,6 @@ const closeDropdown = () => {
|
|||
searchQuery.value = '';
|
||||
};
|
||||
|
||||
const handleTouchStart = (event: TouchEvent) => {
|
||||
// Allow natural touch behavior, just ensure dropdown works
|
||||
if (!dropdownOpen.value && !props.disabled) {
|
||||
dropdownOpen.value = true;
|
||||
searchQuery.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleOverlayTouch = (event: TouchEvent) => {
|
||||
// Close dropdown when touching overlay
|
||||
event.preventDefault();
|
||||
closeDropdown();
|
||||
};
|
||||
|
||||
const handleCountryTouch = (event: TouchEvent) => {
|
||||
// Allow touch to work naturally for country selection
|
||||
// Don't prevent default as it interferes with click events
|
||||
};
|
||||
|
||||
// Initialize from modelValue
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
if (newValue && newValue !== selectedCountry.value.dialCode + localNumber.value.replace(/\D/g, '')) {
|
||||
|
|
@ -357,6 +305,16 @@ watch(() => props.modelValue, (newValue) => {
|
|||
}
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
// Clean up search query when dropdown closes
|
||||
watch(dropdownOpen, (isOpen) => {
|
||||
if (!isOpen) {
|
||||
// Clear search after a small delay to allow selection to complete
|
||||
setTimeout(() => {
|
||||
searchQuery.value = '';
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -375,6 +333,8 @@ watch(() => props.modelValue, (newValue) => {
|
|||
background: rgba(var(--v-theme-surface), 1);
|
||||
border: 1px solid transparent;
|
||||
margin-right: 8px;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.country-selector:hover {
|
||||
|
|
@ -438,6 +398,7 @@ watch(() => props.modelValue, (newValue) => {
|
|||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: rgba(var(--v-theme-surface), 1);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.country-list::-webkit-scrollbar {
|
||||
|
|
@ -494,19 +455,6 @@ watch(() => props.modelValue, (newValue) => {
|
|||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* Mobile Overlay */
|
||||
.mobile-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1999;
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* Mobile Header */
|
||||
.mobile-header {
|
||||
display: flex;
|
||||
|
|
@ -550,57 +498,33 @@ watch(() => props.modelValue, (newValue) => {
|
|||
border-radius: 8px;
|
||||
min-height: 44px; /* Touch-friendly size */
|
||||
align-items: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.country-selector--mobile:hover {
|
||||
background: rgba(var(--v-theme-primary), 0.12);
|
||||
.country-selector--mobile:active {
|
||||
background: rgba(var(--v-theme-primary), 0.16);
|
||||
}
|
||||
|
||||
.country-dropdown--mobile {
|
||||
position: fixed !important;
|
||||
top: 10% !important;
|
||||
left: 5% !important;
|
||||
right: 5% !important;
|
||||
width: 90vw !important;
|
||||
max-width: 400px !important;
|
||||
min-height: 400px !important;
|
||||
max-height: 80vh !important;
|
||||
height: auto !important;
|
||||
margin: 0 auto !important;
|
||||
border-radius: 16px !important;
|
||||
z-index: 2000 !important;
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3) !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
max-height: 70vh !important;
|
||||
}
|
||||
|
||||
.country-list--mobile {
|
||||
flex: 1 !important;
|
||||
min-height: 200px !important;
|
||||
max-height: calc(60vh - 120px) !important;
|
||||
overflow-y: auto !important;
|
||||
max-height: calc(50vh - 120px) !important;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.country-list--mobile::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.country-list--mobile::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--v-theme-primary), 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.country-item--mobile {
|
||||
min-height: 56px !important;
|
||||
padding: 12px 20px !important;
|
||||
border-left-width: 4px !important;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.country-item--mobile:active {
|
||||
background: rgba(var(--v-theme-primary), 0.16) !important;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.list-flag--mobile {
|
||||
|
|
@ -636,7 +560,7 @@ watch(() => props.modelValue, (newValue) => {
|
|||
}
|
||||
|
||||
.country-list {
|
||||
max-height: 200px;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
.country-selector {
|
||||
|
|
@ -644,74 +568,11 @@ watch(() => props.modelValue, (newValue) => {
|
|||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.country-flag {
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.country-code {
|
||||
font-size: 0.875rem;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.search-input :deep(.v-field) {
|
||||
.search-input :deep(.v-field__input) {
|
||||
font-size: 16px !important; /* Prevent zoom */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.country-dropdown--mobile {
|
||||
width: 95vw !important;
|
||||
max-height: 85vh !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.country-list--mobile {
|
||||
max-height: calc(65vh - 140px) !important;
|
||||
}
|
||||
|
||||
.country-item--mobile {
|
||||
min-height: 52px !important;
|
||||
padding: 10px 16px !important;
|
||||
}
|
||||
|
||||
.mobile-header,
|
||||
.mobile-footer,
|
||||
.search-container {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.mobile-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape orientation adjustments */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.country-dropdown--mobile {
|
||||
max-height: 90vh !important;
|
||||
width: 60vw !important;
|
||||
max-width: 500px !important;
|
||||
}
|
||||
|
||||
.country-list--mobile {
|
||||
max-height: calc(75vh - 120px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* High DPI displays */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.country-flag,
|
||||
.list-flag {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
}
|
||||
|
||||
/* iOS specific fixes */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.phone-input-wrapper--mobile .phone-text-field :deep(.v-field__input) {
|
||||
|
|
@ -719,79 +580,22 @@ watch(() => props.modelValue, (newValue) => {
|
|||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.country-dropdown--mobile {
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
.search-input :deep(.v-field__input) {
|
||||
font-size: 16px !important;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
.country-list {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
/* Android specific fixes */
|
||||
@media (pointer: coarse) {
|
||||
.country-item--mobile {
|
||||
min-height: 56px !important; /* Material Design touch target */
|
||||
}
|
||||
|
||||
.country-selector--mobile {
|
||||
min-height: 48px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility improvements for mobile */
|
||||
/* Accessibility improvements */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.country-item--mobile,
|
||||
.country-selector--mobile {
|
||||
.country-item,
|
||||
.country-selector,
|
||||
.dropdown-icon {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.country-dropdown--mobile {
|
||||
backdrop-filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode for mobile */
|
||||
@media (prefers-contrast: high) {
|
||||
.country-dropdown--mobile {
|
||||
border: 3px solid rgb(var(--v-theme-outline));
|
||||
}
|
||||
|
||||
.country-item--mobile {
|
||||
border-bottom: 1px solid rgb(var(--v-theme-outline));
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
border-bottom: 2px solid rgb(var(--v-theme-outline));
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.country-dropdown {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.country-dropdown--mobile {
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
/* Safe area handling for notched devices */
|
||||
@supports (padding: max(0px)) {
|
||||
.country-dropdown--mobile {
|
||||
padding-top: max(16px, env(safe-area-inset-top));
|
||||
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
||||
padding-left: max(16px, env(safe-area-inset-left));
|
||||
padding-right: max(16px, env(safe-area-inset-right));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
/**
|
||||
* Unified Mobile Detection Composable
|
||||
* Provides consistent mobile detection across the app
|
||||
*/
|
||||
|
||||
export interface MobileDetectionState {
|
||||
isMobile: boolean;
|
||||
isSafari: boolean;
|
||||
isMobileSafari: boolean;
|
||||
isIOS: boolean;
|
||||
isAndroid: boolean;
|
||||
safariVersion?: number;
|
||||
viewportHeight: number;
|
||||
isInitialized: boolean;
|
||||
}
|
||||
|
||||
// Global state to ensure single source of truth
|
||||
const globalState = reactive<MobileDetectionState>({
|
||||
isMobile: false,
|
||||
isSafari: false,
|
||||
isMobileSafari: false,
|
||||
isIOS: false,
|
||||
isAndroid: false,
|
||||
safariVersion: undefined,
|
||||
viewportHeight: 0,
|
||||
isInitialized: false
|
||||
});
|
||||
|
||||
// Track if listeners are already set up
|
||||
let listenersSetup = false;
|
||||
|
||||
export const useMobileDetection = () => {
|
||||
// Initialize detection on first use
|
||||
if (!globalState.isInitialized && typeof window !== 'undefined') {
|
||||
detectDevice();
|
||||
globalState.isInitialized = true;
|
||||
|
||||
// Set up listeners only once globally
|
||||
if (!listenersSetup) {
|
||||
setupListeners();
|
||||
listenersSetup = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Return readonly state to prevent external modifications
|
||||
return readonly(globalState);
|
||||
};
|
||||
|
||||
function detectDevice() {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
const userAgent = navigator.userAgent;
|
||||
|
||||
// Detect mobile
|
||||
globalState.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
||||
|
||||
// Detect iOS
|
||||
globalState.isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream;
|
||||
|
||||
// Detect Android
|
||||
globalState.isAndroid = /Android/i.test(userAgent);
|
||||
|
||||
// Detect Safari
|
||||
globalState.isSafari = /^((?!chrome|android).)*safari/i.test(userAgent);
|
||||
|
||||
// Detect Mobile Safari specifically
|
||||
globalState.isMobileSafari = globalState.isIOS && globalState.isSafari;
|
||||
|
||||
// Extract Safari version
|
||||
if (globalState.isSafari) {
|
||||
const match = userAgent.match(/Version\/(\d+)/);
|
||||
if (match) {
|
||||
globalState.safariVersion = parseInt(match[1]);
|
||||
}
|
||||
}
|
||||
|
||||
// Set initial viewport height
|
||||
globalState.viewportHeight = window.innerHeight;
|
||||
}
|
||||
|
||||
function setupListeners() {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
let resizeTimeout: NodeJS.Timeout;
|
||||
let lastHeight = window.innerHeight;
|
||||
|
||||
const handleResize = () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
|
||||
// Debounce and only update if height actually changed
|
||||
resizeTimeout = setTimeout(() => {
|
||||
const newHeight = window.innerHeight;
|
||||
|
||||
// Only update if there's a significant change (more than 20px)
|
||||
// This prevents minor fluctuations from triggering updates
|
||||
if (Math.abs(newHeight - lastHeight) > 20) {
|
||||
lastHeight = newHeight;
|
||||
globalState.viewportHeight = newHeight;
|
||||
|
||||
// Update CSS custom property for mobile Safari
|
||||
if (globalState.isMobileSafari) {
|
||||
const vh = newHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
}
|
||||
}
|
||||
}, 150); // Increased debounce time
|
||||
};
|
||||
|
||||
// Add resize listener with passive option for better performance
|
||||
window.addEventListener('resize', handleResize, { passive: true });
|
||||
|
||||
// Also listen for orientation changes on mobile
|
||||
if (globalState.isMobile) {
|
||||
window.addEventListener('orientationchange', () => {
|
||||
// Wait for orientation change to complete
|
||||
setTimeout(handleResize, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// Clean up on app unmount (if needed)
|
||||
if (typeof window !== 'undefined') {
|
||||
const cleanup = () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (globalState.isMobile) {
|
||||
window.removeEventListener('orientationchange', handleResize);
|
||||
}
|
||||
};
|
||||
|
||||
// Store cleanup function for manual cleanup if needed
|
||||
(window as any).__mobileDetectionCleanup = cleanup;
|
||||
}
|
||||
}
|
||||
|
||||
// Export helper functions
|
||||
export const isMobileSafari = () => globalState.isMobileSafari;
|
||||
export const isMobile = () => globalState.isMobile;
|
||||
export const isIOS = () => globalState.isIOS;
|
||||
export const getViewportHeight = () => globalState.viewportHeight;
|
||||
|
|
@ -153,21 +153,24 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
getOptimizedClasses,
|
||||
applyMobileSafariFixes
|
||||
} from '~/utils/mobile-safari-utils';
|
||||
import { useMobileDetection } from '~/composables/useMobileDetection';
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
middleware: 'guest'
|
||||
});
|
||||
|
||||
// Use unified mobile detection
|
||||
const mobileDetection = useMobileDetection();
|
||||
|
||||
// Mobile Safari optimization classes
|
||||
const containerClasses = computed(() => [
|
||||
'password-setup-page',
|
||||
...getOptimizedClasses()
|
||||
].join(' '));
|
||||
const containerClasses = computed(() => {
|
||||
const classes = ['password-setup-page'];
|
||||
if (mobileDetection.isMobile) classes.push('is-mobile');
|
||||
if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
|
||||
if (mobileDetection.isIOS) classes.push('is-ios');
|
||||
return classes.join(' ');
|
||||
});
|
||||
|
||||
// Reactive state
|
||||
const loading = ref(false);
|
||||
|
|
@ -300,13 +303,8 @@ const setupPassword = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
// Apply mobile Safari fixes
|
||||
// Component initialization
|
||||
onMounted(() => {
|
||||
// Apply mobile Safari fixes
|
||||
if (typeof window !== 'undefined') {
|
||||
applyMobileSafariFixes();
|
||||
}
|
||||
|
||||
console.log('[setup-password] Password setup page loaded for:', email.value);
|
||||
|
||||
// Check if we have required parameters
|
||||
|
|
|
|||
|
|
@ -91,10 +91,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
getOptimizedClasses,
|
||||
applyMobileSafariFixes
|
||||
} from '~/utils/mobile-safari-utils';
|
||||
import { useMobileDetection } from '~/composables/useMobileDetection';
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
|
|
@ -106,11 +103,17 @@ const route = useRoute();
|
|||
const email = computed(() => route.query.email as string || '');
|
||||
const partialWarning = computed(() => route.query.warning === 'partial');
|
||||
|
||||
// Use unified mobile detection
|
||||
const mobileDetection = useMobileDetection();
|
||||
|
||||
// Mobile Safari optimization classes
|
||||
const containerClasses = computed(() => [
|
||||
'verification-success',
|
||||
...getOptimizedClasses()
|
||||
].join(' '));
|
||||
const containerClasses = computed(() => {
|
||||
const classes = ['verification-success'];
|
||||
if (mobileDetection.isMobile) classes.push('is-mobile');
|
||||
if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
|
||||
if (mobileDetection.isIOS) classes.push('is-ios');
|
||||
return classes.join(' ');
|
||||
});
|
||||
|
||||
// Setup password URL for Keycloak - Fixed URL structure
|
||||
const setupPasswordUrl = computed(() => {
|
||||
|
|
@ -144,13 +147,8 @@ const goToPasswordSetup = () => {
|
|||
});
|
||||
};
|
||||
|
||||
// Apply mobile Safari fixes and track verification
|
||||
// Track verification
|
||||
onMounted(() => {
|
||||
// Apply mobile Safari fixes
|
||||
if (typeof window !== 'undefined') {
|
||||
applyMobileSafariFixes();
|
||||
}
|
||||
|
||||
console.log('[verify-success] Email verification completed', {
|
||||
email: email.value,
|
||||
partialWarning: partialWarning.value,
|
||||
|
|
|
|||
|
|
@ -121,21 +121,24 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
getOptimizedClasses,
|
||||
applyMobileSafariFixes
|
||||
} from '~/utils/mobile-safari-utils';
|
||||
import { useMobileDetection } from '~/composables/useMobileDetection';
|
||||
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
middleware: 'guest'
|
||||
});
|
||||
|
||||
// Use unified mobile detection
|
||||
const mobileDetection = useMobileDetection();
|
||||
|
||||
// Mobile Safari optimization classes
|
||||
const containerClasses = computed(() => [
|
||||
'verification-page',
|
||||
...getOptimizedClasses()
|
||||
].join(' '));
|
||||
const containerClasses = computed(() => {
|
||||
const classes = ['verification-page'];
|
||||
if (mobileDetection.isMobile) classes.push('is-mobile');
|
||||
if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
|
||||
if (mobileDetection.isIOS) classes.push('is-ios');
|
||||
return classes.join(' ');
|
||||
});
|
||||
|
||||
// Reactive state
|
||||
const verifying = ref(true);
|
||||
|
|
@ -202,13 +205,8 @@ const retryVerification = () => {
|
|||
verifyEmail();
|
||||
};
|
||||
|
||||
// Apply mobile Safari fixes and start verification
|
||||
// Start verification on mount
|
||||
onMounted(() => {
|
||||
// Apply mobile Safari fixes
|
||||
if (typeof window !== 'undefined') {
|
||||
applyMobileSafariFixes();
|
||||
}
|
||||
|
||||
console.log('[auth/verify] Starting email verification with token:', token.value?.substring(0, 20) + '...');
|
||||
|
||||
// Start verification process
|
||||
|
|
|
|||
|
|
@ -209,14 +209,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import type { RegistrationFormData, RecaptchaConfig, RegistrationConfig } from '~/utils/types';
|
||||
import {
|
||||
getDeviceInfo,
|
||||
needsPerformanceOptimization,
|
||||
shouldDisableBackdropFilter,
|
||||
getOptimizedClasses,
|
||||
applyMobileSafariFixes,
|
||||
debounce
|
||||
} from '~/utils/mobile-safari-utils';
|
||||
import { useMobileDetection } from '~/composables/useMobileDetection';
|
||||
|
||||
// Declare global grecaptcha interface for TypeScript
|
||||
declare global {
|
||||
|
|
@ -233,10 +226,8 @@ definePageMeta({
|
|||
layout: false
|
||||
});
|
||||
|
||||
// Mobile Safari optimization flags
|
||||
const deviceInfo = ref(getDeviceInfo());
|
||||
const performanceMode = ref(needsPerformanceOptimization());
|
||||
const disableBackdropFilter = ref(shouldDisableBackdropFilter());
|
||||
// Use unified mobile detection
|
||||
const mobileDetection = useMobileDetection();
|
||||
|
||||
// Configs with fallback defaults
|
||||
const recaptchaConfig = ref<RecaptchaConfig>({ siteKey: '', secretKey: '' });
|
||||
|
|
@ -288,16 +279,22 @@ useHead({
|
|||
});
|
||||
|
||||
// Dynamic CSS classes based on device
|
||||
const containerClasses = computed(() => [
|
||||
'signup-container',
|
||||
...getOptimizedClasses()
|
||||
].join(' '));
|
||||
const containerClasses = computed(() => {
|
||||
const classes = ['signup-container'];
|
||||
if (mobileDetection.isMobile) classes.push('is-mobile');
|
||||
if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
|
||||
if (mobileDetection.isIOS) classes.push('is-ios');
|
||||
return classes.join(' ');
|
||||
});
|
||||
|
||||
const cardClasses = computed(() => [
|
||||
'signup-card',
|
||||
performanceMode.value ? 'performance-optimized' : '',
|
||||
disableBackdropFilter.value ? 'no-backdrop-filter' : ''
|
||||
].filter(Boolean).join(' '));
|
||||
const cardClasses = computed(() => {
|
||||
const classes = ['signup-card'];
|
||||
if (mobileDetection.isMobileSafari) {
|
||||
classes.push('performance-optimized');
|
||||
classes.push('no-backdrop-filter');
|
||||
}
|
||||
return classes.filter(Boolean).join(' ');
|
||||
});
|
||||
|
||||
// Form validation rules
|
||||
const nameRules = [
|
||||
|
|
@ -455,34 +452,35 @@ onMounted(async () => {
|
|||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
// Load configs without complex timeout logic
|
||||
Promise.all([
|
||||
// Load reCAPTCHA config
|
||||
$fetch('/api/recaptcha-config').then((response: any) => {
|
||||
// Load reCAPTCHA config
|
||||
$fetch('/api/recaptcha-config')
|
||||
.then((response: any) => {
|
||||
if (response?.success && response?.data?.siteKey) {
|
||||
recaptchaConfig.value.siteKey = response.data.siteKey;
|
||||
loadRecaptchaScript(response.data.siteKey);
|
||||
}
|
||||
}).catch(() => {
|
||||
})
|
||||
.catch(() => {
|
||||
// Silently fail for reCAPTCHA - not critical
|
||||
}),
|
||||
|
||||
// Load registration config
|
||||
$fetch('/api/registration-config').then((response: any) => {
|
||||
console.debug('reCAPTCHA config not available');
|
||||
});
|
||||
|
||||
// Load registration config
|
||||
$fetch('/api/registration-config')
|
||||
.then((response: any) => {
|
||||
if (response?.success) {
|
||||
registrationConfig.value = response.data;
|
||||
}
|
||||
}).catch(() => {
|
||||
})
|
||||
.catch(() => {
|
||||
// Use defaults if config fails to load
|
||||
console.debug('Using default registration config');
|
||||
registrationConfig.value = {
|
||||
membershipFee: 150,
|
||||
iban: 'MC58 1756 9000 0104 0050 1001 860',
|
||||
accountHolder: 'ASSOCIATION MONACO USA'
|
||||
};
|
||||
})
|
||||
]).catch(() => {
|
||||
// Global fallback - don't let errors cause page reload
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
// Prevent any errors from bubbling up and causing reload
|
||||
|
|
|
|||
|
|
@ -1,23 +1,43 @@
|
|||
/**
|
||||
* Mobile Safari Fixes Plugin
|
||||
* Applies mobile Safari specific optimizations on client side
|
||||
* Now uses unified mobile detection to prevent conflicts
|
||||
*/
|
||||
|
||||
import { applyMobileSafariFixes } from '~/utils/mobile-safari-utils';
|
||||
import { useMobileDetection } from '~/composables/useMobileDetection';
|
||||
|
||||
// Track if fixes have been applied to prevent duplicate execution
|
||||
let fixesApplied = false;
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
// Apply mobile Safari fixes on client-side mount
|
||||
if (typeof window !== 'undefined') {
|
||||
// Apply fixes immediately
|
||||
applyMobileSafariFixes();
|
||||
if (typeof window !== 'undefined' && !fixesApplied) {
|
||||
// Use the unified mobile detection composable
|
||||
const mobileDetection = useMobileDetection();
|
||||
|
||||
// Also apply on route changes (for SPA navigation)
|
||||
const router = useRouter();
|
||||
router.afterEach(() => {
|
||||
// Small delay to ensure DOM is ready
|
||||
nextTick(() => {
|
||||
applyMobileSafariFixes();
|
||||
});
|
||||
});
|
||||
// Apply initial fixes only for mobile Safari
|
||||
if (mobileDetection.isMobileSafari) {
|
||||
// Set initial viewport height CSS variable
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
|
||||
// Add optimization classes
|
||||
const classes = [];
|
||||
if (mobileDetection.isMobile) classes.push('is-mobile');
|
||||
if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
|
||||
if (mobileDetection.isIOS) classes.push('is-ios');
|
||||
|
||||
// Add classes to document element
|
||||
if (classes.length > 0) {
|
||||
document.documentElement.classList.add(...classes);
|
||||
}
|
||||
}
|
||||
|
||||
// Mark fixes as applied
|
||||
fixesApplied = true;
|
||||
}
|
||||
|
||||
// Note: We're NOT applying fixes on route changes anymore
|
||||
// as this was causing the reload loop. The composable handles
|
||||
// all necessary viewport updates.
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue