check version compatiblity

frontend/src/app/services/api/info.service.ts

@@ -1,8 +1,16 @@
 import { Injectable } from '@angular/core';
 import { plainToClass } from 'class-transformer';
+import { isSemVer } from 'class-validator';
 import { InfoResponse } from 'picsur-shared/dist/dto/api/info.dto';
-import { AsyncFailable, HasFailed } from 'picsur-shared/dist/types';
+import {
+  AsyncFailable,
+  Fail,
+  Failable,
+  HasFailed
+} from 'picsur-shared/dist/types';
 import { BehaviorSubject } from 'rxjs';
+import { UtilService } from 'src/app/util/util.service';
+import pkg from '../../../../package.json';
 import { ServerInfo } from '../../models/dto/server-info.dto';
 import { Logger } from '../logger/logger.service';
 import { ApiService } from './api.service';
@@ -19,8 +27,12 @@ export class InfoService {
 
   private infoSubject = new BehaviorSubject<ServerInfo>(new ServerInfo());
 
-  constructor(private api: ApiService) {
-    this.pollInfo().catch(this.logger.error);
+  constructor(private api: ApiService, private utilService: UtilService) {
+    this.pollInfo()
+      .then(() => {
+        this.checkCompatibility();
+      })
+      .catch(this.logger.error);
   }
 
   public async pollInfo(): AsyncFailable<ServerInfo> {
@@ -32,4 +44,73 @@ export class InfoService {
     this.infoSubject.next(info);
     return info;
   }
+
+  public getFrontendVersion(): string {
+    return pkg.version;
+  }
+
+  // If either version starts with 0. it has to be exactly the same
+  // If both versions start with something else, they have to match the first part
+  public isCompatibleWithServer(): Failable<boolean> {
+    const info = this.infoSubject.getValue();
+    if (HasFailed(info)) return info;
+
+    const serverVersion = info.version;
+    const clientVersion = this.getFrontendVersion();
+
+    console.log(serverVersion, clientVersion);
+
+    if (!isSemVer(serverVersion) || !isSemVer(clientVersion)) {
+      return Fail(`Not a valid semver: ${serverVersion} or ${clientVersion}`);
+    }
+
+    const serverDecoded = serverVersion.split('.');
+    const clientDecoded = clientVersion.split('.');
+
+    if (serverDecoded[0] === '0' || clientDecoded[0] === '0') {
+      if (serverVersion !== clientVersion) {
+        console.log('a');
+        return false;
+      } else {
+        return true;
+      }
+    } else {
+      console.log('b');
+      return serverDecoded[0] === clientDecoded[0];
+    }
+  }
+
+  private checkCompatibility(): void {
+    const isCompatible = this.isCompatibleWithServer();
+
+    if (HasFailed(isCompatible) || !isCompatible) {
+      this.utilService
+        .showDialog({
+          title: 'Server is not compatible',
+          description:
+            'The server is not compatible with this version of the client. You can ignore this, but expect things to not work.',
+          buttons: [
+            {
+              text: 'Back',
+              name: 'back',
+              color: 'green',
+            },
+            {
+              text: 'Ignore',
+              name: 'ignore',
+              color: 'warn',
+            },
+          ],
+        })
+        .then((button) => {
+          if (button === 'ignore') {
+            this.logger.warn('Ignoring server compatibility');
+          } else {
+            this.checkCompatibility();
+            // Go to previous page
+            window.history.back();
+          }
+        });
+    }
+  }
 }

frontend/src/app/util/confirm-dialog/confirm-dialog.component.scss

@@ -21,3 +21,19 @@
 .button-orange {
   background-color: #FF9800;
 }
+
+.button-success {
+  background-color: #274E29;
+}
+
+.button-error {
+  background-color: #761919;
+}
+
+.button-warning, .button-warn {
+  background-color: #934D06;
+}
+
+.button-info {
+  background-color: #125E87;
+}

frontend/src/app/util/util.service.ts

@@ -25,10 +25,12 @@ export class UtilService {
 
   public showSnackBar(
     message: string,
-    type: SnackBarType = SnackBarType.Default
+    type: SnackBarType = SnackBarType.Default,
+    duration: number | undefined | null = null
   ) {
     this.snackBar.open(message, '', {
       panelClass: ['mat-toolbar', 'snackbar', type],
+      ...(duration !== null ? { duration } : {}),
     });
   }
 

frontend/tsconfig.json

@@ -16,7 +16,8 @@
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
-    "importHelpers": true
+    "importHelpers": true,
+    "resolveJsonModule": true
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts", "src/app/**/*.ts"],