fixes

components/PhoneInputWrapper.vue

@@ -34,8 +34,6 @@
                 'country-selector--open': dropdownOpen,
                 'country-selector--mobile': isMobile
               }"
-              @click="toggleDropdown"
-              @touchstart="handleTouchStart"
             >
               <img
                 :src="flagUrl"

components/RegistrationSuccessDialog.vue

@@ -0,0 +1,335 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="$emit('update:model-value', $event)"
+    max-width="600"
+    persistent
+    scrollable
+  >
+    <v-card class="registration-success-card">
+      <v-card-title class="d-flex align-center pa-6 bg-success">
+        <v-icon class="mr-3 text-white" size="32">mdi-check-circle</v-icon>
+        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
+          Registration Successful!
+        </h2>
+      </v-card-title>
+
+      <v-card-text class="pa-6">
+        <!-- Success Message -->
+        <div class="text-center mb-6">
+          <v-avatar size="80" class="mb-4" color="success">
+            <v-icon size="48" color="white">mdi-account-check</v-icon>
+          </v-avatar>
+          
+          <h3 class="text-h6 mb-3">
+            Welcome to MonacoUSA Association!
+          </h3>
+          
+          <p class="text-body-1 mb-2">
+            Your membership application has been submitted successfully.
+          </p>
+          
+          <v-chip
+            v-if="memberData?.memberId"
+            color="success"
+            variant="outlined"
+            size="small"
+            class="ma-1"
+          >
+            <v-icon start size="14">mdi-identifier</v-icon>
+            Member ID: {{ memberData.memberId }}
+          </v-chip>
+        </div>
+
+        <v-divider class="mb-6" />
+
+        <!-- Next Steps -->
+        <div class="mb-6">
+          <h4 class="text-h6 mb-3 d-flex align-center">
+            <v-icon class="mr-2" color="primary">mdi-format-list-checks</v-icon>
+            Next Steps
+          </h4>
+          
+          <v-timeline density="compact" side="end">
+            <v-timeline-item
+              dot-color="success"
+              size="small"
+              icon="mdi-check"
+            >
+              <template #opposite>
+                <strong class="text-body-2">Step 1</strong>
+              </template>
+              <div class="mb-2">
+                <strong class="text-body-2">Registration Complete</strong>
+                <p class="text-body-2 text-medium-emphasis mb-0">
+                  Your account has been created in our system.
+                </p>
+              </div>
+            </v-timeline-item>
+
+            <v-timeline-item
+              dot-color="warning"
+              size="small"
+              icon="mdi-email"
+            >
+              <template #opposite>
+                <strong class="text-body-2">Step 2</strong>
+              </template>
+              <div class="mb-2">
+                <strong class="text-body-2">Check Your Email</strong>
+                <p class="text-body-2 text-medium-emphasis mb-0">
+                  We've sent a verification email to <strong>{{ memberData?.email }}</strong>.
+                  Click the link in the email to verify your account and set your password.
+                </p>
+              </div>
+            </v-timeline-item>
+
+            <v-timeline-item
+              dot-color="info"
+              size="small"
+              icon="mdi-bank"
+            >
+              <template #opposite>
+                <strong class="text-body-2">Step 3</strong>
+              </template>
+              <div class="mb-2">
+                <strong class="text-body-2">Pay Membership Dues</strong>
+                <p class="text-body-2 text-medium-emphasis mb-0">
+                  Transfer your annual membership dues using the banking details below.
+                </p>
+              </div>
+            </v-timeline-item>
+
+            <v-timeline-item
+              dot-color="success"
+              size="small"
+              icon="mdi-account-check"
+            >
+              <template #opposite>
+                <strong class="text-body-2">Step 4</strong>
+              </template>
+              <div>
+                <strong class="text-body-2">Account Activation</strong>
+                <p class="text-body-2 text-medium-emphasis mb-0">
+                  Once payment is verified, your account will be activated and you can access the member portal.
+                </p>
+              </div>
+            </v-timeline-item>
+          </v-timeline>
+        </div>
+
+        <v-divider class="mb-6" />
+
+        <!-- Payment Information -->
+        <div class="payment-info mb-6">
+          <h4 class="text-h6 mb-3 d-flex align-center">
+            <v-icon class="mr-2" color="primary">mdi-bank</v-icon>
+            Payment Instructions
+          </h4>
+          
+          <v-card variant="outlined" class="pa-4" color="primary-lighten-5">
+            <v-row dense>
+              <v-col cols="12" sm="4">
+                <span class="text-body-2 font-weight-bold">Amount:</span>
+              </v-col>
+              <v-col cols="12" sm="8">
+                <span class="text-body-1 font-weight-bold">€{{ paymentInfo?.membershipFee || '50' }}/year</span>
+              </v-col>
+            </v-row>
+            
+            <v-row dense v-if="paymentInfo?.iban" class="mb-2">
+              <v-col cols="12" sm="4">
+                <span class="text-body-2 font-weight-bold">IBAN:</span>
+              </v-col>
+              <v-col cols="12" sm="8">
+                <div class="d-flex align-center">
+                  <span class="text-body-2 font-family-monospace mr-2">{{ paymentInfo.iban }}</span>
+                  <v-btn
+                    icon="mdi-content-copy"
+                    size="x-small"
+                    variant="text"
+                    @click="copyToClipboard(paymentInfo.iban)"
+                    :title="'Copy IBAN'"
+                  />
+                </div>
+              </v-col>
+            </v-row>
+            
+            <v-row dense v-if="paymentInfo?.accountHolder">
+              <v-col cols="12" sm="4">
+                <span class="text-body-2 font-weight-bold">Account:</span>
+              </v-col>
+              <v-col cols="12" sm="8">
+                <span class="text-body-2">{{ paymentInfo.accountHolder }}</span>
+              </v-col>
+            </v-row>
+
+            <v-row dense>
+              <v-col cols="12" sm="4">
+                <span class="text-body-2 font-weight-bold">Reference:</span>
+              </v-col>
+              <v-col cols="12" sm="8">
+                <span class="text-body-2">Member {{ memberData?.memberId || 'Registration' }}</span>
+              </v-col>
+            </v-row>
+          </v-card>
+        </div>
+
+        <!-- Important Notes -->
+        <v-alert
+          type="info"
+          variant="tonal"
+          class="mb-4"
+        >
+          <template #title>Important Notes</template>
+          <ul class="text-body-2 ml-4">
+            <li>Check your spam folder if you don't receive the verification email within 10 minutes</li>
+            <li>Your membership will be activated within 2-3 business days after payment verification</li>
+            <li>Contact our administrators if you need assistance with the verification process</li>
+          </ul>
+        </v-alert>
+
+        <!-- Copy Notification -->
+        <v-snackbar
+          v-model="showCopyNotification"
+          timeout="2000"
+          color="success"
+          location="bottom"
+        >
+          IBAN copied to clipboard!
+        </v-snackbar>
+      </v-card-text>
+
+      <v-card-actions class="pa-6 pt-0">
+        <v-spacer />
+        <v-btn
+          variant="outlined"
+          @click="closeDialog"
+          class="mr-3"
+        >
+          Close
+        </v-btn>
+        <v-btn
+          color="primary"
+          @click="goToLogin"
+        >
+          <v-icon start>mdi-login</v-icon>
+          Go to Login
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: boolean;
+  memberData?: {
+    memberId: string;
+    email: string;
+  };
+  paymentInfo?: {
+    membershipFee: number;
+    iban: string;
+    accountHolder: string;
+  };
+}
+
+interface Emits {
+  (e: 'update:model-value', value: boolean): void;
+  (e: 'go-to-login'): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const showCopyNotification = ref(false);
+
+// Methods
+const closeDialog = () => {
+  emit('update:model-value', false);
+};
+
+const goToLogin = () => {
+  emit('go-to-login');
+  closeDialog();
+};
+
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    showCopyNotification.value = true;
+  } catch (error) {
+    console.error('Failed to copy to clipboard:', error);
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textArea);
+    showCopyNotification.value = true;
+  }
+};
+</script>
+
+<style scoped>
+.registration-success-card {
+  border-radius: 16px !important;
+}
+
+.bg-success {
+  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
+}
+
+.payment-info .v-card {
+  border-radius: 12px !important;
+}
+
+/* Timeline styling */
+.v-timeline :deep(.v-timeline-item__body) {
+  padding-bottom: 16px;
+}
+
+.v-timeline :deep(.v-timeline-item__opposite) {
+  padding-inline-end: 16px;
+}
+
+/* Copy button styling */
+.v-btn--size-x-small {
+  min-width: 24px !important;
+  width: 24px;
+  height: 24px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .v-card-title {
+    padding: 16px !important;
+  }
+  
+  .v-card-text {
+    padding: 16px !important;
+  }
+  
+  .v-card-actions {
+    padding: 16px !important;
+    padding-top: 0 !important;
+  }
+  
+  .v-timeline :deep(.v-timeline-item__opposite) {
+    display: none;
+  }
+}
+
+/* Print styles (if user wants to print) */
+@media print {
+  .v-card-actions {
+    display: none;
+  }
+  
+  .payment-info .v-card {
+    border: 2px solid #ddd !important;
+  }
+}
+</style>

pages/signup.vue

@@ -144,16 +144,6 @@
                   {{ errorMessage }}
                 </v-alert>
 
-                <!-- Success Alert -->
-                <v-alert
-                  v-if="successMessage"
-                  type="success"
-                  variant="tonal"
-                  class="mb-4"
-                >
-                  <v-alert-title>Registration Successful!</v-alert-title>
-                  {{ successMessage }}
-                </v-alert>
 
                 <v-btn
                   type="submit"
@@ -224,6 +214,14 @@
         </v-col>
       </v-row>
     </v-container>
+
+    <!-- Registration Success Dialog -->
+    <RegistrationSuccessDialog
+      v-model="showSuccessDialog"
+      :member-data="registrationResult"
+      :payment-info="registrationConfig"
+      @go-to-login="goToLogin"
+    />
   </div>
 </template>
 
@@ -232,8 +230,7 @@ import type { RegistrationFormData, RecaptchaConfig, RegistrationConfig } from '
 
 // Page metadata
 definePageMeta({
-  layout: false,
+  layout: false
-  middleware: 'guest'
 });
 
 // Head configuration
@@ -271,6 +268,10 @@ const recaptchaToken = ref('');
 const successMessage = ref('');
 const errorMessage = ref('');
 
+// Success dialog state
+const showSuccessDialog = ref(false);
+const registrationResult = ref<{ memberId: string; email: string } | null>(null);
+
 // Configs
 const recaptchaConfig = ref<RecaptchaConfig>({ siteKey: '', secretKey: '' });
 const registrationConfig = ref<RegistrationConfig>({
@@ -357,7 +358,15 @@ async function submitRegistration() {
     }) as any;
 
     if (response?.success) {
-      successMessage.value = response.message || 'Registration successful!';
+      // Set registration result data for dialog
+      registrationResult.value = {
+        memberId: response.data?.memberId || 'N/A',
+        email: form.value.email
+      };
+      
+      // Show success dialog instead of just alert
+      showSuccessDialog.value = true;
+      
       // Reset form by resetting individual refs
       firstName.value = '';
       lastName.value = '';
@@ -383,6 +392,11 @@ async function submitRegistration() {
   }
 }
 
+// Navigation methods
+const goToLogin = () => {
+  navigateTo('/login');
+};
+
 // Load configurations on mount
 onMounted(async () => {
   try {

server/api/admin/recaptcha-config.post.ts

@@ -1,3 +1,5 @@
+import { createSessionManager } from '~/server/utils/session';
+
 export default defineEventHandler(async (event) => {
   console.log('[api/admin/recaptcha-config.post] =========================');
   console.log('[api/admin/recaptcha-config.post] POST /api/admin/recaptcha-config - Save reCAPTCHA configuration');

server/api/admin/registration-config.post.ts

@@ -1,3 +1,5 @@
+import { createSessionManager } from '~/server/utils/session';
+
 export default defineEventHandler(async (event) => {
   console.log('[api/admin/registration-config.post] =========================');
   console.log('[api/admin/registration-config.post] POST /api/admin/registration-config - Save registration configuration');