Make ui configurable via environment variables

Issue-ID: PORTALNG-4

Signed-off-by: Fiete Ostkamp <Fiete.Ostkamp@telekom.de>
Change-Id: I31b968cef23c7727cfd8cfb2ba65691745a0b8f3

9 files changed, 32 insertions, 10 deletions

diff --git a/src/app/components/layout/header/header/header.component.ts b/src/app/components/layout/header/header/header.component.ts
index f5c1a1c..b6c513f 100644
--- a/src/app/components/layout/header/header/header.component.ts
+++ b/src/app/components/layout/header/header/header.component.ts
@@ -48,7 +48,7 @@ export class HeaderComponent implements OnInit {
   isOnapTheme = false;
   switchToMainContent: string = '';
   isFullScreen = false;
-  changePasswordUrl = `${environment.keycloakEditProfile}/password`;
+  changePasswordUrl = `${environment.keycloak.hostname}/auth/realms/${environment.keycloak.realm}/account/password`;
   shortcuts: Map<KeyboardShortcuts,string> = this.shortcutService.getShortcuts();
 
   public ACCESS_KEY = KeyboardShortcuts;
diff --git a/src/app/components/layout/sidemenu/sidemenu.component.ts b/src/app/components/layout/sidemenu/sidemenu.component.ts
index 1f5c123..8cbe6b2 100644
--- a/src/app/components/layout/sidemenu/sidemenu.component.ts
+++ b/src/app/components/layout/sidemenu/sidemenu.component.ts
@@ -35,7 +35,6 @@ export class SidemenuComponent {
   @Input() isSidebarCollapsed = false;
 
   public ACCESS_KEY = KeyboardShortcuts;
-  public keycloakEditProfile = environment.keycloakEditProfile;
   public isKpiDashboardSubMenuCollapsed = false;
 
   constructor() {
diff --git a/src/app/model/environment.model.ts b/src/app/model/environment.model.ts
index 5bfb615..8e6bba1 100644
--- a/src/app/model/environment.model.ts
+++ b/src/app/model/environment.model.ts
@@ -21,18 +21,17 @@ export interface Environment {
   customStyleEnabled: boolean;
   backendServerUrl: string;
   hostname: string;
-  keycloakEditProfile: string;
   production: boolean;
   keycloak: KeycloakEnvironment;
   dateTimeFormat: string;
   loggingUrl: string;
   loggingEnabled: boolean
   supportUrlLink: string
-
 }
 
 export interface KeycloakEnvironment {
-  issuer: string;
+  hostname: string;
+  realm: string;
   redirectUri: string;
   clientId: string;
   responseType: string;
diff --git a/src/app/modules/auth/auth.config.ts b/src/app/modules/auth/auth.config.ts
index 3414edd..8f8035e 100644
--- a/src/app/modules/auth/auth.config.ts
+++ b/src/app/modules/auth/auth.config.ts
@@ -22,7 +22,7 @@ import { environment } from '../../../environments/environment';
 
 export const authConfig: AuthConfig = {
   // Url of the Identity Provider
-  issuer: environment.keycloak.issuer,
+  issuer: `${environment.keycloak.hostname}/auth/realms/${environment.keycloak.realm}`,
 
   // URL of the SPA to redirect the user to after login
   redirectUri: environment.keycloak.redirectUri,
diff --git a/src/assets/env.js b/src/assets/env.js
new file mode 100644
index 0000000..154ed3b
--- /dev/null
+++ b/src/assets/env.js
@@ -0,0 +1,10 @@
+(function(window) {
+  window["env"] = window["env"] || {};
+  window["env"]["keycloak"] = window["env"]["keycloak"] || {};
+
+  // Environment variables
+  window["env"]["customStyleEnabled"];
+  window["env"]["keycloak"]["hostname"];
+  window["env"]["keycloak"]["realm"];
+  window["env"]["keycloak"]["clientId"];
+})(this);
diff --git a/src/assets/env.template.js b/src/assets/env.template.js
new file mode 100644
index 0000000..037014b
--- /dev/null
+++ b/src/assets/env.template.js
@@ -0,0 +1,10 @@
+(function(window) {
+  window["env"] = window["env"] || {};
+  window["env"]["keycloak"] = window["env"]["keycloak"] || {};
+
+  // Environment variables
+  window["env"]["customStyleEnabled"] = "${CUSTOM_STYLE_ENABLED}";
+  window["env"]["keycloak"]["hostname"] = "${KEYCLOAK_HOSTNAME}";
+  window["env"]["keycloak"]["realm"] = "${KEYCLOAK_REALM}";
+  window["env"]["keycloak"]["clientId"] = "${KEYCLOAK_CLIENT_ID}";
+})(this);
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index a533520..72d0d29 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /*
  * Copyright (c) 2022. Deutsche Telekom AG
  *
@@ -27,9 +28,10 @@ export const environment: Environment = {
   production: true,
   keycloakEditProfile: `${window.location.origin}/auth/realms/ONAP/account`,
   keycloak: {
-    issuer: `${window.location.origin}/auth/realms/ONAP`, // Url of the Identity Provider
+    hostname: window["env"]["keycloak"]["hostname"] || `https://${window.location.host.replace('portal', 'keycloak')}`,
+    realm: window["env"]["keycloak"]["realm"] || 'ONAP',
     redirectUri: window.location.origin, // URL of the SPA to redirect the user to after login
-    clientId: 'portal-app', // The Frontend is registered with this id at the auth-server
+    clientId: window["env"]["keycloak"]["clientId"] || 'portal-app', // The Frontend is registered with this id at the auth-server
     responseType: 'code',
     scope: 'openid', // set the scope for the permissions the client should request
     requireHttps: false, // Don't require https
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 80d0005..9b734c6 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -29,11 +29,11 @@ import { Environment } from '../app/model/environment.model';
 export const environment: Environment = {
   customStyleEnabled: true,
   backendServerUrl: window.location.origin + '/api',
-  keycloakEditProfile: `${window.location.origin}/auth/realms/ONAP/account`,
   hostname: window.location.hostname,
   production: false,
   keycloak: {
-    issuer: `${window.location.origin}/auth/realms/ONAP`, // Url of the Identity Provider
+    hostname: window.location.origin, // Url of the Identity Provider
+    realm: 'ONAP',
     redirectUri: window.location.origin, // URL of the SPA to redirect the user to after login
     clientId: 'portal-app', // The Frontend is registered with this id at the auth-server
     responseType: 'code',
diff --git a/src/index.html b/src/index.html
index 9ff9ef5..72b1820 100644
--- a/src/index.html
+++ b/src/index.html
@@ -27,6 +27,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script src="assets/js/jquery-2.1.3.min.js"></script>
     <script src="assets/js/bootstrap.min.js"></script>
+    <!-- Load environment variables -->
+    <script src="assets/env.js"></script>
   </head>
   <body>
     <app-root></app-root>