From 92f691b6bdf3cf276012cc7f553634fe328706ee Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Wed, 29 Jan 2025 23:20:23 +0000
Subject: [PATCH] FEAT: BorderSpeed Up on Login

---
 frontend/src/assets/styles/auth.css           |  1 +
 frontend/src/components/Auth/AuthModal.tsx    |  4 ++--
 frontend/src/components/Auth/LoginForm.tsx    | 10 ++++++++--
 frontend/src/components/Auth/RegisterForm.tsx |  4 ++--
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/styles/auth.css b/frontend/src/assets/styles/auth.css
index bb6bbfa..8cf29ef 100644
--- a/frontend/src/assets/styles/auth.css
+++ b/frontend/src/assets/styles/auth.css
@@ -22,6 +22,7 @@
     width: 200%;
     height: 200%;
     animation: border-spin var(--spin-duration) linear infinite;
+    
   }
 
   .front-content {
diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx
index ea57b50..abca0d8 100644
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/frontend/src/components/Auth/AuthModal.tsx
@@ -19,7 +19,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
 
     setTimeout(() => {
       setSpinDuration("7s");
-    }, 5000);
+    }, 3500);
   };
 
   return (
@@ -63,7 +63,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               Register
             </ToggleButton>
           </div>
-          {selectedTab === "Login" ? <LoginForm /> : <RegisterForm onSubmit={handleSubmit}/>}
+          {selectedTab === "Login" ? <LoginForm onSubmit={handleSubmit} /> : <RegisterForm onSubmit={handleSubmit}/>}
         </div>
       </div>
     </>
diff --git a/frontend/src/components/Auth/LoginForm.tsx b/frontend/src/components/Auth/LoginForm.tsx
index 7ef72dd..aff6199 100644
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -14,7 +14,12 @@ interface FormErrors {
   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 [formData, setFormData] = useState<LoginFormData>({
@@ -46,6 +51,7 @@ const LoginForm: React.FC = () => {
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
+    onSubmit();
     e.preventDefault();
 
     if (validateForm()) {
@@ -94,7 +100,7 @@ const LoginForm: React.FC = () => {
     <form
       onSubmit={handleSubmit}
       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 && (
         <p className="text-red-500 text-sm text-center">{errors.general}</p>
diff --git a/frontend/src/components/Auth/RegisterForm.tsx b/frontend/src/components/Auth/RegisterForm.tsx
index 59c62ec..8f3e9bc 100644
--- a/frontend/src/components/Auth/RegisterForm.tsx
+++ b/frontend/src/components/Auth/RegisterForm.tsx
@@ -19,7 +19,7 @@ interface FormErrors {
 }
 
 interface SubmitProps {
-  onSubmit: () => void; // Add the prop for the callback
+  onSubmit: () => void; 
 }
 
 const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
@@ -110,7 +110,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
     <form
       onSubmit={handleSubmit}
       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 && (
         <p className="text-red-500 text-sm text-center">{errors.general}</p>