2026.06.05 frontend javítgatás és új belépési logika megvalósítva
This commit is contained in:
Roo
784
frontend/src/views/ProfileView.vue
Normal file
784
frontend/src/views/ProfileView.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user