Add dark mode UI with PocketBase auth
This commit is contained in:
+6
-8
@@ -1,14 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>my-app</title>
|
||||
<title>Giriş Paneli</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="min-h-screen bg-slate-900 text-white flex items-center justify-center">
|
||||
<h1 class="text-4xl font-bold text-emerald-400">Tailwind CSS Aktif! 🚀</h1>
|
||||
</div>
|
||||
<body class="bg-slate-950">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+81
-50
@@ -1,60 +1,91 @@
|
||||
import './style.css'
|
||||
import javascriptLogo from './assets/javascript.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import { setupCounter } from './counter.js'
|
||||
import PocketBase from 'pocketbase'
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<section id="center">
|
||||
<div class="hero">
|
||||
<img src="${heroImg}" class="base" width="170" height="179">
|
||||
<img src="${javascriptLogo}" class="framework" alt="JavaScript logo"/>
|
||||
<img src="${viteLogo}" class="vite" alt="Vite logo" />
|
||||
// PocketBase bağlantısını kur (Kendi PocketBase domain adresini yaz)
|
||||
const pb = new PocketBase('https://pb.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">Hoş Geldin!</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>
|
||||
<h1>Get started</h1>
|
||||
<p>Edit <code>src/main.js</code> and save to test <code>HMR</code></p>
|
||||
<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>
|
||||
<button id="counter" type="button" class="counter"></button>
|
||||
</section>
|
||||
|
||||
<div class="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg class="icon" role="presentation" aria-hidden="true"><use href="/icons.svg#documentation-icon"></use></svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img class="logo" src="${viteLogo}" alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
||||
<img class="button-icon" src="${javascriptLogo}" alt="">
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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="social">
|
||||
<svg class="icon" role="presentation" aria-hidden="true"><use href="/icons.svg#social-icon"></use></svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vitejs/vite" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#github-icon"></use></svg>GitHub</a></li>
|
||||
<li><a href="https://chat.vite.dev/" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#discord-icon"></use></svg>Discord</a></li>
|
||||
<li><a href="https://x.com/vite_js" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#x-icon"></use></svg>X.com</a></li>
|
||||
<li><a href="https://bsky.app/profile/vite.dev" target="_blank"><svg class="button-icon" role="presentation" aria-hidden="true"><use href="/icons.svg#bluesky-icon"></use></svg>Bluesky</a></li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
`
|
||||
|
||||
<div class="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
`
|
||||
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')
|
||||
|
||||
setupCounter(document.querySelector('#counter'))
|
||||
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()
|
||||
Reference in New Issue
Block a user