Dwinzo_dev/app/src/pages/UserAuth.tsx

186 lines
5.5 KiB
TypeScript
Raw Normal View History

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";
import {
useLoadingProgress,
useOrganization,
useUserName,
} from "../store/builder/store";
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("");
const [isSignIn, setIsSignIn] = useState(true);
const { userName, setUserName } = useUserName();
const { setOrganization } = useOrganization();
const { setLoadingProgress } = useLoadingProgress();
2025-03-25 06:17:41 +00:00
const navigate = useNavigate();
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
2025-03-25 06:17:41 +00:00
e.preventDefault();
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) {
setLoadingProgress(1);
navigate("/Project");
}
} else if (res.message === "User Not Found!!! Kindly signup...") {
setError("Account not found");
}
} catch (error) {
echo.error("Login failed");
}
2025-03-25 06:17:41 +00:00
};
const handleRegister = async (e: FormEvent) => {
2025-03-25 06:17:41 +00:00
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");
}
2025-03-25 06:17:41 +00:00
} 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 ? (
<>
Dont 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
<button className="google-login">
<span className="google-icon">G</span> Continue with Google
</button>
2025-03-25 06:17:41 +00:00
{error && <div className="error-message">🛈 {error}</div>}
2025-03-25 06:17:41 +00:00
<form
onSubmit={isSignIn ? handleLogin : handleRegister}
className="auth-form"
>
{!isSignIn && (
2025-03-25 06:17:41 +00:00
<input
type="text"
value={userName}
placeholder="Username"
onChange={(e) => setUserName(e.target.value)}
2025-03-25 06:17:41 +00:00
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
type="button"
className="toggle-password"
onClick={() => setShowPassword(!showPassword)}
2025-03-25 06:17:41 +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;