Untitled

/* eslint-disable @next/next/no-img-element */
"use client";
import { useAuth } from "@/app/hooks/Authcontext";
import axios from "axios";
import { useRouter } from "next/navigation";
import { useLayoutEffect, useState } from "react";
import toast from "react-hot-toast";
import { FaRegEye, FaRegEyeSlash } from "react-icons/fa";
import * as Yup from "yup";

const AuthWrapper = ({ children }) => {
  const { user } = useAuth();
  const router = useRouter();

  useLayoutEffect(() => {
    const checkUserAndRedirect = async () => {
      if (user) {
        if (user.role === "admin") {
          router.push("admin/dashboard/orderDashboard");
        } else if (user.role === "moderator") {
          router.push("moderator/dashboard/neworder");
        } else if (user.role === "studio-partner") {
          router.push("studiopartner/dashboard/neworder");
        } else if (user.role === "delivery-partner") {
          router.push("deliverypartner/dashboard/neworder");
        } else if (user.role === "delivery-boy") {
          router.push("deliveryboy/dashboard/orders");
        }
      }
    };
    checkUserAndRedirect();
  }, [router, user]);

  return user ? null : children;
};

const Page = () => {
  const { login } = useAuth();
  const router = useRouter();

  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });
  const [errors, setErrors] = useState({}); // Use an errors object
  const [loading, setLoading] = useState(false);

  const validationSchema = Yup.object().shape({
    email: Yup.string()
      .required("Email is required")
      .email("Invalid email address"),
    password: Yup.string()
      .required("Password is required")
      .min(6, "Password must be at least 6 characters"),
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await validationSchema.validate(formData, { abortEarly: false });

      setLoading(true);

      const response = await axios.post(
        `${process.env.NEXT_PUBLIC_BACKEND_URL}/users/login`,
        formData
      );
      if (response.status === 200) {
        const { token, user } = response.data;
        login(user, token);
        toast.success("Logged in Successfully");
        if (user.role === "admin") {
          router.push("admin/dashboard/orderDashboard");
        } else if (user.role === "moderator") {
          router.push("moderator/dashboard/neworder");
        } else if (user.role === "studio-partner") {
          router.push("studiopartner/dashboard/neworder");
        } else if (user.role === "delivery-partner") {
          router.push("deliverypartner/dashboard/neworder");
        } else if (user.role === "delivery-boy") {
          router.push("deliveryboy/dashboard/orders");
        }
      } else {
        setErrors({ general: "Invalid credentials. Please try again." });
        toast.error("Invalid credentials. Please try again.");
      }
    } catch (error) {
      const validationErrors = {};
      if (error instanceof Yup.ValidationError) {
        error.inner.forEach((err) => {
          validationErrors[err.path] = err.message;
        });
      }

      setErrors(validationErrors);
      toast.error("Invalid credentials. Please try again.");
    } finally {
      setLoading(false);
    }
  };
  const [passwordType, setPasswordType] = useState(false)
  const handlePasswordShow = async (e) => {
    setPasswordType(!passwordType)
  };
  return (
    <AuthWrapper>
      <div>
        <section className="relative flex flex-wrap lg:h-screen lg:items-center">
          <div className="w-full px-4 py-12 sm:px-6 sm:py-16 lg:w-1/2 lg:px-8 lg:py-24">
            <div className="mx-auto max-w-lg text-center">
              <h1 className="text-2xl font-bold sm:text-3xl">
                Get started today!
              </h1>

              <p className="mt-4 text-gray-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
                libero nulla eaque error neque ipsa culpa autem, at itaque
                nostrum!
              </p>

              <form
                action=""
                className="mx-auto mb-0 mt-8 max-w-md space-y-4"
                onSubmit={handleSubmit}
              >
                <div>
                  <label htmlFor="email" className="sr-only">
                    Email
                  </label>

                  <div className="relative">
                    <input
                      type="email"
                      className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
                      placeholder="Enter email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                    />
                    {errors.email && (
                      <div className="mt-1 text-sm text-red-500">
                        {errors.email}
                      </div>
                    )}
                  </div>
                </div>

                <div>
                  <label htmlFor="password" className="sr-only">
                    Password
                  </label>

                  <div className="relative">
                    <div className="flex">
                      <input
                        type={passwordType ? "text" : "password"}
                        className="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm "
                        placeholder="Enter password"
                        name="password"
                        value={formData.password}
                        onChange={handleChange}

                      />
                      <p className=" cursor-pointer -ml-8 mt-5" onClick={() =>
                        handlePasswordShow()
                      }>{passwordType ? <FaRegEyeSlash /> : <FaRegEye />}</p>

                    </div>

                    {errors.password && (
                      <div className="mt-1 text-sm text-red-500">
                        {errors.password}
                      </div>
                    )}
                  </div>
                </div>

                {errors.general && (
                  <div className="mt-1 text-sm text-red-500">
                    {errors.general}
                  </div>
                )}

                <div>
                  <button
                    type="submit"
                    className="inline-block w-full rounded-lg bg-blue-500 px-5 py-3 text-sm font-medium text-white disabled:bg-blue-500"
                    disabled={loading}
                  >
                    {loading ? "Loading..." : "Login"}
                  </button>
                </div>
              </form>
            </div>
          </div>

          <div className="relative h-64 w-full sm:h-96 lg:h-full lg:w-1/2">
            <img
              alt="Welcome"
              src="https://images.unsplash.com/photo-1630450202872-e0829c9d6172?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
              className="absolute inset-0 h-full w-full object-cover"
            />
          </div>
        </section>
      </div>
    </AuthWrapper>
  );
};

export default Page;