kincses/service-finder
1
0
Fork 0
Code Issues 52 Pull Requests Packages Projects 2 Releases Wiki Activity

2026.06.04 frontend építés közben

Browse Source
This commit is contained in:
Roo
2026-06-04 07:26:22 +00:00
parent 7adf6cc3e3
commit 59a30ac428
3302 changed files with 24091 additions and 1771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

499
frontend/src/views/CompleteKycView.vue Normal file
View File

@@ -0,0 +1,499 @@
<template>
<div class="min-h-screen bg-[#04151F] flex flex-col items-center justify-center px-4 py-8">
<!-- Header Logo / Brand -->
<div class="mb-8 text-center">
<h1 class="text-3xl font-bold text-white tracking-tight">
Service<span class="text-[#00E5A0]">Finder</span>
</h1>
<p class="text-white/40 text-sm mt-1">Fiók aktiválás — KYC kitöltése</p>
</div>
<!-- Progress Bar -->
<div class="w-full max-w-lg mb-8">
<div class="flex items-center justify-between">
<div
v-for="(step, idx) in steps"
:key="idx"
class="flex items-center flex-1"
>
<!-- Step circle + label -->
<div class="flex flex-col items-center">
<div
class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300"
:class="stepCircleClass(idx)"
>
<span v-if="currentStep > idx + 1">✓</span>
<span v-else>{{ idx + 1 }}</span>
</div>
<span
class="text-xs mt-1.5 transition-colors duration-300"
:class="currentStep >= idx + 1 ? 'text-[#00E5A0]' : 'text-white/30'"
>
{{ step.label }}
</span>
</div>
<!-- Connector line -->
<div
v-if="idx < steps.length - 1"
class="flex-1 h-0.5 mx-3 rounded transition-colors duration-300"
:class="currentStep > idx + 1 ? 'bg-[#00E5A0]' : 'bg-white/10'"
/>
</div>
</div>
</div>
<!-- Glassmorphism Card -->
<div class="w-full max-w-lg">
<div
class="backdrop-blur-xl bg-white/5 border border-white/10 rounded-2xl shadow-2xl p-8 md:p-10 transition-all duration-500"
>
<!-- ==================== STEP 1: Personal ==================== -->
<div v-if="currentStep === 1">
<h2 class="text-xl font-semibold text-white mb-1">Személyes adatok</h2>
<p class="text-[#00E5A0]/70 text-sm mb-6">
Vezeték- és keresztnév megadása
</p>
<div class="space-y-4">
<!-- Last name -->
<div>
<label class="block text-sm text-white/60 mb-1">Vezetéknév</label>
<input
v-model="kycForm.last_name"
type="text"
placeholder="pl. Kovács"
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"
/>
</div>
<!-- First name -->
<div>
<label class="block text-sm text-white/60 mb-1">Keresztnév</label>
<input
v-model="kycForm.first_name"
type="text"
placeholder="pl. István"
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"
/>
</div>
</div>
</div>
<!-- ==================== STEP 2: Address ==================== -->
<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>
<div class="space-y-4">
<!-- Country selector (EU-ready) -->
<div>
<label class="block text-sm text-white/60 mb-1">Ország</label>
<select
v-model="kycForm.region_code"
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"
>
<option value="HU" class="bg-[#04151F]">🇭🇺 Magyarország</option>
<option value="AT" class="bg-[#04151F]">🇦🇹 Ausztria</option>
<option value="SK" class="bg-[#04151F]">🇸🇰 Szlovákia</option>
<option value="DE" class="bg-[#04151F]">🇩🇪 Németország</option>
<option value="RO" class="bg-[#04151F]">🇷🇴 Románia</option>
</select>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="col-span-1">
<label class="block text-sm text-white/60 mb-1">Irányítószám</label>
<input
v-model="kycForm.address_zip"
type="text"
placeholder="1234"
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"
/>
</div>
<div class="col-span-2">
<label class="block text-sm text-white/60 mb-1">Város</label>
<div class="relative">
<input
v-model="kycForm.address_city"
type="text"
placeholder="Budapest"
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 pr-10"
:class="{ 'opacity-60': isCityLoading }"
/>
<!-- Loading spinner -->
<div
v-if="isCityLoading"
class="absolute right-3 top-1/2 -translate-y-1/2"
>
<svg
class="animate-spin h-5 w-5 text-[#00E5A0]"
xmlns="http://www.w3.org/2000/svg"
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>
</div>
</div>
<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>
<input
v-model="kycForm.address_street_name"
type="text"
placeholder="Kossuth Lajos"
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"
/>
</div>
<div>
<label class="block text-sm text-white/60 mb-1">Típus</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"
>
<option value="" disabled class="bg-[#04151F]">Típus</option>
<option value="utca" class="bg-[#04151F]">utca</option>
<option value="út" class="bg-[#04151F]">út</option>
<option value="tér" class="bg-[#04151F]">tér</option>
<option value="körút" class="bg-[#04151F]">körút</option>
<option value="sugárút" class="bg-[#04151F]">sugárút</option>
<option value="köz" class="bg-[#04151F]">köz</option>
<option value="sor" class="bg-[#04151F]">sor</option>
<option value="liget" class="bg-[#04151F]">liget</option>
<option value="park" class="bg-[#04151F]">park</option>
<option value="dűlő" class="bg-[#04151F]">dűlő</option>
</select>
</div>
</div>
<div>
<label class="block text-sm text-white/60 mb-1">Házszám</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"
/>
</div>
</div>
</div>
<!-- ==================== 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>
<div class="space-y-6">
<!-- Identity Documents -->
<div>
<!-- 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>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs text-white/40 mb-1">Okmány száma</label>
<input
v-model="kycForm.identity_docs.ID_CARD.number"
type="text"
placeholder="123456AB"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-[#00E5A0] focus:ring-1 focus:ring-[#00E5A0]/30 transition"
/>
</div>
<div>
<label class="block text-xs text-white/40 mb-1">Lejárat</label>
<input
v-model="kycForm.identity_docs.ID_CARD.expiry_date"
type="date"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white [color-scheme:dark] focus:outline-none focus:border-[#00E5A0] focus:ring-1 focus:ring-[#00E5A0]/30 transition"
/>
</div>
</div>
</div>
<!-- Driver's License (optional) -->
<div class="bg-white/5 rounded-lg p-4 border border-white/5">
<div class="flex items-center gap-2 mb-3">
<div class="w-2 h-2 rounded-full bg-white/20" />
<span class="text-sm text-white/50">Jogosítvány <span class="text-white/20">(opcionális)</span></span>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs text-white/40 mb-1">Okmány száma</label>
<input
v-model="kycForm.identity_docs.LICENSE.number"
type="text"
placeholder="HU-1234567"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-white/30 focus:outline-none focus:border-[#00E5A0] focus:ring-1 focus:ring-[#00E5A0]/30 transition"
/>
</div>
<div>
<label class="block text-xs text-white/40 mb-1">Lejárat</label>
<input
v-model="kycForm.identity_docs.LICENSE.expiry_date"
type="date"
class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-white [color-scheme:dark] focus:outline-none focus:border-[#00E5A0] focus:ring-1 focus:ring-[#00E5A0]/30 transition"
/>
</div>
</div>
</div>
</div>
<!-- Language & Currency Preferences -->
<div class="grid grid-cols-2 gap-3 pt-2">
<div>
<label class="block text-sm text-white/60 mb-1">Nyelv</label>
<select
v-model="kycForm.preferred_language"
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"
>
<option value="hu" class="bg-[#04151F]">Magyar</option>
<option value="en" class="bg-[#04151F]">English</option>
</select>
</div>
<div>
<label class="block text-sm text-white/60 mb-1">Pénznem</label>
<select
v-model="kycForm.preferred_currency"
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"
>
<option value="HUF" class="bg-[#04151F]">HUF (Ft)</option>
<option value="EUR" class="bg-[#04151F]">EUR (€)</option>
<option value="USD" class="bg-[#04151F]">USD ($)</option>
</select>
</div>
</div>
</div>
</div>
<!-- ==================== Navigation Buttons ==================== -->
<div class="flex items-center justify-between mt-8 pt-6 border-t border-white/5">
<!-- Back button -->
<button
v-if="currentStep > 1"
@click="prevStep"
class="px-5 py-2.5 rounded-lg text-white/60 hover:text-white border border-white/10 hover:border-white/30 transition-all text-sm"
>
← Vissza
</button>
<div v-else />
<!-- Next / Submit -->
<button
v-if="currentStep < 3"
@click="nextStep"
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 →
</button>
<button
v-else
@click="handleSubmit"
:disabled="isSubmitting"
class="px-6 py-2.5 rounded-lg font-semibold transition-all text-sm flex items-center gap-2"
:class="isSubmitting
? 'bg-[#00E5A0]/50 text-[#04151F]/70 cursor-not-allowed'
: 'bg-[#00E5A0] text-[#04151F] hover:bg-[#00E5A0]/90 hover:shadow-lg hover:shadow-[#00E5A0]/20'"
>
<!-- Spinner -->
<svg
v-if="isSubmitting"
class="animate-spin h-4 w-4 text-[#04151F]"
xmlns="http://www.w3.org/2000/svg"
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>
<span>{{ isSubmitting ? 'Feldolgozás...' : 'Garázs Hitelesítése és Belépés' }}</span>
</button>
</div>
<!-- Error message -->
<div
v-if="errorMessage"
class="mt-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm"
>
{{ errorMessage }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
const router = useRouter()
const authStore = useAuthStore()
// ── Steps definition ──
const steps = [
{ label: 'Személyes', key: 'personal' },
{ label: 'Lakcím', key: 'address' },
{ label: 'Okmányok', key: 'security' },
]
const currentStep = ref(1)
const isSubmitting = ref(false)
const errorMessage = ref<string | null>(null)
const isCityLoading = ref(false)
// ── KYC Form (minimal — only DB-required fields) ──
const kycForm = reactive({
last_name: '',
first_name: '',
region_code: 'HU',
address_zip: '',
address_city: '',
address_street_name: '',
address_street_type: '',
address_house_number: '',
identity_docs: {
ID_CARD: { number: '', expiry_date: '' },
LICENSE: { number: '', expiry_date: '' },
},
preferred_language: 'hu',
preferred_currency: 'HUF',
})
// ── Debounced ZIP → City auto-fill via zippopotam.us ──
let zipTimeout: ReturnType<typeof setTimeout>
watch(
() => kycForm.address_zip,
(newZip) => {
clearTimeout(zipTimeout)
if (newZip && newZip.length >= 3) {
isCityLoading.value = true
zipTimeout = setTimeout(async () => {
try {
const country = kycForm.region_code.toLowerCase()
const response = await fetch(`https://api.zippopotam.us/${country}/${newZip}`)
if (response.ok) {
const data = await response.json()
kycForm.address_city = data.places[0]['place name']
}
} catch (error) {
console.error('Cím lekérdezési hiba:', error)
} finally {
isCityLoading.value = false
}
}, 600) // 600ms késleltetés a gépelés után
} else {
isCityLoading.value = false
}
}
)
// ── Step circle styling ──
function stepCircleClass(idx: number): string {
const stepNum = idx + 1
if (currentStep.value > stepNum) {
return 'bg-[#00E5A0] text-[#04151F]'
}
if (currentStep.value === stepNum) {
return 'bg-[#00E5A0]/20 text-[#00E5A0] border-2 border-[#00E5A0]'
}
return 'bg-white/5 text-white/30 border border-white/10'
}
// ── Simple step validation ──
function validateStep(): boolean {
errorMessage.value = null
if (currentStep.value === 1) {
if (!kycForm.last_name) { errorMessage.value = 'Kérlek add meg a vezetéknevedet.'; return false }
if (!kycForm.first_name) { errorMessage.value = 'Kérlek add meg a keresztnevedet.'; return false }
}
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 }
}
return true
}
// ── Navigation ──
function nextStep() {
if (!validateStep()) return
if (currentStep.value < 3) {
currentStep.value++
}
}
function prevStep() {
if (currentStep.value > 1) {
currentStep.value--
errorMessage.value = null
}
}
// ── Submit ──
async function handleSubmit() {
if (!validateStep()) return
isSubmitting.value = true
errorMessage.value = null
try {
// Build the minimal payload matching UserKYCComplete schema
const payload = {
last_name: kycForm.last_name,
first_name: kycForm.first_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,
}
await authStore.completeKyc(payload)
// Navigate to dashboard on success
router.push('/dashboard')
} catch (err: any) {
errorMessage.value =
err.response?.data?.detail ||
err.response?.data?.message ||
'A KYC kitöltése sikertelen. Kérlek ellenőrizd az adatokat és próbáld újra.'
} finally {
isSubmitting.value = false
}
}
</script>