import { toast } from "react-toastify";

export const validatePassword = (password, NewPassword) => {
  if (!password) {
    toast.error("Password is required");
    // return;
  } else if (password.length < 8) {
    toast.error("Password must be at least 8 characters long");
    return false;
  } else if (!/(?=.*[a-z])/.test(password)) {
    toast.error("Password must contain at least one lowercase letter");
    return false;
  } else if (!/(?=.*[A-Z])/.test(password)) {
    toast.error("Password must contain at least one uppercase letter");
    return false;
  } else if (!/(?=.*\d)/.test(password)) {
    toast.error("Password must contain at least one digit");
    return false;
  } else if (!/(?=.*[!@#$%^&*])/.test(password)) {
    toast.error("Password must contain at least one special character");
    return false;
  } else if (/\s/.test(password)) {
    toast.error("Password cannot contain whitespace");
    return false;
  }
  if (!NewPassword) {
    toast.error("Confirmpassword is required");
    return false;
  } else if (password != NewPassword) {
    toast.error("Passwords do not match.");
    return false;
  }

  return true;
};

export const validateLogin = (credentials, password) => {
  if (credentials == "") {
    toast.error("UserName is required...........");
    return false;
  } else if (!password) {
    toast.error("Password is required");
    return false;
  } else if (!/(?=.*[a-z])/.test(password)) {
    toast.error("Password must contain at least one lowercase letter");
    return false;
  } else if (!/(?=.*[A-Z])/.test(password)) {
    toast.error("Password must contain at least one uppercase letter");
    return false;
  }
  else if (!/(?=.*\d)/.test(password)) {
    toast.error("Password must contain at least one digit");
    return false;
  } else if (!/(?=.*[!@#$%^&*])/.test(password)) {
    toast.error("Password must contain at least one special character");
    return false;
  } else if (password.length < 8) {
    toast.error("Password must be at least 8 characters long");
    return false;
  } else if (/\s/.test(password)) {
    toast.error("Password cannot contain whitespace");
    return false;
  }
  return true;
};

export const UserForm = (credentials, password) => {
  if (credentials == "") {
    toast.error("UserName is required...........");
    return false;
  } else if (!password) {
    toast.error("Password is required");
    return false;
  } else if (!/(?=.*[a-z])/.test(password)) {
    toast.error("Password must contain at least one lowercase letter");
    return false;
  } else if (!/(?=.*[A-Z])/.test(password)) {
    toast.error("Password must contain at least one uppercase letter");
    return false;
  }
  else if (!/(?=.*\d)/.test(password)) {
    toast.error("Password must contain at least one digit");
    return false;
  } else if (!/(?=.*[!@#$%^&*])/.test(password)) {
    toast.error("Password must contain at least one special character");
    return false;
  } else if (password.length < 8) {
    toast.error("Password must be at least 8 characters long");
    return false;
  } else if (/\s/.test(password)) {
    toast.error("Password cannot contain whitespace");
    return false;
  }
  return true;
};


import React, { useState, useEffect } from "react";
import Header from "./Header";
import "./login.css";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import axios from "axios";
import { API_URL } from "../../API/config";
import { validateLogin } from "../../component/Validation";

const Loginform = () => {
  const navigate = useNavigate();
  const [user, setUser] = useState({
    credentials: "",
    password: "",
  });

  let name, value;

  const handleinput = (e) => {
    name = e.target.name;
    value = e.target.value;
    setUser({ ...user, [name]: value });
  };

  const SubmitData = async (e) => {
    e.preventDefault();
    const isValidLogin = validateLogin(user.credentials, user.password);
    if (!isValidLogin) {
      toast.error(isValidLogin);
    } else {
      try {
        await axios
          .post(`${API_URL.auth.login}`, user)

          .then((response) => {
            console.log(response.data);
            toast.success(response.data.message);
            localStorage.setItem("Token", response.data.success[1]);

            navigate("/dashboard");
          });
      } catch (error) {
        if (error.response) {
          const { status, data } = error.response;
          console.log(status, data);

          if (data.error && data.error.length > 0) {
            data.error.forEach((errorMessage) => {
              toast.error(errorMessage);
            });
          } else {
            toast.error(error.response.data);
          }
        }
      }
    }
  };

  return (
    <>
      <div
        style={{
          width: "100%",
          backgroundColor: "hsl(0, 0%, 96%)",
          position: "absolute",
          zIndex: "1",
        }}
      >
        <Header />
      </div>

      <section className=" position-relative">
        <div className="px-4 py-5 px-md-5 text-center text-lg-start ">
          <div className="">
            <div
              className="row align-items-top "
              style={{
                marginLeft: "10px",
                marginRight: "10px",
                marginTop: "90px",
              }}
            >
              <div className="col-lg-6 col-md-6 mb-5 mb-lg-0">
                <h1 className="my-5 display-4 fw-bold ls-tight ">
                  The best offer <br />
                  <span className="text-primary">for your business</span>
                </h1>
                <p
                  style={{ color: "hsl(217, 10%, 50.8%)" }}
                  className="text-left"
                >
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Eveniet, itaque accusantium odio, soluta, corrupti aliquam
                  quibusdam tempora at cupiditate quis eum maiores libero
                  veritatis? Dicta facilis sint aliquid ipsum atque?
                </p>
              </div>
              <div className="col-lg-6 col-md-6 mb-5 mb-lg-0 d-flex justify-content-center">
                <div className="card" style={{ width: "400px" }}>
                  <div className="card-body py-4 px-md-4">
                    <form method="POST">
                      <div className="form-outline mb-2">
                        <label
                          className="form-label  d-flex justify-content-start"
                          htmlFor="form3Example4"
                        >
                          User Name
                        </label>
                        <input
                          type="text"
                          id="credentials"
                          className="form-control"
                          name="credentials"
                          placeholder="enter your Username"
                          autoComplete="off"
                          value={user.credentials}
                          onChange={handleinput}
                        />
                      </div>

                      <div className="form-outline mb-4">
                        <label
                          className="form-label d-flex justify-content-start"
                          htmlFor="form3Example4"
                        >
                          Password
                        </label>
                        <input
                          type="password"
                          id="password"
                          className="form-control"
                          name="password"
                          minLength={8}
                          maxLength={15}
                          placeholder="enter your Password"
                          autoComplete="off"
                          value={user.password}
                          onChange={handleinput}
                        />{" "}
                      </div>
                      <div className="col text-start mb-3 mt-0 ">
                        <Link to="/forgotpassword">Forgot password?</Link>
                      </div>
                      <button
                        type="submit"
                        className="btn btn-primary  mb-2 d-flex justify-content-start"
                        onClick={SubmitData}
                      >
                        Sign in
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Loginform;