66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
// 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 / Instructor";
|
|
}, []);
|
|
|
|
const handleOnClick = (text) => {
|
|
if (text !== type) {
|
|
setType(text);
|
|
}
|
|
};
|
|
|
|
const containerClass =
|
|
"container " + (type === "signUp" ? "right-panel-active" : "");
|
|
|
|
return (
|
|
<main className="login-page">
|
|
<section>
|
|
<h2>Student/Instructor</h2>
|
|
<div className={containerClass} id="container">
|
|
<SignUpForm />
|
|
<SignInForm />
|
|
<div className="overlay-container">
|
|
<div className="overlay">
|
|
{/* Cyberpunk grid and scanline effects */}
|
|
<div className="grid-background"></div>
|
|
<div className="scanline"></div>
|
|
|
|
<div className="overlay-panel overlay-left">
|
|
<h1>Welcome Back!</h1>
|
|
<p>Please login with your personal info</p>
|
|
<button
|
|
className="ghost"
|
|
id="signIn"
|
|
onClick={() => handleOnClick("signIn")}
|
|
>
|
|
Student
|
|
</button>
|
|
</div>
|
|
<div className="overlay-panel overlay-right">
|
|
<h1>Hello, Instructor!</h1>
|
|
<p>Please enter your personal details here</p>
|
|
<button
|
|
className="ghost"
|
|
id="signUp"
|
|
onClick={() => handleOnClick("signUp")}
|
|
>
|
|
Instructor
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|