65 lines
1.7 KiB
React
65 lines
1.7 KiB
React
|
// Page - Login
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import SignInForm from "./SignIn";
|
||
|
|
import SignUpForm from "./SignUp";
|
||
|
|
import "../scss/styles.scss";
|
||
|
|
|
||
|
|
const LoginPage = () => {
|
||
|
|
const [type, setType] = useState("signIn");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
document.title = "Login / Sign Up";
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleOnClick = (text) => {
|
||
|
|
if (text !== type) {
|
||
|
|
setType(text);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const containerClass =
|
||
|
|
"container " + (type === "signUp" ? "right-panel-active" : "");
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main className="login-page">
|
||
|
|
<section>
|
||
|
|
<h2>Sign In/Sign Up</h2>
|
||
|
|
<div className={containerClass} id="container">
|
||
|
|
<SignUpForm />
|
||
|
|
<SignInForm />
|
||
|
|
<div className="overlay-container">
|
||
|
|
<div className="overlay">
|
||
|
|
<div className="overlay-panel overlay-left">
|
||
|
|
<h1>Welcome Back!</h1>
|
||
|
|
<p>
|
||
|
|
To keep connected with us please login with your personal info
|
||
|
|
</p>
|
||
|
|
<button
|
||
|
|
className="ghost"
|
||
|
|
id="signIn"
|
||
|
|
onClick={() => handleOnClick("signIn")}
|
||
|
|
>
|
||
|
|
Sign In
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="overlay-panel overlay-right">
|
||
|
|
<h1>Hello, Friend!</h1>
|
||
|
|
<p>Enter your personal details and start journey with us</p>
|
||
|
|
<button
|
||
|
|
className="ghost"
|
||
|
|
id="signUp"
|
||
|
|
onClick={() => handleOnClick("signUp")}
|
||
|
|
>
|
||
|
|
Sign Up
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default LoginPage;
|