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

45
frontend_old/views/AboutView.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div class="about-view">
<h1 class="text-3xl font-bold mb-6">About Service Finder</h1>
<p class="text-gray-700 mb-6">
This is a modern frontend foundation for the Service Finder platform, built with Vue 3, TypeScript, and Tailwind CSS.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-6 shadow">
<h2 class="text-xl font-bold mb-4">Tech Stack</h2>
<ul class="space-y-2">
<li>• Vue 3 (Composition API)</li>
<li>• TypeScript for type safety</li>
<li>• Vite for fast builds</li>
<li>• Pinia for state management</li>
<li>• Vue Router for navigation</li>
<li>• Vue I18n for translations</li>
<li>• Tailwind CSS for styling</li>
<li>• Axios for HTTP requests</li>
</ul>
</div>
<div class="bg-white rounded-xl p-6 shadow">
<h2 class="text-xl font-bold mb-4">Architecture</h2>
<ul class="space-y-2">
<li>• Multi-stage Docker build</li>
<li>• Nginx reverse proxy to backend</li>
<li>• Dual layout system (B2B/B2C)</li>
<li>• Centralized app mode store</li>
<li>• Dynamic translation loading</li>
<li>• Responsive design</li>
<li>• Component-based structure</li>
</ul>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// No additional logic needed for this simple about page
</script>
<style scoped>
.about-view {
font-family: 'Inter', sans-serif;
}
</style>

412
frontend_old/views/AdminDashboard.vue Normal file
View File

@@ -0,0 +1,412 @@
<template>
<div class="admin-dashboard">
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold mb-2">Admin Dashboard</h1>
<p class="text-gray-400">Monitor system health, manage translations, and oversee platform operations.</p>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="flex items-center justify-between">
<div>
<div class="text-sm text-gray-400 mb-1">Total Users</div>
<div class="text-3xl font-bold">{{ stats.totalUsers }}</div>
</div>
<div class="w-12 h-12 rounded-lg bg-blue-900/30 flex items-center justify-center">
<span class="text-2xl">👥</span>
</div>
</div>
<div class="mt-4 text-sm text-gray-400">
<span class="text-green-400">+{{ stats.newUsersToday }} today</span>
</div>
</div>
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="flex items-center justify-between">
<div>
<div class="text-sm text-gray-400 mb-1">Active Sessions</div>
<div class="text-3xl font-bold">{{ stats.activeSessions }}</div>
</div>
<div class="w-12 h-12 rounded-lg bg-green-900/30 flex items-center justify-center">
<span class="text-2xl">🔌</span>
</div>
</div>
<div class="mt-4 text-sm text-gray-400">
<span class="text-green-400">{{ stats.sessionGrowth }}% growth</span>
</div>
</div>
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="flex items-center justify-between">
<div>
<div class="text-sm text-gray-400 mb-1">Vehicles Catalog</div>
<div class="text-3xl font-bold">{{ stats.vehicleCount }}</div>
</div>
<div class="w-12 h-12 rounded-lg bg-purple-900/30 flex items-center justify-center">
<span class="text-2xl">🚗</span>
</div>
</div>
<div class="mt-4 text-sm text-gray-400">
<span class="text-blue-400">{{ stats.pendingVerification }} pending</span>
</div>
</div>
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="flex items-center justify-between">
<div>
<div class="text-sm text-gray-400 mb-1">API Health</div>
<div class="text-3xl font-bold">{{ stats.apiLatency }}ms</div>
</div>
<div class="w-12 h-12 rounded-lg bg-yellow-900/30 flex items-center justify-center">
<span class="text-2xl">⚡</span>
</div>
</div>
<div class="mt-4 text-sm text-gray-400">
<span :class="stats.apiStatus === 'healthy' ? 'text-green-400' : 'text-red-400'">
{{ stats.apiStatus }}
</span>
</div>
</div>
</div>
<!-- Two Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- i18n Translations Manager -->
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold">i18n Translation Manager</h2>
<div class="flex space-x-2">
<button
class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors"
@click="refreshTranslations"
>
Refresh
</button>
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
@click="showAddModal = true"
>
Add Key
</button>
</div>
</div>
<!-- Language Selector -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-400 mb-2">Select Language</label>
<div class="flex space-x-2">
<button
v-for="lang in languages"
:key="lang.code"
class="px-4 py-2 rounded-lg transition-colors"
:class="selectedLanguage === lang.code
? 'bg-blue-600 text-white'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'"
@click="selectedLanguage = lang.code"
>
{{ lang.name }}
</button>
</div>
</div>
<!-- Translations Table -->
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-gray-700">
<th class="text-left py-3 px-4 text-sm font-medium text-gray-400">Key</th>
<th class="text-left py-3 px-4 text-sm font-medium text-gray-400">Translation</th>
<th class="text-left py-3 px-4 text-sm font-medium text-gray-400">Actions</th>
</tr>
</thead>
<tbody>
<tr
v-for="(translation, key) in filteredTranslations"
:key="key"
class="border-b border-gray-800 hover:bg-gray-800/30 transition-colors"
>
<td class="py-3 px-4 font-mono text-sm">{{ key }}</td>
<td class="py-3 px-4">
<input
v-model="translationEdits[key]"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm"
:placeholder="translation"
@change="saveTranslation(key, translationEdits[key])"
/>
</td>
<td class="py-3 px-4">
<button
class="px-3 py-1 bg-red-900/30 hover:bg-red-900/50 text-red-400 rounded text-sm"
@click="deleteTranslation(key)"
>
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="Object.keys(filteredTranslations).length === 0" class="text-center py-8 text-gray-500">
No translations found for {{ selectedLanguage.toUpperCase() }}.
</div>
</div>
<!-- System Activity & Quick Actions -->
<div class="space-y-8">
<!-- Recent Activity -->
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<h2 class="text-xl font-bold mb-6">Recent System Activity</h2>
<div class="space-y-4">
<div
v-for="activity in recentActivity"
:key="activity.id"
class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-800/30 transition-colors"
>
<div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
<span class="text-lg">{{ activity.icon }}</span>
</div>
<div class="flex-1">
<div class="font-medium">{{ activity.title }}</div>
<div class="text-sm text-gray-400">{{ activity.description }}</div>
<div class="text-xs text-gray-500 mt-1">{{ activity.time }}</div>
</div>
<div :class="`px-3 py-1 rounded-full text-xs ${activity.statusClass}`">
{{ activity.status }}
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<h2 class="text-xl font-bold mb-6">Quick Actions</h2>
<div class="grid grid-cols-2 gap-4">
<button
class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
@click="runSystemAudit"
>
<div class="text-2xl mb-2">🔍</div>
<div class="font-medium">Run System Audit</div>
<div class="text-sm text-gray-400">Check for inconsistencies</div>
</button>
<button
class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
@click="clearCache"
>
<div class="text-2xl mb-2">🧹</div>
<div class="font-medium">Clear Cache</div>
<div class="text-sm text-gray-400">Refresh all caches</div>
</button>
<button
class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
@click="exportData"
>
<div class="text-2xl mb-2">📤</div>
<div class="font-medium">Export Data</div>
<div class="text-sm text-gray-400">Backup database</div>
</button>
<button
class="p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-colors text-left"
@click="showUserImpersonation = true"
>
<div class="text-2xl mb-2">👤</div>
<div class="font-medium">Impersonate User</div>
<div class="text-sm text-gray-400">Test as another user</div>
</button>
</div>
</div>
</div>
</div>
<!-- Add Translation Modal -->
<div v-if="showAddModal" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
<div class="bg-gray-800 rounded-xl border border-gray-700 p-6 w-full max-w-md">
<h3 class="text-xl font-bold mb-4">Add Translation Key</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-400 mb-2">Key</label>
<input
v-model="newKey"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2"
placeholder="e.g., dashboard.welcome"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-400 mb-2">Value</label>
<textarea
v-model="newValue"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2"
rows="3"
placeholder="Translation text"
/>
</div>
<div class="flex justify-end space-x-3">
<button
class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"
@click="showAddModal = false"
>
Cancel
</button>
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg"
@click="addTranslation"
>
Add Translation
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
// Stats data
const stats = ref({
totalUsers: 1247,
newUsersToday: 12,
activeSessions: 89,
sessionGrowth: 4.2,
vehicleCount: 8563,
pendingVerification: 42,
apiLatency: 42,
apiStatus: 'healthy' as 'healthy' | 'degraded' | 'down'
})
// i18n translations
const languages = ref([
{ code: 'hu', name: 'Hungarian' },
{ code: 'en', name: 'English' },
{ code: 'de', name: 'German' },
{ code: 'fr', name: 'French' }
])
const selectedLanguage = ref('hu')
const translations = ref<Record<string, string>>({
'dashboard.welcome': 'Üdvözöljük az admin felületen',
'dashboard.stats': 'Statisztikák',
'users.total': 'Összes felhasználó',
'vehicles.catalog': 'Jármű katalógus',
'system.health': 'Rendszer állapot',
'navigation.home': 'Kezdőlap',
'navigation.admin': 'Adminisztráció',
'button.save': 'Mentés',
'button.cancel': 'Mégse',
'error.not_found': 'Nem található',
'success.updated': 'Sikeresen frissítve'
})
const translationEdits = ref<Record<string, string>>({})
// Filter translations for selected language (simulated)
const filteredTranslations = computed(() => {
// In a real app, this would fetch from backend API
// For now, we'll just return all translations
return translations.value
})
// Recent activity
const recentActivity = ref([
{
id: 1,
icon: '👤',
title: 'New user registration',
description: 'John Doe registered via email',
time: '5 minutes ago',
status: 'Completed',
statusClass: 'bg-green-900/30 text-green-400'
},
{
id: 2,
icon: '🚗',
title: 'Vehicle catalog update',
description: 'Robot-1-GB added 12 new vehicle models',
time: '15 minutes ago',
status: 'Processing',
statusClass: 'bg-blue-900/30 text-blue-400'
},
{
id: 3,
icon: '🔧',
title: 'System maintenance',
description: 'Database backup completed',
time: '1 hour ago',
status: 'Completed',
statusClass: 'bg-green-900/30 text-green-400'
},
{
id: 4,
icon: '⚠️',
title: 'API rate limit warning',
description: 'DVLA API approaching daily limit',
time: '2 hours ago',
status: 'Warning',
statusClass: 'bg-yellow-900/30 text-yellow-400'
}
])
// Modal state
const showAddModal = ref(false)
const newKey = ref('')
const newValue = ref('')
const showUserImpersonation = ref(false)
// Methods
function refreshTranslations() {
// Simulate API call
console.log('Refreshing translations for', selectedLanguage.value)
// In real app: fetch from /api/v1/translations/hu
}
function saveTranslation(key: string, value: string) {
translations.value[key] = value
console.log('Saving translation:', key, value)
// In real app: POST to backend
}
function deleteTranslation(key: string) {
if (confirm(`Delete translation key "${key}"?`)) {
delete translations.value[key]
console.log('Deleted translation:', key)
}
}
function addTranslation() {
if (newKey.value && newValue.value) {
translations.value[newKey.value] = newValue.value
newKey.value = ''
newValue.value = ''
showAddModal.value = false
}
}
function runSystemAudit() {
alert('System audit started. Check logs for results.')
}
function clearCache() {
alert('Cache cleared successfully.')
}
function exportData() {
alert('Data export initiated. Download will start shortly.')
}
onMounted(() => {
// Initialize translation edits
Object.keys(translations.value).forEach(key => {
translationEdits.value[key] = translations.value[key]
})
})
</script>
<style scoped>
.admin-dashboard {
font-family: 'Inter', sans-serif;
}
</style>

18
frontend_old/views/AdminSystemView.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="admin-system-view">
<h1 class="text-2xl font-bold mb-6">System Settings</h1>
<p class="text-gray-400 mb-8">Configure system parameters, API keys, and platform settings.</p>
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="text-center py-12 text-gray-500">
System configuration interface will be implemented here.
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

18
frontend_old/views/AdminTranslationsView.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="admin-translations-view">
<h1 class="text-2xl font-bold mb-6">i18n Translation Management</h1>
<p class="text-gray-400 mb-8">Manage translation keys and values for all supported languages.</p>
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="text-center py-12 text-gray-500">
Advanced translation management interface will be implemented here.
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

18
frontend_old/views/AdminUsersView.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="admin-users-view">
<h1 class="text-2xl font-bold mb-6">User Management</h1>
<p class="text-gray-400 mb-8">Manage system users, roles, and permissions.</p>
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="text-center py-12 text-gray-500">
User management interface will be implemented here.
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

18
frontend_old/views/AdminVehiclesView.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="admin-vehicles-view">
<h1 class="text-2xl font-bold mb-6">Vehicle Catalog Management</h1>
<p class="text-gray-400 mb-8">Manage vehicle models, technical data, and catalog synchronization.</p>
<div class="bg-gray-800/50 rounded-xl border border-gray-700 p-6">
<div class="text-center py-12 text-gray-500">
Vehicle catalog management interface will be implemented here.
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

265
frontend_old/views/HomeView.vue Normal file
View File

@@ -0,0 +1,265 @@
<template>
<div class="home-view min-h-screen bg-sf-wall/80 bg-sf-wall-pattern p-4 md:p-8">
<!-- Hero Section with Logo and Slogan -->
<div class="text-center mb-10">
<div class="flex justify-center items-center mb-4">
<img src="/SF_logo.png" alt="Service Finder Logo" class="h-20 w-auto object-contain" />
<div class="ml-6 text-left">
<h1 class="text-4xl md:text-5xl font-bold text-sf-blue">SERVICE<span class="text-sf-green"> FINDER</span></h1>
<p class="text-lg text-sf-accent font-semibold mt-2">ONLINE JÁRMŰNYILVÁNTARTÓ & SZERVIZKERESŐ</p>
</div>
</div>
<p class="text-xl text-sf-gray-dark max-w-2xl mx-auto">
{{ isCorporate
? 'Manage your vehicle fleet with powerful analytics and cost tracking.'
: 'Your personal garage dashboard - track costs, manage vehicles, and earn rewards.'
}}
</p>
</div>
<!-- Bento Grid Dashboard -->
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 auto-rows-[minmax(180px,auto)]">
<!-- Costs Tile (2x1) -->
<div class="md:col-span-2 rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 overflow-hidden">
<div class="bg-sf-blue text-white p-5">
<div class="flex items-center justify-between">
<h2 class="text-xl font-bold">Monthly Costs</h2>
<span class="text-sm bg-sf-green/20 text-sf-green px-3 py-1 rounded-full">April 2026</span>
</div>
<p class="text-sf-green/80 text-sm mt-1">Track your vehicle expenses</p>
</div>
<div class="p-5">
<div class="space-y-4">
<div class="flex items-center justify-between border-b border-gray-100 pb-3">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mr-3">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4 4 0 003 15z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold">Fuel</h3>
<p class="text-sm text-gray-500">Last: 2 days ago</p>
</div>
</div>
<div class="text-right">
<p class="font-bold text-lg">€ 128.50</p>
<p class="text-sm text-green-600">-12% vs last month</p>
</div>
</div>
<div class="flex items-center justify-between border-b border-gray-100 pb-3">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mr-3">
<svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold">Oil Change</h3>
<p class="text-sm text-gray-500">Due in 14 days</p>
</div>
</div>
<div class="text-right">
<p class="font-bold text-lg">€ 89.00</p>
<p class="text-sm text-gray-500">Regular maintenance</p>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mr-3">
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<div>
<h3 class="font-semibold">Insurance</h3>
<p class="text-sm text-gray-500">Annual payment</p>
</div>
</div>
<div class="text-right">
<p class="font-bold text-lg">€ 420.00</p>
<p class="text-sm text-blue-600">Next: June 15</p>
</div>
</div>
</div>
</div>
</div>
<!-- Profile Tile (1x1) -->
<div class="rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 flex flex-col items-center justify-center p-6">
<div class="relative mb-4">
<div class="w-24 h-24 rounded-full border-4 border-sf-blue overflow-hidden">
<div class="w-full h-full bg-gradient-to-br from-sf-blue to-sf-teal flex items-center justify-center text-white text-2xl font-bold">
JD
</div>
</div>
<div class="absolute bottom-0 right-0 w-8 h-8 bg-sf-green rounded-full border-2 border-white flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-gray-800">John Driver</h3>
<p class="text-gray-500 text-sm mb-4">Premium Member</p>
<div class="flex space-x-2">
<span class="px-3 py-1 bg-sf-blue/10 text-sf-blue text-xs rounded-full">2 Vehicles</span>
<span class="px-3 py-1 bg-sf-green/10 text-sf-green text-xs rounded-full">245 Points</span>
</div>
</div>
<!-- Fleet Tile (1x2) -->
<div class="md:row-span-2 rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold text-gray-800">My Fleet</h2>
<button class="text-sf-blue hover:text-sf-blue/80 text-sm font-medium">+ Add Vehicle</button>
</div>
<div class="space-y-4">
<div class="flex items-center p-4 rounded-xl bg-blue-50/50 border border-blue-100">
<div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold">Volkswagen Golf</h3>
<p class="text-sm text-gray-500">ABC-123 • 1.6 TDI</p>
</div>
<div class="text-right">
<p class="font-bold">€ 2.45/km</p>
<p class="text-xs text-green-600">Good condition</p>
</div>
</div>
<div class="flex items-center p-4 rounded-xl bg-gray-50/50 border border-gray-100">
<div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold">Ford Transit</h3>
<p class="text-sm text-gray-500">DEF-456 • 2.0 EcoBlue</p>
</div>
<div class="text-right">
<p class="font-bold">€ 3.20/km</p>
<p class="text-xs text-amber-600">Service due</p>
</div>
</div>
<div class="flex items-center p-4 rounded-xl bg-green-50/50 border border-green-100">
<div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold">Tesla Model 3</h3>
<p class="text-sm text-gray-500">GHI-789 • Electric</p>
</div>
<div class="text-right">
<p class="font-bold">€ 1.85/km</p>
<p class="text-xs text-green-600">Excellent</p>
</div>
</div>
<div class="text-center pt-4 border-t border-gray-100">
<button class="text-sf-blue hover:text-sf-blue/80 text-sm font-medium flex items-center justify-center w-full">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Add another vehicle
</button>
</div>
</div>
</div>
<!-- Gamification Tile (2x1) -->
<div class="md:col-span-2 rounded-2xl bg-gradient-to-r from-sf-blue/10 to-sf-teal/10 backdrop-blur-md shadow-lg border border-gray-100 p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h2 class="text-xl font-bold text-gray-800">Points & Rewards</h2>
<p class="text-gray-500">Complete tasks to earn badges and discounts</p>
</div>
<div class="text-right">
<div class="text-3xl font-bold text-sf-blue">1,245</div>
<div class="text-sm text-gray-500">Total Points</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
</svg>
</div>
<h4 class="font-semibold text-sf-blue">Gold Member</h4>
<p class="text-xs text-gray-500">Top 10%</p>
</div>
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h4 class="font-semibold text-sf-green">Security Expert</h4>
<p class="text-xs text-gray-500">Verified account</p>
</div>
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h4 class="font-semibold text-sf-blue">Fast Responder</h4>
<p class="text-xs text-gray-500">Quick actions</p>
</div>
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-3">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h4 class="font-semibold text-sf-purple">Time Saver</h4>
<p class="text-xs text-gray-500">Efficient user</p>
</div>
</div>
<div class="text-center">
<button class="bg-sf-green hover:bg-sf-green/90 text-white font-medium py-2 px-6 rounded-lg transition-colors">
View All Rewards
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isCorporate = ref(false)
</script>
<style scoped>
.home-view {
background-image: url('/garazs.jpg');
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}
.bg-sf-wall-pattern {
background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
}
</style>

201
frontend_old/views/LoginView.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<div class="login-view min-h-screen flex items-center justify-center relative overflow-hidden">
<!-- Background Image with filters -->
<div class="absolute inset-0 z-0">
<img
src="/sf_mobile_garage_1.png"
alt="Garage Background"
class="w-full h-full object-cover brightness-50 blur-md"
/>
<div class="absolute inset-0 bg-gradient-to-br from-sf-blue/30 to-sf-green/30"></div>
</div>
<!-- Login Card -->
<div class="relative z-10 w-full max-w-md mx-4">
<div class="bg-white/10 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/20 p-8">
<!-- Branding Logo -->
<div class="flex justify-center mb-8">
<img
src="/sf_logo_ok.png"
alt="Service Finder Logo"
class="h-20 w-auto mix-blend-multiply"
/>
</div>
<!-- Title -->
<h1 class="text-3xl font-bold text-center text-white mb-2">
BELÉPÉS A GARÁZSBA
</h1>
<p class="text-center text-white/80 mb-8">
Add meg a hitelesítő adataidat a folytatáshoz
</p>
<!-- Login Form -->
<form @submit.prevent="handleLogin" class="space-y-6">
<!-- Email Input -->
<div>
<label for="email" class="block text-sm font-medium text-white mb-2">
E-mail cím
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
</svg>
</div>
<input
id="email"
v-model="email"
type="email"
required
class="w-full pl-10 pr-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-sf-blue focus:border-transparent transition"
placeholder="pelda@email.hu"
/>
</div>
</div>
<!-- Password Input -->
<div>
<label for="password" class="block text-sm font-medium text-white mb-2">
Jelszó
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
</div>
<input
id="password"
v-model="password"
type="password"
required
class="w-full pl-10 pr-4 py-3 bg-white/20 border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-sf-green focus:border-transparent transition"
placeholder="••••••••"
/>
</div>
</div>
<!-- Remember Me & Forgot Password -->
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
id="remember"
v-model="rememberMe"
type="checkbox"
class="h-4 w-4 text-sf-blue focus:ring-sf-blue border-white/30 rounded"
/>
<label for="remember" class="ml-2 block text-sm text-white">
Emlékezz rám
</label>
</div>
<a href="#" class="text-sm text-white hover:text-sf-green transition">
Elfelejtetted a jelszavad?
</a>
</div>
<!-- Submit Button -->
<button
type="submit"
class="w-full py-3 px-4 bg-gradient-to-r from-sf-blue to-sf-green text-white font-bold rounded-xl hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sf-blue transition-all shadow-lg"
>
BELÉPÉS A GARÁZSBA
</button>
<!-- Divider -->
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-white/30"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-4 bg-transparent text-white/70">vagy</span>
</div>
</div>
<!-- Alternative Actions -->
<div class="space-y-4">
<button
type="button"
class="w-full py-3 px-4 bg-white/10 border border-white/30 text-white rounded-xl hover:bg-white/20 transition flex items-center justify-center"
>
<svg class="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.666-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.787-.94 1.324-2.245 1.171-3.54-1.133.052-2.518.754-3.334 1.701-.735.85-1.389 2.207-1.208 3.514 1.26.091 2.544-.596 3.371-1.675z"/>
</svg>
Folytatás Apple ID-val
</button>
<button
type="button"
class="w-full py-3 px-4 bg-white/10 border border-white/30 text-white rounded-xl hover:bg-white/20 transition flex items-center justify-center"
>
<svg class="w-5 h-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/>
</svg>
Folytatás Google-fiókkal
</button>
</div>
<!-- Registration Link -->
<p class="text-center text-white/80 text-sm mt-8">
Még nincs fiókod?
<router-link to="/register" class="text-sf-green font-semibold hover:underline ml-1">
Regisztrálj most!
</router-link>
</p>
</form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
const email = ref('')
const password = ref('')
const rememberMe = ref(false)
const router = useRouter()
const authStore = useAuthStore()
const handleLogin = async () => {
try {
await authStore.login({
email: email.value,
password: password.value,
remember: rememberMe.value
})
// Redirect to home or intended route
router.push('/')
} catch (error) {
console.error('Login failed:', error)
// In a real app, show error message to user
alert('Bejelentkezés sikertelen. Kérjük ellenőrizd az adatokat.')
}
}
</script>
<style scoped>
.login-view {
font-family: 'Inter', sans-serif;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
</style>