dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FEAT: BorderSpeed Up on Login

Browse Source
This commit is contained in:
EvanLin3141
2025-01-29 23:20:23 +00:00
parent 06234bcac2
commit 92f691b6bd
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/styles/auth.css
View File

@@ -22,6 +22,7 @@
width: 200%; width: 200%;
height: 200%; height: 200%;
animation: border-spin var(--spin-duration) linear infinite; animation: border-spin var(--spin-duration) linear infinite;
} }
.front-content { .front-content {

4
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -19,7 +19,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
setTimeout(() => { setTimeout(() => {
setSpinDuration("7s"); setSpinDuration("7s");
}, 5000); }, 3500);
}; };
return ( return (
@@ -63,7 +63,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
Register Register
</ToggleButton> </ToggleButton>
</div> </div>
{selectedTab === "Login" ? <LoginForm /> : <RegisterForm onSubmit={handleSubmit}/>} {selectedTab === "Login" ? <LoginForm onSubmit={handleSubmit} /> : <RegisterForm onSubmit={handleSubmit}/>}
</div> </div>
</div> </div>
</> </>

10
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -14,7 +14,12 @@ interface FormErrors {
general?: string; // For general authentication errors general?: string; // For general authentication errors
} }
const LoginForm: React.FC = () => { //Speed up border animation
interface SubmitProps {
onSubmit: () => void;
}
const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
const { setIsLoggedIn } = useAuth(); const { setIsLoggedIn } = useAuth();
const [formData, setFormData] = useState<LoginFormData>({ const [formData, setFormData] = useState<LoginFormData>({
@@ -46,6 +51,7 @@ const LoginForm: React.FC = () => {
}; };
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
onSubmit();
e.preventDefault(); e.preventDefault();
if (validateForm()) { if (validateForm()) {
@@ -94,7 +100,7 @@ const LoginForm: React.FC = () => {
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="login-form" id="login-form"
className="h-[100%] flex flex-col h-full justify-evenly items-center" className="h-[100%] flex flex-col justify-evenly items-center"
> >
{errors.general && ( {errors.general && (
<p className="text-red-500 text-sm text-center">{errors.general}</p> <p className="text-red-500 text-sm text-center">{errors.general}</p>

4
frontend/src/components/Auth/RegisterForm.tsx
View File

@@ -19,7 +19,7 @@ interface FormErrors {
} }
interface SubmitProps { interface SubmitProps {
onSubmit: () => void; // Add the prop for the callback onSubmit: () => void;
} }
const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => { const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
@@ -110,7 +110,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
id="register-form" id="register-form"
className="h-[100%] flex flex-col h-full justify-evenly items-center" className="h-[100%] flex flex-col justify-evenly items-center"
> >
{errors.general && ( {errors.general && (
<p className="text-red-500 text-sm text-center">{errors.general}</p> <p className="text-red-500 text-sm text-center">{errors.general}</p>