Ventana de confirmación cerrar sesión

package-lock.json

@@ -11605,14 +11605,12 @@
     "node_modules/primeicons": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
-      "license": "MIT"
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
     },
     "node_modules/primeng": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/primeng/-/primeng-19.1.0.tgz",
       "integrity": "sha512-xzPOvq6m0nyD3HQpqIgXmfTFqWiI4P9AIraRKjMdfwOruGzpimxf0iYJDgNNvJJvH32DwLZD6OnFTh3PaiP5Fg==",
-      "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@primeuix/styled": "^0.3.2",
         "@primeuix/utils": "^0.3.2",

src/app/app.component.html

@@ -1,2 +1,3 @@
 
 <router-outlet />
+<p-confirmDialog></p-confirmDialog>

src/app/app.component.ts

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmationService } from 'primeng/api';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ConfirmDialogModule],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
+  providers: [ConfirmationService]
 })
 export class AppComponent {
   title = 'SACG - Sistema Administrador de Cronogramas';

src/app/components/navbar/navbar.component.html

@@ -7,7 +7,8 @@
 
   <div class="navbar-right">
     <span class="user-name">Luis Muñoz</span>
-    <button pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button"></button>
+    <button pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button"
+      (click)="confirmarAccion()"></button>
   </div>
 </div>
 

src/app/components/navbar/navbar.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
+import { ConfirmationService } from 'primeng/api';
 
 @Component({
   selector: 'app-navbar',
@@ -12,9 +13,29 @@ import { ButtonModule } from 'primeng/button';
 export class NavbarComponent {
   @Output() sidebarToggle = new EventEmitter<void>();
   pageTitle: string = 'Starter Page';
+  constructor(private confirmationService: ConfirmationService) {}
 
   toggleSidebar() {
     this.sidebarToggle.emit();
   }
 
+  confirmarAccion() {
+    this.confirmationService.confirm({
+      message: '¿Estás seguro de que deseas cerrar sesión?',
+      header: 'Cerrar Sesión',
+      icon: 'pi pi-sign-out',
+      acceptLabel: 'Sí, cerrar',
+      rejectLabel: 'Cancelar',
+      acceptButtonStyleClass: 'p-button-danger',
+      rejectButtonStyleClass: 'p-button-secondary',
+      accept: () => {
+        console.log('Sesión cerrada');
+      },
+      reject: () => {
+        console.log('Canceló cierre de sesión');
+      }
+    });
+  }
+  
+
 }