From db9a21e61a6f10f38c0c27d055618de9ec105cee Mon Sep 17 00:00:00 2001
From: jaswanthshakthi <jaswanthshakthi@gmail.com>
Date: Sun, 16 Mar 2025 19:43:24 +0530
Subject: [PATCH] some changes
---
src/components2/AdminLogin2/AdminLogin4.jsx | 159 ++++++++++++--------
1 file changed, 93 insertions(+), 66 deletions(-)
diff --git a/src/components2/AdminLogin2/AdminLogin4.jsx b/src/components2/AdminLogin2/AdminLogin4.jsx
index c9c5bdd..75b3f90 100644
--- a/src/components2/AdminLogin2/AdminLogin4.jsx
+++ b/src/components2/AdminLogin2/AdminLogin4.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState } from "react";
import { FiMail, FiEye, FiEyeOff } from "react-icons/fi";
const loginImage = new URL("/public/assets/login_img/loginadmin.svg", import.meta.url).href;
@@ -9,22 +9,33 @@ export default function AdminLogin() {
const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState({ email: "", password: "", general: "" });
- // 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 handleEmailChange = (e) => {
+ const value = e.target.value;
+ setEmail(value);
+ setError((prev) => ({
+ ...prev,
+ email: value === "" ? "" : !validateEmail(value) ? "Invalid email format" : ""
+ }));
+ };
+
+ const handlePasswordChange = (e) => {
+ const value = e.target.value;
+ setPassword(value);
+ setError((prev) => ({
+ ...prev,
+ password: value === "" ? "" : !validatePassword(value) ? "Password must be at least 8 characters" : ""
+ }));
+ };
+
const handleSubmit = (e) => {
e.preventDefault();
let newErrors = { email: "", password: "", general: "" };
- if (!validateEmail(email)) {
- newErrors.email = "Invalid email format.";
- }
- if (!validatePassword(password)) {
- newErrors.password = "Password must be at least 8 characters long.";
- }
+ if (!validateEmail(email)) newErrors.email = "Invalid email format.";
+ if (!validatePassword(password)) newErrors.password = "Password must be at least 8 characters long.";
if (newErrors.email || newErrors.password) {
newErrors.general = "*Incorrect Email or Password!";
@@ -38,69 +49,83 @@ export default function AdminLogin() {
return (
<div className="flex flex-col items-center justify-center h-screen bg-[#D9F6F0] px-6 py-4">
- <h1 className="text-4xl font-font-primary font-semibold text-[#0C4339] mb-6 text-left w-full max-w-[90%]">
+ <h1 className="text-4xl font-font-primary font-bold text-[#0C4339] mb-6 text-left w-full max-w-[90%]">
OMPOI - Admin
</h1>
- <div className="bg-[#2E2E2E] p-6 rounded-[32.6px] 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="bg-[#2E2E2E] p-6 rounded-[32.6px] 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-[#7DEBD9] hidden md:block"></div>
+ <div className="w-[1px] bg-[#7DEBD9] hidden md:block"></div>
<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-[7DEBD9] mb-6">
Admin Login
</h2>
- <form onSubmit={handleSubmit} className="w- max-w-md">
- <div className="relative mt-6">
- <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={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.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.email ? "#EEAB4D" : "#6FE7D1" }}
- />
- </div>
- <div className="relative mt-12">
- <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>
- <input
- type={showPassword ? "text" : "password"}
- value={password}
- onChange={(e) => setPassword(e.target.value)}
- placeholder="Enter your password"
- className={`appearance-none w-full h-14 px-4 pr-10 border-2 rounded-lg bg-transparent text-white text-lg shadow-sm focus:outline-none font-font-primary
- ${error.password ? "border-[#EEAB4D] text-[#EEAB4D]" : "border-[#6FE7D1] text-white"}`}
- />
- {showPassword ? (
- <FiEyeOff
- className="absolute right-4 top-1/2 transform -translate-y-1/2 text-xl transition-colors duration-200 cursor-pointer font-font-primary"
- style={{ color: error.password ? "#EEAB4D" : "#6FE7D1" }}
- onClick={() => setShowPassword(!showPassword)}
- />
- ) : (
- <FiEye
- className="absolute right-4 top-1/2 transform -translate-y-1/2 text-xl transition-colors duration-200 cursor-pointer"
- style={{ color: error.password ? "#EEAB4D" : "#6FE7D1" }}
- onClick={() => setShowPassword(!showPassword)}
- />
- )}
- </div>
- <div className="flex justify-between items-center mt-6">
- <a href="#" className="text-[#6FE7D1] hover:underline text-sm font-font-primary font-semibold">
+ <form onSubmit={handleSubmit} className="w-full max-w-md">
+
+ <div className="relative w-full mb-8">
+ <div className={`relative border-2 rounded-lg border-[#6FE7D1] bg-transparent ${error.email ? "border-[#EEAB4D]" : ""}`}>
+ <label
+ className={`absolute -top-3 left-4 px-2 bg-[#2E2E2E] border border-[#6FE7D1] rounded-md text-sm font-font-primary font-medium ${error.email ? "border-[#EEAB4D] text-[#EEAB4D]" : "text-[#6FE7D1]"}`}
+ >
+ Email
+ </label>
+ <input
+ type="text"
+ value={email}
+ onChange={handleEmailChange}
+ placeholder="Enter email"
+ className="w-full h-14 px-6 pr-12 bg-transparent text-white text-lg focus:outline-none font-font-primary"
+ />
+ <FiMail
+ className="absolute right-4 top-1/2 transform -translate-y-1/2 text-xl"
+ style={{ color: error.email ? "#EEAB4D" : "#6FE7D1" }}
+ />
+ </div>
+ {error.email && <p className="text-[#EEAB4D] text-sm mt-1">{error.email}</p>}
+</div>
+
+{/* Password Input */}
+<div className="relative w-full mb-8">
+ <div className={`relative border-2 rounded-lg border-[#6FE7D1] bg-transparent ${error.password ? "border-[#EEAB4D]" : ""}`}>
+ <label
+ className={`absolute -top-3 left-4 px-2 bg-[#2E2E2E] border border-[#6FE7D1] rounded-md text-sm font-font-primary font-medium ${error.password ? "border-[#EEAB4D] text-[#EEAB4D]" : "text-[#6FE7D1]"}`}
+ >
+ Password
+ </label>
+ <input
+ type={showPassword ? "text" : "password"}
+ value={password}
+ onChange={handlePasswordChange}
+ placeholder="Enter your password"
+ className="w-full h-14 px-6 pr-12 bg-transparent text-white text-lg focus:outline-none font-font-primary"
+ />
+ {showPassword ? (
+ <FiEyeOff
+ className="absolute right-4 top-1/2 transform -translate-y-1/2 text-xl cursor-pointer"
+ style={{ color: error.password ? "#EEAB4D" : "#6FE7D1" }}
+ onClick={() => setShowPassword(!showPassword)}
+ />
+ ) : (
+ <FiEye
+ className="absolute right-4 top-1/2 transform -translate-y-1/2 text-xl cursor-pointer"
+ style={{ color: error.password ? "#EEAB4D" : "#6FE7D1" }}
+ onClick={() => setShowPassword(!showPassword)}
+ />
+ )}
+ </div>
+ {error.password && <p className="text-[#EEAB4D] text-sm mt-1">{error.password}</p>}
+</div>
+
+
+
+ {/* Forgot Password & General Error */}
+ <div className="flex justify-between items-center mt-2 w-full">
+ <a href="#" className="text-[#27DEBF] hover:underline text-sm font-font-primary font-semibold">
Forgot Password?
</a>
{error.general && (
@@ -109,10 +134,12 @@ export default function AdminLogin() {
</span>
)}
</div>
- <div className="mt-12 flex justify-center">
+
+ {/* Sign In Button */}
+ <div className="mt-8 flex justify-center">
<button
type="submit"
- className="w-48 h-14 text-black font-semibold rounded-full bg-[#6FE7D1] shadow-md hover:bg-[#5CC4AE] transition text-lg font-font-primary font-extrabold">
+ className="w-48 h-14 text-[#263238] font-bold rounded-full bg-[#6FE7D1] shadow-md hover:bg-[#5CC4AE] transition text-lg font-font-primary font-extrabold">
Sign In
</button>
</div>
--
GitLab