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

// import { GoogleSvg, SalesforceSvg } from "../svgs/Svg"
import OAuthGoogle from "./OAuthGoogle"
import { useEffect, useState } from "react";
import { Link, Navigate, useNavigate } from "react-router-dom";
import axios from "axios";

// import Cookies from "js-cookie";

import { Bounce, toast } from "react-toastify";
import { updateUser, UserState } from "../../store/slices/userSlice";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../store/store";
// import api from "../../config/api";

interface FormDataState {
    email: string;
    password: string;
    confirmPassword: string;
    firstName: string;
    lastName: string;
}


function RegisterForm() {
    const [formData, setForm] = useState<FormDataState>({ email: "", password: "", confirmPassword: "", firstName: "", lastName: "" });

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

    const handleFormRegisterClick = () => {
        formData.firstName = formData.firstName.trim();
        formData.lastName = formData.lastName.trim();
        // Validation Starts
        if (formData.email === "" || formData.password === "" || formData.confirmPassword === "" || formData.firstName === "" || formData.lastName === "") {
            console.log('All Fields are Required');
            return;
        }

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


        // Register API Call
        console.dir(formData);

        axios.post(`${import.meta.env.VITE_BASE_URI}/api/auth/signup`, { firstName: formData.firstName, lastName: formData.lastName, email: formData.email, password: formData.password }, {
            withCredentials: true,
            headers: {
                "ngrok-skip-browser-warning": "69420",
                "Access-Control-Allow-Origin": "*"
            }
        })
            .then((res) => {
                if (res.status === 201) {

                    toast.dismiss();
                    // dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
                    // dispatch(updateUser({ ...res.data, authorized: true }));
                    navigate('/')
                }
            })
            .catch((err) => {
                if (err.status === 409) {
                    toast.dismiss();
                    toast.error("User Already Exists", {
                        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>
            <form action="#" onSubmit={(e) => {
                e.preventDefault();
                handleFormRegisterClick();
            }}>
                <h1>Registration</h1>
                {/* <div className="input-box">
                    <input type="text" placeholder="Username" required />
                    <i className='bx bxs-user'></i>
                </div> */}
                <div className="fl-container flex gap-2">
                    <div className="input-box">
                        <input
                            onChange={(e) => setForm({ ...formData, firstName: e.target.value })}
                            type="text" placeholder="First Name" pattern="^(?!\s*$).+"
                            required
                            title="Input cannot be empty or just spaces"
                        />
                        <i className='bx bxs-envelope' ></i>
                    </div>

                    <div className="input-box">
                        <input
                            onChange={(e) => setForm({ ...formData, lastName: e.target.value })}
                            type="text"
                            placeholder="Last Name"
                            pattern="^(?!\s*$).+"
                            required
                            title="Input cannot be empty or just spaces" />
                        <i className='bx bxs-envelope' ></i>
                    </div>
                </div>

                <div className="input-box">
                    <input
                        onChange={(e) => setForm({ ...formData, email: e.target.value })}
                        type="email" placeholder="Email" required />
                    <i className='bx bxs-envelope' ></i>
                </div>
                <div className="input-box">
                    <input
                        onChange={(e) => setForm({ ...formData, password: e.target.value })}
                        type="password" placeholder="Password"
                        pattern="^.{8,}$"
                        title="Password must be at least 8 digits"
                        required />
                    <i className='bx bxs-lock-alt' ></i>
                </div>
                <div className="input-box">
                    <input
                        onChange={(e) => setForm({ ...formData, confirmPassword: e.target.value })}
                        type="password"
                        placeholder="Confirm Password"
                        style={{
                            border: (formData.confirmPassword != "" && formData.password !== formData.confirmPassword) ? "1px solid red" : "none"
                        }}
                        required
                    />
                    <i className='bx bxs-lock-alt' ></i>
                </div>

                <button type="submit"
                    className={`btn ${(formData.email != "" && formData.password != "" && formData.password === formData.confirmPassword) ? "opacity-100" : "opacity-60"} transition-all duration-150`}>
                    Register
                </button>

                <p>or register with social platforms</p>
                <div className="social-icons">
                    <OAuthGoogle isLogin={false} />
                </div>
            </form>

            <div>
                <p>Already! have an Account. <Link to={'/login'} className="text-blue-400">Login</Link></p>
            </div>
        </div>
    )
}

export default RegisterForm