edit input color in dark and lite login
This commit is contained in:
Mohammadreza
parent
da80b5d444
commit
3aee2cb101
|
|
@ -42,7 +42,7 @@ export default function Layout() {
|
|||
|
||||
{/* Main Content Area */}
|
||||
<main
|
||||
className={`flex-1 w-full overflow-x-hidden bg-[#FDF8F4] transition-all p-3 lg:p-6`}
|
||||
className={`flex-1 w-full overflow-x-hidden bg-background transition-all p-3 lg:p-6`}
|
||||
>
|
||||
<div className="max-w-full mx-auto">
|
||||
<Outlet />
|
||||
|
|
|
|||
|
|
@ -15,184 +15,243 @@ import { setProfile } from "../../redux/slices/profileSlice";
|
|||
// Services
|
||||
import authService from "../../services/auth";
|
||||
|
||||
import toggleTheme from "../../components/ToggleTheme";
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// State Management
|
||||
const [userName, setUserName] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
||||
// State Management
|
||||
const [userName, setUserName] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
// Handle Login
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const res = await authService.login({ userName, password });
|
||||
if (res.data.success && res.data.data?.tokens?.accessToken) {
|
||||
dispatch(setToken(res.data.data.tokens.accessToken));
|
||||
dispatch(setProfile(res.data.data.admin));
|
||||
console.log("✅ Login successful:", res.data.data.admin);
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
setError("اطلاعات دریافتی معتبر نیست");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Login error:", error);
|
||||
const errorMessage =
|
||||
error.response?.data?.message ||
|
||||
(error.request ? "خطا در برقراری ارتباط با سرور" : "خطای نامشخص رخ داده است");
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen" dir="rtl">
|
||||
{/* Header */}
|
||||
<header className="fixed top-0 left-0 right-0 bg-white z-10 shadow-sm">
|
||||
<div className="flex items-center justify-between px-6 md:px-8 lg:px-12 py-4">
|
||||
{/* Left Section */}
|
||||
<div className="flex items-center gap-4">
|
||||
<img src={LogoDM} alt="Logo" className="h-10 w-10 md:h-12 md:w-12" />
|
||||
<div className="relative">
|
||||
<select className="appearance-none px-4 md:px-6 py-2 pr-4 pl-10 bg-white border-2 border-gray-300 rounded-xl text-sm focus:outline-none focus:border-button1 transition-colors cursor-pointer">
|
||||
<option>شهر</option>
|
||||
<option>تهران</option>
|
||||
<option>اصفهان</option>
|
||||
<option>شیراز</option>
|
||||
<option>مشهد</option>
|
||||
</select>
|
||||
<svg className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
{/* Center Links (Hidden on Mobile) */}
|
||||
<nav className="hidden md:flex items-center gap-8 font-bold text-primary">
|
||||
<a href="#" className="hover:text-button1 transition-colors text-sm">خانه</a>
|
||||
<a href="#" className="hover:text-button1 transition-colors text-sm">دسته بندی</a>
|
||||
<a href="#" className="hover:text-button1 transition-colors text-sm">تماس با ما</a>
|
||||
<a href="#" className="hover:text-button1 transition-colors text-sm">درباره ما</a>
|
||||
</nav>
|
||||
// Handle Login
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setLoading(true);
|
||||
|
||||
{/* Right Section */}
|
||||
<button className="px-6 md:px-10 py-2 bg-button1 text-white rounded-full text-sm md:text-base font-medium hover:bg-[#5f494f] transition-colors">
|
||||
ثبت نام
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
try {
|
||||
const res = await authService.login({ userName, password });
|
||||
if (res.data.success && res.data.data?.tokens?.accessToken) {
|
||||
dispatch(setToken(res.data.data.tokens.accessToken));
|
||||
dispatch(setProfile(res.data.data.admin));
|
||||
console.log("✅ Login successful:", res.data.data.admin);
|
||||
navigate("/dashboard");
|
||||
} else {
|
||||
setError("اطلاعات دریافتی معتبر نیست");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Login error:", error);
|
||||
const errorMessage =
|
||||
error.response?.data?.message ||
|
||||
(error.request
|
||||
? "خطا در برقراری ارتباط با سرور"
|
||||
: "خطای نامشخص رخ داده است");
|
||||
setError(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex min-h-screen pt-20">
|
||||
{/* Left Side - Login Form */}
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: isMobile ? `url(${Loginpic})` : 'none',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundAttachment: 'fixed'
|
||||
}}
|
||||
className="w-full md:w-1/2 flex items-start justify-center md:justify-start md:bg-background px-4 md:px-12 lg:px-24 py-8 md:py-16 relative">
|
||||
{/* Dark Overlay */}
|
||||
<div className="absolute inset-0 bg-black/10 backdrop-blur-[1px] md:bg-transparent"></div>
|
||||
<div className="w-full max-w-md relative z-10">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-500 mb-8">
|
||||
<span>ورود</span>
|
||||
<span className="font-bold text-lg">></span>
|
||||
<span>خانه</span>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl font-bold mb-2 text-white md:text-primary">ورود ادمین</h1>
|
||||
<p className="text-sm md:text-base md:text-gray-700 text-white/80">دسترسی ویژه برای مدیریت و گزارشها</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Username Field */}
|
||||
<div className="relative">
|
||||
<label className="md:absolute -top-2.5 right-4 text-background md:text-primary md:bg-background z-50 px-1 text-sm">نام کاربری</label>
|
||||
<div className="relative mt-2">
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
placeholder="userName"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
|
||||
dir="ltr"
|
||||
required
|
||||
/>
|
||||
<FaRegUser className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div className="relative">
|
||||
<label className="md:absolute -top-2.5 right-4 z-50 md:bg-background md:text-primary px-1 text-sm text-background">رمز عبور</label>
|
||||
<div className="relative mt-2">
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="password"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
|
||||
dir="ltr"
|
||||
required
|
||||
/>
|
||||
<FiLock className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Forgot Password */}
|
||||
<div className="text-right">
|
||||
<a href="#" className="text-sm text-background hover:text-button1 transition-colors">
|
||||
فراموشی رمز عبور؟
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !userName || !password}
|
||||
className="w-full bg-button1 text-white py-3 rounded-full font-bold text-sm md:text-base hover:bg-[#5f494f] transition-all duration-300 shadow-lg hover:shadow-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? "در حال ورود..." : "ورود"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image (Hidden on Mobile) */}
|
||||
<div className="hidden md:block w-1/2 h-[calc(100vh-5rem)] relative overflow-hidden">
|
||||
<img src={Loginpic} alt="Coffee workspace" className="w-full h-full object-cover " />
|
||||
</div>
|
||||
return (
|
||||
<div className="relative min-h-screen" dir="rtl">
|
||||
{/* Header */}
|
||||
<header className="fixed top-0 left-0 right-0 bg-white z-10 shadow-sm">
|
||||
<div className="flex items-center justify-between px-6 md:px-8 lg:px-12 py-4">
|
||||
{/* Left Section */}
|
||||
<div className="flex items-center gap-4">
|
||||
<img
|
||||
src={LogoDM}
|
||||
alt="Logo"
|
||||
className="h-10 w-10 md:h-12 md:w-12"
|
||||
/>
|
||||
<div className="relative">
|
||||
<select className="appearance-none px-4 md:px-6 py-2 pr-4 pl-10 bg-white border-2 border-gray-300 rounded-xl text-sm focus:outline-none focus:border-button1 transition-colors cursor-pointer">
|
||||
<option>شهر</option>
|
||||
<option>تهران</option>
|
||||
<option>اصفهان</option>
|
||||
<option>شیراز</option>
|
||||
<option>مشهد</option>
|
||||
</select>
|
||||
<svg
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 pointer-events-none"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-header2 text-sm"
|
||||
>
|
||||
تغییر تم
|
||||
</button>
|
||||
{/* Center Links (Hidden on Mobile) */}
|
||||
<nav className="hidden md:flex items-center gap-8 font-bold text-primary">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-button1 transition-colors text-sm"
|
||||
>
|
||||
خانه
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-button1 transition-colors text-sm"
|
||||
>
|
||||
دسته بندی
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-button1 transition-colors text-sm"
|
||||
>
|
||||
تماس با ما
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-button1 transition-colors text-sm"
|
||||
>
|
||||
درباره ما
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Right Section */}
|
||||
<button className="px-6 md:px-10 py-2 bg-button1 text-white rounded-full text-sm md:text-base font-medium hover:bg-[#5f494f] transition-colors">
|
||||
ثبت نام
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex min-h-screen pt-20">
|
||||
{/* Left Side - Login Form */}
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: isMobile ? `url(${Loginpic})` : "none",
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundAttachment: "fixed",
|
||||
}}
|
||||
className="w-full md:w-1/2 flex items-start justify-center md:justify-start md:bg-background px-4 md:px-12 lg:px-24 py-8 md:py-16 relative"
|
||||
>
|
||||
{/* Dark Overlay */}
|
||||
<div className="absolute inset-0 bg-black/10 backdrop-blur-[1px] md:bg-transparent"></div>
|
||||
<div className="w-full max-w-md relative z-10">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-500 mb-8">
|
||||
<span>ورود</span>
|
||||
<span className="font-bold text-lg">></span>
|
||||
<span>خانه</span>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl font-bold mb-2 text-white md:text-primary">
|
||||
ورود ادمین
|
||||
</h1>
|
||||
<p className="text-sm md:text-base md:text-gray-700 text-white/80 dark:text-[#E6E2DE]">
|
||||
دسترسی ویژه برای مدیریت و گزارشها
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border-2 border-red-300 text-red-700 px-4 py-3 rounded-xl text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Username Field */}
|
||||
<div className="relative">
|
||||
<label className="md:absolute -top-2.5 right-4 text-background md:text-primary md:bg-background z-50 px-1 text-sm">
|
||||
نام کاربری
|
||||
</label>
|
||||
<div className="relative mt-2">
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
placeholder="userName"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 dark:text-white rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
|
||||
dir="ltr"
|
||||
required
|
||||
/>
|
||||
<FaRegUser className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password Field */}
|
||||
<div className="relative">
|
||||
<label className="md:absolute -top-2.5 right-4 z-50 md:bg-background md:text-primary px-1 text-sm text-background">
|
||||
رمز عبور
|
||||
</label>
|
||||
<div className="relative mt-2">
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="password"
|
||||
className="w-full pl-12 pr-4 py-3 border-2 bg-background border-gray-300 dark:text-white rounded-xl focus:outline-none focus:border-button1 transition-colors text-sm"
|
||||
dir="ltr"
|
||||
required
|
||||
/>
|
||||
<FiLock className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Forgot Password */}
|
||||
<div className="text-right">
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-background hover:text-button1 transition-colors"
|
||||
>
|
||||
فراموشی رمز عبور؟
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !userName || !password}
|
||||
className="w-full bg-button1 text-white py-3 rounded-full font-bold text-sm md:text-base hover:bg-[#5f494f] transition-all duration-300 shadow-lg hover:shadow-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? "در حال ورود..." : "ورود"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image (Hidden on Mobile) */}
|
||||
<div className="hidden md:block w-1/2 h-[calc(100vh-5rem)] relative overflow-hidden">
|
||||
<img
|
||||
src={Loginpic}
|
||||
alt="Coffee workspace"
|
||||
className="w-full h-full object-cover "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
|
||||
|
||||
--font-sans: "Vazirmatn", system-ui, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
|
@ -28,6 +29,35 @@
|
|||
--color-background: #272322;
|
||||
}
|
||||
|
||||
/* Chrome / Edge / Safari autofill FIX (light + dark, no color) */
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
|
||||
box-shadow: 0 0 0 1000px #fdf8f4 inset !important;
|
||||
-webkit-text-fill-color: inherit !important;
|
||||
}
|
||||
|
||||
.dark input:-webkit-autofill,
|
||||
.dark input:-webkit-autofill:hover,
|
||||
.dark input:-webkit-autofill:focus,
|
||||
.dark textarea:-webkit-autofill,
|
||||
.dark textarea:-webkit-autofill:focus,
|
||||
.dark select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px #272322 inset !important;
|
||||
box-shadow: 0 0 0 1000px #272322 inset !important;
|
||||
-webkit-text-fill-color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue