merged realTimeVisulaization with main

app/src/pages/Project.tsx

@@ -16,6 +16,7 @@ import {
 } from "../store/store";
 import { useNavigate } from "react-router-dom";
 import { usePlayButtonStore } from "../store/usePlayButtonStore";
+import SimulationUI from "../modules/simulation/simulationUI";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -53,10 +54,17 @@ const Project: React.FC = () => {
       {!isPlaying && <SideBarLeft />}
       {!isPlaying && <SideBarRight />}
       {activeModule === "visualization" && <RealTimeVisulization />}
-      {activeModule !== "visualization" && <Scene />}
+      {/* {activeModule !== "visualization" && <Scene />} */}
       <Tools />
 
       {/* <Scene /> */}
+      {/* <SimulationUI /> */}
+      <div
+        className="canvas-container"
+        style={{ height: "100vh", width: "100vw" }}
+      >
+        {activeModule !== "visualization" && <Scene />}
+      </div>
     </div>
   );
 };

app/src/pages/UserAuth.tsx

@@ -2,6 +2,9 @@ import React, { useState, FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { LogoIconLarge } from "../components/icons/Logo";
 import { EyeIcon } from "../components/icons/ExportCommonIcons";
+import { useOrganization, useUserName } from "../store/store";
+import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
+import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
 // import LoadingPage from "../components/templates/LoadingPage";
 
 const UserAuth: React.FC = () => {
@@ -9,34 +12,50 @@ const UserAuth: React.FC = () => {
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState("");
-  const [isSignIn, setIsSignIn] = useState(true); // Toggle between login and register
-  const [userName, setUserName] = useState(""); // Username for registration
+  const [isSignIn, setIsSignIn] = useState(true);
+  const { userName, setUserName } = useUserName();
+  const { organization, setOrganization } = useOrganization();
 
   const navigate = useNavigate();
 
-  const handleLogin = (e: FormEvent) => {
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // Dummy validation for "account not found"
-    if (email !== "user@example.com") {
-      setError("Account not found");
-    } else {
-      setError("");
-      console.log("Login Successful!");
-      console.log("Email:", email);
-      console.log("Password:", password);
-    }
+
+    const organization = (email.split("@")[1]).split(".")[0];
+    try {
+      const res = await signInApi(email, password, organization);
+
+      if (res.message === "login successfull") {
+        setError("");
+        setOrganization(organization);
+        setUserName(res.name);
+        localStorage.setItem("userId", res.userId);
+        localStorage.setItem("email", res.email);
+        localStorage.setItem("userName", res.name);
+        if (res.isShare) {
+          navigate("/Project");
+        }
+      } else if (res.message === "User Not Found!!! Kindly signup...") {
+        setError("Account not found");
+      }
+    } catch (error) { }
   };
 
-  const handleRegister = (e: FormEvent) => {
+  const handleRegister = async (e: FormEvent) => {
     e.preventDefault();
-    // Dummy validation for registration
     if (email && password && userName) {
       setError("");
-      console.log("Registration Successful!");
-      console.log("Username:", userName);
-      console.log("Email:", email);
-      console.log("Password:", password);
-      setIsSignIn(true);
+      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) { }
     } else {
       setError("Please fill all the fields!");
     }
@@ -97,6 +116,7 @@ const UserAuth: React.FC = () => {
           )}
           <input
             type="email"
+            name="email"
             value={email}
             placeholder="Email"
             onChange={(e) => setEmail(e.target.value)}
@@ -104,6 +124,7 @@ const UserAuth: React.FC = () => {
           />
           <div className="password-container">
             <input
+              name="password"
               type={showPassword ? "text" : "password"}
               value={password}
               placeholder="Password"