From af3fc31d227d15c5b0ffd76377b806e9cdc1badd Mon Sep 17 00:00:00 2001 From: iontalp Date: Mon, 27 Jul 2026 03:27:43 +0200 Subject: [PATCH] Add dark mode UI with PocketBase auth --- index.html | 16 +++--- src/main.js | 139 ++++++++++++++++++++++++++++++++-------------------- 2 files changed, 92 insertions(+), 63 deletions(-) diff --git a/index.html b/index.html index 942573d..dd6f420 100755 --- a/index.html +++ b/index.html @@ -1,14 +1,12 @@ - - + + - - my-app + Giriş Paneli - -
-

Tailwind CSS Aktif! 🚀

-
+ +
+ - + \ No newline at end of file diff --git a/src/main.js b/src/main.js index a6ace3e..7c6d6bb 100755 --- a/src/main.js +++ b/src/main.js @@ -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 = ` -
-
- - JavaScript logo - Vite logo -
-
-

Get started

-

Edit src/main.js and save to test HMR

-
- -
+// PocketBase bağlantısını kur (Kendi PocketBase domain adresini yaz) +const pb = new PocketBase('https://pb.iontalp.com') -
+const app = document.getElementById('app') -
-
- -

Documentation

-

Your questions, answered

- -
-
- -

Connect with us

-

Join the Vite community

- -
-
+// 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 = ` +
+
+
+ ✓ +
+

Hoş Geldin!

+

${user.email}

+ +
+
+ ` -setupCounter(document.querySelector('#counter')) + document.getElementById('logoutBtn').addEventListener('click', () => { + pb.authStore.clear() + render() + }) + + } else { + // KULLANICI GİRİŞ YAPMAMIŞSA (LOGIN FORM) + app.innerHTML = ` +
+
+
+

Giriş Yap

+

PocketBase hesabınızla oturum açın

+
+ +
+
+ + +
+ +
+ + +
+ + + + +
+
+
+ ` + + 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() \ No newline at end of file