2026.06.05 frontend javítgatás és új belépési logika megvalósítva

frontend/src/views/CompleteKycView.vue

@@ -79,10 +79,10 @@
           </div>
         </div>
 
-        <!-- ==================== STEP 2: Address ==================== -->
+        <!-- ==================== STEP 2: Address (Soft KYC) ==================== -->
         <div v-if="currentStep === 2">
           <h2 class="text-xl font-semibold text-white mb-1">Lakcím adatok</h2>
-          <p class="text-white/40 text-sm mb-6">Pontos cím a garázs és flotta kezeléshez</p>
+          <p class="text-white/40 text-sm mb-6">Csak az irányítószám és város kötelező <span class="text-[#D4AF37]">(Soft KYC)</span></p>
 
           <div class="space-y-4">
             <!-- Country selector (EU-ready) -->
@@ -141,7 +141,7 @@
 
             <div class="grid grid-cols-3 gap-3">
               <div class="col-span-2">
-                <label class="block text-sm text-white/60 mb-1">Utca neve</label>
+                <label class="block text-sm text-white/60 mb-1">Utca neve <span class="text-white/20">(opcionális)</span></label>
                 <input
                   v-model="kycForm.address_street_name"
                   type="text"
@@ -150,7 +150,7 @@
                 />
               </div>
               <div>
-                <label class="block text-sm text-white/60 mb-1">Típus</label>
+                <label class="block text-sm text-white/60 mb-1">Típus <span class="text-white/20">(opcionális)</span></label>
                 <select
                   v-model="kycForm.address_street_type"
                   class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-[#00E5A0] focus:ring-1 focus:ring-[#00E5A0]/30 transition"
@@ -171,12 +171,13 @@
             </div>
 
             <div>
-              <label class="block text-sm text-white/60 mb-1">Házszám</label>
+              <label class="block text-sm text-white/60 mb-1">Házszám <span class="text-white/20">(opcionális)</span></label>
               <input
                 v-model="kycForm.address_house_number"
                 type="text"
                 placeholder="10/A"
                 class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-white placeholder-white/30 focus:outline-none focus:border-[#00E5A0] focus:ring-1 focus:ring-[#00E5A0]/30 transition"
+                @keydown.tab.exact="handleHouseNumberTab"
               />
             </div>
           </div>
@@ -185,7 +186,7 @@
         <!-- ==================== STEP 3: Security ==================== -->
         <div v-if="currentStep === 3">
           <h2 class="text-xl font-semibold text-white mb-1">Okmányok</h2>
-          <p class="text-white/40 text-sm mb-6">Személyi igazolvány és jogosítvány adatok</p>
+          <p class="text-white/40 text-sm mb-6">Személyi igazolvány és jogosítvány adatok <span class="text-[#D4AF37]">(opcionális)</span></p>
 
           <div class="space-y-6">
             <!-- Identity Documents -->
@@ -193,8 +194,8 @@
               <!-- ID Card -->
               <div class="bg-white/5 rounded-lg p-4 mb-3 border border-white/5">
                 <div class="flex items-center gap-2 mb-3">
-                  <div class="w-2 h-2 rounded-full bg-[#00E5A0]" />
-                  <span class="text-sm text-white/80">Személyi igazolvány</span>
+                  <div class="w-2 h-2 rounded-full bg-white/20" />
+                  <span class="text-sm text-white/50">Személyi igazolvány <span class="text-white/20">(opcionális)</span></span>
                 </div>
                 <div class="grid grid-cols-2 gap-3">
                   <div>
@@ -288,6 +289,7 @@
           <button
             v-if="currentStep < 3"
             @click="nextStep"
+            ref="nextButton"
             class="px-6 py-2.5 rounded-lg bg-[#00E5A0] text-[#04151F] font-semibold hover:bg-[#00E5A0]/90 hover:shadow-lg hover:shadow-[#00E5A0]/20 transition-all text-sm"
           >
             Tovább →
@@ -330,7 +332,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 
@@ -348,6 +350,7 @@ const currentStep = ref(1)
 const isSubmitting = ref(false)
 const errorMessage = ref<string | null>(null)
 const isCityLoading = ref(false)
+const nextButton = ref<HTMLButtonElement | null>(null)
 
 // ── KYC Form (minimal — only DB-required fields) ──
 const kycForm = reactive({
@@ -367,7 +370,7 @@ const kycForm = reactive({
   preferred_currency: 'HUF',
 })
 
-// ── Debounced ZIP → City auto-fill via zippopotam.us ──
+// ── Debounced ZIP → City auto-fill via internal API ──
 let zipTimeout: ReturnType<typeof setTimeout>
 watch(
   () => kycForm.address_zip,
@@ -377,11 +380,11 @@ watch(
       isCityLoading.value = true
       zipTimeout = setTimeout(async () => {
         try {
-          const country = kycForm.region_code.toLowerCase()
-          const response = await fetch(`https://api.zippopotam.us/${country}/${newZip}`)
+          const country = kycForm.region_code || 'HU'
+          const response = await fetch(`/api/v1/system/zip-lookup?country_code=${country}&zip_code=${newZip}`)
           if (response.ok) {
             const data = await response.json()
-            kycForm.address_city = data.places[0]['place name']
+            kycForm.address_city = data.city
           }
         } catch (error) {
           console.error('Cím lekérdezési hiba:', error)
@@ -407,7 +410,7 @@ function stepCircleClass(idx: number): string {
   return 'bg-white/5 text-white/30 border border-white/10'
 }
 
-// ── Simple step validation ──
+// ── Simple step validation (Soft KYC) ──
 function validateStep(): boolean {
   errorMessage.value = null
 
@@ -419,16 +422,11 @@ function validateStep(): boolean {
   if (currentStep.value === 2) {
     if (!kycForm.address_zip) { errorMessage.value = 'Kérlek add meg az irányítószámot.'; return false }
     if (!kycForm.address_city) { errorMessage.value = 'Kérlek add meg a várost.'; return false }
-    if (!kycForm.address_street_name) { errorMessage.value = 'Kérlek add meg az utca nevét.'; return false }
-    if (!kycForm.address_street_type) { errorMessage.value = 'Kérlek válaszd ki az utca típusát.'; return false }
-    if (!kycForm.address_house_number) { errorMessage.value = 'Kérlek add meg a házszámot.'; return false }
-  }
-
-  if (currentStep.value === 3) {
-    if (!kycForm.identity_docs.ID_CARD.number) { errorMessage.value = 'Kérlek add meg a személyi igazolvány számát.'; return false }
-    if (!kycForm.identity_docs.ID_CARD.expiry_date) { errorMessage.value = 'Kérlek add meg a személyi lejárati dátumát.'; return false }
+    // Soft KYC: Utca, típus, házszám már NEM kötelező
   }
 
+  // Step 3 has no required validations anymore (Soft KYC - all optional)
+  
   return true
 }
 
@@ -447,6 +445,16 @@ function prevStep() {
   }
 }
 
+// ── Tab order fix: Házszám → Tovább gomb ──
+function handleHouseNumberTab(event: KeyboardEvent) {
+  if (currentStep.value === 2 && nextButton.value) {
+    event.preventDefault()
+    nextTick(() => {
+      nextButton.value?.focus()
+    })
+  }
+}
+
 // ── Submit ──
 async function handleSubmit() {
   if (!validateStep()) return
@@ -455,34 +463,42 @@ async function handleSubmit() {
   errorMessage.value = null
 
   try {
-    // Build the minimal payload matching UserKYCComplete schema
-    const payload = {
-      last_name: kycForm.last_name,
+    // Build the payload matching UserKYCComplete schema (Soft KYC)
+    const payload: any = {
       first_name: kycForm.first_name,
+      last_name: kycForm.last_name,
       region_code: kycForm.region_code,
       address_zip: kycForm.address_zip,
       address_city: kycForm.address_city,
-      address_street_name: kycForm.address_street_name,
-      address_street_type: kycForm.address_street_type,
-      address_house_number: kycForm.address_house_number,
-      identity_docs: {
-        ID_CARD: {
-          number: kycForm.identity_docs.ID_CARD.number,
-          expiry_date: kycForm.identity_docs.ID_CARD.expiry_date,
-        },
-        ...(kycForm.identity_docs.LICENSE.number
-          ? {
-              LICENSE: {
-                number: kycForm.identity_docs.LICENSE.number,
-                expiry_date: kycForm.identity_docs.LICENSE.expiry_date,
-              },
-            }
-          : {}),
-      },
       preferred_language: kycForm.preferred_language,
       preferred_currency: kycForm.preferred_currency,
     }
 
+    // Soft KYC: Csak akkor küldjük a részletes címet, ha ki van töltve
+    if (kycForm.address_street_name) payload.address_street_name = kycForm.address_street_name
+    if (kycForm.address_street_type) payload.address_street_type = kycForm.address_street_type
+    if (kycForm.address_house_number) payload.address_house_number = kycForm.address_house_number
+
+    // Only include identity_docs if at least one document is filled
+    const hasIdCard = kycForm.identity_docs.ID_CARD.number || kycForm.identity_docs.ID_CARD.expiry_date
+    const hasLicense = kycForm.identity_docs.LICENSE.number || kycForm.identity_docs.LICENSE.expiry_date
+
+    if (hasIdCard || hasLicense) {
+      payload.identity_docs = {}
+      if (hasIdCard) {
+        payload.identity_docs.ID_CARD = {
+          number: kycForm.identity_docs.ID_CARD.number || null,
+          expiry_date: kycForm.identity_docs.ID_CARD.expiry_date || null,
+        }
+      }
+      if (hasLicense) {
+        payload.identity_docs.LICENSE = {
+          number: kycForm.identity_docs.LICENSE.number || null,
+          expiry_date: kycForm.identity_docs.LICENSE.expiry_date || null,
+        }
+      }
+    }
+
     await authStore.completeKyc(payload)
 
     // Navigate to dashboard on success

frontend/src/views/DashboardView.vue

@@ -3,6 +3,22 @@
     <!-- Garage Background Image (no dark overlay — bright, light garage) -->
     <div class="fixed inset-0 z-0">
       <div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
+
+      <!-- ── 3D Wall Text: Szerviznaptár (left wall calendar area) ── -->
+      <div
+        class="absolute top-[18%] left-[12%] text-2xl font-bold text-[#04151F] opacity-80 uppercase pointer-events-none"
+        style="transform: perspective(500px) rotateY(2deg) rotateX(-1deg);"
+      >
+        {{ t('menu.calendar') }}
+      </div>
+
+      <!-- ── 3D Wall Text: SERVICE FINDER (center wall logo area) ── -->
+      <div
+        class="absolute top-[35%] left-[45%] text-4xl font-extrabold text-[#418890] tracking-widest opacity-90 pointer-events-none"
+        style="transform: perspective(800px) rotateY(-5deg);"
+      >
+        SERVICE FINDER
+      </div>
     </div>
 
     <!-- ── Spatial UI Layer: Hotspots (always visible, even in Zen mode) ── -->
@@ -137,15 +153,15 @@
       </svg>
     </button>
 
+    <!-- ── Top Navbar (always visible, even in Zen mode) ──────────────── -->
+    <DashboardHeader
+      :first-name="authStore.user?.first_name || 'Vendég'"
+      subtitle="Irányítópultod és járműveid áttekintése"
+    />
+
     <!-- ── Content (above the overlay) with fade transition ── -->
     <Transition name="fade">
       <div v-if="isUiVisible" class="relative z-10">
-        <!-- ── Top Navbar ──────────────────────────────────────────────── -->
-        <DashboardHeader
-          :first-name="authStore.user?.first_name || 'Vendég'"
-          subtitle="Irányítópultod és járműveid áttekintése"
-        />
-
         <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
           <!-- ── Loading State ──────────────────────────────────────────── -->
           <div
@@ -250,10 +266,13 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '../stores/auth'
 import { useVehicleStore } from '../stores/vehicle'
 import DashboardHeader from '../components/DashboardHeader.vue'
 
+const { t } = useI18n()
+
 const authStore = useAuthStore()
 const vehicleStore = useVehicleStore()
 

frontend/src/views/LandingView.vue

@@ -17,13 +17,16 @@
           <span class="text-2xl font-extrabold tracking-wider hidden sm:block"><span class="text-white">SERVICE</span> <span class="text-[#418890]">FINDER</span></span>
         </router-link>
 
-        <!-- Right: "Garázs Nyitása" Button (Premium) -->
-        <button
-          @click="showLogin = true"
-          class="btn-premium px-6 py-2 text-sm"
-        >
-          Garázs Nyitása
-        </button>
+        <!-- Right: Language Switcher + "Garázs Nyitása" Button (Premium) -->
+        <div class="flex items-center gap-3">
+          <LanguageSwitcher />
+          <button
+            @click="showLogin = true"
+            class="btn-premium px-6 py-2 text-sm"
+          >
+            Garázs Nyitása
+          </button>
+        </div>
       </div>
     </header>
 
@@ -168,6 +171,7 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import Logo from '@/components/Logo.vue'
 import LoginModal from '@/components/LoginModal.vue'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 
 const showLogin = ref(false)
 const scrollY = ref(0)

frontend/src/views/ProfileView.vue

@@ -0,0 +1,784 @@
+<template>
+  <div class="relative min-h-screen text-white">
+    <!-- Background Image -->
+    <div class="fixed inset-0 z-0">
+      <div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
+    </div>
+
+    <!-- Header -->
+    <DashboardHeader
+      :first-name="authStore.user?.person?.first_name || authStore.user?.first_name || 'Vendég'"
+      subtitle="Profil beállítások"
+    />
+
+    <!-- Content -->
+    <div class="relative z-10 mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+      <!-- ── Account Info Card ──────────────────────────────────────────── -->
+      <div
+        class="relative mb-8 rounded-2xl border border-white/10 bg-black/40 p-6 backdrop-blur-xl shadow-xl shadow-black/20"
+      >
+        <!-- Close (X) Button -->
+        <button
+          type="button"
+          @click="router.push('/dashboard')"
+          class="absolute right-4 top-4 text-white/40 transition-colors duration-200 hover:text-red-400 cursor-pointer"
+          aria-label="Bezárás"
+        >
+          <svg
+            class="h-6 w-6"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
+        <div class="flex items-center gap-3 mb-6">
+          <svg class="w-6 h-6 text-[#00E5A0]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+          <h2 class="text-xl font-bold text-white">Fiók Adatok</h2>
+        </div>
+
+        <!-- Email (readonly) -->
+        <div class="mb-4">
+          <label class="mb-2 block text-sm text-white/50">Email</label>
+          <input
+            :value="authStore.user?.email || ''"
+            type="email"
+            readonly
+            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm cursor-not-allowed"
+          />
+        </div>
+
+        <!-- Change Password Button -->
+        <button
+          @click="showPasswordModal = true"
+          class="inline-flex items-center gap-2 rounded-xl bg-[#00E5A0] px-6 py-2.5 text-sm font-semibold text-black transition-all duration-200 hover:bg-[#00E5A0]/90 cursor-pointer"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+          Jelszó módosítása
+        </button>
+      </div>
+
+      <!-- ── Personal Data (KYC) Card ──────────────────────────────────── -->
+      <div
+        class="rounded-2xl border border-white/10 bg-black/40 p-6 backdrop-blur-xl shadow-xl shadow-black/20"
+      >
+        <div class="flex items-center gap-3 mb-6">
+          <svg class="w-6 h-6 text-[#00E5A0]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <h2 class="text-xl font-bold text-white">Személyes Adatok (KYC)</h2>
+        </div>
+
+        <!-- ── Edit/Save Buttons ── -->
+        <div class="flex justify-end gap-3 mb-4">
+          <button
+            v-if="!isEditing"
+            @click="startEditing"
+            class="inline-flex items-center gap-2 rounded-xl border border-[#00E5A0]/40 bg-[#00E5A0]/10 px-4 py-2 text-sm text-[#00E5A0] transition-all duration-200 hover:bg-[#00E5A0]/20 cursor-pointer"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+            Szerkesztés
+          </button>
+          <template v-if="isEditing">
+            <button
+              @click="cancelEditing"
+              class="rounded-xl border border-white/20 bg-white/5 px-4 py-2 text-sm text-white/70 transition-all duration-200 hover:bg-white/10 cursor-pointer"
+            >
+              Mégse
+            </button>
+            <button
+              @click="savePerson"
+              :disabled="isSaving"
+              class="inline-flex items-center gap-2 rounded-xl bg-[#00E5A0] px-4 py-2 text-sm text-black font-semibold transition-all duration-200 hover:bg-[#00E5A0]/90 disabled:opacity-50 cursor-pointer"
+            >
+              <svg v-if="isSaving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+              Mentés
+            </button>
+          </template>
+        </div>
+
+        <!-- ── Person Fields ── -->
+        <div class="grid grid-cols-1 gap-4 mb-4 sm:grid-cols-2">
+          <div>
+            <label class="mb-2 block text-sm text-white/50">Vezetéknév</label>
+            <input
+              v-if="isEditing"
+              v-model="editForm.last_name"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+              placeholder="Vezetéknév"
+            />
+            <div v-else class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium">
+              {{ person?.last_name || '—' }}
+            </div>
+          </div>
+          <div>
+            <label class="mb-2 block text-sm text-white/50">Keresztnév</label>
+            <input
+              v-if="isEditing"
+              v-model="editForm.first_name"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+              placeholder="Keresztnév"
+            />
+            <div v-else class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium">
+              {{ person?.first_name || '—' }}
+            </div>
+          </div>
+        </div>
+
+        <div class="mb-4">
+          <label class="mb-2 block text-sm text-white/50">Telefonszám</label>
+          <input
+            v-if="isEditing"
+            v-model="editForm.phone"
+            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+            placeholder="+36 20 123 4567"
+          />
+          <div v-else class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium">
+            {{ person?.phone || '—' }}
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 mb-4 sm:grid-cols-2">
+          <div>
+            <label class="mb-2 block text-sm text-white/50">Születési hely</label>
+            <input
+              v-if="isEditing"
+              v-model="editForm.birth_place"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+              placeholder="Születési hely"
+            />
+            <div v-else class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium">
+              {{ person?.birth_place || '—' }}
+            </div>
+          </div>
+          <div>
+            <label class="mb-2 block text-sm text-white/50">Születési dátum</label>
+            <input
+              v-if="isEditing"
+              v-model="editForm.birth_date"
+              type="date"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+            />
+            <div v-else class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium">
+              {{ formatDate(person?.birth_date) || '—' }}
+            </div>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 mb-4 sm:grid-cols-2">
+          <div>
+            <label class="mb-2 block text-sm text-white/50">Anyja vezetékneve</label>
+            <input
+              v-if="isEditing"
+              v-model="editForm.mothers_last_name"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+              placeholder="Anyja vezetékneve"
+            />
+            <div v-else class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium">
+              {{ person?.mothers_last_name || '—' }}
+            </div>
+          </div>
+          <div>
+            <label class="mb-2 block text-sm text-white/50">Anyja keresztneve</label>
+            <input
+              v-if="isEditing"
+              v-model="editForm.mothers_first_name"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+              placeholder="Anyja keresztneve"
+            />
+            <div v-else class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium">
+              {{ person?.mothers_first_name || '—' }}
+            </div>
+          </div>
+        </div>
+
+        <!-- ── Identity Docs Section ── -->
+        <div class="mb-4 p-4 rounded-xl border border-white/[0.06] bg-white/[0.03]">
+          <h3 class="text-sm font-semibold text-white/70 mb-3">Okmányok (Identity Docs)</h3>
+
+          <div v-if="isEditing" class="space-y-3">
+            <!-- ID Card -->
+            <div class="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+              <h4 class="text-xs font-semibold text-white/60 mb-2 uppercase tracking-wider">Személyi Igazolvány (ID_CARD)</h4>
+              <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <div>
+                  <label class="mb-1 block text-xs text-white/50">Szám</label>
+                  <input
+                    v-model="editForm.id_card_number"
+                    class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                    placeholder="Személyi ig. szám"
+                  />
+                </div>
+                <div>
+                  <label class="mb-1 block text-xs text-white/50">Lejárat</label>
+                  <input
+                    v-model="editForm.id_card_expiry"
+                    type="date"
+                    class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <!-- Driving License -->
+            <div class="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+              <h4 class="text-xs font-semibold text-white/60 mb-2 uppercase tracking-wider">Jogosítvány (LICENSE)</h4>
+              <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <div>
+                  <label class="mb-1 block text-xs text-white/50">Szám</label>
+                  <input
+                    v-model="editForm.license_number"
+                    class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                    placeholder="Jogosítvány szám"
+                  />
+                </div>
+                <div>
+                  <label class="mb-1 block text-xs text-white/50">Lejárat</label>
+                  <input
+                    v-model="editForm.license_expiry"
+                    type="date"
+                    class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  />
+                </div>
+              </div>
+              <div class="mt-3">
+                <label class="mb-1 block text-xs text-white/50">Kategóriák</label>
+                <input
+                  v-model="editForm.license_categories"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Pl. A, B, C"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div v-else class="space-y-3">
+            <!-- ID Card (read-only) -->
+            <div class="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+              <h4 class="text-xs font-semibold text-white/60 mb-2 uppercase tracking-wider">Személyi Igazolvány (ID_CARD)</h4>
+              <div class="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span class="text-white/50">Szám:</span>
+                  <span class="ml-2 text-white font-medium">{{ identityDocs?.ID_CARD?.number || '—' }}</span>
+                </div>
+                <div>
+                  <span class="text-white/50">Lejárat:</span>
+                  <span class="ml-2 text-white font-medium">{{ formatDate(identityDocs?.ID_CARD?.expiry_date) || '—' }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Driving License (read-only) -->
+            <div class="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+              <h4 class="text-xs font-semibold text-white/60 mb-2 uppercase tracking-wider">Jogosítvány (LICENSE)</h4>
+              <div class="grid grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span class="text-white/50">Szám:</span>
+                  <span class="ml-2 text-white font-medium">{{ identityDocs?.LICENSE?.number || '—' }}</span>
+                </div>
+                <div>
+                  <span class="text-white/50">Lejárat:</span>
+                  <span class="ml-2 text-white font-medium">{{ formatDate(identityDocs?.LICENSE?.expiry_date) || '—' }}</span>
+                </div>
+              </div>
+              <div class="mt-2 text-sm">
+                <span class="text-white/50">Kategóriák:</span>
+                <span class="ml-2 text-white font-medium">{{ identityDocs?.LICENSE?.categories || '—' }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── Address Section ── -->
+        <div class="mb-4 p-4 rounded-xl border border-white/[0.06] bg-white/[0.03]">
+          <h3 class="text-sm font-semibold text-white/70 mb-3">Lakcím adatok</h3>
+
+          <div v-if="isEditing" class="space-y-3">
+            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Irányítószám</label>
+                <input
+                  v-model="editForm.address_zip"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Irányítószám"
+                />
+              </div>
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Város</label>
+                <input
+                  v-model="editForm.address_city"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Város"
+                />
+              </div>
+            </div>
+            <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Utca</label>
+                <input
+                  v-model="editForm.address_street_name"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Utca"
+                />
+              </div>
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Közterület jellege</label>
+                <input
+                  v-model="editForm.address_street_type"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="utca, út, tér..."
+                />
+              </div>
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Házszám</label>
+                <input
+                  v-model="editForm.address_house_number"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Házszám"
+                />
+              </div>
+            </div>
+            <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Lépcsőház</label>
+                <input
+                  v-model="editForm.address_stairwell"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Lépcsőház"
+                />
+              </div>
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Emelet</label>
+                <input
+                  v-model="editForm.address_floor"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Emelet"
+                />
+              </div>
+              <div>
+                <label class="mb-1 block text-xs text-white/50">Ajtó</label>
+                <input
+                  v-model="editForm.address_door"
+                  class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                  placeholder="Ajtó"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div v-else class="text-sm space-y-1">
+            <p class="text-white font-medium">{{ address?.zip || '—' }} {{ address?.city || '' }}</p>
+            <p class="text-white font-medium">{{ address?.street_name || '' }} {{ address?.street_type || '' }} {{ address?.house_number || '' }}</p>
+            <p v-if="address?.stairwell || address?.floor || address?.door" class="text-white font-medium">
+              Lépcsőház: {{ address?.stairwell || '—' }}, Emelet: {{ address?.floor || '—' }}, Ajtó: {{ address?.door || '—' }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Success / Error message -->
+        <div
+          v-if="saveMessage"
+          class="mb-4 rounded-xl px-4 py-3 text-sm"
+          :class="saveMessageType === 'success' ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'"
+        >
+          {{ saveMessage }}
+        </div>
+      </div>
+
+      <!-- ── Back to Garage Button ─────────────────────────────────────── -->
+      <div class="mt-8 text-center">
+        <button
+          @click="router.push('/dashboard')"
+          class="inline-flex items-center gap-2 rounded-xl border border-white/[0.12] bg-white/[0.04] px-6 py-3 text-white/70 transition-all duration-200 hover:border-[#00E5A0]/40 hover:text-white hover:bg-white/[0.08] backdrop-blur-sm cursor-pointer"
+        >
+          <svg
+            class="h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="19" y1="12" x2="5" y2="12" />
+            <polyline points="12 19 5 12 12 5" />
+          </svg>
+          Vissza a Garázsba
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Change Password Modal ──────────────────────────────────────── -->
+    <Teleport to="body">
+      <div
+        v-if="showPasswordModal"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+        @click.self="closePasswordModal"
+      >
+        <div class="relative w-full max-w-md mx-4 rounded-2xl border border-white/10 bg-black/80 p-6 backdrop-blur-2xl shadow-2xl">
+          <!-- Modal Header -->
+          <div class="flex items-center justify-between mb-6">
+            <div class="flex items-center gap-3">
+              <svg class="w-6 h-6 text-[#00E5A0]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+              <h3 class="text-lg font-bold text-white">Jelszó módosítása</h3>
+            </div>
+            <button
+              @click="closePasswordModal"
+              class="text-white/40 transition-colors duration-200 hover:text-red-400 cursor-pointer"
+              aria-label="Bezárás"
+            >
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Modal Body -->
+          <div class="space-y-4">
+            <div>
+              <label class="mb-2 block text-sm text-white/50">Jelenlegi jelszó</label>
+              <input
+                v-model="passwordForm.currentPassword"
+                type="password"
+                class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                placeholder="••••••••"
+              />
+            </div>
+            <div>
+              <label class="mb-2 block text-sm text-white/50">Új jelszó</label>
+              <input
+                v-model="passwordForm.newPassword"
+                type="password"
+                class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                placeholder="••••••••"
+              />
+            </div>
+            <div>
+              <label class="mb-2 block text-sm text-white/50">Új jelszó újra</label>
+              <input
+                v-model="passwordForm.confirmPassword"
+                type="password"
+                class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white font-medium placeholder-white/30 backdrop-blur-sm focus:border-[#00E5A0]/50 focus:outline-none"
+                placeholder="••••••••"
+              />
+            </div>
+
+            <!-- Validation error -->
+            <div
+              v-if="passwordError"
+              class="rounded-xl px-4 py-3 text-sm bg-red-500/10 text-red-400 border border-red-500/20"
+            >
+              {{ passwordError }}
+            </div>
+
+            <!-- Success message -->
+            <div
+              v-if="passwordSuccess"
+              class="rounded-xl px-4 py-3 text-sm bg-green-500/10 text-green-400 border border-green-500/20"
+            >
+              {{ passwordSuccess }}
+            </div>
+          </div>
+
+          <!-- Modal Footer -->
+          <div class="flex justify-end gap-3 mt-6">
+            <button
+              @click="closePasswordModal"
+              class="rounded-xl border border-white/20 bg-white/5 px-4 py-2 text-sm text-white/70 transition-all duration-200 hover:bg-white/10 cursor-pointer"
+            >
+              Mégse
+            </button>
+            <button
+              @click="submitPasswordChange"
+              :disabled="isPasswordSaving"
+              class="inline-flex items-center gap-2 rounded-xl bg-[#00E5A0] px-6 py-2 text-sm text-black font-semibold transition-all duration-200 hover:bg-[#00E5A0]/90 disabled:opacity-50 cursor-pointer"
+            >
+              <svg v-if="isPasswordSaving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              Mentés
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '../stores/auth'
+import api from '../api/axios'
+import DashboardHeader from '../components/DashboardHeader.vue'
+
+const router = useRouter()
+const { t } = useI18n()
+const authStore = useAuthStore()
+
+// ── Computed helpers ──────────────────────────────────────────────────
+const person = computed(() => authStore.user?.person ?? null)
+const address = computed(() => person.value?.address ?? null)
+const identityDocs = computed(() => person.value?.identity_docs ?? null)
+const isCityLoading = ref(false)
+
+// ── Edit State ────────────────────────────────────────────────────────
+const isEditing = ref(false)
+const isSaving = ref(false)
+const saveMessage = ref('')
+const saveMessageType = ref<'success' | 'error'>('success')
+
+const editForm = reactive({
+  first_name: '',
+  last_name: '',
+  phone: '',
+  mothers_last_name: '',
+  mothers_first_name: '',
+  birth_place: '',
+  birth_date: '',
+  // Identity docs
+  id_card_number: '',
+  id_card_expiry: '',
+  license_number: '',
+  license_expiry: '',
+  license_categories: '',
+  // Address
+  address_zip: '',
+  address_city: '',
+  address_street_name: '',
+  address_street_type: '',
+  address_house_number: '',
+  address_stairwell: '',
+  address_floor: '',
+  address_door: '',
+  address_hrsz: '',
+})
+
+// ── Password Modal State ──────────────────────────────────────────────
+const showPasswordModal = ref(false)
+const isPasswordSaving = ref(false)
+const passwordError = ref('')
+const passwordSuccess = ref('')
+
+const passwordForm = reactive({
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+
+function formatDate(dateVal: string | null | undefined): string {
+  if (!dateVal) return ''
+  return dateVal.substring(0, 10)
+}
+
+function startEditing() {
+  const p = person.value
+  const a = address.value
+  const docs = identityDocs.value
+
+  editForm.first_name = p?.first_name || ''
+  editForm.last_name = p?.last_name || ''
+  editForm.phone = p?.phone || ''
+  editForm.mothers_last_name = p?.mothers_last_name || ''
+  editForm.mothers_first_name = p?.mothers_first_name || ''
+  editForm.birth_place = p?.birth_place || ''
+  editForm.birth_date = formatDate(p?.birth_date)
+
+  // Identity docs
+  editForm.id_card_number = docs?.ID_CARD?.number || ''
+  editForm.id_card_expiry = formatDate(docs?.ID_CARD?.expiry_date) || ''
+  editForm.license_number = docs?.LICENSE?.number || ''
+  editForm.license_expiry = formatDate(docs?.LICENSE?.expiry_date) || ''
+  editForm.license_categories = docs?.LICENSE?.categories || ''
+
+  // Address
+  editForm.address_zip = a?.zip || ''
+  editForm.address_city = a?.city || ''
+  editForm.address_street_name = a?.street_name || ''
+  editForm.address_street_type = a?.street_type || ''
+  editForm.address_house_number = a?.house_number || ''
+  editForm.address_stairwell = a?.stairwell || ''
+  editForm.address_floor = a?.floor || ''
+  editForm.address_door = a?.door || ''
+
+  saveMessage.value = ''
+  isEditing.value = true
+}
+
+function cancelEditing() {
+  isEditing.value = false
+  saveMessage.value = ''
+}
+
+// ── Debounced ZIP → City auto-fill via internal API ──
+let zipTimeout: ReturnType<typeof setTimeout>
+watch(
+  () => editForm.address_zip,
+  (newZip) => {
+    clearTimeout(zipTimeout)
+    if (newZip && newZip.length >= 3) {
+      isCityLoading.value = true
+      zipTimeout = setTimeout(async () => {
+        try {
+          const countryCode = 'HU' // Default to HU for now
+          const response = await api.get('/system/zip-lookup', {
+            params: { country_code: countryCode, zip_code: newZip }
+          })
+          if (response.data?.city) {
+            editForm.address_city = response.data.city
+          }
+        } catch (error) {
+          // Silently fail - user can type city manually
+          console.warn('Zip lookup failed:', error)
+        } finally {
+          isCityLoading.value = false
+        }
+      }, 600)
+    } else {
+      isCityLoading.value = false
+    }
+  }
+)
+
+function buildIdentityDocsPayload(): Record<string, any> | null {
+  const idCardNumber = editForm.id_card_number?.trim()
+  const idCardExpiry = editForm.id_card_expiry?.trim()
+  const licenseNumber = editForm.license_number?.trim()
+  const licenseExpiry = editForm.license_expiry?.trim()
+  const licenseCategories = editForm.license_categories?.trim()
+
+  if (!idCardNumber && !idCardExpiry && !licenseNumber && !licenseExpiry && !licenseCategories) {
+    return null
+  }
+
+  const payload: Record<string, any> = {}
+
+  if (idCardNumber || idCardExpiry) {
+    payload.ID_CARD = {}
+    if (idCardNumber) payload.ID_CARD.number = idCardNumber
+    if (idCardExpiry) payload.ID_CARD.expiry_date = idCardExpiry
+  }
+
+  if (licenseNumber || licenseExpiry || licenseCategories) {
+    payload.LICENSE = {}
+    if (licenseNumber) payload.LICENSE.number = licenseNumber
+    if (licenseExpiry) payload.LICENSE.expiry_date = licenseExpiry
+    if (licenseCategories) payload.LICENSE.categories = licenseCategories
+  }
+
+  return payload
+}
+
+async function savePerson() {
+  isSaving.value = true
+  saveMessage.value = ''
+
+  try {
+    const payload: Record<string, any> = {}
+    const fields = [
+      'first_name', 'last_name', 'phone',
+      'mothers_last_name', 'mothers_first_name',
+      'birth_place', 'birth_date',
+      'address_zip', 'address_city',
+      'address_street_name', 'address_street_type', 'address_house_number',
+      'address_stairwell', 'address_floor', 'address_door',
+    ]
+    for (const field of fields) {
+      const val = (editForm as any)[field]
+      if (val !== null && val !== undefined && val !== '') {
+        payload[field] = val
+      }
+    }
+
+    const docsPayload = buildIdentityDocsPayload()
+    if (docsPayload) {
+      payload.identity_docs = docsPayload
+    }
+
+    await authStore.updatePerson(payload)
+    saveMessage.value = 'A profil adatok és okmányok sikeresen frissítve!'
+    saveMessageType.value = 'success'
+    isEditing.value = false
+  } catch (err: any) {
+    saveMessage.value = err?.response?.data?.detail || 'Hiba történt a mentés során.'
+    saveMessageType.value = 'error'
+  } finally {
+    isSaving.value = false
+  }
+}
+
+// ── Change Password ──────────────────────────────────────────────────
+function closePasswordModal() {
+  showPasswordModal.value = false
+  passwordError.value = ''
+  passwordSuccess.value = ''
+  passwordForm.currentPassword = ''
+  passwordForm.newPassword = ''
+  passwordForm.confirmPassword = ''
+}
+
+async function submitPasswordChange() {
+  passwordError.value = ''
+  passwordSuccess.value = ''
+
+  // Frontend validation
+  if (!passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
+    passwordError.value = 'Minden mező kitöltése kötelező.'
+    return
+  }
+
+  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+    passwordError.value = 'Az új jelszó és a megerősítés nem egyezik.'
+    return
+  }
+
+  if (passwordForm.newPassword.length < 6) {
+    passwordError.value = 'Az új jelszónak legalább 6 karakter hosszúnak kell lennie.'
+    return
+  }
+
+  isPasswordSaving.value = true
+
+  try {
+    const result = await authStore.changePassword(
+      passwordForm.currentPassword,
+      passwordForm.newPassword
+    )
+    passwordSuccess.value = result.message || 'Jelszó sikeresen megváltoztatva!'
+
+    // Auto-close after 2 seconds on success
+    setTimeout(() => {
+      closePasswordModal()
+    }, 2000)
+  } catch (err: any) {
+    passwordError.value = err?.response?.data?.detail || 'A jelszó módosítása sikertelen.'
+  } finally {
+    isPasswordSaving.value = false
+  }
+}
+</script>

frontend/src/views/ResetPasswordView.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="relative flex min-h-screen items-center justify-center text-white">
+    <!-- Background Image -->
+    <div class="fixed inset-0 z-0">
+      <div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
+    </div>
+
+    <!-- Glassmorphism Card -->
+    <div class="relative z-10 mx-auto w-full max-w-md px-4">
+      <div
+        class="rounded-2xl border border-white/[0.08] bg-white/[0.05] p-8 backdrop-blur-xl shadow-xl shadow-black/20 text-center"
+      >
+        <!-- Lock Icon -->
+        <div class="mb-6 flex justify-center">
+          <div class="flex h-16 w-16 items-center justify-center rounded-full bg-[#418890]/20">
+            <svg class="h-8 w-8 text-[#418890]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </div>
+        </div>
+
+        <!-- Title -->
+        <h1 class="mb-4 text-2xl font-bold text-white">
+          Jelszó visszaállítás
+        </h1>
+
+        <!-- Description -->
+        <p class="mb-8 text-white/60 leading-relaxed">
+          Add meg az e-mail címed és az új jelszót.
+        </p>
+
+        <!-- Email Input -->
+        <div class="mb-4 text-left">
+          <label for="reset-email" class="mb-2 block text-sm font-medium text-white/80">
+            E-mail cím
+          </label>
+          <input
+            id="reset-email"
+            v-model="email"
+            type="email"
+            placeholder="pelda@email.com"
+            autocomplete="email"
+            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
+          />
+        </div>
+
+        <!-- New Password Input -->
+        <div class="mb-4 text-left">
+          <label for="new-password" class="mb-2 block text-sm font-medium text-white/80">
+            Új jelszó
+          </label>
+          <input
+            id="new-password"
+            v-model="password"
+            type="password"
+            placeholder="Új jelszó"
+            autocomplete="new-password"
+            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
+          />
+        </div>
+
+        <!-- Confirm Password Input -->
+        <div class="mb-6 text-left">
+          <label for="confirm-password" class="mb-2 block text-sm font-medium text-white/80">
+            Jelszó megerősítése
+          </label>
+          <input
+            id="confirm-password"
+            v-model="confirmPassword"
+            type="password"
+            placeholder="Jelszó újra"
+            autocomplete="new-password"
+            class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
+          />
+        </div>
+
+        <!-- Submit Button -->
+        <button
+          @click="handleReset"
+          :disabled="isSubmitting || !email || !password || !confirmPassword"
+          class="btn-premium w-full px-4 py-3 text-lg"
+        >
+          {{ isSubmitting ? 'Visszaállítás...' : 'Jelszó visszaállítása' }}
+        </button>
+
+        <!-- Feedback Message -->
+        <div
+          v-if="feedbackMessage"
+          class="mt-4 rounded-xl px-4 py-3 text-sm"
+          :class="feedbackType === 'success' ? 'bg-[#70BC84]/20 text-[#70BC84]' : 'bg-red-500/20 text-red-300'"
+        >
+          {{ feedbackMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const email = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const isSubmitting = ref(false)
+const feedbackMessage = ref('')
+const feedbackType = ref<'success' | 'error'>('success')
+
+const token = ref('')
+
+onMounted(() => {
+  // Read token from query parameter
+  const queryToken = route.query.token as string
+  if (queryToken) {
+    token.value = queryToken
+  } else {
+    feedbackType.value = 'error'
+    feedbackMessage.value = 'Hiányzó token. Kérlek használd a jelszó-visszaállító linket az e-mailből.'
+  }
+})
+
+async function handleReset() {
+  if (!token.value || !email.value || !password.value || !confirmPassword.value) return
+
+  if (password.value !== confirmPassword.value) {
+    feedbackType.value = 'error'
+    feedbackMessage.value = 'A két jelszó nem egyezik.'
+    return
+  }
+
+  if (password.value.length < 8) {
+    feedbackType.value = 'error'
+    feedbackMessage.value = 'A jelszónak legalább 8 karakter hosszúnak kell lennie.'
+    return
+  }
+
+  isSubmitting.value = true
+  feedbackMessage.value = ''
+
+  try {
+    await authStore.resetPassword(email.value, token.value, password.value)
+    feedbackType.value = 'success'
+    feedbackMessage.value = 'A jelszó sikeresen megváltoztatva! Átirányítás a bejelentkezéshez...'
+    setTimeout(() => {
+      router.push('/')
+    }, 2000)
+  } catch (err: any) {
+    feedbackType.value = 'error'
+    feedbackMessage.value = authStore.error || 'A jelszó visszaállítás sikertelen. Kérlek próbáld újra.'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>

frontend/src/views/VerifyEmailView.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="relative flex min-h-screen items-center justify-center text-white">
+    <!-- Background Image -->
+    <div class="fixed inset-0 z-0">
+      <div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
+    </div>
+
+    <!-- Glassmorphism Card -->
+    <div class="relative z-10 mx-auto w-full max-w-md px-4">
+      <div
+        class="rounded-2xl border border-white/[0.08] bg-white/[0.05] p-8 backdrop-blur-xl shadow-xl shadow-black/20 text-center"
+      >
+        <!-- ── STATE: Verifying (Loading) ── -->
+        <template v-if="isVerifying">
+          <!-- Spinner -->
+          <div class="mb-6 flex justify-center">
+            <div class="flex h-16 w-16 items-center justify-center rounded-full bg-[#418890]/20">
+              <svg class="h-8 w-8 animate-spin text-[#418890]" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+            </div>
+          </div>
+          <h1 class="mb-4 text-2xl font-bold text-white">Fiók aktiválása...</h1>
+          <p class="mb-4 text-white/60">Kérlek várj, amíg ellenőrizzük a megerősítő linket.</p>
+        </template>
+
+        <!-- ── STATE: Verify Success (Magic Link - Auto-Login) ── -->
+        <template v-else-if="verifySuccess">
+          <!-- Glassmorphism Green Checkmark -->
+          <div class="mb-6 flex justify-center">
+            <div class="flex h-20 w-20 items-center justify-center rounded-full bg-[#70BC84]/10 backdrop-blur-md shadow-lg shadow-[#70BC84]/20 ring-2 ring-[#70BC84]/30">
+              <svg class="h-10 w-10 text-[#70BC84]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+          </div>
+          <h1 class="mb-4 text-2xl font-bold text-white">Sikeres aktiválás és bejelentkezés!</h1>
+          <p class="mb-8 text-white/60 leading-relaxed">
+            A fiókod aktív lett, és automatikusan be vagy jelentkezve.
+            {{ autoRedirectCountdown > 0 ? `Átirányítás ${autoRedirectCountdown} másodperc múlva...` : 'Átirányítás...' }}
+          </p>
+          <!-- Premium CTA Button (opcionális gyorsabb átirányításhoz) -->
+          <button
+            @click="goToKyc"
+            class="btn-premium w-full px-4 py-3 text-lg"
+          >
+            Tovább a Profilhoz
+          </button>
+        </template>
+
+        <!-- ── STATE: Default (Resend form) ── -->
+        <template v-else>
+          <!-- Mail Icon -->
+          <div class="mb-6 flex justify-center">
+            <div class="flex h-16 w-16 items-center justify-center rounded-full bg-[#418890]/20">
+              <svg class="h-8 w-8 text-[#418890]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+          </div>
+
+          <!-- Title -->
+          <h1 class="mb-4 text-2xl font-bold text-white">
+            Erősítsd meg az e-mail címed
+          </h1>
+
+          <!-- Error message (shown when token verification failed) -->
+          <div
+            v-if="verifyError"
+            class="mb-6 rounded-xl bg-red-500/20 px-4 py-3 text-sm text-red-300"
+          >
+            {{ verifyError }}
+          </div>
+
+          <!-- Description -->
+          <p class="mb-8 text-white/60 leading-relaxed">
+            Kérlek, erősítsd meg az e-mail címedet a kiküldött linkre kattintva!
+          </p>
+
+          <!-- Email Input -->
+          <div class="mb-6">
+            <label for="verify-email" class="mb-2 block text-sm font-medium text-white/80 text-left">
+              E-mail cím
+            </label>
+            <input
+              id="verify-email"
+              v-model="email"
+              type="email"
+              placeholder="pelda@email.com"
+              autocomplete="email"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-white/30 backdrop-blur-sm transition-all duration-200 focus:border-[#75A882] focus:outline-none focus:ring-2 focus:ring-[#75A882]/50"
+            />
+          </div>
+
+          <!-- Resend Button -->
+          <button
+            @click="handleResend"
+            :disabled="isResending || !email"
+            class="btn-premium w-full px-4 py-3 text-lg"
+          >
+            {{ isResending ? 'Küldés...' : 'Nem kaptam meg az e-mailt, küldjétek újra' }}
+          </button>
+
+          <!-- Resend Feedback Message -->
+          <div
+            v-if="feedbackMessage"
+            class="mt-4 rounded-xl px-4 py-3 text-sm"
+            :class="feedbackType === 'success' ? 'bg-[#70BC84]/20 text-[#70BC84]' : 'bg-red-500/20 text-red-300'"
+          >
+            {{ feedbackMessage }}
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+// ── Device Fingerprinting (FingerprintJS) ──
+let fpPromise: ReturnType<typeof FingerprintJS.load> | null = null
+
+/**
+ * Generate a device fingerprint hash asynchronously.
+ * Returns the visitorId string, or null if FingerprintJS fails to load.
+ */
+async function getDeviceFingerprint(): Promise<string | null> {
+  try {
+    if (!fpPromise) {
+      fpPromise = FingerprintJS.load()
+    }
+    const fp = await fpPromise
+    const result = await fp.get()
+    return result.visitorId
+  } catch (err) {
+    console.warn('FingerprintJS failed to load:', err)
+    return null
+  }
+}
+
+// ── State ──
+const email = ref('')
+const isResending = ref(false)
+const feedbackMessage = ref('')
+const feedbackType = ref<'success' | 'error'>('success')
+
+// Token verification states
+const isVerifying = ref(false)
+const verifySuccess = ref(false)
+const verifyError = ref('')
+
+// Auto-redirect countdown for Magic Link
+const autoRedirectCountdown = ref(3)
+let countdownInterval: ReturnType<typeof setInterval> | null = null
+
+// ── Lifecycle ──
+onMounted(async () => {
+  // Pre-fill email from localStorage (set during registration)
+  const savedEmail = localStorage.getItem('pending_verification_email')
+  if (savedEmail) {
+    email.value = savedEmail
+  } else if (authStore.user?.email) {
+    email.value = authStore.user.email
+  }
+
+  // Check for verification token in URL query params
+  const token = route.query.token as string | undefined
+  if (token) {
+    await processToken(token)
+  }
+})
+
+onUnmounted(() => {
+  // Cleanup countdown interval
+  if (countdownInterval) {
+    clearInterval(countdownInterval)
+  }
+})
+
+// ── Token Processing (Magic Link) ──
+async function processToken(token: string) {
+  isVerifying.value = true
+  verifyError.value = ''
+
+  try {
+    // Generate device fingerprint asynchronously (non-blocking)
+    const deviceFingerprint = await getDeviceFingerprint()
+    const result = await authStore.verifyAccount(token, deviceFingerprint ?? undefined)
+    // Success
+    isVerifying.value = false
+    verifySuccess.value = true
+    
+    // If Magic Link returned JWT tokens (user is now logged in), start countdown
+    if (result.access_token && authStore.isAuthenticated) {
+      startAutoRedirectCountdown()
+    }
+  } catch (err: any) {
+    // Failure — token expired or invalid
+    isVerifying.value = false
+    verifySuccess.value = false
+    verifyError.value = 'A link lejárt vagy érvénytelen.'
+  }
+}
+
+// ── Auto-Redirect Countdown (Magic Link) ──
+function startAutoRedirectCountdown() {
+  autoRedirectCountdown.value = 3
+  
+  countdownInterval = setInterval(() => {
+    autoRedirectCountdown.value -= 1
+    
+    if (autoRedirectCountdown.value <= 0) {
+      if (countdownInterval) {
+        clearInterval(countdownInterval)
+      }
+      goToKyc()
+    }
+  }, 1000)
+}
+
+// ── Navigation ──
+function goToKyc() {
+  // Navigate to KYC completion page (user is now authenticated)
+  router.push('/complete-kyc')
+}
+
+// ── Resend ──
+async function handleResend() {
+  if (!email.value) return
+
+  isResending.value = true
+  feedbackMessage.value = ''
+
+  try {
+    await authStore.resendVerification(email.value)
+    feedbackType.value = 'success'
+    feedbackMessage.value = 'Az új megerősítő e-mail elküldésre került!'
+  } catch (err: any) {
+    feedbackType.value = 'error'
+    feedbackMessage.value = authStore.error || 'Az újraküldés sikertelen. Kérlek próbáld újra később.'
+  } finally {
+    isResending.value = false
+  }
+}
+</script>