#708 - WIP

backend/src/main/java/ch/puzzle/okr/OkrApplication.java

@@ -1,11 +1,15 @@
 package ch.puzzle.okr;
 
+import ch.puzzle.okr.service.clientconfig.ClientConfigProperties;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.boot.context.properties.EnableConfigurationProperties;
 import org.springframework.scheduling.annotation.EnableScheduling;
 
 @SpringBootApplication
 @EnableScheduling
+@EnableConfigurationProperties(ClientConfigProperties.class)
 public class OkrApplication {
     public static void main(String[] args) {
         SpringApplication.run(OkrApplication.class, args);

backend/src/main/java/ch/puzzle/okr/controller/ClientConfigController.java

@@ -1,14 +1,13 @@
 package ch.puzzle.okr.controller;
 
-import ch.puzzle.okr.service.ClientConfigService;
+import ch.puzzle.okr.dto.ClientConfigDto;
+import ch.puzzle.okr.service.clientconfig.ClientConfigService;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.Map;
-
 @RestController
 @RequestMapping("/config")
 public class ClientConfigController {
@@ -20,7 +19,7 @@ public ClientConfigController(ClientConfigService configService) {
     }
 
     @GetMapping
-    public ResponseEntity<Map<String, String>> getConfig() {
+    public ResponseEntity<ClientConfigDto> getConfig() {
         return ResponseEntity.status(HttpStatus.OK).body(configService.getConfigBasedOnActiveEnv());
     }
 }

backend/src/main/java/ch/puzzle/okr/dto/ClientConfigDto.java

@@ -0,0 +1,13 @@
+package ch.puzzle.okr.dto;
+
+import java.util.HashMap;
+
+public record ClientConfigDto(
+        String activeProfile,
+        String issuer,
+        String clientId,
+        String favicon,
+        String logo,
+        HashMap<String, String> customStyles
+) {
+}

backend/src/main/java/ch/puzzle/okr/service/clientconfig/ClientConfigProperties.java

@@ -0,0 +1,18 @@
+package ch.puzzle.okr.service.clientconfig;
+
+import ch.puzzle.okr.dto.ClientConfigDto;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Service;
+
+import java.util.HashMap;
+
+@ConfigurationProperties("okr.clientconfig")
+public class ClientConfigProperties {
+    private String favicon;
+
+    private String logo;
+
+    private HashMap<String, String> customStyles;
+
+}

backend/src/main/java/ch/puzzle/okr/service/clientconfig/ClientConfigService.java

@@ -0,0 +1,34 @@
+package ch.puzzle.okr.service.clientconfig;
+
+import ch.puzzle.okr.dto.ClientConfigDto;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import java.util.HashMap;
+
+@Service
+public class ClientConfigService {
+
+    @Value("${spring.security.oauth2.resourceserver.jwt.issuer-uri}")
+    private String issuer;
+
+    @Value("${spring.profiles.active}")
+    private String activeProfile;
+
+    @Value("${spring.security.oauth2.resourceserver.opaquetoken.client-id}")
+    private String clientId;
+
+    @Value("${okr.clientconfig.favicon}")
+    private String favicon;
+
+    @Value("${okr.clientconfig.logo}")
+    private String logo;
+
+    @Value("${okr.clientconfig.customStyles}")
+    private HashMap<String, String> customStyles;
+
+    public ClientConfigDto getConfigBasedOnActiveEnv() {
+        return new ClientConfigDto(activeProfile, issuer, clientId, favicon, logo, customStyles);
+    }
+
+}

backend/src/main/resources/application-staging.properties

@@ -4,3 +4,4 @@ logging.level.org.springframework=debug
 spring.security.oauth2.resourceserver.opaquetoken.client-id=pitc_okr_staging
 
 okr.user.champion.usernames=peggimann
+okr.clientconfig.customStyles.okr-topbar-background-color=#ab31ad

backend/src/main/resources/application.properties

@@ -50,3 +50,7 @@ okr.jwt.user.username=preferred_username
 okr.jwt.user.firstname=given_name
 okr.jwt.user.lastname=family_name
 okr.jwt.user.email=email
+
+okr.clientconfig.favicon=assets/favicon.png
+okr.clientconfig.logo=assets/images/okr-logo.svg
+okr.clientconfig.customStyles.okr-topbar-background-color=#ff0000

backend/src/test/java/ch/puzzle/okr/controller/ClientConfigControllerIT.java

@@ -1,6 +1,6 @@
 package ch.puzzle.okr.controller;
 
-import ch.puzzle.okr.service.ClientConfigService;
+import ch.puzzle.okr.service.clientconfig.ClientConfigService;
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.extension.ExtendWith;
 import org.mockito.junit.jupiter.MockitoExtension;

backend/src/test/java/ch/puzzle/okr/service/ClientConfigServiceIT.java

@@ -1,11 +1,11 @@
 package ch.puzzle.okr.service;
 
+import ch.puzzle.okr.dto.ClientConfigDto;
+import ch.puzzle.okr.service.clientconfig.ClientConfigService;
 import ch.puzzle.okr.test.SpringIntegrationTest;
 import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
 
-import java.util.Map;
-
 import static org.junit.jupiter.api.Assertions.assertEquals;
 
 @SpringIntegrationTest
@@ -16,10 +16,10 @@ class ClientConfigServiceIT {
 
     @Test
     void saveKeyResultShouldSaveNewKeyResult() {
-        Map<String, String> configMap = clientConfigService.getConfigBasedOnActiveEnv();
+        ClientConfigDto clientConfig = clientConfigService.getConfigBasedOnActiveEnv();
 
-        assertEquals("prod", configMap.get("activeProfile"));
-        assertEquals("http://localhost:8544/realms/pitc", configMap.get("issuer"));
+        assertEquals("prod", clientConfig.activeProfile());
+        assertEquals("http://localhost:8544/realms/pitc", clientConfig.issuer());
     }
 
 }

frontend/src/app/application-top-bar/application-top-bar.component.html

@@ -1,7 +1,7 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
     <span class="d-flex h-100 align-items-center ps-4">
-      <img alt="okr-logo" height="32" ngSrc="assets/images/okr-logo.svg" width="140" />
+      <img alt="okr-logo" height="32" ngSrc="{{this.logoSrc$ | async}}" width="140" />
     </span>
 
     <div class="d-flex align-items-center me-md-5 me-1">

frontend/src/app/application-top-bar/application-top-bar.component.scss

@@ -12,7 +12,7 @@
   z-index: 102;
   height: inherit;
   justify-content: space-between;
-  background-color: $pz-dark-blue;
+  background-color: var(--okr-topbar-background-color)
 }
 
 .topBarEntry {

frontend/src/app/application-top-bar/application-top-bar.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { map, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, map, ReplaySubject } from 'rxjs';
 import { ConfigService } from '../config.service';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { TeamManagementComponent } from '../shared/dialog/team-management/team-management.component';
@@ -22,6 +22,7 @@ export class ApplicationTopBarComponent implements OnInit {
   @Input()
   hasAdminAccess!: ReplaySubject<boolean>;
   private dialogRef!: MatDialogRef<TeamManagementComponent> | undefined;
+  logoSrc$ = new BehaviorSubject<String|undefined>(undefined);
 
   constructor(
     private oauthService: OAuthService,
@@ -35,9 +36,7 @@ export class ApplicationTopBarComponent implements OnInit {
     this.configService.config$
       .pipe(
         map((config) => {
-          if (config.activeProfile === 'staging') {
-            document.getElementById('okrTopbar')!.style.backgroundColor = '#ab31ad';
-          }
+          this.logoSrc$.next(config.logo);
         }),
       )
       .subscribe();

frontend/src/app/config.service.ts

@@ -1,14 +1,18 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, shareReplay } from 'rxjs';
+import { ClientConfig } from "./shared/types/model/ClientConfig";
+
 
 @Injectable({
   providedIn: 'root',
 })
 export class ConfigService {
-  public config$: Observable<any>;
+  public config$: Observable<ClientConfig>;
 
   constructor(private httpClient: HttpClient) {
-    this.config$ = this.httpClient.get('/config').pipe(shareReplay());
+    this.config$ = this.httpClient
+      .get<ClientConfig>('/config')
+      .pipe(shareReplay());
   }
 }

frontend/src/app/shared/services/customization.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { ConfigService } from "../../config.service";
+import { CustomizationConfig } from "../types/model/ClientConfig";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CustomizationService {
+  private currentConfig?: CustomizationConfig;
+
+  constructor(private configService: ConfigService) {
+    configService.config$.subscribe(config => {
+      this.updateCustomizations(config);
+    })
+  }
+
+
+  private updateCustomizations(config: CustomizationConfig) {
+    this.setFavicon(config.favicon);
+    this.setStyleCustomizations(config.customStyles);
+
+    this.currentConfig = config;
+  }
+
+  private setFavicon(favicon: string) {
+    if (!favicon || this.currentConfig?.favicon === favicon) {
+      return;
+    }
+
+    document.getElementById("favicon")?.setAttribute("src", favicon);
+  }
+
+  private setStyleCustomizations(customStylesMap: Map<string, string>) {
+    if (!customStylesMap || this.areStylesTheSame(customStylesMap)) {
+      return;
+    }
+
+    this.removeStyles(this.currentConfig?.customStyles)
+    this.setStyles(customStylesMap);
+  }
+
+  private areStylesTheSame(customStylesMap: Map<string, string>) {
+    return JSON.stringify(this.currentConfig?.customStyles) === JSON.stringify(customStylesMap);
+  }
+
+  private removeStyles(customStylesMap: Map<string, string> | undefined) {
+    if (!customStylesMap) {
+      return;
+    }
+    const styles = document?.getElementById("html")!.style;
+    if (!styles) {
+      return
+    }
+
+    Array.from(customStylesMap.entries()).forEach(([varName, varValue]) => {
+      styles.setProperty(`--${varName}`, varValue);
+    });
+  }
+
+  private setStyles(customStylesMap: Map<string, string>) {
+    if (!customStylesMap) {
+      return;
+    }
+    const styles = document?.getElementById("html")!.style;
+    if (!styles) {
+      return
+    }
+
+    Array.from(customStylesMap.keys()).forEach((varName) => {
+      styles.removeProperty(`--${varName}`);
+    });
+  }
+}

frontend/src/app/shared/types/model/ClientConfig.ts

@@ -0,0 +1,14 @@
+
+export interface AuthConfig {
+  activeProfile: string;
+  issuer: string;
+  clientId: string;
+}
+
+export interface CustomizationConfig {
+  favicon: string;
+  logo: string;
+  customStyles: Map<string, string>;
+}
+export interface ClientConfig extends AuthConfig, CustomizationConfig {
+}

frontend/src/index.html

@@ -5,7 +5,7 @@
     <title>Puzzle OKR</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image" href="assets/favicon.png" />
+    <link id="favicon" rel="icon" type="image" href="assets/favicon.png" />
   </head>
   <body>
     <app-root></app-root>

frontend/src/style/_variables.scss

@@ -47,4 +47,6 @@ $pz-dark-blue-palette: (
   --mdc-text-button-label-text-tracking: normal;
   --mdc-filled-button-label-text-tracking: normal;
   --mdc-outlined-button-label-text-tracking: normal;
+
+  --okr-topbar-background-color: $pz-dark-blue;
 }