From 75ca2ea7cb8f33736c4ba9f68dbc857ac44cab5d Mon Sep 17 00:00:00 2001
From: jaswanthshakthi <jaswanthshakthi@gmail.com>
Date: Sun, 16 Mar 2025 08:40:58 +0530
Subject: [PATCH] some changes
---
src/components2/AdminLogin2/AdminLogin4.jsx | 63 ++++++++++-----------
1 file changed, 31 insertions(+), 32 deletions(-)
diff --git a/src/components2/AdminLogin2/AdminLogin4.jsx b/src/components2/AdminLogin2/AdminLogin4.jsx
index a4ab185..2c3d36e 100644
--- a/src/components2/AdminLogin2/AdminLogin4.jsx
+++ b/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>
+ );
+}
--
GitLab