Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update app/src/pages/UserAuth.tsx

Browse Source
This commit is contained in:
Vishnu
2025-07-24 10:31:28 +00:00
parent 06590feea1
commit 7cf7ec32db
1 changed files with 241 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

482
app/src/pages/UserAuth.tsx
View File

@@ -1,241 +1,241 @@
import React, { useState, FormEvent, useEffect } from "react"; import React, { useState, FormEvent, useEffect } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { LogoIconLarge } from "../components/icons/Logo"; import { LogoIconLarge } from "../components/icons/Logo";
import { EyeIcon } from "../components/icons/ExportCommonIcons"; import { EyeIcon } from "../components/icons/ExportCommonIcons";
import { import {
useLoadingProgress, useLoadingProgress,
useOrganization, useOrganization,
useUserName, useUserName,
} from "../store/builder/store"; } from "../store/builder/store";
import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi"; import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi"; import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
import FingerprintJS from "@fingerprintjs/fingerprintjs"; import FingerprintJS from "@fingerprintjs/fingerprintjs";
import { recentlyViewed } from "../services/dashboard/recentlyViewed"; import { recentlyViewed } from "../services/dashboard/recentlyViewed";
import { getUserData } from "../functions/getUserData"; import { getUserData } from "../functions/getUserData";
const UserAuth: React.FC = () => { const UserAuth: React.FC = () => {
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [isSignIn, setIsSignIn] = useState(true); const [isSignIn, setIsSignIn] = useState(true);
const { userName, setUserName } = useUserName(); const { userName, setUserName } = useUserName();
const { setOrganization } = useOrganization(); const { setOrganization } = useOrganization();
const { setLoadingProgress } = useLoadingProgress(); const { setLoadingProgress } = useLoadingProgress();
const [fingerprint, setFingerprint] = useState(""); const [fingerprint, setFingerprint] = useState("");
const navigate = useNavigate(); const navigate = useNavigate();
const initializeFingerprint = async () => { const initializeFingerprint = async () => {
const fp = await FingerprintJS.load(); const fp = await FingerprintJS.load();
const result = await fp.get(); const result = await fp.get();
setFingerprint(result.visitorId); // Set the fingerprint setFingerprint(result.visitorId); // Set the fingerprint
}; };
useEffect(() => { useEffect(() => {
initializeFingerprint(); initializeFingerprint();
}, []) }, [])
const { userId, organization } = getUserData(); const { userId, organization } = getUserData();
const handleLogin = async (e: FormEvent<HTMLFormElement>) => { const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
const organization = email.split("@")[1].split(".")[0]; const organization = email.split("@")[1].split(".")[0];
try { try {
const res = await signInApi(email, password, organization, fingerprint); const res = await signInApi(email, password, organization, fingerprint);
// console.log('res: ', res); // console.log('res: ', res);
if (res.message.message === "login successfull") { if (res.message.message === "login successfull") {
setError(""); setError("");
setOrganization(organization); setOrganization(organization);
setUserName(res.message.name); setUserName(res.message.name);
// console.log(' res.userId: ', res.message.userId); // console.log(' res.userId: ', res.message.userId);
localStorage.setItem("userId", res.message.userId); localStorage.setItem("userId", res.message.userId);
localStorage.setItem("email", res.message.email); localStorage.setItem("email", res.message.email);
localStorage.setItem("userName", res.message.name); localStorage.setItem("userName", res.message.name);
localStorage.setItem("token", res.message.token); localStorage.setItem("token", res.message.token);
localStorage.setItem("refreshToken", res.message.refreshToken); localStorage.setItem("refreshToken", res.message.refreshToken);
try { try {
const projects = await recentlyViewed(organization, res.message.userId); const projects = await recentlyViewed(organization, res.message.userId);
if (res.message.isShare) { if (res.message.isShare) {
if (Object.values(projects.RecentlyViewed).length > 0) { if (Object.values(projects.RecentlyViewed).length > 0) {
const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id; const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == firstId)) { if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == firstId)) {
setLoadingProgress(1) setLoadingProgress(1)
navigate(`/${firstId}`) navigate(`/${firstId}`)
} else { } else {
navigate("/Dashboard") navigate("/Dashboard")
} }
} else { } else {
setLoadingProgress(1); setLoadingProgress(1);
navigate("/Dashboard"); navigate("/Dashboard");
} }
} }
} catch (error) { } catch (error) {
console.error("Error fetching recent projects:", error); console.error("Error fetching recent projects:", error);
} }
} else if (res.message === "User Not Found!!! Kindly signup...") { } else if (res.message === "User Not Found!!! Kindly signup...") {
setError("Account not found"); setError("Account not found");
} else if (res.message === "Already LoggedIn on another browser....Please logout!!!") { } else if (res.message === "Already LoggedIn on another browser....Please logout!!!") {
setError("Already logged in on another browser. Please logout first."); setError("Already logged in on another browser. Please logout first.");
navigate("/"); navigate("/");
setError("") setError("")
// setError(""); // setError("");
// setOrganization(organization); // setOrganization(organization);
// setUserName(res.ForceLogoutData.userName); // setUserName(res.ForceLogoutData.userName);
// console.log(' res.userId: ', res.ForceLogoutData.userId); // console.log(' res.userId: ', res.ForceLogoutData.userId);
// localStorage.setItem("userId", res.ForceLogoutData.userId); // localStorage.setItem("userId", res.ForceLogoutData.userId);
// localStorage.setItem("email", res.ForceLogoutData.Email); // localStorage.setItem("email", res.ForceLogoutData.Email);
// localStorage.setItem("userName", res.ForceLogoutData.userName); // localStorage.setItem("userName", res.ForceLogoutData.userName);
// localStorage.setItem("token", res.ForceLogoutData.token); // localStorage.setItem("token", res.ForceLogoutData.token);
// localStorage.setItem("refreshToken", res.ForceLogoutData.refreshToken); // localStorage.setItem("refreshToken", res.ForceLogoutData.refreshToken);
// if (res.ForceLogoutData.isShare) { // if (res.ForceLogoutData.isShare) {
// setLoadingProgress(1); // setLoadingProgress(1);
// navigate("/Dashboard"); // navigate("/Dashboard");
// } // }
} }
} catch (error) { } catch (error) {
echo.error("Login failed"); echo.error("Login failed");
} }
}; };
const handleRegister = async (e: FormEvent) => { const handleRegister = async (e: FormEvent) => {
e.preventDefault(); e.preventDefault();
if (email && password && userName) { if (email && password && userName) {
setError(""); setError("");
try { try {
const organization = email.split("@")[1].split(".")[0]; const organization = email.split("@")[1].split(".")[0];
const res = await signUpApi(userName, email, password, organization); const res = await signUpApi(userName, email, password, organization);
if (res.message === "New User created") { if (res.message === "New User created") {
setIsSignIn(true); setIsSignIn(true);
} }
if (res.message === "User already exists") { if (res.message === "User already exists") {
setError("User already exists"); setError("User already exists");
} }
} catch (error) { } catch (error) {
echo.error("Register user failed"); echo.error("Register user failed");
} }
} else { } else {
setError("Please fill all the fields!"); setError("Please fill all the fields!");
} }
}; };
return ( return (
<div className="auth-container"> <div className="auth-container">
<div className="logo-icon"> <div className="logo-icon">
<LogoIconLarge /> <LogoIconLarge />
</div> </div>
<h1>Welcome to Dwinzo</h1> <h1>Welcome to Aalai</h1>
<p> <p>
{isSignIn ? ( {isSignIn ? (
<> <>
Don’t have an account?{" "} Don’t have an account?{" "}
<span <span
className="link" className="link"
onClick={() => setIsSignIn(false)} onClick={() => setIsSignIn(false)}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
Register here! Register here!
</span> </span>
</> </>
) : ( ) : (
<> <>
Already have an account?{" "} Already have an account?{" "}
<span <span
className="link" className="link"
onClick={() => setIsSignIn(true)} onClick={() => setIsSignIn(true)}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
Login here! Login here!
</span> </span>
</> </>
)} )}
</p> </p>
<button id="google-login" className="google-login"> <button id="google-login" className="google-login">
<span className="google-icon">G</span> Continue with Google <span className="google-icon">G</span> Continue with Google
</button> </button>
{error && <div className="error-message">🛈 {error}</div>} {error && <div className="error-message">🛈 {error}</div>}
<form <form
onSubmit={isSignIn ? handleLogin : handleRegister} onSubmit={isSignIn ? handleLogin : handleRegister}
className="auth-form" className="auth-form"
> >
{!isSignIn && ( {!isSignIn && (
<input <input
type="text" type="text"
value={userName} value={userName}
placeholder="Username" placeholder="Username"
onChange={(e) => setUserName(e.target.value)} onChange={(e) => setUserName(e.target.value)}
required required
/> />
)} )}
<input <input
type="email" type="email"
name="email" name="email"
value={email} value={email}
placeholder="Email" placeholder="Email"
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
required required
/> />
<div className="password-container"> <div className="password-container">
<input <input
name="password" name="password"
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={password} value={password}
placeholder="Password" placeholder="Password"
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
required required
/> />
<button <button
id="toogle-password" id="toogle-password"
type="button" type="button"
className="toggle-password" className="toggle-password"
onClick={() => setShowPassword(!showPassword)} onClick={() => setShowPassword(!showPassword)}
> >
<EyeIcon isClosed={showPassword} /> <EyeIcon isClosed={showPassword} />
</button> </button>
</div> </div>
{!isSignIn && ( {!isSignIn && (
<div className="policy-checkbox"> <div className="policy-checkbox">
<input type="checkbox" name="" id="" required /> <input type="checkbox" name="" id="" required />
<div className="label"> <div className="label">
I have read and agree to the terms of service I have read and agree to the terms of service
</div> </div>
</div> </div>
)} )}
<button id="form-submit" type="submit" className="continue-button"> <button id="form-submit" type="submit" className="continue-button">
{isSignIn ? "Continue" : "Register"} {isSignIn ? "Continue" : "Register"}
</button> </button>
</form> </form>
<p className="policy"> <p className="policy">
By signing up for, or logging into, an account, you agree to our{" "} By signing up for, or logging into, an account, you agree to our{" "}
<span <span
className="link" className="link"
onClick={() => navigate("/privacy")} onClick={() => navigate("/privacy")}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
privacy policy privacy policy
</span>{" "} </span>{" "}
&{" "} &{" "}
<span <span
className="link" className="link"
onClick={() => navigate("/terms")} onClick={() => navigate("/terms")}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
terms of service terms of service
</span>{" "} </span>{" "}
whether you read them or not. You can also find these terms on our whether you read them or not. You can also find these terms on our
website. website.
</p> </p>
</div> </div>
); );
}; };
export default UserAuth; export default UserAuth;