142 lines
6.7 KiB
HTML
Executable File
142 lines
6.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="hu">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Service Finder</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<style>
|
|
body { background-color: #f0f2f5; font-family: 'Segoe UI', sans-serif; }
|
|
.auth-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; }
|
|
.auth-card { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
|
|
.main-container { max-width: 1000px; margin: 30px auto; }
|
|
.garage-card { border: none; border-radius: 12px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.04); cursor: pointer; transition: 0.2s; position: relative; overflow: hidden; }
|
|
.garage-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
|
|
.card-top-strip { height: 6px; background: #0d6efd; width: 100%; position: absolute; top: 0; left: 0; }
|
|
.plate-badge { background: #ffcc00; color: black; border: 1px solid #e0b000; font-family: 'Courier New', monospace; font-weight: bold; padding: 2px 6px; border-radius: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<div v-if="!isLoggedIn" class="auth-wrapper">
|
|
<div class="auth-card">
|
|
<h2 class="fw-bold mb-4 text-center text-primary"><i class="bi bi-speedometer2"></i> Service Finder</h2>
|
|
<div class="mb-3">
|
|
<input type="email" class="form-control" v-model="authForm.email" placeholder="Email">
|
|
</div>
|
|
<div class="mb-3">
|
|
<input type="password" class="form-control" v-model="authForm.password" placeholder="Jelszó">
|
|
</div>
|
|
<button class="btn btn-primary w-100" @click="login">Bejelentkezés</button>
|
|
<p class="text-center mt-3 small">Nincs fiókod? <a href="#" @click="register">Regisztráció</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<nav class="navbar navbar-dark bg-primary px-4 py-2">
|
|
<div class="container">
|
|
<span class="navbar-brand fw-bold">Service Finder</span>
|
|
<button class="btn btn-outline-light btn-sm" @click="logout">Kijelentkezés</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container main-container">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="fw-bold">Garázs</h4>
|
|
<div class="text-muted">Üdv: {{ userEmail }}</div>
|
|
</div>
|
|
|
|
<div v-if="myCars.length === 0" class="alert alert-info border-0 shadow-sm rounded-4 p-4 text-center">
|
|
<i class="bi bi-info-circle fs-2 d-block mb-2"></i>
|
|
Még nincsenek járművek a profilodhoz rendelve.
|
|
<br>Használd a pgAdmint vagy az API-t a járművek hozzárendeléséhez az <b>ID: {{ userId }}</b> felhasználóhoz.
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-4" v-for="car in myCars" :key="car.vehicle_id">
|
|
<div class="card garage-card p-3">
|
|
<div class="card-top-strip"></div>
|
|
<h5 class="fw-bold mb-0">{{ car.brand }}</h5>
|
|
<div class="text-muted small mb-2">{{ car.model }}</div>
|
|
<span class="plate-badge">{{ car.plate }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script>
|
|
const { createApp } = Vue
|
|
createApp({
|
|
data() {
|
|
return {
|
|
isLoggedIn: !!localStorage.getItem('token'),
|
|
userId: localStorage.getItem('userId') || '',
|
|
userEmail: localStorage.getItem('userEmail') || '',
|
|
authForm: { email: '', password: '' },
|
|
myCars: []
|
|
}
|
|
},
|
|
methods: {
|
|
async login() {
|
|
const params = new URLSearchParams();
|
|
params.append('username', this.authForm.email);
|
|
params.append('password', this.authForm.password);
|
|
try {
|
|
const res = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: params
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
localStorage.setItem('token', data.access_token);
|
|
localStorage.setItem('userEmail', this.authForm.email);
|
|
|
|
// Token dekódolása az ID kinyeréséhez (opcionális, de hasznos)
|
|
const payload = JSON.parse(atob(data.access_token.split('.')[1]));
|
|
localStorage.setItem('userId', payload.sub);
|
|
|
|
this.userId = payload.sub;
|
|
this.userEmail = this.authForm.email;
|
|
this.isLoggedIn = true;
|
|
this.initApp();
|
|
} else { alert("Hibás belépés!"); }
|
|
} catch (e) { alert("Szerver hiba!"); }
|
|
},
|
|
async register() {
|
|
const fd = new FormData();
|
|
fd.append('email', this.authForm.email);
|
|
fd.append('password', this.authForm.password);
|
|
const res = await fetch('/api/auth/register', { method: 'POST', body: fd });
|
|
if(res.ok) alert("Sikeres regisztráció! Most jelentkezz be.");
|
|
else alert("Regisztrációs hiba!");
|
|
},
|
|
logout() {
|
|
localStorage.clear();
|
|
this.isLoggedIn = false;
|
|
},
|
|
async initApp() {
|
|
if(!this.isLoggedIn) return;
|
|
const token = localStorage.getItem('token');
|
|
try {
|
|
const res = await fetch('/api/my_vehicles', {
|
|
headers: { 'Authorization': 'Bearer ' + token }
|
|
});
|
|
if(res.ok) {
|
|
this.myCars = await res.json();
|
|
} else if(res.status === 401) {
|
|
this.logout();
|
|
}
|
|
} catch(e) { console.error("Hiba az adatok betöltésekor"); }
|
|
}
|
|
},
|
|
mounted() { if(this.isLoggedIn) this.initApp(); }
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |