SME-Web/src/components/auth/LoginForm.tsx

// import OAuthGoogle from "./OAuthGoogle";
import axios from "axios";
import { useState } from "react";
// import { FcGoogle } from "react-icons/fc";
import { Link, useNavigate } from "react-router-dom";
import OAuthGoogle from "./OAuthGoogle";
import { Bounce, toast } from "react-toastify";
// import Cookies from "js-cookie";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../../store/store";
// import api from "../../config/api";

interface FormDataState {
    email: string;
    password: string;
}


function LoginForm() {
    const [formData, setForm] = useState<FormDataState>({ email: "", password: "" });
    const [cacheKey, setCacheKey] = useState<string>('');
    const [nextClick, setNextClick] = useState<boolean>(false);

    const dispatch = useDispatch<AppDispatch>();
    const navigate = useNavigate();


    const handleNextClick = () => {

        // Validation Starts
        if (formData.email === "") {
            return;
        }

        // Validate Email Format
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            return;
        }
        // Validation Ends

        // Checking user exists getting cacheKey
        axios.get(`${import.meta.env.VITE_BASE_URI}/api/auth/user?email=${formData.email}`, { headers: { "ngrok-skip-browser-warning": "69420" } })
            .then((res) => {


                if (res.status === 200) {
                    toast.dismiss();
                    setCacheKey(res.data);
                    setNextClick(true);
                }
            })
            .catch((err) => {
                toast.dismiss();
                toast.error("User Does Not Exists", {
                    position: "top-center",
                    autoClose: 5000,
                    hideProgressBar: false,
                    closeOnClick: false,
                    pauseOnHover: true,
                    draggable: true,
                    progress: undefined,
                    theme: "light",
                    transition: Bounce,
                });
            });

    }

    const handleFormLoginClick = () => {

        // Validation Starts
        if (formData.email === "" || formData.password === "") {
            return;
        }

        // Validate Email Format
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            return;
        }
        // Validation Ends

        // Login API Call
        axios.post(`${import.meta.env.VITE_BASE_URI}/api/auth/login`,
            { cacheKey: cacheKey, password: formData.password },
            {
                withCredentials: true,
                headers: {
                    "ngrok-skip-browser-warning": "69420",
                    "Access-Control-Allow-Origin": "*"
                }
            }
        )
            .then((res) => {
                if (res.status === 200) {
                    
                    toast.dismiss();
                    // Cookies.set("authorization", res.headers.authorization, {
                    //     path: "/",
                    //     secure: true, // Required for HTTPS
                    //     sameSite: "Lax", // Required for cross-origin requests
                    //   });

                    // dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
                    setTimeout(() => navigate('/'), 1000); // Redirect after 1 second
                    toast.success("Login Successful", {
                        position: "top-center",
                        autoClose: 5000,
                        hideProgressBar: false,
                        closeOnClick: false,
                        pauseOnHover: true,
                        draggable: true,
                        progress: undefined,
                        theme: "light",
                        transition: Bounce,
                    });
                }
            })
            .catch((err) => {
                if (err.status === 401) {
                    toast.dismiss();
                    toast.error("Credentials Not Match", {
                        position: "top-center",
                        autoClose: 5000,
                        hideProgressBar: false,
                        closeOnClick: false,
                        pauseOnHover: true,
                        draggable: true,
                        progress: undefined,
                        theme: "light",
                        transition: Bounce,
                    });
                } else {
                    toast.dismiss();
                    toast.error("Some Error Occurred", {
                        position: "top-center",
                        autoClose: 5000,
                        hideProgressBar: false,
                        closeOnClick: false,
                        pauseOnHover: true,
                        draggable: true,
                        progress: undefined,
                        theme: "light",
                        transition: Bounce,
                    });
                }
            });
    }

    return (
        <div>
            <h1>Login</h1>


            <form action="#" onSubmit={(e) => {
                e.preventDefault();
            }}>

                <div className={`${nextClick ? 'hidden' : ''}`}>
                    <div className="input-box">
                        <input type="email" placeholder="Email" required
                            onChange={(e) => setForm({ ...formData, email: e.target.value })} />
                        <i className='bx bxs-user'></i>
                    </div>
                    <button type="submit" className="btn" onClick={handleNextClick}>Next</button>
                </div>
            </form>


            <form action="#" onSubmit={(e) => {
                e.preventDefault();
                handleFormLoginClick();
            }}>
                <div className={`${!nextClick ? 'hidden' : ''}`}>
                    <div className="input-box">
                        <input type="password" placeholder="Password" required
                            onChange={(e) => setForm({ ...formData, password: e.target.value })}
                        />
                        <i className='bx bxs-lock-alt' ></i>
                    </div>
                    <div className="forgot-link">
                        <a href="#">Forgot Password?</a>
                    </div>
                    <button type="submit" className="btn">Login</button>
                </div>
            </form>

            <p>or login with social platforms</p>

            <div className="social-icons">
                <OAuthGoogle isLogin={true} />
            </div>

            <div>
                <p>Create an Account. <Link to={'/register'} className="text-blue-400">Register</Link></p>
            </div>
        </div>
    )
}

export default LoginForm