Add dark mode UI with PocketBase auth
This commit is contained in:
+7
-9
@@ -1,14 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="tr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>my-app</title>
|
<title>Giriş Paneli</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="bg-slate-950">
|
||||||
<div class="min-h-screen bg-slate-900 text-white flex items-center justify-center">
|
<div id="app"></div>
|
||||||
<h1 class="text-4xl font-bold text-emerald-400">Tailwind CSS Aktif! 🚀</h1>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
+85
-54
@@ -1,60 +1,91 @@
|
|||||||
import './style.css'
|
import './style.css'
|
||||||
import javascriptLogo from './assets/javascript.svg'
|
import PocketBase from 'pocketbase'
|
||||||
import viteLogo from './assets/vite.svg'
|
|
||||||
import heroImg from './assets/hero.png'
|
|
||||||
import { setupCounter } from './counter.js'
|
|
||||||
|
|
||||||
document.querySelector('#app').innerHTML = `
|
// PocketBase bağlantısını kur (Kendi PocketBase domain adresini yaz)
|
||||||
<section id="center">
|
const pb = new PocketBase('https://pb.iontalp.com')
|
||||||
<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" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>Get started</h1>
|
|
||||||
<p>Edit <code>src/main.js</code> and save to test <code>HMR</code></p>
|
|
||||||
</div>
|
|
||||||
<button id="counter" type="button" class="counter"></button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="ticks"></div>
|
const app = document.getElementById('app')
|
||||||
|
|
||||||
<section id="next-steps">
|
// Kullanıcı oturum durumuna göre arayüzü çizen fonksiyon
|
||||||
<div id="docs">
|
function render() {
|
||||||
<svg class="icon" role="presentation" aria-hidden="true"><use href="/icons.svg#documentation-icon"></use></svg>
|
const user = pb.authStore.model
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="ticks"></div>
|
if (user) {
|
||||||
<section id="spacer"></section>
|
// 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>
|
||||||
|
`
|
||||||
|
|
||||||
setupCounter(document.querySelector('#counter'))
|
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()
|
||||||
Reference in New Issue
Block a user