fix begaii
This commit is contained in:
parent
c2ef1976e3
commit
5070f36c8e
|
|
@ -1,11 +1,11 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { FiLock } from "react-icons/fi";
|
import { FiLock } from "react-icons/fi";
|
||||||
import { FaRegUser } from "react-icons/fa6";
|
import { FaRegUser } from "react-icons/fa6";
|
||||||
|
|
||||||
// Assets
|
// Assets
|
||||||
import Loginpic from "../../assets/image/loginpic.jpg";
|
import Loginpic from "../../../src/assets/image/loginpic.jpg";
|
||||||
import LogoDM from "../../assets/icons/LogoDM.svg";
|
import LogoDM from "../../assets/icons/LogoDM.svg";
|
||||||
|
|
||||||
// Redux
|
// Redux
|
||||||
|
|
@ -24,6 +24,16 @@ export default function Login() {
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState("");
|
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
|
// Handle Login
|
||||||
const handleLogin = async (e) => {
|
const handleLogin = async (e) => {
|
||||||
|
|
@ -92,8 +102,17 @@ export default function Login() {
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="flex min-h-screen pt-20">
|
<div className="flex min-h-screen pt-20">
|
||||||
{/* Left Side - Login Form */}
|
{/* Left Side - Login Form */}
|
||||||
<div className="w-full md:w-1/2 flex items-start justify-center md:justify-start bg-[#f5f0e8] px-4 md:px-12 lg:px-24 py-8 md:py-16">
|
<div
|
||||||
<div className="w-full max-w-md">
|
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-[#f5f0e8] 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 */}
|
{/* Breadcrumb */}
|
||||||
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-500 mb-8">
|
<div className="flex items-center gap-2 text-xs md:text-sm text-gray-500 mb-8">
|
||||||
<span>ورود</span>
|
<span>ورود</span>
|
||||||
|
|
@ -103,8 +122,8 @@ export default function Login() {
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h1 className="text-2xl md:text-3xl font-bold text-[#402E32] mb-2">ورود ادمین</h1>
|
<h1 className="text-2xl md:text-3xl font-bold mb-2 text-white md:text-[#402E32]">ورود ادمین</h1>
|
||||||
<p className="text-sm md:text-base text-gray-700">دسترسی ویژه برای مدیریت و گزارشها</p>
|
<p className="text-sm md:text-base md:text-gray-700 text-white/80">دسترسی ویژه برای مدیریت و گزارشها</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Login Form */}
|
{/* Login Form */}
|
||||||
|
|
@ -118,14 +137,14 @@ export default function Login() {
|
||||||
|
|
||||||
{/* Username Field */}
|
{/* Username Field */}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<label className="absolute -top-2.5 right-4 bg-[#f5f0e8] px-2 text-sm text-gray-600">نام کاربری</label>
|
<label className="md:absolute -top-2.5 right-4 text-[#f5f0e8] md:text-[#402E32] md:bg-[#f5f0e8] z-50 px-1 text-sm">نام کاربری</label>
|
||||||
<div className="relative">
|
<div className="relative mt-2">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={userName}
|
value={userName}
|
||||||
onChange={(e) => setUserName(e.target.value)}
|
onChange={(e) => setUserName(e.target.value)}
|
||||||
placeholder="userName"
|
placeholder="userName"
|
||||||
className="w-full pl-12 pr-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
className="w-full pl-12 pr-4 py-3 border-2 bg-[#f5f0e8] border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
||||||
dir="ltr"
|
dir="ltr"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
@ -135,14 +154,14 @@ export default function Login() {
|
||||||
|
|
||||||
{/* Password Field */}
|
{/* Password Field */}
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<label className="absolute -top-2.5 right-4 bg-[#f5f0e8] px-2 text-sm text-gray-600">رمز عبور</label>
|
<label className="md:absolute -top-2.5 right-4 z-50 md:bg-[#f5f0e8] md:text-[#402E32] px-1 text-sm text-[#f5f0e8]">رمز عبور</label>
|
||||||
<div className="relative">
|
<div className="relative mt-2">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
placeholder="password"
|
placeholder="password"
|
||||||
className="w-full pl-12 pr-4 py-3 border-2 border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
className="w-full pl-12 pr-4 py-3 border-2 bg-[#f5f0e8] border-gray-300 rounded-xl focus:outline-none focus:border-[#7f4629] transition-colors text-sm"
|
||||||
dir="ltr"
|
dir="ltr"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
@ -152,7 +171,7 @@ export default function Login() {
|
||||||
|
|
||||||
{/* Forgot Password */}
|
{/* Forgot Password */}
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<a href="#" className="text-sm text-gray-500 hover:text-[#7f4629] transition-colors">
|
<a href="#" className="text-sm text-[#f5f0e8] hover:text-[#7f4629] transition-colors">
|
||||||
فراموشی رمز عبور؟
|
فراموشی رمز عبور؟
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -170,7 +189,7 @@ export default function Login() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Side - Image (Hidden on Mobile) */}
|
{/* Right Side - Image (Hidden on Mobile) */}
|
||||||
<div className="hidden md:block w-1/2 relative overflow-hidden">
|
<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 " />
|
<img src={Loginpic} alt="Coffee workspace" className="w-full h-full object-cover " />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue