component alert pour afficher une alert avec un message

src/app/app.module.ts

@@ -43,6 +43,7 @@ import localeFr from '@angular/common/locales/fr';
 import { CardAvatarComponent } from './components/card-avatar/card-avatar.component';
 import { HumeurComponent } from './components/humeur/humeur.component';
 import { DeconnexionComponent } from './components/deconnexion/deconnexion.component';
+import { AlertComponent } from './components/alert/alert.component';
 registerLocaleData(localeFr)
 
 @NgModule({
@@ -82,7 +83,8 @@ registerLocaleData(localeFr)
     PageUpdateAccountComponent,
     CardAvatarComponent,
     DeconnexionComponent,
-    HumeurComponent
+    HumeurComponent,
+    AlertComponent
   ],
   imports: [
     BrowserModule,

src/app/components/alert/alert.component.html

@@ -1,4 +1,4 @@
-<div class="alert alert-{{alert.type}} alert-dismissible fade show" role="alert" style="position:absolute;z-index:9999;top:10px;right:10px;">
+<div class="alert alert-{{alert.type}} alert-dismissible fade show" role="alert" style="position:absolute;z-index:9999;top:10px;right:50%;transform: translateX(50%);width:600px; text-align:center;">
     {{alert.content}}
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="onClickCloseAlert()"></button>
   </div>

src/app/components/signin/signin.component.html

@@ -27,10 +27,11 @@
     <!-- <div *ngIf="errorForm">
       <p class="text-danger">Il manque des informations dans le formulaire...</p>
     </div> -->
-    <div *ngIf="isShow">
+    <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
+    <!-- <div *ngIf="isShow">
       <div class="alert alert-{{alert.type}}" role="alert">
         {{alert.content}}
       </div>
-    </div>
+    </div> -->
   </main>
 </div>

src/app/components/signin/signin.component.ts

@@ -44,4 +44,9 @@ export class SigninComponent implements OnInit {
       this.isShow = true;
     }
   }
+
+  onClickCloseAlert(){
+    console.log('fermeture');
+    this.isShow = ! this.isShow;
+  }
 }

src/app/pages/page-agenda/page-agenda.component.html

@@ -1,7 +1,9 @@
 <app-header></app-header>
 <app-side-bar></app-side-bar>
 
-<div
+<app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert();"></app-alert>
+
+<!-- <div
   class="alert alert-{{ alert.type }}"
   role="alert"
   style="position: absolute; z-index: 999; top: 50%; left: 40%; width: 500px"
@@ -18,7 +20,7 @@
   >
     <span aria-hidden="true">&times;</span>
   </button>
-</div>
+</div> -->
 
 <div style="display: flex">
   <div style="width: 150px">

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

@@ -58,6 +58,7 @@ export class PageAgendaComponent implements AfterViewInit {
   ngOnInit(): void {
     this.userId = this.tokenService.getCurrentMembreId();
     this.teamId = this.tokenService.getCurrentTeamId();
+    this.role = this.tokenService.getRole();
   }
 
   // petite triche pour eviter la repetition du nom dans le RDV