feat: allow custom account login and add auth page cross-links

2026-07-08 10:17:24 +03:00
parent 595321897a
commit fe6bb264b0
2 changed files with 102 additions and 13 deletions
@@ -3,16 +3,37 @@
 import { useState } from "react";

 export default function LoginPage() {
-  const [email, setEmail] = useState("demo@winninghunter.local");
-  const [password, setPassword] = useState("demo1234");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
-    const res = await fetch("/api/auth/login", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ email, password }) });
+    const res = await fetch("/api/auth/login", { 
+      method: "POST", 
+      headers: { "content-type": "application/json" }, 
+      body: JSON.stringify({ email, password }) 
+    });
    if (!res.ok) {
-      setError("Giriş başarısız. Demo: demo@winninghunter.local / demo1234");
+      setError("Giriş başarısız. Demo hesap için aşağıdaki butonu kullanabilir veya bilgileri elle girebilirsiniz (demo@winninghunter.local / demo1234).");
+      return;
+    }
+    location.href = "/dashboard/ads";
+  }
+
+  async function loginAsDemo(e: React.MouseEvent) {
+    e.preventDefault();
+    setError("");
+    const demoEmail = "demo@winninghunter.local";
+    const demoPassword = "demo1234";
+    const res = await fetch("/api/auth/login", { 
+      method: "POST", 
+      headers: { "content-type": "application/json" }, 
+      body: JSON.stringify({ email: demoEmail, password: demoPassword }) 
+    });
+    if (!res.ok) {
+      setError("Demo girişi başarısız. Demo veritabanı kurulmamış olabilir.");
      return;
    }
    location.href = "/dashboard/ads";
@@ -22,14 +43,48 @@ export default function LoginPage() {
    <main className="grid min-h-screen place-items-center bg-slate-50 px-4">
      <form onSubmit={submit} className="w-full max-w-md rounded-3xl bg-white p-8 shadow-soft">
        <h1 className="text-3xl font-black">Giriş yap</h1>
-        <p className="mt-2 text-sm text-slate-500">Demo hesap hazır gelir.</p>
+        <p className="mt-2 text-sm text-slate-500">Kendi oluşturduğunuz hesapla veya hazır demo hesapla giriş yapabilirsiniz.</p>
+        
        <label className="mt-6 block text-sm font-bold">E-posta</label>
-        <input className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <input 
+          type="email" 
+          placeholder="E-posta adresiniz"
+          className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-violet-600" 
+          value={email} 
+          onChange={(e) => setEmail(e.target.value)} 
+          required
+        />
+        
        <label className="mt-4 block text-sm font-bold">Şifre</label>
-        <input type="password" className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <input 
+          type="password" 
+          placeholder="Şifreniz"
+          className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-violet-600" 
+          value={password} 
+          onChange={(e) => setPassword(e.target.value)} 
+          required
+        />
+        
        {error && <div className="mt-4 rounded-xl bg-red-50 p-3 text-sm text-red-700">{error}</div>}
-        <button className="mt-6 w-full rounded-xl bg-violet-700 px-4 py-3 font-bold text-white">Giriş</button>
-        <a href="/register" className="mt-4 block text-center text-sm font-semibold text-violet-700">Hesap oluştur</a>
+        
+        <button type="submit" className="mt-6 w-full rounded-xl bg-violet-700 px-4 py-3 font-bold text-white hover:bg-violet-800 transition">
+          Giriş yap
+        </button>
+
+        <button 
+          type="button" 
+          onClick={loginAsDemo}
+          className="mt-3 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 font-semibold text-slate-700 hover:bg-slate-100 transition"
+        >
+          Hazır Demo Hesapla Giriş Yap
+        </button>
+        
+        <div className="mt-6 text-center text-sm">
+          <span className="text-slate-500">Hesabınız yok mu? </span>
+          <a href="/register" className="font-semibold text-violet-700 hover:underline">
+            Hesap oluştur
+          </a>
+        </div>
      </form>
    </main>
  );
@@ -23,14 +23,48 @@ export default function RegisterPage() {
    <main className="grid min-h-screen place-items-center bg-slate-50 px-4">
      <form onSubmit={submit} className="w-full max-w-md rounded-3xl bg-white p-8 shadow-soft">
        <h1 className="text-3xl font-black">Ücretsiz başla</h1>
+        
        <label className="mt-6 block text-sm font-bold">Ad</label>
-        <input className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3" value={name} onChange={(e) => setName(e.target.value)} />
+        <input 
+          placeholder="Adınız"
+          className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-violet-600" 
+          value={name} 
+          onChange={(e) => setName(e.target.value)} 
+          required
+        />
+        
        <label className="mt-4 block text-sm font-bold">E-posta</label>
-        <input className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <input 
+          type="email"
+          placeholder="E-posta adresiniz"
+          className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-violet-600" 
+          value={email} 
+          onChange={(e) => setEmail(e.target.value)} 
+          required
+        />
+        
        <label className="mt-4 block text-sm font-bold">Şifre</label>
-        <input type="password" className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <input 
+          type="password" 
+          placeholder="En az 6 karakterli şifreniz"
+          className="mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-violet-600" 
+          value={password} 
+          onChange={(e) => setPassword(e.target.value)} 
+          required
+        />
+        
        {error && <div className="mt-4 rounded-xl bg-red-50 p-3 text-sm text-red-700">{error}</div>}
-        <button className="mt-6 w-full rounded-xl bg-violet-700 px-4 py-3 font-bold text-white">Hesap oluştur</button>
+        
+        <button className="mt-6 w-full rounded-xl bg-violet-700 px-4 py-3 font-bold text-white hover:bg-violet-800 transition">
+          Hesap oluştur
+        </button>
+
+        <div className="mt-6 text-center text-sm">
+          <span className="text-slate-500">Zaten hesabınız var mı? </span>
+          <a href="/login" className="font-semibold text-violet-700 hover:underline">
+            Giriş yap
+          </a>
+        </div>
      </form>
    </main>
  );