[frontend] feat: Login spinner and error text

frontend/src/App.css

@@ -8,6 +8,7 @@ body {
   height: 100vh;
   margin: 0px;
   background: linear-gradient(100deg, #83a4d4, #b6fbff);
+  background-attachment: fixed;
 }
 
 @media (min-width: 600px) {
@@ -29,7 +30,7 @@ body {
   border: 2px solid white;
   border-radius: 20px;
   width: 260px;
-  height: 200px;
+  height: 280px;
   padding: 20px;
 }
 

frontend/src/components/Login.tsx

@@ -15,6 +15,7 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
 
 
   const handleSubmit = async (e: React.FormEvent) => {
+    setErrorText("");
     setIsDataLoading(true);
     e.preventDefault();
     try {
@@ -24,7 +25,6 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
       // Store the token in local storage as a temp solution
       localStorage.setItem("token", data.token);
       onLogin();
-      setErrorText("");
     } catch (error) {
       const errors = error as Error | AxiosError;
        // Check if the error is an AxiosError
@@ -61,7 +61,7 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
         />
         <button type="submit">Login</button>
         { isDataLoading && <Spinner /> }
-        {errorText && <span>{errorText}</span>}
+        {errorText !== "" && <span>{errorText}</span>}
       </form>
     </div>
   );