91 lines
3.9 KiB
JavaScript
Executable File
91 lines
3.9 KiB
JavaScript
Executable File
import './style.css'
|
||
import PocketBase from 'pocketbase'
|
||
|
||
// PocketBase bağlantısını kur (Kendi PocketBase domain adresini yaz)
|
||
const pb = new PocketBase('https://pocketbase.iontalp.com')
|
||
|
||
const app = document.getElementById('app')
|
||
|
||
// Kullanıcı oturum durumuna göre arayüzü çizen fonksiyon
|
||
function render() {
|
||
const user = pb.authStore.model
|
||
|
||
if (user) {
|
||
// KULLANICI GİRİŞ YAPMIŞSA
|
||
app.innerHTML = `
|
||
<div class="min-h-screen bg-slate-950 text-slate-100 flex flex-col items-center justify-center p-4">
|
||
<div class="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-xl w-full max-w-md text-center">
|
||
<div class="w-16 h-16 bg-emerald-500/10 text-emerald-400 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
||
✓
|
||
</div>
|
||
<h2 class="text-2xl font-bold mb-2">Hayırla Geldiniz!</h2>
|
||
<p class="text-slate-400 mb-6">${user.email}</p>
|
||
<button id="logoutBtn" class="w-full bg-rose-600 hover:bg-rose-500 text-white font-medium py-2.5 rounded-xl transition-all">
|
||
Çıkış Yap
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
document.getElementById('logoutBtn').addEventListener('click', () => {
|
||
pb.authStore.clear()
|
||
render()
|
||
})
|
||
|
||
} else {
|
||
// KULLANICI GİRİŞ YAPMAMIŞSA (LOGIN FORM)
|
||
app.innerHTML = `
|
||
<div class="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4">
|
||
<div class="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl w-full max-w-md">
|
||
<div class="text-center mb-8">
|
||
<h1 class="text-3xl font-bold tracking-tight text-white mb-2">Giriş Yap</h1>
|
||
<p class="text-slate-400 text-sm">PocketBase hesabınızla oturum açın</p>
|
||
</div>
|
||
|
||
<form id="loginForm" class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-slate-300 mb-1.5">E-posta veya Kullanıcı Adı</label>
|
||
<input type="text" id="identity" required
|
||
class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-100 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all placeholder-slate-600"
|
||
placeholder="kullanici@mail.com" />
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-slate-300 mb-1.5">Şifre</label>
|
||
<input type="password" id="password" required
|
||
class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-100 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all placeholder-slate-600"
|
||
placeholder="••••••••" />
|
||
</div>
|
||
|
||
<div id="errorMsg" class="text-rose-400 text-sm hidden bg-rose-500/10 border border-rose-500/20 p-3 rounded-lg text-center"></div>
|
||
|
||
<button type="submit"
|
||
class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-2.5 rounded-xl transition-all shadow-lg shadow-indigo-600/20 active:scale-[0.98]">
|
||
Giriş Yap
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
`
|
||
|
||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||
e.preventDefault()
|
||
const identity = document.getElementById('identity').value
|
||
const password = document.getElementById('password').value
|
||
const errorMsg = document.getElementById('errorMsg')
|
||
|
||
try {
|
||
errorMsg.classList.add('hidden')
|
||
// PocketBase Kullanıcı Doğrulama
|
||
await pb.collection('users').authWithPassword(identity, password)
|
||
render() // Başarılıysa arayüzü güncelle
|
||
} catch (err) {
|
||
errorMsg.textContent = 'Giriş başarısız! E-posta veya şifre hatalı.'
|
||
errorMsg.classList.remove('hidden')
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// Uygulamayı başlat
|
||
render() |