Skip to content
Snippets Groups Projects
Commit db9a21e6 authored by JASWANTH A's avatar JASWANTH A
Browse files

some changes

parent 0a6672a0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components2/AdminLogin2/AdminLogin4.jsx
+ 93
− 66
View file @ db9a21e6
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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment