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/assets/styles/auth.css

@@ -3,24 +3,37 @@
 @tailwind utilities;
 
 @layer utilities {
-  /* Act as a border */
+
-  .card-wrapper {
+  .container {
     @apply absolute overflow-hidden rounded-2xl ;
   }
 
-  /* Gradient */
+  .container::before {     
-  .card-wrapper::before {     
     background-image: conic-gradient(
         from 200deg at 50% 50%,
         transparent 70%,
         #55e28b 85%, 
         #3b82f6 90%,
         #BF40BF 95%);
-    @apply absolute left-[-50%] top-[-50%] h-[200%] w-[200%] animate-border-spin content-[''];
+      
+    content: '';
+    position: absolute;
+
+    width: 200%;
+    height: 200%;
+    animation: border-spin var(--spin-duration) linear infinite;
   }
 
-  /* Body */
+  .front-content {
-  .card-content {
     @apply absolute left-[1px] top-[1px] h-[calc(100%-4px)] w-[calc(100%-4px)] rounded-2xl ;
   }
 }
+
+@keyframes border-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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 
+      <div
-      h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]
+        className="container fixed inset-0 flex flex-col items-center justify-around z-50 
-       transition-all" >
+        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 {

frontend/tailwind.config.js

@@ -12,7 +12,7 @@ export default {
       animation: {
         moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
         moving_bg: 'moving_bg 200s linear infinite',
-        'border-spin': 'border-spin 7s linear infinite',
+        'border-spin': 'border-spin linear infinite', // No duration here
       },
 
 
@@ -24,17 +24,12 @@ export default {
         moving_text_colour: {
           "0%": { backgroundPosition: "0% 50%" },
           "100%": { backgroundPosition: "100% 50%" },
-        
+
           moving_bg: {
             '0%': { backgroundPosition: '0% 0%' },
             '100%': { backgroundPosition: '100% 0%' },
           }
         },
-        'border-spin': {
-          '100%': {
-            transform: 'rotate(360deg)',
-          },
-        },
       },
     },
     plugins: [