91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useTransition } from "react";
|
||
import { signIn } from "next-auth/react";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
export default function LoginForm({ dict, lang }: { dict: any; lang: string }) {
|
||
const router = useRouter();
|
||
const [email, setEmail] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [isPending, startTransition] = useTransition();
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setError("");
|
||
|
||
startTransition(async () => {
|
||
const res = await signIn("credentials", {
|
||
email,
|
||
password,
|
||
redirect: false,
|
||
});
|
||
|
||
if (res?.error) {
|
||
setError("E-posta veya şifre hatalı."); // We can translate this later
|
||
} else {
|
||
router.push(`/${lang}/dashboard`);
|
||
router.refresh();
|
||
}
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="login-page">
|
||
<div className="login-box">
|
||
<div className="login-header">
|
||
<div className="login-logo">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||
</svg>
|
||
</div>
|
||
<h1 className="login-title">{dict.title || "AyrisMail Central"}</h1>
|
||
<p className="login-sub">{dict.subtitle || "Mail sunucunuzu kolayca yönetin"}</p>
|
||
</div>
|
||
|
||
<div className="card">
|
||
<form onSubmit={handleSubmit} className="form-group">
|
||
{error && <div className="error-msg">{error}</div>}
|
||
<div>
|
||
<label htmlFor="email" className="label">{dict.emailLabel || "E-posta"}</label>
|
||
<input
|
||
id="email"
|
||
type="email"
|
||
className="input"
|
||
placeholder={dict.emailPlaceholder || "admin@ayristech.com"}
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
required
|
||
autoComplete="email"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="password" className="label">{dict.passwordLabel || "Şifre"}</label>
|
||
<input
|
||
id="password"
|
||
type="password"
|
||
className="input"
|
||
placeholder={dict.passwordPlaceholder || "••••••••"}
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
required
|
||
autoComplete="current-password"
|
||
/>
|
||
</div>
|
||
<button type="submit" className="btn btn-primary" disabled={isPending} style={{ width: "100%", justifyContent: "center", padding: "10px" }}>
|
||
{isPending ? <span className="spinner" /> : null}
|
||
{isPending ? (dict.signingIn || "Giriş yapılıyor...") : (dict.signInButton || "Giriş Yap")}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<p style={{ textAlign: "center", marginTop: "20px", fontSize: "12px", color: "var(--text-muted)" }}>
|
||
AyrisTech © {new Date().getFullYear()} — Tüm hakları saklıdır.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|