Compare commits
No commits in common. "d9f8cd58b0ef08f7390e251e29d573943e49386b" and "73cf07a396259e0a5a9c24002ba3b434bbfefc9a" have entirely different histories.
d9f8cd58b0
...
73cf07a396
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
// import OAuthGoogle from "./OAuthGoogle";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
|
|
@ -9,8 +8,6 @@ import { Bounce, toast } from "react-toastify";
|
|||
// import Cookies from "js-cookie";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { AppDispatch } from "../../store/store";
|
||||
import { BsEye } from "react-icons/bs";
|
||||
import { FiEyeOff } from "react-icons/fi";
|
||||
// import api from "../../config/api";
|
||||
|
||||
interface FormDataState {
|
||||
|
|
@ -19,166 +16,94 @@ interface FormDataState {
|
|||
}
|
||||
|
||||
|
||||
function LoginForm() {
|
||||
const [formData, setForm] = useState<FormDataState>({ email: "", password: "" });
|
||||
const [cacheKey, setCacheKey] = useState<string>('');
|
||||
const [nextClick, setNextClick] = useState<boolean>(false);
|
||||
|
||||
const LoginForm = ({ onSwitchToRegister }) => {
|
||||
const [formData, setForm] = useState({ email: "", password: "" });
|
||||
const [cacheKey, setCacheKey] = useState("");
|
||||
const [nextClick, setNextClick] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [errors, setErrors] = useState({ email: "", password: "" });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const navigate = useNavigate()
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const validateEmail = (email) => {
|
||||
const trimmedEmail = email.trim();
|
||||
|
||||
if (!trimmedEmail) {
|
||||
return "Email address is required";
|
||||
}
|
||||
const handleNextClick = () => {
|
||||
|
||||
if (trimmedEmail.length > 254) {
|
||||
return "Email address is too long";
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
return "Please enter a valid email address";
|
||||
}
|
||||
|
||||
// Check for common typos
|
||||
const commonDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com'];
|
||||
const domain = trimmedEmail.split('@')[1];
|
||||
const commonTypos = {
|
||||
'gmial.com': 'gmail.com',
|
||||
'gmai.com': 'gmail.com',
|
||||
'yahooo.com': 'yahoo.com',
|
||||
'hotmial.com': 'hotmail.com'
|
||||
};
|
||||
|
||||
if (commonTypos[domain]) {
|
||||
return `Did you mean ${trimmedEmail.replace(domain, commonTypos[domain])}?`;
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const validatePassword = (password) => {
|
||||
if (!password) {
|
||||
return "Password is required";
|
||||
}
|
||||
|
||||
// if (password.length < 6) {
|
||||
// return "Password must be at least 6 characters long";
|
||||
// }
|
||||
|
||||
// if (password.length > 128) {
|
||||
// return "Password is too long";
|
||||
// }
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const handleEmailChange = (e) => {
|
||||
const email = e.target.value;
|
||||
setForm({ ...formData, email });
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors.email) {
|
||||
setErrors({ ...errors, email: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasswordChange = (e) => {
|
||||
const password = e.target.value;
|
||||
setForm({ ...formData, password });
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors.password) {
|
||||
setErrors({ ...errors, password: "" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleNextClick = async () => {
|
||||
const emailError = validateEmail(formData.email);
|
||||
|
||||
if (emailError) {
|
||||
setErrors({ ...errors, email: emailError });
|
||||
// Validation Starts
|
||||
if (formData.email === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
// 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) => {
|
||||
|
||||
try {
|
||||
const res = await axios.get(
|
||||
`${import.meta.env.VITE_BASE_URI}/api/auth/user?email=${formData.email}`,
|
||||
{
|
||||
headers: {
|
||||
"ngrok-skip-browser-warning": "69420",
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (res.status === 200) {
|
||||
toast.dismiss();
|
||||
setCacheKey(res.data);
|
||||
setNextClick(true);
|
||||
}
|
||||
} catch (err: any) {
|
||||
})
|
||||
.catch((err) => {
|
||||
toast.dismiss();
|
||||
toast.error("User Does Not Exist", {
|
||||
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,
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormLoginClick = () => {
|
||||
|
||||
const handleFormLoginClick = async () => {
|
||||
const emailError = validateEmail(formData.email);
|
||||
const passwordError = validatePassword(formData.password);
|
||||
|
||||
if (emailError || passwordError) {
|
||||
setErrors({ email: emailError, password: passwordError });
|
||||
// Validation Starts
|
||||
if (formData.email === "" || formData.password === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setErrors({ email: "", password: "" });
|
||||
// Validate Email Format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
return;
|
||||
}
|
||||
// Validation Ends
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
`${import.meta.env.VITE_BASE_URI}/api/auth/login`,
|
||||
{ email: formData.email, password: formData.password },
|
||||
// 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": "*",
|
||||
},
|
||||
"Access-Control-Allow-Origin": "*"
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
toast.dismiss();
|
||||
|
||||
// Example if you want cookies / redux:
|
||||
toast.dismiss();
|
||||
// Cookies.set("authorization", res.headers.authorization, {
|
||||
// path: "/",
|
||||
// secure: true,
|
||||
// sameSite: "Lax",
|
||||
// secure: true, // Required for HTTPS
|
||||
// sameSite: "Lax", // Required for cross-origin requests
|
||||
// });
|
||||
|
||||
// dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
|
||||
|
||||
navigate("/"); // Redirect after 1 second
|
||||
|
||||
setTimeout(() => navigate('/'), 1000); // Redirect after 1 second
|
||||
toast.success("Login Successful", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
|
|
@ -191,10 +116,10 @@ const LoginForm = ({ onSwitchToRegister }) => {
|
|||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.status === 401) {
|
||||
toast.dismiss();
|
||||
|
||||
if (err.response?.status === 400 || err.response?.status === 401) {
|
||||
toast.error("Credentials Not Match", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
|
|
@ -207,6 +132,7 @@ const LoginForm = ({ onSwitchToRegister }) => {
|
|||
transition: Bounce,
|
||||
});
|
||||
} else {
|
||||
toast.dismiss();
|
||||
toast.error("Some Error Occurred", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
|
|
@ -219,128 +145,58 @@ const LoginForm = ({ onSwitchToRegister }) => {
|
|||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleGoogleLogin = () => {
|
||||
// Your Google OAuth logic here
|
||||
console.log("Google login clicked");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-8 rounded-lg w-full max-w-md">
|
||||
<div className="text-center mb-6">
|
||||
<span className="text-orange-500 text-sm">WELCOME BACK 👋</span>
|
||||
<h2 className="text-2xl font-bold text-gray-800 mt-2">Login to your Account</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<OAuthGoogle onGoogleLogin={handleGoogleLogin} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center my-6">
|
||||
<hr className="flex-1 border-gray-300" />
|
||||
<span className="px-4 text-gray-500 text-sm">or</span>
|
||||
<hr className="flex-1 border-gray-300" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleEmailChange}
|
||||
placeholder="Enter your email"
|
||||
className={`w-full px-4 py-1.5 border rounded-lg focus:ring-2 focus:border-transparent outline-none ${errors.email
|
||||
? "border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:ring-blue-500"
|
||||
}`}
|
||||
disabled={nextClick || isLoading}
|
||||
<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 })}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
|
||||
)}
|
||||
<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>
|
||||
|
||||
{/* {nextClick && ( */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={formData.password}
|
||||
onChange={handlePasswordChange}
|
||||
placeholder="Enter your password"
|
||||
className={`w-full px-4 py-1.5 border rounded-lg focus:ring-2 focus:border-transparent outline-none pr-12 ${errors.password
|
||||
? "border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:ring-blue-500"
|
||||
}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{showPassword ? <FiEyeOff size={20} /> : <BsEye size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.password}</p>
|
||||
)}
|
||||
{/* <div className="text-right mt-2">
|
||||
<a href="#" className="text-blue-500 text-sm hover:underline">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* )} */}
|
||||
|
||||
{/* {!nextClick ? (
|
||||
<button
|
||||
onClick={handleNextClick}
|
||||
disabled={isLoading}
|
||||
className={`w-full py-2 rounded-lg font-medium transition-colors ${isLoading
|
||||
? "bg-gray-400 cursor-not-allowed"
|
||||
: "bg-blue-500 hover:bg-blue-600 text-white"
|
||||
}`}
|
||||
>
|
||||
{isLoading ? "Verifying..." : "Next"}
|
||||
</button>
|
||||
) : ( */}
|
||||
<button
|
||||
onClick={handleFormLoginClick}
|
||||
disabled={isLoading}
|
||||
className={`w-full py-2 rounded-lg font-medium transition-colors ${isLoading
|
||||
? "bg-gray-400 cursor-not-allowed"
|
||||
: "bg-blue-500 hover:bg-blue-600 text-white"
|
||||
}`}
|
||||
>
|
||||
{isLoading ? "Logging in..." : "Login"}
|
||||
</button>
|
||||
{/* )} */}
|
||||
|
||||
<div className="text-center text-sm text-gray-600">
|
||||
Create an Account?{" "}
|
||||
<button
|
||||
onClick={onSwitchToRegister}
|
||||
className="text-blue-500 font-medium hover:underline"
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
<p>Create an Account. <Link to={'/register'} className="text-blue-400">Register</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginForm
|
||||
|
|
@ -10,8 +10,6 @@ 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 { BsEye } from "react-icons/bs";
|
||||
import { FiEyeOff } from "react-icons/fi";
|
||||
// import api from "../../config/api";
|
||||
|
||||
interface FormDataState {
|
||||
|
|
@ -23,217 +21,52 @@ interface FormDataState {
|
|||
}
|
||||
|
||||
|
||||
const RegisterForm = ({ onSwitchToLogin }) => {
|
||||
const [formData, setForm] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
firstName: "",
|
||||
lastName: ""
|
||||
});
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [errors, setErrors] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: ""
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const navigate = useNavigate()
|
||||
function RegisterForm() {
|
||||
const [formData, setForm] = useState<FormDataState>({ email: "", password: "", confirmPassword: "", firstName: "", lastName: "" });
|
||||
|
||||
const validateFirstName = (name) => {
|
||||
const trimmedName = name.trim();
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
if (!trimmedName) {
|
||||
return "First name is required";
|
||||
}
|
||||
|
||||
if (trimmedName.length < 2) {
|
||||
return "First name must be at least 2 characters long";
|
||||
}
|
||||
|
||||
if (trimmedName.length > 50) {
|
||||
return "First name is too long";
|
||||
}
|
||||
|
||||
const nameRegex = /^[a-zA-Z\s'-]+$/;
|
||||
if (!nameRegex.test(trimmedName)) {
|
||||
return "First name can only contain letters, spaces, hyphens, and apostrophes";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const validateLastName = (name) => {
|
||||
const trimmedName = name.trim();
|
||||
|
||||
if (!trimmedName) {
|
||||
return "Last name is required";
|
||||
}
|
||||
|
||||
if (trimmedName.length < 2) {
|
||||
return "Last name must be at least 2 characters long";
|
||||
}
|
||||
|
||||
if (trimmedName.length > 50) {
|
||||
return "Last name is too long";
|
||||
}
|
||||
|
||||
const nameRegex = /^[a-zA-Z\s'-]+$/;
|
||||
if (!nameRegex.test(trimmedName)) {
|
||||
return "Last name can only contain letters, spaces, hyphens, and apostrophes";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const validateEmail = (email) => {
|
||||
const trimmedEmail = email.trim();
|
||||
|
||||
if (!trimmedEmail) {
|
||||
return "Email address is required";
|
||||
}
|
||||
|
||||
if (trimmedEmail.length > 254) {
|
||||
return "Email address is too long";
|
||||
}
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
return "Please enter a valid email address";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const validatePassword = (password) => {
|
||||
if (!password) {
|
||||
return "Password is required";
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
return "Password must be at least 8 characters long";
|
||||
}
|
||||
|
||||
if (password.length > 128) {
|
||||
return "Password is too long";
|
||||
}
|
||||
|
||||
const hasUpperCase = /[A-Z]/.test(password);
|
||||
const hasLowerCase = /[a-z]/.test(password);
|
||||
const hasNumbers = /\d/.test(password);
|
||||
// const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
||||
|
||||
// if (!hasUpperCase) {
|
||||
// return "Password must contain at least one uppercase letter";
|
||||
// }
|
||||
|
||||
// if (!hasLowerCase) {
|
||||
// return "Password must contain at least one lowercase letter";
|
||||
// }
|
||||
|
||||
// if (!hasNumbers) {
|
||||
// return "Password must contain at least one number";
|
||||
// }
|
||||
|
||||
// if (!hasSpecialChar) {
|
||||
// return "Password must contain at least one special character";
|
||||
// }
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const validateConfirmPassword = (confirmPassword, password) => {
|
||||
if (!confirmPassword) {
|
||||
return "Please confirm your password";
|
||||
}
|
||||
|
||||
if (confirmPassword !== password) {
|
||||
return "Passwords do not match";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setForm({ ...formData, [field]: value });
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (errors[field]) {
|
||||
setErrors({ ...errors, [field]: "" });
|
||||
}
|
||||
|
||||
// If confirming password, also check if it matches
|
||||
if (field === "password" && formData.confirmPassword && errors.confirmPassword) {
|
||||
const confirmError = validateConfirmPassword(formData.confirmPassword, value);
|
||||
if (!confirmError) {
|
||||
setErrors({ ...errors, [field]: "", confirmPassword: "" });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormRegisterClick = async () => {
|
||||
const firstNameError = validateFirstName(formData.firstName);
|
||||
const lastNameError = validateLastName(formData.lastName);
|
||||
const emailError = validateEmail(formData.email);
|
||||
const passwordError = validatePassword(formData.password);
|
||||
const confirmPasswordError = validateConfirmPassword(formData.confirmPassword, formData.password);
|
||||
|
||||
const newErrors = {
|
||||
firstName: firstNameError,
|
||||
lastName: lastNameError,
|
||||
email: emailError,
|
||||
password: passwordError,
|
||||
confirmPassword: confirmPasswordError,
|
||||
};
|
||||
|
||||
setErrors(newErrors);
|
||||
|
||||
// If any errors exist, stop
|
||||
if (Object.values(newErrors).some((error) => error !== "")) {
|
||||
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;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
// Validate Email Format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
console.log("Invalid email format");
|
||||
return;
|
||||
}
|
||||
// Validation Ends
|
||||
|
||||
const trimmedData = {
|
||||
firstName: formData.firstName.trim(),
|
||||
lastName: formData.lastName.trim(),
|
||||
email: formData.email.trim(),
|
||||
password: formData.password,
|
||||
confirmPassword: formData.confirmPassword,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
`${import.meta.env.VITE_BASE_URI}/api/auth/signup`,
|
||||
{
|
||||
firstName: trimmedData.firstName,
|
||||
lastName: trimmedData.lastName,
|
||||
email: trimmedData.email,
|
||||
password: trimmedData.password,
|
||||
},
|
||||
{
|
||||
// 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": "*",
|
||||
},
|
||||
"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("/");
|
||||
navigate('/')
|
||||
}
|
||||
} catch (err: any) {
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.status === 409) {
|
||||
toast.dismiss();
|
||||
|
||||
if (err.response?.status === 409) {
|
||||
toast.error("User Already Exists", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
|
|
@ -241,10 +74,12 @@ const RegisterForm = ({ onSwitchToLogin }) => {
|
|||
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,
|
||||
|
|
@ -252,181 +87,92 @@ const RegisterForm = ({ onSwitchToLogin }) => {
|
|||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleGoogleLogin = () => {
|
||||
// Your Google OAuth logic here
|
||||
console.log("Google signup clicked");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-5 rounded-lg w-full max-w-lg">
|
||||
<div className="text-center mb-2">
|
||||
<h2 className="text-2xl font-bold text-gray-800">Create an Account</h2>
|
||||
<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="flex justify-center">
|
||||
<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>
|
||||
|
||||
<div className="flex items-center my-1.5">
|
||||
<hr className="flex-1 border-gray-300" />
|
||||
<span className="px-4 text-gray-500 text-sm">or</span>
|
||||
<hr className="flex-1 border-gray-300" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange("firstName", e.target.value)}
|
||||
placeholder="First name"
|
||||
className={`w-full px-4 py-1.5 border rounded-lg focus:ring-2 focus:border-transparent outline-none ${errors.firstName
|
||||
? "border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:ring-blue-500"
|
||||
}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<p className="text-red-500 text-xs mt-0.5">{errors.firstName}</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange("lastName", e.target.value)}
|
||||
placeholder="Last name"
|
||||
className={`w-full px-4 py-1.5 border rounded-lg focus:ring-2 focus:border-transparent outline-none ${errors.lastName
|
||||
? "border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:ring-blue-500"
|
||||
}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<p className="text-red-500 text-xs mt-0.5">{errors.lastName}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
placeholder="Enter your email"
|
||||
className={`w-full px-4 py-1.5 border rounded-lg focus:ring-2 focus:border-transparent outline-none ${errors.email
|
||||
? "border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:ring-blue-500"
|
||||
}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={formData.password}
|
||||
onChange={(e) => handleInputChange("password", e.target.value)}
|
||||
placeholder="Enter your password"
|
||||
className={`w-full px-4 py-1.5 border rounded-lg focus:ring-2 focus:border-transparent outline-none pr-12 ${errors.password
|
||||
? "border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:ring-blue-500"
|
||||
}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{showPassword ? <FiEyeOff size={20} /> : <BsEye size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.password}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
|
||||
placeholder="Confirm your password"
|
||||
className={`w-full px-4 py-1.5 border rounded-lg focus:ring-2 focus:border-transparent outline-none pr-12 ${errors.confirmPassword
|
||||
? "border-red-500 focus:ring-red-500"
|
||||
: "border-gray-300 focus:ring-blue-500"
|
||||
}`}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{showConfirmPassword ? <FiEyeOff size={20} /> : <BsEye size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
{errors.confirmPassword && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleFormRegisterClick}
|
||||
disabled={isLoading}
|
||||
className={`w-full py-2 rounded-lg font-medium transition-colors ${isLoading
|
||||
? "bg-gray-400 cursor-not-allowed"
|
||||
: "bg-blue-500 hover:bg-blue-600 text-white"
|
||||
}`}
|
||||
>
|
||||
{isLoading ? "Creating Account..." : "Create Account"}
|
||||
</button>
|
||||
|
||||
<div className="text-center text-sm text-gray-600">
|
||||
Already have an Account?{" "}
|
||||
<button
|
||||
onClick={onSwitchToLogin}
|
||||
className="text-blue-500 font-medium hover:underline"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<p>Already! have an Account. <Link to={'/login'} className="text-blue-400">Login</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default RegisterForm
|
||||
|
|
|
|||
|
|
@ -1,82 +1,87 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import "../styles/style.css";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useEffect, useLayoutEffect, useRef } from "react";
|
||||
|
||||
import "../styles/style.css"
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import LoginForm from "./LoginForm";
|
||||
import RegisterForm from "./RegisterForm";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { AppDispatch } from "../../store/store";
|
||||
import { fetchUserDetails } from "../../store/slices/userSlice";
|
||||
import LoginRegisterImg from "../../assets/illustration_1_.png";
|
||||
import SMELogo from "../../assets/SMELogo.png";
|
||||
|
||||
function UserAuthUI() {
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
function UserAuthUI({ pg }: { pg: string }) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation(); // Hook to get the current URL path
|
||||
|
||||
// Sync isLogin state with the current route
|
||||
useLayoutEffect(() => {
|
||||
dispatch(fetchUserDetails());
|
||||
}, []);
|
||||
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const elementRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const path = location.pathname;
|
||||
if (path === "/login") {
|
||||
setIsLogin(true);
|
||||
} else if (path === "/register") {
|
||||
setIsLogin(false);
|
||||
if (pg === 'login') {
|
||||
elementRef.current?.classList.add('active')
|
||||
setTimeout(() => {
|
||||
elementRef.current?.classList.remove('active')
|
||||
}, 0)
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
elementRef.current?.classList.add('active')
|
||||
}, 0)
|
||||
}
|
||||
}, [location.pathname]);
|
||||
}, [])
|
||||
|
||||
const handleLogin = (loginData) => {
|
||||
console.log("Login data:", loginData);
|
||||
// Your login API call logic here
|
||||
};
|
||||
// const [activeToggle, setActiveToggle] = useState<string>('');
|
||||
|
||||
const handleRegister = (registerData) => {
|
||||
console.log("Register data:", registerData);
|
||||
// Your register API call logic here
|
||||
};
|
||||
// const [page, setPage] = useState(pg || 'login');
|
||||
function handleToggleForm(val: string) {
|
||||
navigate(`/${val}`);
|
||||
// setPage((prev) => prev === "login" ? "register" : "login")
|
||||
}
|
||||
|
||||
// const user: UserState = useSelector((state: RootState) => state.user);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (page === 'register') {
|
||||
// setActiveToggle('active')
|
||||
// } else {
|
||||
// setActiveToggle('')
|
||||
// }
|
||||
// }, [page])
|
||||
|
||||
// useEffect(() => {
|
||||
// setPage(pg);
|
||||
// }, [pg])
|
||||
|
||||
return (
|
||||
<div className="max-h-screen bg-white flex">
|
||||
{/* Left Side - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 bg-[var(--primary)] text-white p-12">
|
||||
<div className="flex flex-col items-center justify-center text-center w-full h-full gap-6">
|
||||
{/* Logos */}
|
||||
<div className="flex flex-col items-center gap-2 space-y-3">
|
||||
<img src={SMELogo} alt="SME Logo" className="h-10 w-auto mt-10" />
|
||||
<img
|
||||
src={LoginRegisterImg}
|
||||
alt="Illustration"
|
||||
className="h-[50vh] w-auto object-contain"
|
||||
/>
|
||||
<>
|
||||
<div className="auth-ui-con main-container-l">
|
||||
<div ref={elementRef} className={`container-l`}>
|
||||
<div className={`form-box login flex-col`}>
|
||||
<LoginForm />
|
||||
</div>
|
||||
|
||||
{/* Text Section */}
|
||||
<div className="flex flex-col items-center max-w-md gap-4">
|
||||
<h2 className="text-xl font-bold">Create, eSign, and Connect!</h2>
|
||||
<p className="text-blue-100 text-xs leading-relaxed">
|
||||
A Powerful eSign solution for Salesforce, powered by Adobe Advanced
|
||||
Trust List (AATL), to elevate your digital signature experience and
|
||||
foster agreements closures.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`form-box register flex-col`}>
|
||||
<RegisterForm />
|
||||
</div>
|
||||
|
||||
{/* Right Side - Form */}
|
||||
<div className="flex-1 flex items-center justify-center p-8 lg:p-12">
|
||||
{isLogin ? (
|
||||
<LoginForm
|
||||
onLogin={handleLogin}
|
||||
onSwitchToRegister={() => navigate("/register")} // Navigate to /register
|
||||
/>
|
||||
) : (
|
||||
<RegisterForm
|
||||
onRegister={handleRegister}
|
||||
onSwitchToLogin={() => navigate("/login")} // Navigate to /login
|
||||
/>
|
||||
)}
|
||||
<div className="toggle-box">
|
||||
<div className="toggle-panel toggle-left">
|
||||
<h1>Sign Made Easy</h1>
|
||||
<p>Don't have an account?</p>
|
||||
<button className="btn register-btn" onClick={() => handleToggleForm("register")}>Register</button>
|
||||
</div>
|
||||
|
||||
<div className="toggle-panel toggle-right">
|
||||
<h1>Welcome Back!</h1>
|
||||
<p>Already have an account?</p>
|
||||
<button className="btn login-btn" onClick={() => handleToggleForm("login")}>Login</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserAuthUI;
|
||||
export default UserAuthUI
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import UserAuthUI from "../auth/UsertAuthUI"
|
|||
function Login() {
|
||||
return (
|
||||
<>
|
||||
<div className="">
|
||||
<div className="flex justify-center items-center w-full h-[100vh]">
|
||||
<UserAuthUI pg={"login"} />
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
|
|||
// await sleep(5000);
|
||||
|
||||
const documents = useSelector((state: RootState) => state.documents.documents);
|
||||
const docCount = documents.length;
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
|
|
@ -88,109 +87,38 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
|
|||
}
|
||||
};
|
||||
|
||||
// Get proper Tailwind class names for upload card span
|
||||
const getUploadCardSpanClass = () => {
|
||||
switch (docCount) {
|
||||
case 0: return 'col-span-5'; // Full width when no docs
|
||||
case 1: return 'col-span-4'; // 4 cols for upload, 1 for doc
|
||||
case 2: return 'col-span-3'; // 3 cols for upload, 2 for docs
|
||||
case 3: return 'col-span-2'; // 2 cols for upload, 3 for docs
|
||||
case 4: return 'col-span-1'; // 1 col for upload, 4 for docs
|
||||
default: return 'col-span-1'; // 1 col for upload, rest for docs
|
||||
}
|
||||
};
|
||||
|
||||
// Calculate how many documents should be in the first row
|
||||
const getFirstRowDocCount = () => {
|
||||
if (docCount === 0) return 0;
|
||||
if (docCount <= 4) return docCount; // All docs fit in first row
|
||||
return 4; // Max 4 docs in first row when upload card takes 1 column
|
||||
};
|
||||
|
||||
const firstRowDocCount = getFirstRowDocCount();
|
||||
const remainingDocs = Math.max(0, docCount - firstRowDocCount);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Upload Card First */}
|
||||
<div className='space-y-3'>
|
||||
<div id='upload-doc-step-one' className="grid grid-cols-5 gap-2">
|
||||
{/* Upload Document Card - Always First */}
|
||||
<div
|
||||
id='upload-doc-step-one'
|
||||
className="flex flex-wrap gap-3">
|
||||
{/* Uploaded documents */}
|
||||
<div
|
||||
onClick={() => setModalOpen(true)}
|
||||
className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`}
|
||||
className="cursor-pointer w-[160px] h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md"
|
||||
>
|
||||
<FaPlus className="text-[var(--primary)] text-3xl mb-2" />
|
||||
<p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
|
||||
</div>
|
||||
|
||||
{/* First Row Documents */}
|
||||
{/* Document Show */}
|
||||
<ReactSortable
|
||||
className="contents" // Use 'contents' to make children participate in parent grid
|
||||
list={documents.slice(0, firstRowDocCount).map(doc => ({ ...doc }))}
|
||||
setList={(newState) => {
|
||||
const updatedDocs = [
|
||||
...newState,
|
||||
...documents.slice(firstRowDocCount)
|
||||
];
|
||||
dispatch(setDocuments(updatedDocs));
|
||||
}}
|
||||
className="flex flex-wrap gap-3"
|
||||
list={documents.map(doc => ({ ...doc }))}
|
||||
setList={(newState) => dispatch(setDocuments(newState))}
|
||||
handle=".drag-handle"
|
||||
animation={200}
|
||||
ghostClass="sortable-ghost"
|
||||
disabled={false}
|
||||
>
|
||||
{documents.slice(0, firstRowDocCount).map((doc) => (
|
||||
<div key={doc.id} className="col-span-1">
|
||||
<DocumentCard
|
||||
id={doc.id}
|
||||
name={doc.name}
|
||||
isCompleted={
|
||||
("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED"))
|
||||
? true
|
||||
: false
|
||||
}
|
||||
transactionTemplateToggle={transactionTemplateToggle}
|
||||
/>
|
||||
</div>
|
||||
{documents.map((doc) => (
|
||||
<DocumentCard key={doc.id} id={doc.id} name={doc.name} isCompleted={("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED")) ? true : false} transactionTemplateToggle={transactionTemplateToggle}/>
|
||||
))}
|
||||
</ReactSortable>
|
||||
</div>
|
||||
|
||||
{/* Additional Rows - Remaining Documents (5th, 6th, 7th, etc.) */}
|
||||
{remainingDocs > 0 && (
|
||||
<ReactSortable
|
||||
className="grid grid-cols-5 gap-2"
|
||||
list={documents.slice(firstRowDocCount).map(doc => ({ ...doc }))}
|
||||
setList={(newState) => {
|
||||
const updatedDocs = [
|
||||
...documents.slice(0, firstRowDocCount),
|
||||
...newState
|
||||
];
|
||||
dispatch(setDocuments(updatedDocs));
|
||||
}}
|
||||
handle=".drag-handle"
|
||||
animation={200}
|
||||
ghostClass="sortable-ghost"
|
||||
disabled={false}
|
||||
>
|
||||
{documents.slice(firstRowDocCount).map((doc) => (
|
||||
<div key={doc.id} className="col-span-1">
|
||||
<DocumentCard
|
||||
id={doc.id}
|
||||
name={doc.name}
|
||||
isCompleted={
|
||||
("isCompleted" in doc || ("status" in doc && doc.status === "UPLOADED"))
|
||||
? true
|
||||
: false
|
||||
}
|
||||
transactionTemplateToggle={transactionTemplateToggle}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
{isModalOpen && (
|
||||
|
|
@ -253,10 +181,6 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,13 +8,19 @@ import RightSideBar, { MASKTYPE, TEXT } from './rightSideBar/RightSideBar';
|
|||
import { DroppedItem, TagsTypes } from '../../../utlity/types';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { IoMdClose } from 'react-icons/io';
|
||||
|
||||
import { fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
|
||||
import { fetchDocuments } from '../../../store/slices/documentSlice';
|
||||
import { FaQuestionCircle } from 'react-icons/fa';
|
||||
import typeToIconMap from '../../../helper/iconMap';
|
||||
|
||||
import { IoAdd } from 'react-icons/io5';
|
||||
import Loader from '../../dashboard/Loader';
|
||||
import { hideLoader } from '../../../store/slices/loaderSlice';
|
||||
// import { TRANSACTION_TEMPLATE_TOGGLE } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils';
|
||||
import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
|
||||
import { IsSendInterface } from './ProcessStepTwo';
|
||||
import DroppedItemsTagsCon from './DroppedItemsTagsCon';
|
||||
|
||||
export interface DroppedItemsObj {
|
||||
|
|
@ -67,44 +73,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
const [droppedItems, setDroppedItems] = useState<DroppedItemsObj>({});
|
||||
|
||||
|
||||
interface HotKeysObj {
|
||||
isActive: boolean;
|
||||
key: string | null;
|
||||
tagId?: string | null;
|
||||
hotKey?: string | null;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// const hotKeysObjInitial: HotKeysObj = {
|
||||
// "CtrlA": {
|
||||
// enabled: false,
|
||||
// key: null
|
||||
// },
|
||||
// "Delete": {
|
||||
// enabled: false,
|
||||
// key: null
|
||||
// },
|
||||
// "CtrlC": {
|
||||
// enabled: false,
|
||||
// key: null,
|
||||
// tagId: null
|
||||
// }
|
||||
// }
|
||||
|
||||
const hotKeysObjInitial: HotKeysObj = {
|
||||
isActive: false,
|
||||
key: null,
|
||||
tagId: null,
|
||||
hotKey: null
|
||||
}
|
||||
|
||||
|
||||
|
||||
const [hotKeysObj, setHotKeysObj] = useState<HotKeysObj>(hotKeysObjInitial);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
|
|
@ -129,6 +97,105 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
}
|
||||
}
|
||||
|
||||
// let updatedTags = { ...recTags }
|
||||
// let tagsData = []
|
||||
|
||||
// for (const dropPageIds of Object.keys(updatedTags)) {
|
||||
|
||||
// for (const dropTag of updatedTags[dropPageIds]) {
|
||||
// let mask = null
|
||||
|
||||
// // console.log(dropTag, "line 132")
|
||||
|
||||
// // if (dropTag.subType?.toLowerCase() === "password") {
|
||||
// // console.log(dropTag)
|
||||
// mask = {
|
||||
// "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
|
||||
// "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
|
||||
// }
|
||||
// // }
|
||||
|
||||
// // console.log(dropTag, "line 204")
|
||||
|
||||
// const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
|
||||
|
||||
// const updatedTagData = {
|
||||
// "id": "id" in dropTag ? dropTag.id : null,
|
||||
// "label": dropTag.label,
|
||||
// "dimensions": dropTag.dimensions,
|
||||
// "type": dropTag.type.toUpperCase(),
|
||||
// // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
|
||||
// "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
|
||||
// "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
|
||||
// "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
|
||||
// "regex": "regex" in dropTag ? dropTag.regex : []
|
||||
// // }
|
||||
// ,
|
||||
// "documentId": dropTag.documentId,
|
||||
// "options": ("options" in dropTag) ? dropTag.options : [],
|
||||
// "pageIndex": dropTag.pageIndex,
|
||||
// "recipientId": dropTag.recipientId,
|
||||
// "styles": "styles" in dropTag ? dropTag.styles : {
|
||||
// "font": "",
|
||||
// "italic": false,
|
||||
// "bold": false,
|
||||
// "underline": false,
|
||||
// "color": "black",
|
||||
// "textSize": 0
|
||||
// },
|
||||
// "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
|
||||
// // "required": "required" in dropTag ? dropTag.required : ,
|
||||
// "update": "update" in dropTag ? dropTag.update : false,
|
||||
// "readOnly": false,
|
||||
// }
|
||||
|
||||
// // if ("format" in dropTag) {
|
||||
// // updatedTagData.format = `${dropTag.subType}`.toUpperCase();
|
||||
// // updatedTagData.dateFormat = dropTag.format;
|
||||
// // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
|
||||
// // }
|
||||
|
||||
// if("format" in dropTag && dropTag.format) {
|
||||
// updatedTagData.subType = dropTag.format.toLowerCase();
|
||||
// updatedTagData.format = dropTag.dateFormat;
|
||||
// }
|
||||
|
||||
// if (`${dropTag.type}`.toLowerCase() === "number") {
|
||||
// updatedTagData.decimalPlace = dropTag.decimalPlace
|
||||
// updatedTagData.isCurrency = dropTag.isCurrency
|
||||
// }
|
||||
|
||||
// if (dropTag.type === "TEXT") {
|
||||
// // updatedTagData.multiLine = dropTag.subType === "paragraph"
|
||||
|
||||
// if(dropTag.multiLine) {
|
||||
// updatedTagData.subtype = TEXT.PARAGRAPH
|
||||
// } else {
|
||||
// updatedTagData.subtype = TEXT.SINGLE_LINE
|
||||
// }
|
||||
|
||||
// if ("maskType" in dropTag) {
|
||||
// updatedTagData.maskCharacter = mask.character
|
||||
// updatedTagData.maskType = mask.type
|
||||
// }
|
||||
// }
|
||||
|
||||
// // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
|
||||
|
||||
// if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
|
||||
// if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
|
||||
|
||||
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
|
||||
|
||||
// if (!updatedTagData.id) delete updatedTagData.id;
|
||||
|
||||
// if (!isDeleted) {
|
||||
// // sendTags.mod.push(updatedTagData);
|
||||
// tagsData.push(updatedTagData)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
setDroppedItems(recTags)
|
||||
// Handle your response here
|
||||
} catch (err) {
|
||||
|
|
@ -226,6 +293,104 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
if (Object.keys(droppedItems).length === 0) return;
|
||||
if (!save && isSend === null) return;
|
||||
|
||||
// !save && dispatch(showLoader("Loading ..."))
|
||||
|
||||
// let updatedTags = { ...droppedItems }
|
||||
|
||||
// const sendTags = {
|
||||
// "mod": [],
|
||||
// "remove": []
|
||||
// }
|
||||
|
||||
// let tagsData = []
|
||||
|
||||
// const modified = []
|
||||
// const remove = []
|
||||
|
||||
// console.log(updatedTags, "updatedTags");
|
||||
// for (const dropPageIds of Object.keys(updatedTags)) {
|
||||
// for (const dropTag of updatedTags[dropPageIds]) {
|
||||
// let mask = null
|
||||
|
||||
// // console.log(dropTag, "line 132")
|
||||
|
||||
// // if (dropTag.subType?.toLowerCase() === "password") {
|
||||
// // console.log(dropTag)
|
||||
// mask = {
|
||||
// "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
|
||||
// "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
|
||||
// }
|
||||
// // }
|
||||
|
||||
// // console.log(dropTag, "line 204")
|
||||
|
||||
// const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
|
||||
|
||||
// const updatedTagData = {
|
||||
// "id": "id" in dropTag ? dropTag.id : null,
|
||||
// "label": dropTag.label,
|
||||
// "dimensions": dropTag.dimensions,
|
||||
// "type": dropTag.type.toUpperCase(),
|
||||
// // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
|
||||
// "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
|
||||
// "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
|
||||
// "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
|
||||
// "regex": "regex" in dropTag ? dropTag.regex : []
|
||||
// // }
|
||||
// ,
|
||||
// "documentId": dropTag.documentId,
|
||||
// "options": ("options" in dropTag) ? dropTag.options : [],
|
||||
// "pageIndex": dropTag.pageIndex,
|
||||
// "recipientId": dropTag.recipientId,
|
||||
// "styles": "styles" in dropTag ? dropTag.styles : {
|
||||
// "font": "",
|
||||
// "italic": false,
|
||||
// "bold": false,
|
||||
// "underline": false,
|
||||
// "color": "black",
|
||||
// "textSize": 0
|
||||
// },
|
||||
// "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
|
||||
// // "required": "required" in dropTag ? dropTag.required : ,
|
||||
// "update": "update" in dropTag ? dropTag.update : false,
|
||||
// "readOnly": false,
|
||||
// }
|
||||
|
||||
// if ("format" in dropTag) {
|
||||
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
|
||||
// updatedTagData.dateFormat = dropTag.format;
|
||||
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
|
||||
// }
|
||||
|
||||
// if (`${dropTag.type}`.toLowerCase() === "number") {
|
||||
// updatedTagData.decimalPlace = dropTag.decimalPlace
|
||||
// updatedTagData.isCurrency = dropTag.isCurrency
|
||||
// }
|
||||
|
||||
// if (updatedTagData.type === "TEXT") {
|
||||
// updatedTagData.multiLine = dropTag.subType === "paragraph"
|
||||
// if (dropTag.subType === "password") {
|
||||
// updatedTagData.maskCharacter = mask.character
|
||||
// updatedTagData.maskType = mask.type
|
||||
// }
|
||||
// }
|
||||
|
||||
// // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
|
||||
|
||||
// if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
|
||||
// if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
|
||||
|
||||
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
|
||||
|
||||
// if (!updatedTagData.id) delete updatedTagData.id;
|
||||
|
||||
// if (!isDeleted) {
|
||||
// // sendTags.mod.push(updatedTagData);
|
||||
// tagsData.push(updatedTagData)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
let updatedTags: any = [];
|
||||
|
||||
for (const dropPagesId of Object.keys(droppedItems)) {
|
||||
|
|
@ -250,6 +415,17 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
}, [isSend])
|
||||
// Save Tags - END
|
||||
|
||||
// handleTransactionSaving - START
|
||||
|
||||
// useEffect(() => {
|
||||
// const interval = setInterval(async () => {
|
||||
// setTransactionSaving(true)
|
||||
// }, 8000)
|
||||
// return () => clearInterval(interval);
|
||||
// }, [droppedItems])
|
||||
|
||||
// handleTransactionSaving - END
|
||||
|
||||
useEffect(() => {
|
||||
if (transactionSaving) {
|
||||
setTimeout(() => {
|
||||
|
|
@ -318,6 +494,12 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
prepData.group = dragElemData.group;
|
||||
prepData.isGroupExist = false;
|
||||
|
||||
// if(uniqGroupIds.includes(dragElemData.group)) {
|
||||
// prepData.isGroupExist = true;
|
||||
// } else {
|
||||
// prepData.isGroupExist = false;
|
||||
// setUniqGroupIds([...uniqGroupIds, dragElemData.group]);
|
||||
// }
|
||||
}
|
||||
|
||||
if (prepData.type === "temporal") {
|
||||
|
|
@ -337,104 +519,301 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
prepData],
|
||||
}
|
||||
|
||||
console.log("data311", dataToSet)
|
||||
setDroppedItems(dataToSet);
|
||||
setDroppedItemsCounter((prev) => prev + 1);
|
||||
|
||||
setTimeout(() => {
|
||||
const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
|
||||
console.log(tagIndex, "line 307", key);
|
||||
|
||||
setSelectedTag({ key, tagIndex })
|
||||
}, 0)
|
||||
};
|
||||
// HANDLE DROP - END
|
||||
|
||||
|
||||
|
||||
// HANDLE EXPAND TAG - START
|
||||
const handleExpandTag = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
|
||||
console.log("HANDLE EXPAND TAG - START")
|
||||
event.preventDefault(); // Prevent text selection issues
|
||||
|
||||
const expandingElemIcon = event.currentTarget;
|
||||
const targetElement = expandingElemIcon.nextElementSibling?.parentElement;
|
||||
const targetContainer = targetElement?.parentElement;
|
||||
|
||||
if (!targetContainer || !targetElement) return;
|
||||
|
||||
const elementRect = targetElement.getBoundingClientRect();
|
||||
|
||||
const startX = event.clientX;
|
||||
const startY = event.clientY;
|
||||
|
||||
const startWidth = elementRect.width;
|
||||
const startHeight = elementRect.height;
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
|
||||
let newWidth = startWidth + (event.clientX - startX);
|
||||
let newHeight = startHeight + (event.clientY - startY);
|
||||
|
||||
if (newHeight > 200 || newWidth > 400) {
|
||||
if (newHeight > 200) {
|
||||
newHeight = 200
|
||||
}
|
||||
|
||||
if (newWidth > 400) {
|
||||
newWidth = 400
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the new width & height
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: Array.isArray(droppedItems[key]) // Ensure it's an array
|
||||
? droppedItems[key].map((item, i) =>
|
||||
i === index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight }, update: true } : item
|
||||
)
|
||||
: [], // Provide a fallback in case it's undefined or not an array
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
document.removeEventListener("pointermove", handleMouseMove);
|
||||
document.removeEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener("pointermove", handleMouseMove);
|
||||
document.addEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
// HANDLE EXPAND TAG - END
|
||||
|
||||
|
||||
// Helper function to remove group border elements from DOM
|
||||
const removeGroupBorders = (groupId: string) => {
|
||||
console.log(`Removing borders for group: ${groupId}`);
|
||||
|
||||
const borderPositions = ['top', 'right', 'bottom', 'left'];
|
||||
|
||||
borderPositions.forEach(position => {
|
||||
const borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`);
|
||||
if (borderElement && borderElement.parentNode) {
|
||||
borderElement.parentNode.removeChild(borderElement);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// const handleAddRadioClick = (key:string) => {
|
||||
// console.log("Handle Radio Clicled", key)
|
||||
// console.log(droppedItems, "line 525")
|
||||
// }
|
||||
|
||||
const handleIGroupBorderPosition = (groupId: string) => {
|
||||
console.log("handleIGroupBorderPosition for group:", groupId);
|
||||
|
||||
const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
|
||||
if (groupElements.length === 0) {
|
||||
console.log("No group elements found for:", groupId);
|
||||
return;
|
||||
}
|
||||
|
||||
let targetContainer = groupElements[0].parentElement?.parentElement;
|
||||
|
||||
if (!targetContainer) {
|
||||
console.log("No target container found");
|
||||
return;
|
||||
}
|
||||
|
||||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
|
||||
// Use consistent offset values
|
||||
const offsetX = 10;
|
||||
const offsetY = 10;
|
||||
|
||||
// Ensure DOM is fully updated before positioning
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Enhanced handleGroupBorderPosition with better positioning logic
|
||||
const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
|
||||
if (!groupElements || groupElements.length === 0) return;
|
||||
|
||||
const groupId = groupElements[0].getAttribute('group');
|
||||
if (!groupId) return;
|
||||
|
||||
// Calculate the bounding box of all group elements
|
||||
let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
|
||||
|
||||
groupElements.forEach(element => {
|
||||
const parentElement = element.parentElement;
|
||||
if (!parentElement) return;
|
||||
|
||||
const rect = parentElement.getBoundingClientRect();
|
||||
const relativeLeft = rect.left - containerRect.left;
|
||||
const relativeTop = rect.top - containerRect.top;
|
||||
const relativeRight = relativeLeft + rect.width;
|
||||
const relativeBottom = relativeTop + rect.height;
|
||||
|
||||
minLeft = Math.min(minLeft, relativeLeft);
|
||||
minTop = Math.min(minTop, relativeTop);
|
||||
maxRight = Math.max(maxRight, relativeRight);
|
||||
maxBottom = Math.max(maxBottom, relativeBottom);
|
||||
});
|
||||
|
||||
// Add some padding around the group
|
||||
const padding = 10;
|
||||
minLeft -= padding;
|
||||
minTop -= padding;
|
||||
maxRight += padding;
|
||||
maxBottom += padding;
|
||||
|
||||
const width = maxRight - minLeft;
|
||||
const height = maxBottom - minTop;
|
||||
|
||||
// Update or create border elements
|
||||
const borderPositions = ['top', 'right', 'bottom', 'left'];
|
||||
|
||||
borderPositions.forEach(position => {
|
||||
let borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`) as HTMLElement;
|
||||
|
||||
if (!borderElement) {
|
||||
// Create border element if it doesn't exist
|
||||
borderElement = document.createElement('div');
|
||||
borderElement.className = `group-border ${position === 'bottom' ? 'bottom-border' : ''}`;
|
||||
borderElement.setAttribute('border-group', groupId);
|
||||
borderElement.setAttribute('border-pos', position);
|
||||
|
||||
// Add the + icon for bottom border
|
||||
if (position === 'bottom') {
|
||||
const addIcon = document.createElement('div');
|
||||
addIcon.innerHTML = '<IoAdd />'; // You might need to adjust this based on your icon system
|
||||
addIcon.onclick = () => {
|
||||
// Find the original item to pass to handleAddGroupItemClicked
|
||||
const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group === groupId);
|
||||
if (originalItem) {
|
||||
handleAddGroupItemClicked(key, originalItem);
|
||||
}
|
||||
};
|
||||
borderElement.appendChild(addIcon);
|
||||
}
|
||||
|
||||
// Append to container
|
||||
groupElements[0].parentElement?.parentElement?.appendChild(borderElement);
|
||||
}
|
||||
|
||||
// Position the border element
|
||||
borderElement.style.position = 'absolute';
|
||||
borderElement.style.pointerEvents = position === 'bottom' ? 'auto' : 'none';
|
||||
|
||||
switch (position) {
|
||||
case 'top':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = `${width}px`;
|
||||
borderElement.style.height = '2px';
|
||||
break;
|
||||
case 'right':
|
||||
borderElement.style.left = `${maxRight - 2}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = '2px';
|
||||
borderElement.style.height = `${height}px`;
|
||||
break;
|
||||
case 'bottom':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${maxBottom - 2}px`;
|
||||
borderElement.style.width = `${width}px`;
|
||||
borderElement.style.height = '2px';
|
||||
break;
|
||||
case 'left':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = '2px';
|
||||
borderElement.style.height = `${height}px`;
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddGroupItemClicked = (key: string, item: any) => {
|
||||
console.log("handleAddGroupItemClicked", item);
|
||||
|
||||
const groupId = item.group;
|
||||
|
||||
// Find all existing items in this group to determine the bottom-most position
|
||||
const existingGroupItems = droppedItems[key]?.filter(existingItem =>
|
||||
'group' in existingItem && existingItem.group === groupId
|
||||
) || [];
|
||||
|
||||
const existingGroupItem = droppedItems[key]?.filter(existingItem =>
|
||||
'group' in existingItem && existingItem.group === groupId
|
||||
) || [];
|
||||
|
||||
existingGroupItem[0].options
|
||||
|
||||
// Find the bottom-most item in the group
|
||||
let bottomMostItem = item;
|
||||
if (existingGroupItems.length > 0) {
|
||||
bottomMostItem = existingGroupItems.reduce((lowest, current) => {
|
||||
const currentBottom = current.dimensions.top + current.dimensions.height;
|
||||
const lowestBottom = lowest.dimensions.top + lowest.dimensions.height;
|
||||
return currentBottom > lowestBottom ? current : lowest;
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate new position: place below the bottom-most item
|
||||
const spacing = 10; // Adjust spacing as needed
|
||||
const newTop = bottomMostItem.dimensions.top + bottomMostItem.dimensions.height + spacing;
|
||||
|
||||
// Use the same left position as the parent (original) item
|
||||
const newItem = {
|
||||
...item,
|
||||
dimensions: {
|
||||
...item.dimensions,
|
||||
left: item.dimensions.left, // Keep same horizontal position as parent
|
||||
top: newTop // Position below the bottom-most item
|
||||
},
|
||||
isGroupExist: true
|
||||
};
|
||||
|
||||
// Update the dropped items
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: [...droppedItems[key], newItem],
|
||||
});
|
||||
|
||||
// Update group borders after adding the new item
|
||||
// Use setTimeout to ensure state update is processed
|
||||
setTimeout(() => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
}, 50); // Slightly longer timeout to ensure DOM updates
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!hotKeysObj.isActive) return
|
||||
// Initialize group borders for all existing groups after component updates
|
||||
const timeoutId = setTimeout(() => {
|
||||
const allGroupElements = document.querySelectorAll('[group]');
|
||||
const groupIds = new Set<string>();
|
||||
|
||||
const docCon = document.getElementById("doc-con");
|
||||
|
||||
switch (hotKeysObj.hotKey) {
|
||||
case "Ctrl+c":
|
||||
// Handle Ctrl+C
|
||||
break;
|
||||
case "Ctrl+v":
|
||||
// Handle Ctrl+V
|
||||
break;
|
||||
case "Ctrl+x":
|
||||
// Handle Ctrl+V
|
||||
break;
|
||||
case "Ctrl+z":
|
||||
// Handle Ctrl+V
|
||||
break;
|
||||
case "Ctrl+y":
|
||||
// Handle Ctrl+V
|
||||
break;
|
||||
case "Ctrl+a":
|
||||
docCon?.querySelectorAll("[data-tag-id]").forEach(tag => {
|
||||
tag.classList.add("border-2", "border-slate-800")
|
||||
tag.setAttribute("all-select-group", "true")
|
||||
|
||||
docCon.addEventListener("click", () => {
|
||||
console.log("focus in", tag)
|
||||
tag.classList.remove("border-2", "border-slate-800")
|
||||
tag.removeAttribute("all-select-group")
|
||||
})
|
||||
// docCon.addEventListener("focusout", () => {
|
||||
// console.log("focus out", tag)
|
||||
// tag.classList.remove("border-2", "border-slate-800")
|
||||
// tag.removeAttribute("all-select-group")
|
||||
// })
|
||||
});
|
||||
break;
|
||||
case "delete":
|
||||
docCon?.querySelectorAll("[all-select-group]").forEach((tag) => {
|
||||
console.log(tag, "TAGID")
|
||||
})
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
allGroupElements.forEach((element) => {
|
||||
const groupId = element.getAttribute('group');
|
||||
if (groupId) {
|
||||
groupIds.add(groupId);
|
||||
}
|
||||
}, [hotKeysObj])
|
||||
|
||||
const handleDocumentFocus = (key: string) => {
|
||||
const id = key.replace("_", "");
|
||||
const targetCon = document.getElementById(id);
|
||||
|
||||
targetCon?.addEventListener("keydown", (event) => {
|
||||
event.preventDefault();
|
||||
const ctrl = event.ctrlKey;
|
||||
const alt = event.altKey;
|
||||
const metaKey = event.metaKey;
|
||||
const shift = event.shiftKey;
|
||||
const pressedKey = event.key.toLowerCase();
|
||||
|
||||
let hotKey = pressedKey
|
||||
|
||||
|
||||
if (ctrl) {
|
||||
hotKey = "Ctrl+" + pressedKey;
|
||||
} else if (alt) {
|
||||
hotKey = "Alt" + pressedKey;
|
||||
} else if (metaKey) {
|
||||
hotKey = "Meta+" + pressedKey;
|
||||
} else if (shift) {
|
||||
hotKey = "Shift+" + pressedKey;
|
||||
}
|
||||
|
||||
setHotKeysObj({
|
||||
isActive: true,
|
||||
key: pressedKey,
|
||||
tagId: null,
|
||||
hotKey: hotKey
|
||||
});
|
||||
|
||||
groupIds.forEach((groupId) => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
});
|
||||
}, 100);
|
||||
|
||||
|
||||
// return () => targetCon?.removeEventListener("keydown");
|
||||
}
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [droppedItems]); // Re-run when droppedItems changes
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -445,8 +824,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
selectedDocuments.length > 0 ? selectedDocuments.map((doc, indxDoc) => {
|
||||
return (
|
||||
<div key={indxDoc} className='flex flex-col'>
|
||||
<div
|
||||
className='py-2 text-sm'>
|
||||
<div className='py-2 text-sm'>
|
||||
<p className='text-center'>{doc.name}</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -456,9 +834,8 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
const key = `${doc.id}_${page.index}`;
|
||||
return (
|
||||
<div
|
||||
tabIndex={-1}
|
||||
onFocus={() => handleDocumentFocus(key)}
|
||||
key={indx}
|
||||
|
||||
id={`${doc.id}${indx}`}
|
||||
onDrop={(e) => handleDrop(e, doc.id, indxDoc, page.index)}
|
||||
onDragOver={handleDragOver}
|
||||
|
|
@ -467,14 +844,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
|
||||
<DroppedItemsTagsCon
|
||||
droppedItems={droppedItems}
|
||||
pageIdkey={key}
|
||||
key={key}
|
||||
selectedTag={selectedTag}
|
||||
selectedRecipients={selectedRecipients}
|
||||
setSelectedTag={setSelectedTag}
|
||||
setDroppedItems={setDroppedItems}
|
||||
accountId={accountId}
|
||||
transactionId={transactionId}
|
||||
transactionTemplateToggle={transactionTemplateToggle}
|
||||
transaction
|
||||
/>
|
||||
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -1,47 +1,25 @@
|
|||
// Functions - START
|
||||
// -- handleTagClick
|
||||
// -- handleRemoveTag
|
||||
// -- handleTagMouseDown
|
||||
// -- handleExpandTag
|
||||
// -- removeGroupBorders
|
||||
// -- handleIGroupBorderPosition
|
||||
// -- handleGroupBorderPosition
|
||||
// -- handleAddGroupItemClicked
|
||||
// handleTagClick
|
||||
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
|
||||
import React from 'react'
|
||||
import { DroppedItemsObj } from './DocumentContainer';
|
||||
import typeToIconMap from '../../../helper/iconMap';
|
||||
import { IoMdClose } from 'react-icons/io';
|
||||
import { IoAdd } from 'react-icons/io5';
|
||||
import { DroppedItem } from '../../../utlity/types';
|
||||
import { FaQuestionCircle } from 'react-icons/fa';
|
||||
import api from '../../../config/api';
|
||||
import { Recipient } from '../../../store/slices/selectedRecipientsSlice';
|
||||
|
||||
interface DroppedItemsTagsConProps {
|
||||
droppedItems: DroppedItemsObj;
|
||||
pageIdkey: string;
|
||||
selectedTag: { key: string; index: number } | null;
|
||||
selectedRecipients: Recipient[];
|
||||
setSelectedTag: React.Dispatch<React.SetStateAction<{ key: string; index: number } | null>>;
|
||||
key: string;
|
||||
selectedTag: DroppedItem
|
||||
setSelectedTag: React.Dispatch<React.SetStateAction<DroppedItem>>;
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
|
||||
accountId: string;
|
||||
transactionId: string;
|
||||
transactionTemplateToggle: string;
|
||||
}
|
||||
|
||||
const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
||||
droppedItems,
|
||||
pageIdkey,
|
||||
selectedTag,
|
||||
selectedRecipients,
|
||||
setSelectedTag,
|
||||
setDroppedItems,
|
||||
accountId,
|
||||
transactionId,
|
||||
transactionTemplateToggle
|
||||
}) => {
|
||||
|
||||
const positionRef = useRef<{ left: number; top: number }>({ left: 0, top: 0 });
|
||||
const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({ droppedItems, key, selectedTag, setSelectedTag }) => {
|
||||
|
||||
const handleTagClick = (key: string, index: number) => {
|
||||
setSelectedTag({ key, index })
|
||||
|
|
@ -149,13 +127,10 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
const elementRect = targetElement.getBoundingClientRect();
|
||||
|
||||
|
||||
// Calculate the initial offset (where the mouse was clicked inside the element)
|
||||
const offsetX = event.clientX - elementRect.left;
|
||||
const offsetY = event.clientY - elementRect.top;
|
||||
|
||||
positionRef.current = { left: event.clientX - containerRect.left - offsetX, top: event.clientY - containerRect.top - offsetY };
|
||||
|
||||
const conScrollWidth = targetContainer?.scrollWidth;
|
||||
const conScrollHeight = targetContainer?.scrollHeight;
|
||||
|
||||
|
|
@ -172,7 +147,7 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
|
||||
}
|
||||
|
||||
// let timeOut = null
|
||||
let timeOut = null
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
// Get new X and Y positions relative to the container
|
||||
let left = event.clientX - containerRect.left - offsetX;
|
||||
|
|
@ -182,23 +157,15 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
|
||||
top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
|
||||
|
||||
// Save in ref (fast, no re-render)
|
||||
positionRef.current = { left, top };
|
||||
|
||||
// Update DOM directly
|
||||
targetElement!.style.top = `${top}px`;
|
||||
targetElement!.style.left = `${left}px`;
|
||||
|
||||
// Apply the movement to the element first
|
||||
// setDroppedItems(prevState => ({
|
||||
// ...prevState,
|
||||
// [key]: Array.isArray(prevState[key])
|
||||
// ? prevState[key].map((item, i) =>
|
||||
// i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
|
||||
// )
|
||||
// : [],
|
||||
// }));
|
||||
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: Array.isArray(prevState[key])
|
||||
? prevState[key].map((item, i) =>
|
||||
i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
|
||||
)
|
||||
: [],
|
||||
}));
|
||||
// Update group border position during drag if it's a group element
|
||||
if (groupElements != null && groupElements.length) {
|
||||
// Use a small timeout to ensure DOM is updated before recalculating borders
|
||||
|
|
@ -231,17 +198,6 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
});
|
||||
}
|
||||
|
||||
const { left, top } = positionRef.current;
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: Array.isArray(prevState[key])
|
||||
? prevState[key].map((item, i) =>
|
||||
i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
|
||||
)
|
||||
: [],
|
||||
}));
|
||||
|
||||
|
||||
document.removeEventListener("pointermove", handleMouseMove);
|
||||
document.removeEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
|
|
@ -252,279 +208,10 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
};
|
||||
// HANDLE TAG MOUSE DOWN - END
|
||||
|
||||
// HANDLE EXPAND TAG - START
|
||||
const handleExpandTag = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
|
||||
event.preventDefault(); // Prevent text selection issues
|
||||
|
||||
const expandingElemIcon = event.currentTarget;
|
||||
const targetElement = expandingElemIcon.nextElementSibling?.parentElement;
|
||||
const targetContainer = targetElement?.parentElement;
|
||||
|
||||
if (!targetContainer || !targetElement) return;
|
||||
|
||||
const elementRect = targetElement.getBoundingClientRect();
|
||||
|
||||
const startX = event.clientX;
|
||||
const startY = event.clientY;
|
||||
|
||||
const startWidth = elementRect.width;
|
||||
const startHeight = elementRect.height;
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
|
||||
let newWidth = startWidth + (event.clientX - startX);
|
||||
let newHeight = startHeight + (event.clientY - startY);
|
||||
|
||||
if (newHeight > 200 || newWidth > 400) {
|
||||
if (newHeight > 200) {
|
||||
newHeight = 200
|
||||
}
|
||||
|
||||
if (newWidth > 400) {
|
||||
newWidth = 400
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the new width & height
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: Array.isArray(droppedItems[key]) // Ensure it's an array
|
||||
? droppedItems[key].map((item, i) =>
|
||||
i === index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight }, update: true } : item
|
||||
)
|
||||
: [], // Provide a fallback in case it's undefined or not an array
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
document.removeEventListener("pointermove", handleMouseMove);
|
||||
document.removeEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener("pointermove", handleMouseMove);
|
||||
document.addEventListener("pointerup", handleMouseUp);
|
||||
};
|
||||
// HANDLE EXPAND TAG - END
|
||||
|
||||
const removeGroupBorders = (groupId: string) => {
|
||||
console.log(`Removing borders for group: ${groupId}`);
|
||||
|
||||
const borderPositions = ['top', 'right', 'bottom', 'left'];
|
||||
|
||||
borderPositions.forEach(position => {
|
||||
const borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`);
|
||||
if (borderElement && borderElement.parentNode) {
|
||||
borderElement.parentNode.removeChild(borderElement);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleIGroupBorderPosition = (groupId: string) => {
|
||||
const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
|
||||
|
||||
if (groupElements.length === 0) {
|
||||
console.log("No group elements found for:", groupId);
|
||||
return;
|
||||
}
|
||||
|
||||
let targetContainer = groupElements[0].parentElement?.parentElement;
|
||||
|
||||
if (!targetContainer) {
|
||||
console.log("No target container found");
|
||||
return;
|
||||
}
|
||||
|
||||
const containerRect = targetContainer.getBoundingClientRect();
|
||||
|
||||
// Use consistent offset values
|
||||
const offsetX = 10;
|
||||
const offsetY = 10;
|
||||
|
||||
// Ensure DOM is fully updated before positioning
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
|
||||
if (!groupElements || groupElements.length === 0) return;
|
||||
|
||||
const groupId = groupElements[0].getAttribute('group');
|
||||
if (!groupId) return;
|
||||
|
||||
// Calculate the bounding box of all group elements
|
||||
let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
|
||||
|
||||
groupElements.forEach(element => {
|
||||
const parentElement = element.parentElement;
|
||||
if (!parentElement) return;
|
||||
|
||||
const rect = parentElement.getBoundingClientRect();
|
||||
const relativeLeft = rect.left - containerRect.left;
|
||||
const relativeTop = rect.top - containerRect.top;
|
||||
const relativeRight = relativeLeft + rect.width;
|
||||
const relativeBottom = relativeTop + rect.height;
|
||||
|
||||
minLeft = Math.min(minLeft, relativeLeft);
|
||||
minTop = Math.min(minTop, relativeTop);
|
||||
maxRight = Math.max(maxRight, relativeRight);
|
||||
maxBottom = Math.max(maxBottom, relativeBottom);
|
||||
});
|
||||
|
||||
// Add some padding around the group
|
||||
const padding = 10;
|
||||
minLeft -= padding;
|
||||
minTop -= padding;
|
||||
maxRight += padding;
|
||||
maxBottom += padding;
|
||||
|
||||
const width = maxRight - minLeft;
|
||||
const height = maxBottom - minTop;
|
||||
|
||||
// Update or create border elements
|
||||
const borderPositions = ['top', 'right', 'bottom', 'left'];
|
||||
|
||||
borderPositions.forEach(position => {
|
||||
let borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`) as HTMLElement;
|
||||
|
||||
if (!borderElement) {
|
||||
// Create border element if it doesn't exist
|
||||
borderElement = document.createElement('div');
|
||||
borderElement.className = `group-border ${position === 'bottom' ? 'bottom-border' : ''}`;
|
||||
borderElement.setAttribute('border-group', groupId);
|
||||
borderElement.setAttribute('border-pos', position);
|
||||
|
||||
// Add the + icon for bottom border
|
||||
if (position === 'bottom') {
|
||||
const addIcon = document.createElement('div');
|
||||
addIcon.innerHTML = '<IoAdd />'; // You might need to adjust this based on your icon system
|
||||
addIcon.onclick = () => {
|
||||
// Find the original item to pass to handleAddGroupItemClicked
|
||||
const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group === groupId);
|
||||
if (originalItem) {
|
||||
handleAddGroupItemClicked(key, originalItem);
|
||||
}
|
||||
};
|
||||
borderElement.appendChild(addIcon);
|
||||
}
|
||||
|
||||
// Append to container
|
||||
groupElements[0].parentElement?.parentElement?.appendChild(borderElement);
|
||||
}
|
||||
|
||||
// Position the border element
|
||||
borderElement.style.position = 'absolute';
|
||||
borderElement.style.pointerEvents = position === 'bottom' ? 'auto' : 'none';
|
||||
|
||||
switch (position) {
|
||||
case 'top':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = `${width}px`;
|
||||
borderElement.style.height = '2px';
|
||||
break;
|
||||
case 'right':
|
||||
borderElement.style.left = `${maxRight - 2}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = '2px';
|
||||
borderElement.style.height = `${height}px`;
|
||||
break;
|
||||
case 'bottom':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${maxBottom - 2}px`;
|
||||
borderElement.style.width = `${width}px`;
|
||||
borderElement.style.height = '2px';
|
||||
break;
|
||||
case 'left':
|
||||
borderElement.style.left = `${minLeft}px`;
|
||||
borderElement.style.top = `${minTop}px`;
|
||||
borderElement.style.width = '2px';
|
||||
borderElement.style.height = `${height}px`;
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddGroupItemClicked = (key: string, item: any) => {
|
||||
const groupId = item.group;
|
||||
|
||||
// Find all existing items in this group to determine the bottom-most position
|
||||
const existingGroupItems = droppedItems[key]?.filter(existingItem =>
|
||||
'group' in existingItem && existingItem.group === groupId
|
||||
) || [];
|
||||
|
||||
const existingGroupItem = droppedItems[key]?.filter(existingItem =>
|
||||
'group' in existingItem && existingItem.group === groupId
|
||||
) || [];
|
||||
|
||||
existingGroupItem[0].options
|
||||
|
||||
// Find the bottom-most item in the group
|
||||
let bottomMostItem = item;
|
||||
if (existingGroupItems.length > 0) {
|
||||
bottomMostItem = existingGroupItems.reduce((lowest, current) => {
|
||||
const currentBottom = current.dimensions.top + current.dimensions.height;
|
||||
const lowestBottom = lowest.dimensions.top + lowest.dimensions.height;
|
||||
return currentBottom > lowestBottom ? current : lowest;
|
||||
});
|
||||
}
|
||||
|
||||
// Calculate new position: place below the bottom-most item
|
||||
const spacing = 10; // Adjust spacing as needed
|
||||
const newTop = bottomMostItem.dimensions.top + bottomMostItem.dimensions.height + spacing;
|
||||
|
||||
// Use the same left position as the parent (original) item
|
||||
const newItem = {
|
||||
...item,
|
||||
dimensions: {
|
||||
...item.dimensions,
|
||||
left: item.dimensions.left, // Keep same horizontal position as parent
|
||||
top: newTop // Position below the bottom-most item
|
||||
},
|
||||
isGroupExist: true
|
||||
};
|
||||
|
||||
// Update the dropped items
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: [...droppedItems[key], newItem],
|
||||
});
|
||||
|
||||
// Update group borders after adding the new item
|
||||
// Use setTimeout to ensure state update is processed
|
||||
setTimeout(() => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
}, 50); // Slightly longer timeout to ensure DOM updates
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize group borders for all existing groups after component updates
|
||||
const timeoutId = setTimeout(() => {
|
||||
const allGroupElements = document.querySelectorAll('[group]');
|
||||
const groupIds = new Set<string>();
|
||||
|
||||
allGroupElements.forEach((element) => {
|
||||
const groupId = element.getAttribute('group');
|
||||
if (groupId) {
|
||||
groupIds.add(groupId);
|
||||
}
|
||||
});
|
||||
|
||||
groupIds.forEach((groupId) => {
|
||||
handleIGroupBorderPosition(groupId);
|
||||
});
|
||||
}, 0);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [droppedItems]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */}
|
||||
{droppedItems[pageIdkey]?.map((item, index) => {
|
||||
{droppedItems[key]?.map((item, index) => {
|
||||
if (item.isDeleted) return;
|
||||
|
||||
const type = item.type.toUpperCase();
|
||||
|
|
@ -535,10 +222,8 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
<div
|
||||
// key={index}
|
||||
draggable="false"
|
||||
data-tag-id={index}
|
||||
data-tag-selected={index === selectedTag?.index}
|
||||
className="absolute rounded dropped-item"
|
||||
onClick={() => handleTagClick(pageIdkey, index)}
|
||||
onClick={() => handleTagClick(key, index)}
|
||||
style={{
|
||||
left: `${item.dimensions.left}px`,
|
||||
top: `${item.dimensions.top}px`,
|
||||
|
|
@ -549,7 +234,7 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
|
||||
|
||||
{/* If Selected Tag Recipient Info- START */}
|
||||
{selectedTag?.key && selectedTag.key === pageIdkey && selectedTag.index === index &&
|
||||
{selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
|
||||
<div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
|
||||
<div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
|
||||
<p className='w-2.5 h-2.5 rounded'
|
||||
|
|
@ -561,16 +246,18 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
<p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
|
||||
<IoMdClose onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveTag(pageIdkey, index)
|
||||
handleRemoveTag(key, index)
|
||||
}} className='cursor-pointer' />
|
||||
</div>
|
||||
</div>}
|
||||
{/* If Selected Tag Recipient Info- END */}
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Expand Circle - STARTS */}
|
||||
{item.type !== "radio" && item.type !== "checkbox" && <div
|
||||
onPointerDown={(e) => handleExpandTag(e, pageIdkey, index)}
|
||||
onPointerDown={(e) => handleExpandTag(e, key, index)}
|
||||
className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'>
|
||||
</div>}
|
||||
{/* Expand Circle - ENDS */}
|
||||
|
|
@ -579,7 +266,7 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
{
|
||||
<div
|
||||
{...("group" in item && item.group ? { "group": item.group } : {})}
|
||||
onPointerDown={(e) => handleTagMouseDown(e, pageIdkey, index)}
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
|
|
@ -603,7 +290,7 @@ const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
|
|||
<div className="group-border" border-group={item.group} border-pos="right"></div>
|
||||
<div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
|
||||
<div
|
||||
onClick={() => handleAddGroupItemClicked(pageIdkey, item)}>
|
||||
onClick={() => handleAddGroupItemClicked(key, item)}>
|
||||
<IoAdd />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
|
|||
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
|
||||
|
||||
const data = res.data.filter((obj, indx) => {
|
||||
// if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false
|
||||
if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false
|
||||
return true
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -128,10 +128,10 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
setTimeout(() => {
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
|
||||
if (isSignSend) {
|
||||
window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
|
||||
// window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
|
||||
}
|
||||
else {
|
||||
navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
|
||||
// navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
|
||||
}
|
||||
} else {
|
||||
navigate(`/templates`);
|
||||
|
|
|
|||
|
|
@ -119,6 +119,11 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
};
|
||||
});
|
||||
} else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
|
||||
// return updated;
|
||||
// })
|
||||
setDroppedItems((prev) => {
|
||||
return (prev.map((item, idx) => {
|
||||
if (idx === selTagIndx) {
|
||||
|
|
@ -292,20 +297,18 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
<RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
|
||||
<DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
|
||||
|
||||
{selectedTag.label &&
|
||||
<LabelAttr label={selectedTag.label} handlePropertyChange={handlePropertyChange} />}
|
||||
|
||||
<ToolTipAttr tooltip={selectedTag.tooltip ?? ""} handlePropertyChange={handlePropertyChange} />
|
||||
|
||||
{
|
||||
(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
|
||||
<RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
{
|
||||
selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
|
||||
<CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
{selectedTag.label &&
|
||||
<LabelAttr label={selectedTag.label} handlePropertyChange={handlePropertyChange} />}
|
||||
|
||||
<ToolTipAttr tooltip={selectedTag.tooltip ?? ""} handlePropertyChange={handlePropertyChange} />
|
||||
{selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
|
||||
<CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />}
|
||||
|
||||
{
|
||||
selectedType && Object.keys(selectedType).length > 0 &&
|
||||
|
|
@ -358,7 +361,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
{
|
||||
selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
|
||||
<div>
|
||||
<label htmlFor="" className="font-medium">Decimal Places</label>
|
||||
<label htmlFor="" className="">Decimal Places</label>
|
||||
<input
|
||||
type="number"
|
||||
onChange={(e) => handleDecimalPlace(e)}
|
||||
|
|
@ -389,7 +392,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
onClick={() => setStyleOpen(!styleOpen)}
|
||||
>
|
||||
<label
|
||||
className="block mb-2 font-medium">Styles</label>
|
||||
className="block mb-2">Styles</label>
|
||||
<IoIosArrowDown className={`${styleOpen ? "rotate-[-90deg]" : ""} transition-all`} />
|
||||
</div>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
|
|||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="font-medium">Type</label>
|
||||
<label htmlFor="" className="">Type</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({ type, handlePropert
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
|
||||
<div className="flex justify-left items-center gap-1.5 mt-0.5">
|
||||
<label
|
||||
className="text-slate-600 transitions-all duration-150 font-medium"
|
||||
className={`text-xs ${isCurrentTimeStamp ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`}
|
||||
htmlFor="use_current_timestamp"
|
||||
>
|
||||
Use Current Timestamp
|
||||
|
|
|
|||
|
|
@ -73,27 +73,24 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (disabled) return;
|
||||
|
||||
// Move ON Key Down - START
|
||||
// useEffect(() => {
|
||||
// const handleKeyDown = (event: KeyboardEvent) => {
|
||||
// if (disabled) return;
|
||||
switch (event.key) {
|
||||
case 'ArrowUp':
|
||||
case 'ArrowDown':
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowRight':
|
||||
event.preventDefault();
|
||||
handleMove(event.key.replace('Arrow', '').toLowerCase() as any);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// switch (event.key) {
|
||||
// case 'ArrowUp':
|
||||
// case 'ArrowDown':
|
||||
// case 'ArrowLeft':
|
||||
// case 'ArrowRight':
|
||||
// event.preventDefault();
|
||||
// handleMove(event.key.replace('Arrow', '').toLowerCase() as any);
|
||||
// break;
|
||||
// }
|
||||
// };
|
||||
|
||||
// window.addEventListener('keydown', handleKeyDown);
|
||||
// return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
// }, [disabled, stepSize]);
|
||||
// Move ON Key Down - END
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [disabled, stepSize]);
|
||||
|
||||
const buttonClass = `
|
||||
w-8 h-8 flex items-center justify-center rounded-full border shadow-sm text-[12px]
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const LabelAttr: React.FC<LabelAttrInt> = ({ label, handlePropertyChange }) => {
|
|||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<label className='font-medium'>Label</label>
|
||||
<label>Label</label>
|
||||
<input
|
||||
value={label}
|
||||
onChange={(e) => handlePropertyChange('label', e.target.value)}
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<label className="font-medium" htmlFor="maxLength">Max Length</label>
|
||||
<div>
|
||||
<label htmlFor="maxLength">Max Length</label>
|
||||
<input
|
||||
id="maxLength"
|
||||
value={maxLength}
|
||||
|
|
@ -50,8 +50,8 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
|
|||
onChange={handleMaxChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<label className="font-medium" htmlFor="minLength">Min Length</label>
|
||||
<div className="mt-2">
|
||||
<label htmlFor="minLength">Min Length</label>
|
||||
<input
|
||||
id="minLength"
|
||||
value={minLength}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ interface RequiredAttrInt {
|
|||
|
||||
const RequiredAttr : React.FC<RequiredAttrInt> = ({required, handlePropertyChange}) => {
|
||||
return (
|
||||
<div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
|
||||
<label htmlFor="required" className="text-slate-600 transitions-all duration-150 font-medium">Required</label>
|
||||
<div className="flex justify-between items-center">
|
||||
<label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
|
||||
<input
|
||||
id="required"
|
||||
checked={required ? required : false}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
|
|||
return (
|
||||
<>
|
||||
<div>
|
||||
<label htmlFor="" className="font-medium">Add Options</label>
|
||||
<label htmlFor="" className="">Add Options</label>
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
|
|||
return (
|
||||
<div>
|
||||
<div className="flex justify-between">
|
||||
<label htmlFor="" className="font-medium">Formats</label>
|
||||
<label htmlFor="" className="">Formats</label>
|
||||
{(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
|
||||
<div className="flex justify-center items-center gap-1.5">
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const ToolTipAttr: React.FC<ToolTipAttrInt> = ({ tooltip, handlePropertyChange }
|
|||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<label className='font-medium'>ToolTip</label>
|
||||
<label>ToolTip</label>
|
||||
<input
|
||||
value={tooltip}
|
||||
onChange={(e) => handlePropertyChange('tooltip', e.target.value)}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import UserAuthUI from "../auth/UsertAuthUI"
|
|||
function Register() {
|
||||
return (
|
||||
<>
|
||||
<div className="">
|
||||
<div className="flex justify-center items-center w-full h-[100vh]">
|
||||
<UserAuthUI pg={"register"} />
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@ html {
|
|||
.auth-ui-con .container-l {
|
||||
position: relative;
|
||||
|
||||
width: 1280px;
|
||||
height: 599px;
|
||||
width: 850px;
|
||||
height: 550px;
|
||||
background: #fff;
|
||||
/* margin-top: 20px; */
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
/* border-radius: 30px; */
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, .2);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
|
|||
Loading…
Reference in New Issue