FEAT: Faster Border Animation on Submit

When User Submit Registration, border animation rotates 360 degrees every 1 sec.

May seem weird when reset

frontend/src/components/Auth/AuthModal.tsx

@@ -12,20 +12,31 @@ interface AuthModalProps {
 
 const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   const [selectedTab, setSelectedTab] = useState<string>("Login");
+  const [spinDuration, setSpinDuration] = useState("7s")
+
+  const handleSubmit = () => {
+    setSpinDuration("1s");
+
+    setTimeout(() => {
+      setSpinDuration("7s");
+    }, 5000);
+  };
 
   return (
     <>
       {/*Background Blur*/}
       <div id="blurring-layer" className="fixed z-10 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"></div>
       {/*Container*/}
-      <div className="card-wrapper fixed inset-0 flex flex-col items-center justify-around z-50 
-      h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]
-       transition-all" >
+      <div
+        className="container fixed inset-0 flex flex-col items-center justify-around z-50 
+        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all"
+        style={{ "--spin-duration": spinDuration } as React.CSSProperties}
+      >
 
         {/*Border Container*/}  
         <div  
           id="border-container"
-          className="card-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
+          className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
           z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
           >
           <div id="login-methods" className=" w-full flex flex-row items-center justify-evenly">
@@ -52,7 +63,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               Register
             </ToggleButton>
           </div>
-          {selectedTab === "Login" ? <LoginForm /> : <RegisterForm />}
+          {selectedTab === "Login" ? <LoginForm /> : <RegisterForm onSubmit={handleSubmit}/>}
         </div>
       </div>
     </>

frontend/src/components/Auth/RegisterForm.tsx

@@ -18,7 +18,11 @@ interface FormErrors {
   general?: string; // For general authentication errors
 }
 
-const RegisterForm: React.FC = () => {
+interface SubmitProps {
+  onSubmit: () => void; // Add the prop for the callback
+}
+
+const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   const { setIsLoggedIn } = useAuth();
 
   const [formData, setFormData] = useState<RegisterFormData>({
@@ -58,6 +62,7 @@ const RegisterForm: React.FC = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    onSubmit();
 
     if (validateForm()) {
       try {