some changes

src/components2/AdminLogin2/AdminLogin4.jsx

@@ -4,33 +4,35 @@ import { FiMail, FiEye, FiEyeOff } from "react-icons/fi";
 const loginImage = new URL("/public/assets/login_img/loginadmin.svg", import.meta.url).href;
 
 export default function AdminLogin() {
-  const [adminId, setAdminId] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState({ adminId: "", password: "", general: "" });
+  const [error, setError] = useState({ email: "", password: "", general: "" });
 
-  const validateMerchantId = (id) => /^[A-Z]{4}[0-9]{5}$/.test(id);
+  // Email validation regex
+  const validateEmail = (email) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
+  
+  // Password validation (minimum 8 characters)
   const validatePassword = (pass) => pass.length >= 8;
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    let newErrors = { adminId: "", password: "", general: "" };
+    let newErrors = { email: "", password: "", general: "" };
 
-    if (!validateMerchantId(adminId)) {
-      newErrors.adminId = "Merchant ID must be 4 uppercase letters followed by 5 digits.";
+    if (!validateEmail(email)) {
+      newErrors.email = "Invalid email format.";
     }
     if (!validatePassword(password)) {
       newErrors.password = "Password must be at least 8 characters long.";
     }
 
-    if (newErrors.adminId || newErrors.password) {
-      newErrors.general = "*Incorrect Email or Password !";
+    if (newErrors.email || newErrors.password) {
+      newErrors.general = "*Incorrect Email or Password!";
       setError(newErrors);
       return;
     }
 
-    setError({ adminId: "", password: "", general: "" });
-
+    setError({ email: "", password: "", general: "" });
     alert("Login Successful!");
   };
 
@@ -40,41 +42,38 @@ export default function AdminLogin() {
         OMPOI - Admin
       </h1>
 
-      <div className="bg-[#1E1E1E] p-6 rounded-lg shadow-lg w-[90%] h-[90%] flex flex-col md:flex-row py-12">
+      <div className="bg-[#2E2E2E] p-6 rounded-lg shadow-lg w-[90%] h-[90%] flex flex-col md:flex-row py-12">
         <div className="hidden md:flex w-1/2 items-center justify-center p-4 min-w-[300px]">
           <img src={loginImage} alt="Login" className="w-[80%] lg:w-[80%] xl:w-[80%]" />
         </div>
 
-      
         <div className="w-[1px] bg-gray-600 hidden md:block"></div>
 
-        <div className="w-full md:w-1/2 flex flex-col items-center justify-start p-6 text-[#6FE7D1]">
+        <div className="w-full md:w-1/2 flex flex-col items-center justify-start p-6 text-[#6FE7D1] mt-12">
           <h2 className="text-3xl md:text-3xl font-font-primary font-semibold text-[#6FE7D1] mb-6">
             Admin Login
           </h2>
-       
-
-        <form onSubmit={handleSubmit} className="w- max-w-md">
+          <form onSubmit={handleSubmit} className="w- max-w-md">
             <div className="relative mt-6">
-              <label className={`absolute -top-3 left-4 px-2 bg-[#1E1E1E] border rounded-md text-sm font-font-primary font-medium 
-                ${error.adminId ? "border-[#EEAB4D] text-[#EEAB4D]" : "border-[#6FE7D1] text-[#6FE7D1]"}`}>
-                Admin ID
+              <label className={`absolute -top-3 left-4 px-2 bg-[#2E2E2E] border rounded-md text-sm font-font-primary font-medium 
+                ${error.email ? "border-[#EEAB4D] text-[#EEAB4D]" : "border-[#6FE7D1] text-[#6FE7D1]"}`}>
+                Email
               </label>
               <input
                 type="text"
-                value={adminId}
-                onChange={(e) => setAdminId(e.target.value)}
-                placeholder="Enter ID"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="Enter email"
                 className={`w-96 h-16 px-6 pr-10 border-2 rounded-lg bg-transparent text-white text-lg shadow-sm focus:outline-none font-font-primary
-                ${error.adminId ? "border-[#EEAB4D] text-[#EEAB4D]" : "border-[#6FE7D1] text-white"}`}
+                ${error.email ? "border-[#EEAB4D] text-[#EEAB4D]" : "border-[#6FE7D1] text-white"}`}
               />
               <FiMail 
                 className="absolute right-4 top-1/2 transform -translate-y-1/2 text-xl transition-colors duration-200"
-                style={{ color: error.adminId ? "#EEAB4D" : "#6FE7D1" }} 
+                style={{ color: error.email ? "#EEAB4D" : "#6FE7D1" }} 
               />
             </div>
             <div className="relative mt-12">
-              <label className={`absolute -top-3 left-4 px-2 bg-[#1E1E1E] border rounded-md text-sm font-font-primary font-medium 
+              <label className={`absolute -top-3 left-4 px-2 bg-[#2E2E2E] border rounded-md text-sm font-font-primary font-medium 
                 ${error.password ? "border-[#EEAB4D] text-[#EEAB4D]" : "border-[#6FE7D1] text-[#6FE7D1]"}`}>
                 Password
               </label>
@@ -105,7 +104,7 @@ export default function AdminLogin() {
                 Forgot Password?
               </a>
               {error.general && (
-                <span className="text-[#EEAB4D] text-sm font-semibold  font-font-primary  font-font-primary ">
+                <span className="text-[#EEAB4D] text-sm font-semibold font-font-primary">
                   {error.general}
                 </span>
               )}
@@ -117,9 +116,9 @@ export default function AdminLogin() {
                 Sign In
               </button>
             </div>
-            </form>
-            </div>
-
-</div>
-</div>
-  )};
\ No newline at end of file
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}