From 718928fdc254ed1b2cdc1865ccfa03187a9805d5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 21:33:57 +0000
Subject: [PATCH] Add src/app/login/page.tsx

---
 src/app/login/page.tsx | 257 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 257 insertions(+)
 create mode 100644 src/app/login/page.tsx

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..0d83862
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Eye, EyeOff, AlertCircle, CheckCircle } from "lucide-react";
+
+interface LoginFormData {
+  email: string;
+  password: string;
+}
+
+interface LoginErrors {
+  email?: string;
+  password?: string;
+}
+
+export default function LoginPage() {
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "events" },
+    { name: "Çalışma Programı", id: "schedule" },
+  ];
+
+  const [formData, setFormData] = useState<LoginFormData>({
+    email: "",    password: ""});
+
+  const [errors, setErrors] = useState<LoginErrors>({});
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+
+  const validateForm = (): boolean => {
+    const newErrors: LoginErrors = {};
+
+    if (!formData.email.trim()) {
+      newErrors.email = "E-posta gereklidir";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = "Geçerli bir e-posta adresi girin";
+    }
+
+    if (!formData.password) {
+      newErrors.password = "Şifre gereklidir";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (errors[name as keyof LoginErrors]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch("/api/auth/login", {
+        method: "POST",        headers: {
+          "Content-Type": "application/json"},
+        body: JSON.stringify({
+          email: formData.email,
+          password: formData.password,
+          rememberMe: rememberMe,
+        }),
+      });
+
+      if (response.ok) {
+        setSubmitSuccess(true);
+        setFormData({
+          email: "",          password: ""});
+        setTimeout(() => {
+          window.location.href = "/dashboard";
+        }, 1500);
+      } else {
+        const data = await response.json();
+        setErrors({ email: data.message || "Giriş başarısız oldu" });
+      }
+    } catch (error) {
+      setErrors({ email: "Bir hata oluştu. Lütfen tekrar deneyin." });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Öğretmen Platformu"
+          bottomLeftText="Eğitim Topluluğu"
+          bottomRightText="info@platform.com"
+        />
+      </div>
+
+      <div className="min-h-screen pt-24 pb-20 px-4">
+        <div className="max-w-md mx-auto">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold mb-2">Giriş Yap</h1>
+            <p className="text-gray-600">Hesabınıza giriş yaparak öğrenmeye başlayın</p>
+          </div>
+
+          {submitSuccess && (
+            <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+              <div>
+                <h3 className="font-semibold text-green-900">Başarılı!</h3>
+                <p className="text-sm text-green-800 mt-1">
+                  Giriş başarıyla gerçekleştirildi. Yönlendiriliyorsunuz...
+                </p>
+              </div>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium mb-2">
+                E-posta *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                placeholder="your@email.com"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.email ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.email && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.email}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium mb-2">
+                Şifre *
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  placeholder="Şifrenizi girin"
+                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10 ${
+                    errors.password ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.password}
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="rememberMe"
+                checked={rememberMe}
+                onChange={(e) => setRememberMe(e.target.checked)}
+                className="rounded border-gray-300"
+              />
+              <label htmlFor="rememberMe" className="ml-2 text-sm text-gray-700">
+                Beni hatırla
+              </label>
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-2 rounded-lg transition-colors"
+            >
+              {isSubmitting ? "Giriş yapılıyor..." : "Giriş Yap"}
+            </button>
+          </form>
+
+          <div className="mt-6 space-y-4 text-center text-sm text-gray-600">
+            <p>
+              <a href="/forgot-password" className="text-blue-600 hover:underline font-medium">
+                Şifremi unuttum
+              </a>
+            </p>
+            <p>
+              Hesabınız yok mu?{" "}
+              <a href="/register" className="text-blue-600 hover:underline font-medium">
+                Kayıt olun
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Öğretmen Platformu"
+          leftLink={{
+            text: "Gizlilik Politikası",            href: "#"}}
+          rightLink={{
+            text: "Kullanım Şartları",            href: "#"}}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}