add demo identifier to footer

frontend/src/app/api/api.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ApiService } from './api.service';
 import { ImageService } from './image.service';
+import { InfoService } from './info.service';
 import { KeyService } from './key.service';
 import { PermissionService } from './permission.service';
 import { UserService } from './user.service';
@@ -13,6 +14,7 @@ import { UserService } from './user.service';
     UserService,
     PermissionService,
     KeyService,
+    InfoService,
   ],
   imports: [CommonModule],
 })

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

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { InfoResponse } from 'picsur-shared/dist/dto/api/info.dto';
+import { AsyncFailable, HasFailed } from 'picsur-shared/dist/types';
+import { BehaviorSubject } from 'rxjs';
+import { ServerInfo } from '../models/server-info';
+import { ApiService } from './api.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class InfoService {
+  private readonly logger = console;
+
+  public get live() {
+    return this.infoSubject;
+  }
+
+  private infoSubject = new BehaviorSubject<ServerInfo>(new ServerInfo());
+
+  constructor(private api: ApiService) {
+    this.pollInfo().catch(this.logger.error);
+  }
+
+  public async pollInfo(): AsyncFailable<ServerInfo> {
+    const response = await this.api.get(InfoResponse, '/api/info');
+    if (HasFailed(response)) return response;
+
+    const info = new ServerInfo();
+    info.production = response.production;
+    info.demo = response.demo;
+
+    this.infoSubject.next(info);
+    return info;
+  }
+}

frontend/src/app/components/footer/footer.component.html

@@ -8,5 +8,6 @@
     <a class="link-unstyled" href="https://github.com/rubikscraft/picsur"
       >Source Code</a
     >
+    {{ isDemo ? " - Demo Version" : "" }}
   </p>
 </footer>

frontend/src/app/components/footer/footer.component.ts

@@ -1,8 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
+import { InfoService } from 'src/app/api/info.service';
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+  styleUrls: ['./footer.component.scss'],
 })
-export class FooterComponent {}
+export class FooterComponent implements OnInit {
+  constructor(private infoService: InfoService) {}
+
+  isDemo: boolean = false;
+
+  ngOnInit(): void {
+    this.subscribeInfo();
+  }
+
+  @AutoUnsubscribe()
+  subscribeInfo() {
+    return this.infoService.live.subscribe((info) => {
+      this.isDemo = info.demo;
+    });
+  }
+}

frontend/src/app/components/footer/footer.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ApiModule } from 'src/app/api/api.module';
 import { FooterComponent } from './footer.component';
 
 
 @NgModule({
   declarations: [FooterComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, ApiModule],
   exports: [FooterComponent],
 })
 export class FooterModule {}

frontend/src/app/models/server-info.ts

@@ -0,0 +1,4 @@
+export class ServerInfo {
+  production: boolean = false;
+  demo: boolean = false;
+}