2025-03-25 06:17:41 +00:00
|
|
|
|
import React, { useState, FormEvent } from "react";
|
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
|
import { LogoIconLarge } from "../components/icons/Logo";
|
|
|
|
|
import { EyeIcon } from "../components/icons/ExportCommonIcons";
|
2025-04-28 03:55:51 +00:00
|
|
|
|
import {
|
|
|
|
|
useLoadingProgress,
|
|
|
|
|
useOrganization,
|
|
|
|
|
useUserName,
|
|
|
|
|
} from "../store/store";
|
2025-03-25 11:05:54 +00:00
|
|
|
|
import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
|
|
|
|
|
import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
|
|
|
|
const UserAuth: React.FC = () => {
|
|
|
|
|
const [email, setEmail] = useState("");
|
|
|
|
|
const [password, setPassword] = useState("");
|
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
|
const [error, setError] = useState("");
|
2025-03-25 11:05:54 +00:00
|
|
|
|
const [isSignIn, setIsSignIn] = useState(true);
|
|
|
|
|
const { userName, setUserName } = useUserName();
|
2025-03-26 13:03:51 +00:00
|
|
|
|
const { setOrganization } = useOrganization();
|
|
|
|
|
const { setLoadingProgress } = useLoadingProgress();
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
|
2025-03-25 11:05:54 +00:00
|
|
|
|
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
|
2025-03-25 06:17:41 +00:00
|
|
|
|
e.preventDefault();
|
2025-03-25 11:05:54 +00:00
|
|
|
|
|
2025-04-28 03:55:51 +00:00
|
|
|
|
const organization = email.split("@")[1].split(".")[0];
|
2025-03-25 11:05:54 +00:00
|
|
|
|
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) {
|
2025-03-26 13:03:51 +00:00
|
|
|
|
setLoadingProgress(1);
|
2025-03-25 11:05:54 +00:00
|
|
|
|
navigate("/Project");
|
|
|
|
|
}
|
|
|
|
|
} else if (res.message === "User Not Found!!! Kindly signup...") {
|
|
|
|
|
setError("Account not found");
|
|
|
|
|
}
|
2025-04-28 03:55:51 +00:00
|
|
|
|
} catch (error) {}
|
2025-03-25 06:17:41 +00:00
|
|
|
|
};
|
|
|
|
|
|
2025-03-25 11:05:54 +00:00
|
|
|
|
const handleRegister = async (e: FormEvent) => {
|
2025-03-25 06:17:41 +00:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
if (email && password && userName) {
|
|
|
|
|
setError("");
|
2025-03-25 11:05:54 +00:00
|
|
|
|
try {
|
2025-04-28 03:55:51 +00:00
|
|
|
|
const organization = email.split("@")[1].split(".")[0];
|
2025-03-25 11:05:54 +00:00
|
|
|
|
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");
|
|
|
|
|
}
|
2025-04-28 03:55:51 +00:00
|
|
|
|
} catch (error) {}
|
2025-03-25 06:17:41 +00:00
|
|
|
|
} else {
|
|
|
|
|
setError("Please fill all the fields!");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
2025-04-28 03:55:51 +00:00
|
|
|
|
<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>
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
2025-04-28 03:55:51 +00:00
|
|
|
|
<button className="google-login">
|
|
|
|
|
<span className="google-icon">G</span> Continue with Google
|
|
|
|
|
</button>
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
2025-04-28 03:55:51 +00:00
|
|
|
|
{error && <div className="error-message">🛈 {error}</div>}
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
2025-04-28 03:55:51 +00:00
|
|
|
|
<form
|
|
|
|
|
onSubmit={isSignIn ? handleLogin : handleRegister}
|
|
|
|
|
className="auth-form"
|
|
|
|
|
>
|
|
|
|
|
{!isSignIn && (
|
2025-03-25 06:17:41 +00:00
|
|
|
|
<input
|
2025-04-28 03:55:51 +00:00
|
|
|
|
type="text"
|
|
|
|
|
value={userName}
|
|
|
|
|
placeholder="Username"
|
|
|
|
|
onChange={(e) => setUserName(e.target.value)}
|
2025-03-25 06:17:41 +00:00
|
|
|
|
required
|
|
|
|
|
/>
|
2025-04-28 03:55:51 +00:00
|
|
|
|
)}
|
|
|
|
|
<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
|
|
|
|
|
type="button"
|
|
|
|
|
className="toggle-password"
|
|
|
|
|
onClick={() => setShowPassword(!showPassword)}
|
2025-03-25 06:17:41 +00:00
|
|
|
|
>
|
2025-04-28 03:55:51 +00:00
|
|
|
|
<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 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>
|
2025-03-25 06:17:41 +00:00
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default UserAuth;
|