Update frontendDevDependencies

frontend/src/app/_providers/auth-interceptor.provider.ts

@@ -98,6 +98,18 @@ export class AuthInterceptor implements HttpInterceptor {
         observer.complete();
       });
     }
+    //If offline, return 504 except for ping
+    if (this.api.offline && !req.url.includes("ping")) {
+      return new Observable<HttpEvent<Object>>((observer) => {
+        observer.next(new HttpResponse({
+          body: { message: "Offline" },
+          status: 504,
+          statusText: "Gateway Timeout",
+          url: req.url
+        }));
+        observer.complete();
+      });
+    }
     return next.handle(this.updateRequest(req)).pipe(
       retryWhen(genericRetryStrategy({
         maxRetryAttempts: 3,
@@ -121,6 +133,9 @@ export class AuthInterceptor implements HttpInterceptor {
         } else if (error.status === 503) {
           this.api.maintenanceMode = true;
           return throwError(() => error);
+        } else if (error.status === 504) {
+          this.api.offline = true;
+          return throwError(() => error);
         } else if (error.status === 419) {
           return new Observable<HttpEvent<Object>>((observer) => {
             this.api.get("csrf-cookie").then(() => {

frontend/src/app/_services/api-client.service.ts

@@ -36,6 +36,28 @@ export class ApiClientService {
     this.maintenanceModeChanged.next();
   }
 
+  private _offline = false;
+  private _offlineInterval: any = undefined;
+  public offlineChanged = new Subject<void>();
+
+  get offline(): boolean {
+    return this._offline;
+  }
+  set offline(value: boolean) {
+    if(value && !this._offline) {
+      //Every 5 seconds, check if sill offline
+      this._offlineInterval = setInterval(() => {
+        this.get("ping").then(() => {
+          console.log("Offline mode disabled");
+          this.offline = false;
+          clearInterval(this._offlineInterval);
+        }).catch(() => {});
+      }, 10000);
+    }
+    this._offline = value;
+    this.offlineChanged.next();
+  }
+
   constructor(private http: HttpClient) { }
 
   public apiEndpoint(endpoint: string): string {

frontend/src/app/app.component.html

@@ -18,6 +18,11 @@
       <strong>{{ 'warning'|translate|ftitlecase }}!</strong> {{ 'maintenance_mode_warning'|translate }}<br>
     </alert>
   </div>
+  <div class="mt-2" *ngIf="api.offline">
+    <alert type="danger">
+      <strong>{{ 'warning'|translate|ftitlecase }}!</strong> {{ 'offline_warning'|translate }}<br>
+    </alert>
+  </div>
 
   <alert type="danger" *ngIf="alerts.length > 0 && !api.maintenanceMode">
     <strong>{{ 'warning'|translate|ftitlecase }}!</strong> {{ 'alert.warning_body'|translate }}<br>

frontend/src/assets/i18n/en.json

@@ -177,6 +177,8 @@
     "disable": "disable",
     "maintenance_mode": "maintenance mode",
     "maintenance_mode_warning": "The application is currently in maintenance mode. Some features may not be available.",
+    "offline": "offline",
+    "offline_warning": "You're offline. Some features may not be available.",
     "property": "property",
     "value": "value",
     "user_agent": "User Agent",

frontend/src/assets/i18n/it.json

@@ -177,6 +177,8 @@
     "disable": "disattiva",
     "maintenance_mode": "modalità manutenzione",
     "maintenance_mode_warning": "Il gestionale è in manutenzione. Alcune funzionalità potrebbero non essere disponibili.",
+    "offline": "offline",
+    "offline_warning": "Sei offline. Non è possibile interagire con il gestionale.",
     "property": "proprietà",
     "value": "valore",
     "user_agent": "User Agent",