fix(ui): login error handling and loader

frontend/app/components/Login/Login.tsx

@@ -34,7 +34,7 @@ const Login = ({
   const recaptchaRef = useRef<ReCAPTCHA>(null);
   const { loginStore, userStore } = useStore();
   const errors = userStore.loginRequest.errors;
-  const loading = userStore.loginRequest.loading;
+  const loading = loginStore.loading;
   const authDetails = userStore.authDetails;
   const setJwt = userStore.updateJwt;
   const fetchTenants = userStore.fetchTenants;
@@ -111,7 +111,7 @@ const Login = ({
         }
       })
       .catch((e) => {
-        userStore.syntheticLoginError(e.errors)
+        userStore.syntheticLoginError(e);
       });
   };
 

frontend/app/mstore/loginStore.ts

@@ -1,6 +1,7 @@
 import { makeAutoObservable } from 'mobx';
-import { loginService } from "../services";
+import { loginService } from '@/services';
 import { handleSpotJWT, isTokenExpired } from 'App/utils';
+import { toast } from 'react-toastify';
 const spotTokenKey = "___$or_spotToken$___"
 
 class LoginStore {
@@ -8,6 +9,7 @@ class LoginStore {
   password = '';
   captchaResponse?: string;
   spotJWT?: string;
+  loading = false;
 
   constructor() {
     makeAutoObservable(this);
@@ -42,23 +44,27 @@ class LoginStore {
 
   generateJWT = async () => {
     if (this.spotJwtPending) {
-      return
+      return;
     }
-    this.setSpotJwtPending(true)
+    this.setSpotJwtPending(true);
+    this.loading = true;
     try {
       const resp = await loginService.login({
         email: this.email,
         password: this.password,
-        captchaResponse: this.captchaResponse
-      })
-      this.setSpotJWT(resp.spotJwt)
-      return resp
-    } catch (e) {
-      throw e
+        captchaResponse: this.captchaResponse,
+      });
+
+      this.setSpotJWT(resp.spotJwt);
+      return resp;
+    } catch (e: any) {
+      toast.error(e.message || 'An unexpected error occurred.');
+      throw e;
     } finally {
-      this.setSpotJwtPending(false)
+      this.setSpotJwtPending(false);
+      this.loading = false;
     }
-  }
+  };
 
   invalidateSpotJWT = () => {
     this.spotJWT = undefined
@@ -66,4 +72,4 @@ class LoginStore {
   }
 }
 
-export default LoginStore;
+export default LoginStore;

frontend/app/services/loginService.ts

@@ -1,20 +1,32 @@
-import BaseService from "./BaseService";
+import BaseService from './BaseService';
 
 export default class LoginService extends BaseService {
-  public async login({ email, password, captchaResponse }: { email: string, password: string, captchaResponse?: string }) {
-    return this.client.post('/login', {
-      email: email.trim(),
-      password,
-      'g-recaptcha-response': captchaResponse,
-    })
-      .then((r) => {
-          return r.json();
-      })
-      .catch((e) => {
-        return e.response.json()
-          .then((r: { errors: string[] }) => {
-            throw r.errors;
-          });
+  public async login({ email, password, captchaResponse }: {
+    email: string,
+    password: string,
+    captchaResponse?: string
+  }) {
+    try {
+      const response = await this.client.post('/login', {
+        email: email.trim(),
+        password,
+        'g-recaptcha-response': captchaResponse
       });
+
+      const responseData = await response.json();
+
+      if (responseData.errors) {
+        throw new Error(responseData.errors[0] || 'An unexpected error occurred.');
+      }
+
+      return responseData || {};
+    } catch (error: any) {
+      if (error.response) {
+        const errorData = await error.response.json();
+        const errorMessage = errorData.errors ? errorData.errors[0] : 'An unexpected error occurred.';
+        throw new Error(errorMessage);
+      }
+      throw new Error('An unexpected error occurred.');
+    }
   }
-}
+}