implemented admin login/signup

backend/controller/admin.controller.js

@@ -73,11 +73,16 @@ async function loginAdmin(req, res) {
     const token = jwt.sign(payload, process.env.JWT_SECRET, {
       expiresIn: "1h",
     });
+    res.cookie("authToken", token, {
+      maxAge: 1000 * 60 * 60,
+      httpOnly: true,               
+      secure: true,                
+    });
     res.json({
       message: "Login successful",
       token,
       role: "admin",
-      admin: { id: admin._id, name: admin.name, email: admin.email },
+      admin: { id: admin._id, name: admin.name, email: admin.email, role: "admin" },
     });
   } catch (error) {
     logger.error("Error logging in admin:", {

backend/controller/customer.controller.js

@@ -137,6 +137,7 @@ async function loginCustomer(req, res) {
         id: customer._id,
         name: customer.name,
         email: customer.email,
+        role: "customer"
       },
     });
   } catch (error) {

frontend/src/components/Pages/Admin.jsx

@@ -1,11 +1,13 @@
 import { message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useUser } from '../../context/userContext';
 
 const Admin = () => {
   const [events, setEvents] = useState([]);
   const [error, setError] = useState(null);
   const navigate = useNavigate();
+  const {user} = useUser();
 
   // Fetch all events
   const fetchData = async () => {
@@ -122,7 +124,7 @@ const Admin = () => {
     <div className="h-fit min-h-screen w-screen flex flex-col items-center justify-start p-12 pt-[10vh]">
       <div className="Header w-full flex flex-col items-center">
         <h1 className="title text-[#323232] font-black text-7xl mb-6">
-          Hi {Admin.name}!
+          Hi {user.name}!
         </h1>
         <h1 className="mt-[-2vh] text-[#666] font-semibold text-2xl">
           Welcome to Admin Panel

frontend/src/components/Pages/Admin/AdminLogin.jsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import photo from '../../../assets/login.png';
+import { Link, useNavigate } from 'react-router-dom';
+import { message } from 'antd';
+import Cookies from 'js-cookie';
+import { FaEye } from 'react-icons/fa';
+import { FaEyeSlash } from 'react-icons/fa6';
+import { useUser } from '../../../context/userContext';
+
+const AdminLogin = () => {
+  const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
+  const [data, setData] = useState({
+    email: '',
+    password: '',
+  });
+  const [hidden, setHidden] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const {user, setUser} = useUser();
+
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    setData({ ...data, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(`${API_URL}/api/admin/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+      const result = await response.json();
+      if (!response.ok) {
+        throw new Error(result.message || 'Login failed');
+      }
+      const res = JSON.stringify(result.admin)
+      Cookies.set('authToken', result.token, { expires: 1, secure: true });
+      Cookies.set("authenticatedUser", res, {expires: 1, secure: true})
+      setUser(result.admin)
+      message.success('Login successful');
+      navigate('/admin');
+    } catch (err) {
+      setError(err.message || 'An error occurred. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <div className="w-screen h-screen dark:bg-black flex items-center justify-center lg:pt-10 px-4">
+      {/* Background Image */}
+      <img
+        src={photo}
+        alt="login"
+        loading="lazy"
+        className="absolute w-3/4 lg:w-auto lg:opacity-100 opacity-10 object-cover"
+      />
+      {/* Login Form */}
+      <form
+        onSubmit={handleSubmit}
+        className="z-10 p-8 lg:p-14 bg-[#f1e9dc] dark:bg-amber-800 dark:text-white flex flex-col gap-6 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] w-full max-w-md lg:max-w-xl"
+      >
+        <div className="text-[#323232] dark:text-white font-black text-4xl lg:text-6xl mb-2">
+          Admin Login,
+          <span className="block text-[#666] dark:text-gray-400 font-semibold text-lg lg:text-2xl mt-1">
+            Log in to continue
+          </span>
+        </div>
+
+        <input
+          className="w-full h-12 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[15px] font-semibold text-[#323232] p-2.5 focus:outline-none focus:border-[#2d8cf0] placeholder-[#666]"
+          name="email"
+          placeholder="Email"
+          type="email"
+          onChange={handleChange}
+        />
+
+        <div className="relative w-full">
+          <input
+            className="w-full h-12 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[15px] font-semibold text-[#323232] p-2.5 focus:outline-none focus:border-[#2d8cf0] placeholder-[#666]"
+            name="password"
+            placeholder="Password"
+            type={hidden ? 'password' : 'text'}
+            onChange={handleChange}
+          />
+          <button
+            className="absolute top-1/2 transform -translate-y-1/2 right-4"
+            onClick={(e) => {
+              e.preventDefault();
+              setHidden(!hidden);
+            }}
+          >
+            {hidden ? <FaEyeSlash /> : <FaEye />}
+          </button>
+        </div>
+
+        <Link
+          to="/email-verify"
+          className="text-sm lg:text-base text-gray-500 dark:text-gray-200 hover:text-red-500 transition"
+        >
+          Forgot Password?
+        </Link>
+
+        <h3 className="flex justify-between items-center w-full text-sm lg:text-base">
+          Don’t have an account?
+          <Link
+            to="/admin-signup"
+            className="text-green-500 font-semibold hover:scale-110 transition"
+          >
+            Register Here
+          </Link>
+        </h3>
+
+        <a
+          href={`${API_URL}/api/user/auth/google`}
+          className="w-full"
+        >
+          <button
+            type="button"
+            className="w-full h-12 rounded-md border-2 dark:text-white border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] transition active:translate-x-[3px] active:translate-y-[3px]"
+          >
+            Sign in with Google
+          </button>
+        </a>
+
+        {error && <p className="text-red-500 mt-2">{error}</p>}
+
+        <button
+          type="submit"
+          className="w-full h-12 rounded-md dark:text-white border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] transition active:translate-x-[3px] active:translate-y-[3px]"
+        >
+          {isLoading ? 'Loading...' : 'Let’s Log you in →'}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default AdminLogin;

frontend/src/components/Pages/Admin/AdminSignup.jsx

@@ -0,0 +1,182 @@
+import { useState, useEffect } from 'react';
+import photo from '../../../assets/login.png';
+import { useNavigate, Link } from 'react-router-dom';
+import { FaEye } from 'react-icons/fa';
+import { FaEyeSlash } from 'react-icons/fa6';
+import zxcvbn from 'zxcvbn'; // Password strength checker
+
+const AdminSignup = () => {
+  const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [passwordStrength, setPasswordStrength] = useState(0);
+  const [data, setData] = useState({ name: '', email: '', password: '' });
+  const [hidden, setHidden] = useState(true);
+
+  const handleChange = (e) => {
+    setData({ ...data, [e.target.name]: e.target.value });
+    if (e.target.name === 'password') {
+      const result = zxcvbn(e.target.value);
+      setPasswordStrength(result.score);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    // Input validation
+    if (!data.email || !data.password || !data.name) {
+      setError('Please fill in all fields');
+      setIsLoading(false);
+      return;
+    }
+    if (data.password.length < 8) {
+      setError('Password must be at least 8 characters long');
+      setIsLoading(false);
+      return;
+    }
+    if (data.name.length < 3) {
+      setError('Name must be at least 3 characters long');
+      setIsLoading(false);
+      return;
+    }
+    if (!data.email.includes('@')) {
+      setError('Please enter a valid email address');
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const response = await fetch(`${API_URL}/api/admin/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      const result = await response.json();
+
+      if (!response.ok) {
+        setIsLoading(false);
+        setError(result.error);
+        return;
+      }
+
+
+    //   alert('OTP sent to your email. Verify to complete registration.');
+      navigate('/admin-login'); 
+
+    } catch (error) {
+      setError(error.message);
+      console.error('Error:', error);
+    } finally {
+      setIsLoading(false); // Ensure loading state is reset after request
+    }
+  };
+
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  const getPasswordStrengthColor = (score) => {
+    const colors = ['#ff4d4d', '#ff944d', '#ffd24d', '#d2ff4d', '#4dff88'];
+    return colors[score];
+  };
+
+  const getPasswordStrengthText = (score) => {
+    const strengthLevels = ['Very Weak', 'Weak', 'Okay', 'Good', 'Strong'];
+    return strengthLevels[score];
+  };
+
+  return (
+    <div className="w-screen h-screen flex items-center dark:text-white dark:bg-black justify-center pt-10 relative overflow-hidden">
+      <img
+        src={photo}
+        alt="login"
+        loading="lazy"
+        className="absolute w-3/4 lg:w-auto lg:opacity-100 opacity-10 object-cover"
+      />
+      <form className="z-10 p-8 sm:p-16 bg-[#f1e9dc] dark:bg-amber-800 dark:text-white rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] flex flex-col gap-5 w-11/12 sm:w-auto px-[3vw] pt-[5vh]">
+        <div className="text-[#323232] dark:text-white font-black text-4xl sm:text-7xl mb-4 sm:mb-6 mt-4">
+          Admin SignUp
+          <br />
+          <span className="block text-[#666] dark:text-gray-400 font-semibold text-xl sm:text-2xl">
+            Register to continue
+          </span>
+        </div>
+        <input
+          className="input w-full h-10 rounded-md border-2 border-black bg-beige p-2.5 shadow-[4px_4px_0px_0px_black] focus:outline-none"
+          name="name"
+          placeholder="Name"
+          type="text"
+          onChange={handleChange}
+        />
+        <input
+          className="input w-full h-10 rounded-md border-2 border-black bg-beige p-2.5 shadow-[4px_4px_0px_0px_black] focus:outline-none"
+          name="email"
+          placeholder="Email"
+          type="email"
+          onChange={handleChange}
+        />
+        <div className="relative w-full">
+          <input
+            className="input w-full h-10 rounded-md border-2 border-black bg-beige p-2.5 shadow-[4px_4px_0px_0px_black] focus:outline-none"
+            name="password"
+            placeholder="Password"
+            type={hidden ? 'password' : 'text'}
+            onChange={handleChange}
+          />
+          <button
+            className="absolute top-1/2 -translate-y-1/2 right-4"
+            onClick={(e) => {
+              e.preventDefault();
+              setHidden(!hidden);
+            }}
+          >
+            {hidden ? <FaEyeSlash /> : <FaEye />}
+          </button>
+        </div>
+        <div className="w-full mt-2">
+          <div
+            className="h-2 rounded-full"
+            style={{
+              backgroundColor: getPasswordStrengthColor(passwordStrength),
+              width: `${(passwordStrength + 1) * 20}%`,
+            }}
+          ></div>
+          <p className="text-sm text-[#666] dark:text-gray-200   mt-1">
+            Strength: {getPasswordStrengthText(passwordStrength)}
+          </p>
+        </div>
+        {error && (
+          <div className="w-full p-2 bg-red-100 text-red-700 border border-red-400 rounded-md">
+            {error}
+          </div>
+        )}
+        <h3 className="flex justify-between w-full">
+          Already have an account?
+          <Link
+            to="/admin-login"
+            className="text-[#666] dark:text-white font-semibold hover:text-green-500"
+          >
+            Login
+          </Link>
+        </h3>
+        <a href={`${API_URL}/api/user/auth/google`} className="w-full">
+          <button className="button-confirm w-full h-10 rounded-md border-2 border-black bg-beige text-[17px] font-semibold shadow-[4px_4px_0px_0px_black] hover:text-green-300">
+            Sign up with Google
+          </button>
+        </a>
+        <button
+          className="button-confirm w-full h-10 rounded-md border-2 border-black bg-beige text-[17px] font-semibold shadow-[4px_4px_0px_0px_black] mb-2 hover:text-green-300"
+          onClick={handleSubmit}
+        >
+          {isLoading ? 'Loading...' : "Let's go →"}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default AdminSignup;