201 lines
8.1 KiB
Vue
201 lines
8.1 KiB
Vue
<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> |