Adiciona mensagens personalizadas

package.json

@@ -27,6 +27,7 @@
     "postcss-loader": "^7.3.3",
     "postcss-preset-env": "^9.2.0",
     "postcss-scss": "^4.0.9",
+    "primeng": "^15.4.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { AuthService } from './services/auth.service';
 import { EditUserComponent } from './pages/edit-user/edit-user.component';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
+import { MessageService } from 'primeng/api';
 
 @NgModule({
   declarations: [
@@ -50,7 +51,7 @@ import { ParticipateComponent } from './pages/participate/participate.component'
     AppRoutingModule,
     HttpClientModule,
     ReactiveFormsModule,
-    HttpClientModule,
+    HttpClientModule
   ],
   providers: [
     AuthGuard,
@@ -60,6 +61,7 @@ import { ParticipateComponent } from './pages/participate/participate.component'
       useClass: UserTokenInterceptor,
       multi: true,
     },
+    MessageService
   ],
   bootstrap: [AppComponent],
 })

src/app/pages/active-account/active-account.component.ts

@@ -1,25 +1,27 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-import { AuthService } from '../../services/auth.service';
+import { Component, OnInit } from "@angular/core";
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { Router } from "@angular/router";
+import { AuthService } from "../../services/auth.service";
+import { AlertService } from "../../services/alert.service";
 
 @Component({
-  selector: 'app-active-account',
-  templateUrl: './active-account.component.html',
-  styleUrls: ['./active-account.component.css'],
+  selector: "app-active-account",
+  templateUrl: "./active-account.component.html",
+  styleUrls: ["./active-account.component.css"],
 })
 export class ActiveAccountComponent implements OnInit {
   userForm!: FormGroup;
 
   constructor(
     private router: Router,
     private fb: FormBuilder,
-    private authService: AuthService
+    private authService: AuthService,
+    private alertService: AlertService,
   ) {}
 
   ngOnInit(): void {
     this.userForm = this.fb.group({
-      email: ['', [Validators.required]],
+      email: ["", [Validators.required]],
       code: [, [Validators.required]],
     });
   }
@@ -29,18 +31,18 @@ export class ActiveAccountComponent implements OnInit {
       this.authService.activeAccount(this.userForm.value).subscribe({
         next: (data) => {
           console.log(data);
-          if (data.status === 'error') {
-            alert(data.message);
-            this.navigator('/login');
+          if (data.status === "error") {
+            this.alertService.showMessage("error", "Erro", data.message);
+            this.navigator("/login");
           }
-          this.navigator('/login');
+          this.navigator("/login");
         },
         error: (error) => {
           console.error(error);
         },
       });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!");
     }
   }
 
@@ -55,7 +57,7 @@ export class ActiveAccountComponent implements OnInit {
         },
       });
     } else {
-      alert('Você deve preencher o email.');
+      this.alertService.showMessage("info", "Alerta", "Você deve preencher o email.");
     }
   }
 

src/app/pages/check-code-rest-password/check-code-rest-password.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 
 @Component({
@@ -15,7 +16,8 @@ export class CheckCodeRestPasswordComponent {
   constructor(
     private router: Router,
     private fb: FormBuilder,
-    private authService: AuthService
+    private authService: AuthService,
+    private alertService: AlertService,
   ) {}
 
   ngOnInit(): void {
@@ -43,7 +45,7 @@ export class CheckCodeRestPasswordComponent {
         },
       });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!");
     }
   }
 
@@ -59,7 +61,7 @@ export class CheckCodeRestPasswordComponent {
         },
       });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!");
     }
   }
 

src/app/pages/edit-user/edit-user.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { AlertService } from 'src/app/services/alert.service';
 import { UserService } from 'src/app/services/user.service';
 
 @Component({
@@ -18,6 +19,7 @@ export class EditUserComponent implements OnInit {
     private fb: FormBuilder,
     private userService: UserService,
     private route: ActivatedRoute,
+    private alertService: AlertService,
   ) {}
 
   ngOnInit(): void {
@@ -39,15 +41,15 @@ export class EditUserComponent implements OnInit {
       this.userService.updateUser(this.userId, this.userForm.value).subscribe({
         next: (data) => {
           console.log(data);
-          alert('Usuário cadastrado com sucesso!');
+          this.alertService.showMessage("success", "Sucesso", "Usuário cadastrado com sucesso!");
           this.navigator('/profile');
         },
         error: (error) => {
           console.error(error);
         },
       });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!");
     }
   }
 

src/app/pages/login/login.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MustMatch } from 'src/app/helper/must-match.validator';
 import { AuthService } from '../../services/auth.service';
+import { AlertService } from 'src/app/services/alert.service';
 
 
 @Component({
@@ -15,7 +16,8 @@ export class LoginComponent implements OnInit {
   constructor(
     private router: Router,
     private fb: FormBuilder,
-    private authService: AuthService
+    private authService: AuthService,
+    private alertService: AlertService,
   ) { }
 
   ngOnInit(): void {
@@ -39,7 +41,7 @@ export class LoginComponent implements OnInit {
           },
         });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!");
     }
   }
 

src/app/pages/register/register.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MustMatch } from 'src/app/helper/must-match.validator';
 import { AuthService } from '../../services/auth.service';
+import { AlertService } from 'src/app/services/alert.service';
 
 @Component({
   selector: 'app-register',
@@ -15,7 +16,8 @@ export class RegisterComponent implements OnInit {
   constructor(
     private router: Router,
     private fb: FormBuilder,
-    private authService: AuthService
+    private authService: AuthService,
+    private alertService: AlertService,
   ) {}
 
   ngOnInit(): void {
@@ -46,7 +48,7 @@ export class RegisterComponent implements OnInit {
         },
       });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!");
     }
   }
 

src/app/pages/reset-password/reset-password.component.ts

@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
 import { MustMatch } from 'src/app/helper/must-match.validator';
+import { AlertService } from 'src/app/services/alert.service';
 
 @Component({
   selector: 'app-reset-password',
@@ -15,7 +16,8 @@ export class ResetPasswordComponent implements OnInit {
   constructor(
     private router: Router,
     private fb: FormBuilder,
-    private authService: AuthService
+    private authService: AuthService,
+    private alertService: AlertService,
   ) { }
 
   ngOnInit(): void {
@@ -44,7 +46,7 @@ export class ResetPasswordComponent implements OnInit {
         },
       });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!");
     }
   }
 

src/app/pages/suggest-agenda/suggest-agenda.component.ts

@@ -58,7 +58,7 @@ export class SuggestAgendaComponent implements OnInit {
           this.isSendingEmail = false;
         });
     } else {
-      alert('Preencha os campos obrigatórios!');
+      this.alertService.showMessage("info", "Alerta", "Preencha todos os campos corretamente!"); os campos obrigatórios!');
     }
   }
 

src/app/services/alert.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AlertService } from './alert.service';
+
+describe('AlertService', () => {
+  let service: AlertService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AlertService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/alert.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { MessageService } from 'primeng/api';
+
+@Injectable({ providedIn: 'root' })
+export class AlertService {
+  constructor(
+    private messageService: MessageService,
+  ) { }
+
+  showMessage(severity: string, summary: string, detail: string) {
+    this.messageService.add({
+      severity: severity,
+      summary: summary,
+      key: 'myToast',
+      detail: detail
+    });
+  }
+
+  errorMessage(message: string) {
+    this.messageService.add({ severity: 'error', summary: 'Error', key: 'myToast', detail: `${message}` });
+  }
+
+  infoMessage(message: string) {
+    this.messageService.add({ severity: 'info', summary: 'Info', key: 'myToast', detail: `${message}` });
+  }
+
+  warnMessage(message: string) {
+    this.messageService.add({ severity: 'warn', summary: 'Warn', key: 'myToast', detail: `${message}` });
+  }
+}

src/styles.css

@@ -3,6 +3,9 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@import 'primeng/resources/primeng.min.css';
+@import 'primeng/resources/themes/omega/theme.css';
+
 @font-face {
   font-family: "unb-pro";
   src: url("/src/assets/fonts") format("woff");