session exparation model

src/app/modals/session-expired-modal/session-expired-modal.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { SessionExpiredModalPage } from './session-expired-modal.page';
+
+@NgModule({
+  declarations: [SessionExpiredModalPage],
+  imports: [CommonModule, IonicModule],
+  exports: [SessionExpiredModalPage],
+})
+export class SessionExpiredModalPageModule {}

src/app/modals/session-expired-modal/session-expired-modal.page.html

@@ -0,0 +1,8 @@
+<ion-content class="session-expired-content ion-padding">
+  <div class="session-expired-inner">
+    <ion-icon class="session-expired-icon" src="/assets/images/notification-error.svg"></ion-icon>
+    <h2 class="session-expired-title">Sessão expirada</h2>
+    <p class="session-expired-text">{{ message }}</p>
+    <ion-button expand="block" class="session-expired-btn" (click)="dismissAndContinue()" style="background-color: color(srgb 0.9985 0.7219 0.1138);">OK</ion-button>
+  </div>
+</ion-content>

src/app/modals/session-expired-modal/session-expired-modal.page.scss

@@ -0,0 +1,39 @@
+.session-expired-content {
+  --background: transparent;
+}
+
+.session-expired-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.session-expired-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+}
+
+.session-expired-title {
+  margin: 0 0 12px;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.session-expired-text {
+  margin: 0 0 24px;
+  line-height: 1.4;
+  font-size: 1rem;
+  color: var(--ion-color-medium-shade, #666);
+}
+
+.session-expired-btn {
+  width: 100%;
+  max-width: 280px;
+  margin: 0;
+}

src/app/services/session-expired-modal.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { SessionExpiredModalPage } from 'src/app/modals/session-expired-modal/session-expired-modal.page';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SessionExpiredModalService {
+  private open = false;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  async present(message: string, onOk: () => void): Promise<void> {
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    const modal = await this.modalCtrl.create({
+      component: SessionExpiredModalPage,
+      componentProps: {
+        message,
+        onConfirm: () => {
+          this.open = false;
+          modal.dismiss();
+          document.querySelectorAll('ion-modal').forEach((e: any) => e.remove());
+          document.querySelectorAll('.popover-viewport').forEach((e: any) => e.remove());
+          document.querySelectorAll('.loading-blocker').forEach((e: any) => e.remove());
+  
+          onOk();
+        },
+      },
+      backdropDismiss: true,
+      canDismiss: false,
+      keyboardClose: false,
+      showBackdrop: true,
+      cssClass: 'session-expired-modal-blocking  keep-this',
+    });
+    await modal.present();
+    modal.onDidDismiss().then(() => {
+      this.open = false;
+    });
+  }
+}