first commit

app/src/pages/Dashboard.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Dashboard: React.FC = () => {
+  return (
+    <div>Dashboard</div>
+  );
+};
+
+export default Dashboard;

app/src/pages/Project.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import ModuleToggle from "../components/ui/ModuleToggle";
+import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
+import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
+import useModuleStore from "../store/useModuleStore";
+import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization";
+import Tools from "../components/ui/Tools";
+
+const Project: React.FC = () => {
+  const { activeModule } = useModuleStore();
+
+  return (
+    <div className="project-main">
+      <ModuleToggle />
+      <SideBarLeft />
+      <SideBarRight />
+      {activeModule === "visualization" && <RealTimeVisulization />}
+      <Tools />
+    </div>
+  );
+};
+
+export default Project;

app/src/pages/UserAuth.tsx

@@ -0,0 +1,158 @@
+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 LoadingPage from "../components/templates/LoadingPage";
+
+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); // Toggle between login and register
+  const [userName, setUserName] = useState(""); // Username for registration
+
+  const navigate = useNavigate();
+
+  const handleLogin = (e: FormEvent) => {
+    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 handleRegister = (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);
+    } else {
+      setError("Please fill all the fields!");
+    }
+  };
+
+  return (
+    <>
+      {/* <LoadingPage progress={20} /> */}
+      <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 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"
+            value={email}
+            placeholder="Email"
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <div className="password-container">
+            <input
+              type={showPassword ? "text" : "password"}
+              value={password}
+              placeholder="Password"
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+            <button
+              type="button"
+              className="toggle-password"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              <EyeIcon isClosed={showPassword} />
+            </button>
+          </div>
+          {!isSignIn && (
+            <div className="policy-checkbox">
+              <input type="checkbox" name="" id="" />
+              <div className="label">
+                I have read and agree to the terms of service
+              </div>
+            </div>
+          )}
+          <button 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;