first commit
This commit is contained in:
37
app/src/pages/Dashboard.tsx
Normal file
37
app/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
useSocketStore
|
||||
} from "../store/builder/store";
|
||||
import DashboardHome from "../components/Dashboard/DashboardHome";
|
||||
import DashboardProjects from "../components/Dashboard/DashboardProjects";
|
||||
import DashboardTrash from "../components/Dashboard/DashboardTrash";
|
||||
import { getUserData } from "../components/Dashboard/functions/getUserData";
|
||||
import SidePannel from "../components/Dashboard/SidePannel";
|
||||
import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<string>("Home");
|
||||
const { socket } = useSocketStore();
|
||||
const { userId, organization, email, userName } = getUserData();
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
useSocketStore.getState().initializeSocket(email, organization, token);
|
||||
} else {
|
||||
|
||||
}
|
||||
}, [socket]);
|
||||
|
||||
return (
|
||||
<div className="dashboard-main">
|
||||
<SidePannel setActiveTab={setActiveTab} activeTab={activeTab} />
|
||||
{activeTab == "Home" && <DashboardHome />}
|
||||
{activeTab == "Projects" && <DashboardProjects />}
|
||||
{activeTab == "Trash" && <DashboardTrash />}
|
||||
{activeTab == "Tutorials" && <DashboardTutorial />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
144
app/src/pages/Project.tsx
Normal file
144
app/src/pages/Project.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React, { useEffect } from "react";
|
||||
import useModuleStore from "../store/useModuleStore";
|
||||
import {
|
||||
useSocketStore,
|
||||
useOrganization,
|
||||
useUserName,
|
||||
useWallItems,
|
||||
useSaveVersion,
|
||||
useViewSceneStore,
|
||||
useProjectName,
|
||||
useRenameModeStore,
|
||||
useSelectedFloorItem,
|
||||
useZones,
|
||||
} from "../store/builder/store";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { usePlayButtonStore } from "../store/usePlayButtonStore";
|
||||
import MarketPlace from "../modules/market/MarketPlace";
|
||||
import LoadingPage from "../components/templates/LoadingPage";
|
||||
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
|
||||
import { useSelectedUserStore } from "../store/collaboration/useCollabStore";
|
||||
import FollowPerson from "../components/templates/FollowPerson";
|
||||
import { useLogger } from "../components/ui/log/LoggerContext";
|
||||
import RenderOverlay from "../components/templates/Overlay";
|
||||
import LogList from "../components/ui/log/LogList";
|
||||
import Footer from "../components/footer/Footer";
|
||||
import { useToggleStore } from "../store/useUIToggleStore";
|
||||
import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
|
||||
import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
|
||||
import { useProductStore } from "../store/simulation/useProductStore";
|
||||
import { getAllProjects } from "../services/dashboard/getAllProjects";
|
||||
import { viewProject } from "../services/dashboard/viewProject";
|
||||
import RenameTooltip from "../components/ui/features/RenameTooltip";
|
||||
import { setFloorItemApi } from "../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
import { useAssetsStore } from "../store/builder/useAssetStore";
|
||||
import ComparisonSceneProvider from "../components/layout/scenes/ComparisonSceneProvider";
|
||||
import MainSceneProvider from "../components/layout/scenes/MainSceneProvider";
|
||||
|
||||
const Project: React.FC = () => {
|
||||
let navigate = useNavigate();
|
||||
const echo = useLogger();
|
||||
const { setToggleUI } = useToggleStore();
|
||||
const { activeModule, setActiveModule } = useModuleStore();
|
||||
const { setAssets } = useAssetsStore();
|
||||
const { setUserName } = useUserName();
|
||||
const { setOrganization } = useOrganization();
|
||||
const { setWallItems } = useWallItems();
|
||||
const { setZones } = useZones();
|
||||
const { isVersionSaved } = useSaveVersion();
|
||||
const { setProducts } = useProductStore();
|
||||
const { projectId } = useParams();
|
||||
const { setProjectName } = useProjectName();
|
||||
|
||||
const generateThumbnail = async () => {
|
||||
const email = localStorage.getItem("email");
|
||||
const userId = localStorage.getItem("userId");
|
||||
try {
|
||||
if (!email || !userId) {
|
||||
console.error("User data not found in localStorage");
|
||||
return;
|
||||
}
|
||||
|
||||
const emailParts = email.split("@");
|
||||
if (emailParts.length < 2) {
|
||||
console.error("Invalid email format");
|
||||
return;
|
||||
}
|
||||
|
||||
const domainParts = emailParts[1].split(".");
|
||||
const Organization = domainParts[0];
|
||||
const projects = await getAllProjects(
|
||||
userId, Organization
|
||||
);
|
||||
const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id
|
||||
=== projectId)
|
||||
const viewedProject = await viewProject(
|
||||
Organization,
|
||||
filterProject._id,
|
||||
userId,
|
||||
);
|
||||
// console.log('filterProject.projectName: ', filterProject.projectName);
|
||||
setProjectName(filterProject.projectName)
|
||||
|
||||
}
|
||||
catch {
|
||||
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
generateThumbnail();
|
||||
}, []);
|
||||
// console.log('isRenameMode: ', isRenameMode);
|
||||
|
||||
const { selectedUser } = useSelectedUserStore();
|
||||
const { isLogListVisible } = useLogger();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVersionSaved) {
|
||||
setToggleUI(true, true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isVersionSaved]);
|
||||
|
||||
useEffect(() => {
|
||||
setAssets([]);
|
||||
setWallItems([]);
|
||||
setZones([]);
|
||||
setProducts([]);
|
||||
setActiveModule("builder");
|
||||
const email = localStorage.getItem("email");
|
||||
if (email) {
|
||||
const Organization = email.split("@")[1].split(".")[0];
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
useSocketStore.getState().initializeSocket(email, Organization, token);
|
||||
}
|
||||
const name = localStorage.getItem("userName");
|
||||
if (Organization && name) {
|
||||
setOrganization(Organization);
|
||||
setUserName(name);
|
||||
}
|
||||
echo.success("Log in successful");
|
||||
} else {
|
||||
navigate("/");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="project-main">
|
||||
<ComparisonSceneProvider />
|
||||
<MainSceneProvider />
|
||||
{selectedUser && <FollowPerson />}
|
||||
{isLogListVisible && (
|
||||
<RenderOverlay>
|
||||
<LogList />
|
||||
</RenderOverlay>
|
||||
)}
|
||||
{activeModule !== "market" && !selectedUser && <Footer />}
|
||||
<VersionSaved />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Project;
|
||||
242
app/src/pages/UserAuth.tsx
Normal file
242
app/src/pages/UserAuth.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import React, { useState, FormEvent, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { LogoIconLarge } from "../components/icons/Logo";
|
||||
import { EyeIcon } from "../components/icons/ExportCommonIcons";
|
||||
import {
|
||||
useLoadingProgress,
|
||||
useOrganization,
|
||||
useUserName,
|
||||
} from "../store/builder/store";
|
||||
import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
|
||||
import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
|
||||
import FingerprintJS from "@fingerprintjs/fingerprintjs";
|
||||
import { recentlyViewed } from "../services/dashboard/recentlyViewed";
|
||||
import { getUserData } from "../components/Dashboard/functions/getUserData";
|
||||
|
||||
const UserAuth: React.FC = () => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [isSignIn, setIsSignIn] = useState(true);
|
||||
const { userName, setUserName } = useUserName();
|
||||
const { setOrganization } = useOrganization();
|
||||
const { setLoadingProgress } = useLoadingProgress();
|
||||
const [fingerprint, setFingerprint] = useState("");
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const initializeFingerprint = async () => {
|
||||
const fp = await FingerprintJS.load();
|
||||
const result = await fp.get();
|
||||
setFingerprint(result.visitorId); // Set the fingerprint
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
initializeFingerprint();
|
||||
}, [])
|
||||
|
||||
const { userId, organization } = getUserData();
|
||||
|
||||
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const organization = email.split("@")[1].split(".")[0];
|
||||
try {
|
||||
const res = await signInApi(email, password, organization, fingerprint);
|
||||
console.log('res: ', res);
|
||||
if (res.message.message === "login successfull") {
|
||||
setError("");
|
||||
setOrganization(organization);
|
||||
setUserName(res.message.name);
|
||||
// console.log(' res.userId: ', res.message.userId);
|
||||
localStorage.setItem("userId", res.message.userId);
|
||||
localStorage.setItem("email", res.message.email);
|
||||
localStorage.setItem("userName", res.message.name);
|
||||
localStorage.setItem("token", res.message.token);
|
||||
localStorage.setItem("refreshToken", res.message.refreshToken);
|
||||
|
||||
try {
|
||||
console.log('res.message.userId: ', res.message.userId);
|
||||
console.log('organization: ', organization);
|
||||
const projects = await recentlyViewed(organization, res.message.userId);
|
||||
console.log('projects: ', projects);
|
||||
|
||||
if (Object.values(projects.RecentlyViewed).length > 0) {
|
||||
const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
|
||||
setLoadingProgress(1)
|
||||
navigate(`/${firstId}`)
|
||||
} else {
|
||||
if (res.message.isShare) {
|
||||
setLoadingProgress(1);
|
||||
// navigate("/Project");
|
||||
navigate("/Dashboard");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching recent projects:", error);
|
||||
}
|
||||
|
||||
|
||||
} else if (res.message === "User Not Found!!! Kindly signup...") {
|
||||
setError("Account not found");
|
||||
} else if (res.message === "Already LoggedIn on another browser....Please logout!!!") {
|
||||
setError("Already logged in on another browser. Please logout first.");
|
||||
navigate("/");
|
||||
setError("")
|
||||
// setError("");
|
||||
// setOrganization(organization);
|
||||
// setUserName(res.ForceLogoutData.userName);
|
||||
// console.log(' res.userId: ', res.ForceLogoutData.userId);
|
||||
// localStorage.setItem("userId", res.ForceLogoutData.userId);
|
||||
// localStorage.setItem("email", res.ForceLogoutData.Email);
|
||||
// localStorage.setItem("userName", res.ForceLogoutData.userName);
|
||||
// localStorage.setItem("token", res.ForceLogoutData.token);
|
||||
// localStorage.setItem("refreshToken", res.ForceLogoutData.refreshToken);
|
||||
// if (res.ForceLogoutData.isShare) {
|
||||
// setLoadingProgress(1);
|
||||
// navigate("/Dashboard");
|
||||
// }
|
||||
}
|
||||
} catch (error) {
|
||||
echo.error("Login failed");
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegister = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (email && password && userName) {
|
||||
setError("");
|
||||
try {
|
||||
const organization = email.split("@")[1].split(".")[0];
|
||||
const res = await signUpApi(userName, email, password, organization);
|
||||
|
||||
if (res.message === "New User created") {
|
||||
setIsSignIn(true);
|
||||
}
|
||||
if (res.message === "User already exists") {
|
||||
setError("User already exists");
|
||||
}
|
||||
} catch (error) {
|
||||
echo.error("Register user failed");
|
||||
}
|
||||
} else {
|
||||
setError("Please fill all the fields!");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="logo-icon">
|
||||
<LogoIconLarge />
|
||||
</div>
|
||||
<h1>Welcome to Dwinzo</h1>
|
||||
<p>
|
||||
{isSignIn ? (
|
||||
<>
|
||||
Don’t have an account?{" "}
|
||||
<span
|
||||
className="link"
|
||||
onClick={() => setIsSignIn(false)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
Register here!
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Already have an account?{" "}
|
||||
<span
|
||||
className="link"
|
||||
onClick={() => setIsSignIn(true)}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
Login here!
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<button id="google-login" className="google-login">
|
||||
<span className="google-icon">G</span> Continue with Google
|
||||
</button>
|
||||
|
||||
{error && <div className="error-message">🛈 {error}</div>}
|
||||
|
||||
<form
|
||||
onSubmit={isSignIn ? handleLogin : handleRegister}
|
||||
className="auth-form"
|
||||
>
|
||||
{!isSignIn && (
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
placeholder="Username"
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
)}
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={email}
|
||||
placeholder="Email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<div className="password-container">
|
||||
<input
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
placeholder="Password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<button
|
||||
id="toogle-password"
|
||||
type="button"
|
||||
className="toggle-password"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
<EyeIcon isClosed={showPassword} />
|
||||
</button>
|
||||
</div>
|
||||
{!isSignIn && (
|
||||
<div className="policy-checkbox">
|
||||
<input type="checkbox" name="" id="" required />
|
||||
<div className="label">
|
||||
I have read and agree to the terms of service
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<button id="form-submit" type="submit" className="continue-button">
|
||||
{isSignIn ? "Continue" : "Register"}
|
||||
</button>
|
||||
</form>
|
||||
<p className="policy">
|
||||
By signing up for, or logging into, an account, you agree to our{" "}
|
||||
<span
|
||||
className="link"
|
||||
onClick={() => navigate("/privacy")}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
privacy policy
|
||||
</span>{" "}
|
||||
&{" "}
|
||||
<span
|
||||
className="link"
|
||||
onClick={() => navigate("/terms")}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
terms of service
|
||||
</span>{" "}
|
||||
whether you read them or not. You can also find these terms on our
|
||||
website.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserAuth;
|
||||
Reference in New Issue
Block a user