fix: changes interceptors and display error messages

Author: hallisonbrancalhao

apps/bytebank/src/interceptors/http.interceptos.ts

@@ -7,6 +7,9 @@ import { AuthFacade } from '@fiap-tech-challenge/shared-data-access';
 export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   const baseUrl = environment.apiUrl;
   const authToken = inject(AuthFacade).token$();
+
+  if (req.url.includes('/graphql')) return next(req);
+
   const newReq = req.clone({
     url: `${baseUrl}${req.url}`,
     headers: req.headers.append('Authorization', `Bearer ${authToken}`),

libs/institutional/feature-auth/src/lib/dialogs/login/auth-login.component.html

@@ -29,5 +29,12 @@ <h2 class="text-xl font-semibold text-center">Login</h2>
     <button type="submit" class="w-full bg-green-600 text-white p-2 rounded-lg mt-4">
       Acessar
     </button>
+
+    @if (error()) {
+      <div class="text-red-500 text-sm mt-4">
+        {{ error() }}
+      </div>
+    }
+
   </form>
 </div>

libs/institutional/feature-auth/src/lib/dialogs/login/auth-login.component.ts

@@ -19,6 +19,7 @@ export class AuthLoginComponent {
   #facade = inject(AuthFacade);
 
   isLogged = this.#facade.isLogged$;
+  error = this.#facade.error$;
 
   form = new AuthenticationForm();
 

libs/institutional/feature-auth/src/lib/dialogs/register/register.component.html

@@ -40,5 +40,11 @@ <h2 class="text-xl font-semibold text-center mt-4">
     <button type="submit" class="w-full bg-orange-500 text-white p-2 rounded-lg mt-4 cursor-pointer">
       Criar conta
     </button>
+
+    @if (error()) {
+      <div class="text-red-500 text-sm mt-4">
+        {{ error() }}
+      </div>
+    }
   </form>
 </div>

libs/institutional/feature-auth/src/lib/dialogs/register/register.component.ts

@@ -16,6 +16,8 @@ export class AuthRegisterComponent {
   #dialogRef = inject(DialogRef<AuthRegisterComponent>);
   #facade = inject(AuthFacade);
 
+  error = this.#facade.error$;
+
   form = new RegistrationForm();
 
   close(): void {

libs/shared/data-access/src/lib/application/auth.facade.ts

@@ -17,6 +17,9 @@ export class AuthFacade {
   #userName = signal<string>('')
   userName$ = this.#userName.asReadonly()
 
+  #error = signal<string | null>(null)
+  error$ = this.#error.asReadonly()
+
   storeToken(token: string) {
     localStorage.setItem('token', token)
   }
@@ -34,24 +37,34 @@ export class AuthFacade {
   }
 
   login(credentials: AuthUser) {
+    this.#error.set(null)
     return this.#repository.login(credentials).pipe(takeUntilDestroyed(this.#destroyRef)).subscribe({
       next: ({ data, errors }) => {
         if (data && !errors) {
           this.#token.set(data.login.accessToken)
           this.storeToken(data.login.accessToken)
           this.#isLogged.set(true);
         }
-        if (!data && errors) this.#isLogged.set(false)
-      }
+        if (!data && errors) {
+          this.#isLogged.set(false);
+          this.#error.set(errors[0].message)
+        }
+      },
+      error: () => this.#error.set('Erro ao realizar login')
     })
   }
 
   register(credentials: RegisterUser) {
+    this.#error.set(null)
     return this.#repository.register(credentials).pipe(takeUntilDestroyed(this.#destroyRef)).subscribe({
       next: ({ data, errors }) => {
         if (data && !errors) this.#isLogged.set(true)
-        if (!data && errors) this.#isLogged.set(false)
-      }
+        if (!data && errors) {
+          this.#isLogged.set(false);
+          this.#error.set('Erro ao criar o cadastro')
+        }
+      },
+      error: () => this.#error.set('Erro ao criar o cadastro')
     })
   }