108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { ToggleButton } from "../Input/Button";
|
|
import { LogInIcon, UserIcon } from "lucide-react";
|
|
import LoginForm from "./LoginForm";
|
|
import RegisterForm from "./RegisterForm";
|
|
import ForgotPasswordForm from "./ForgotPasswordForm";
|
|
import "../../assets/styles/auth.css";
|
|
|
|
interface AuthModalProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
|
|
const [selectedTab, setSelectedTab] = useState<string>("Login");
|
|
const [spinDuration, setSpinDuration] = useState("7s");
|
|
|
|
const handleSubmit = () => {
|
|
setSpinDuration("1s");
|
|
setTimeout(() => {
|
|
setSpinDuration("7s");
|
|
}, 3500);
|
|
};
|
|
|
|
const authSwitch = () => {
|
|
const formMap: { [key: string]: JSX.Element } = {
|
|
Login: (
|
|
<LoginForm
|
|
onSubmit={handleSubmit}
|
|
onForgotPassword={() => setSelectedTab("Forgot")}
|
|
/>
|
|
),
|
|
Register: <RegisterForm onSubmit={handleSubmit} />,
|
|
Forgot: <ForgotPasswordForm onSubmit={handleSubmit} />,
|
|
};
|
|
return formMap[selectedTab] || <div>Please select a valid option</div>;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/*Background Blur*/}
|
|
<div
|
|
id="blurring-layer"
|
|
className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
|
|
></div>
|
|
|
|
{/*Main Container*/}
|
|
<div
|
|
id="auth-modal"
|
|
className="fixed inset-0 flex items-start justify-center z-[9000] h-[95vh] m-auto pt-[15vh] rounded-[5rem] transition-all animate-floating"
|
|
>
|
|
<div className="relative w-full max-w-[300px] min-w-[28vw]">
|
|
{/* Login/Register Buttons Container */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-20 w-[250px] flex justify-center gap-8 transition-transform overflow-visible">
|
|
{/* Login Toggle */}
|
|
<ToggleButton
|
|
toggled={selectedTab === "Login"}
|
|
extraClasses="flex flex-col items-center px-[1em] sm:px-[1.45em] ml:px-[1.6em] lx:px-[2em]"
|
|
onClick={() => setSelectedTab("Login")}
|
|
>
|
|
<LogInIcon className="w-[2em] sm:w-[2.5em] md:w-[2.75em] lg:w-[3em] mr-1" />
|
|
Login
|
|
</ToggleButton>
|
|
|
|
{/* Register Toggle */}
|
|
<ToggleButton
|
|
toggled={selectedTab === "Register"}
|
|
extraClasses="flex flex-col items-center px-[1em] sm:px-[1.45em] ml:px-[1.6em] lx:px-[2em]"
|
|
onClick={() => setSelectedTab("Register")}
|
|
>
|
|
<UserIcon className="w-[2em] sm:w-[2.5em] md:w-[2.75em] lg:w-[3em] mr-1" />
|
|
Register
|
|
</ToggleButton>
|
|
</div>
|
|
|
|
{/* Form Container */}
|
|
<div
|
|
className="container flex flex-col items-center justify-around z-[9999]
|
|
h-[70vh] max-h-[75vh] m-auto py-[50px] rounded-[5rem] transition-all"
|
|
style={{ "--spin-duration": spinDuration } as React.CSSProperties}
|
|
>
|
|
{/*Border Container*/}
|
|
<div
|
|
id="border-container"
|
|
className="front-content ml-[1px] mt-[0.5px] bg-authForm flex flex-col justify-center
|
|
z-50 h-full w-full py-[50px] rounded-[5rem] transition-all"
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
|
|
>
|
|
✕
|
|
</button>
|
|
<div
|
|
id="login-methods"
|
|
className="w-full flex flex-row items-center justify-evenly"
|
|
>
|
|
{authSwitch()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AuthModal;
|