Allow to change the CSS
MODIFY
CHANGELOG.md
CHANGELOG.md
### Minor
+- GW-423: Allow to change the CSS
- BPAAS-6902: Remove workaround because of merge of PR#122 in keycloak-nodejs-admin-client
- BPAAS-6902: Update keycloak versions
- GW-431: Scrolling for Create Client Mapping

MODIFY
docker/start-nginx-with-devportal.sh
docker/start-nginx-with-devportal.sh
#!/bin/sh
+# Check if a prefix exists
+if [ -n "$SYSTEM_PREFIX" ]
+then
+ # If a prefix is set we will replace the base path in index.html before starting the application
+ # Replace existing base tag with base tag containing system prefix src e.g. "/pas/devportal/"
+ sed -i "s|<base.*>|<base href=\"/$SYSTEM_PREFIX/devportal/\">|g" "/usr/share/nginx/html/index.html"
+fi
+
+
+# Check if custom css is needed
+if [ -n "$CSS_FILE_URL" ]
+then
+ printf "Using custom css url: %s\n" "$CSS_FILE_URL"
+ sed -i "s|<!--CustomCSS-->|<!--CSS-->\n <link rel=\"stylesheet\" href=\"$CSS_FILE_URL\">|g" "/usr/share/nginx/html/index.html"
+fi
+
+
+# Check if custom favicon is needed
+if [ -n "$FAVICON_FILE_URL" ]
+then
+ printf "Using custom favicon url: %s\n" "$FAVICON_FILE_URL"
+fi
+sed -i "s|FAVICON_FILE_URL|${FAVICON_FILE_URL:-favicon.ico}|g" "/usr/share/nginx/html/index.html"
+
+
+# Set the default logo
+if [ -n "$LOGO_FILE_URL" ]
+then
+ printf "Using custom img url: %s\n" "$LOGO_FILE_URL"
+else
+ export LOGO_FILE_URL="assets/ScheerPASLogo.svg"
+fi
+
+
# replace all occurences of placeholders with environment variables
# see https://blog.codecentric.de/en/2019/03/docker-angular-dockerize-app-easily/
for mainFileName in /usr/share/nginx/html/main*.js
do
- envsubst "\$KEYCLOAK_REALM \$API_MGMT_UI_REST_URL \$KEYCLOAK_AUTH_URL" < "$mainFileName" > main.tmp
+ envsubst "\$KEYCLOAK_REALM \$API_MGMT_UI_REST_URL \$KEYCLOAK_AUTH_URL \$LOGO_FILE_URL" < "$mainFileName" > main.tmp
mv main.tmp "${mainFileName}"
done
-# Check if a prefix exists
-if [ -n "$SYSTEM_PREFIX" ]
-then
- # If a prefix is set we will replace the base path in index.html before starting the application
- # Replace existing base tag with base tag containing system prefix src e.g. "/pas/devportal/"
- sed -i "s/<base.*>/<base href=\"\/$SYSTEM_PREFIX\/devportal\/\">/g" "/usr/share/nginx/html/index.html"
-fi
-
-echo "Starting devportal"
+printf "Starting developer portal:\n"
# start nginx
nginx -g 'daemon off;'

MODIFY
src/app/components/admin/services/admin.service.ts
src/app/components/admin/services/admin.service.ts
@@ -20,7 +20,11 @@ import {ClientSearchResult, Developer} from '../../../services/api-data.service'
import {HttpClient} from '@angular/common/http';
import {KeycloakInteractionService} from './keycloak-interaction.service';
import {environment} from '../../../../environments/environment';
+import {Injectable} from '@angular/core';
+@Injectable({
+ providedIn: 'root'
+})
export class AdminService {
private apiMgmtUiRestUrl: string = environment.apiMgmtUiRestUrl;

MODIFY
src/app/components/admin/services/keycloak-interaction.service.ts
src/app/components/admin/services/keycloak-interaction.service.ts
@@ -20,7 +20,11 @@ import {TokenService} from '../../../services/token.service';
import UserRepresentation from 'keycloak-admin/lib/defs/userRepresentation';
import GroupRepresentation from 'keycloak-admin/lib/defs/groupRepresentation';
import {environment} from '../../../../environments/environment';
+import {Injectable} from '@angular/core';
+@Injectable({
+ providedIn: 'root'
+})
export class KeycloakInteractionService {
private kcAdminClient: KcAdminClient;

MODIFY
src/app/components/app-header/header.component.html
src/app/components/app-header/header.component.html
-->
<nav>
- <img routerLink="/" class="logo clickable" src="assets/ScheerPASLogo.svg">
+ <img routerLink="/" src="{{ logo }}" class="logo clickable" alt="Logo">
+
<div class="rightMenu">
<div class="floatRight">
<mat-icon id="header-icon">desktop_windows</mat-icon>

MODIFY
src/app/components/app-header/header.component.ts
src/app/components/app-header/header.component.ts
import {Component} from '@angular/core';
import {KeycloakService} from 'keycloak-angular';
+import {environment} from '../../../environments/environment';
@Component({
selector: 'app-app-header',
@@ -25,9 +26,9 @@ import {KeycloakService} from 'keycloak-angular';
export class HeaderComponent {
public user: string = this.keycloak.getKeycloakInstance().profile.username;
+ public logo: string = environment.logoUrl;
- constructor(private keycloak: KeycloakService) {
- }
+ constructor(private keycloak: KeycloakService) {}
/**
* Logout a user and clear the session tokens

MODIFY
src/app/services/api-data.service.spec.ts
src/app/services/api-data.service.spec.ts
import {TestBed} from '@angular/core/testing';
import {ApiDataService} from './api-data.service';
-import {KeycloakService} from 'keycloak-angular';
import {HttpClient} from '@angular/common/http';
describe('ApiDataService', () => {
const httpClient = jasmine.createSpy('HttpClient');
beforeEach(() => TestBed.configureTestingModule({
- providers: [
- { provide: HttpClient, useValue: httpClient},
- ]
+ providers: [{
+ provide: HttpClient, useValue: httpClient
+ }]
}));
it('should be created', () => {
- const service: ApiDataService = TestBed.get(ApiDataService);
+ const service: ApiDataService = TestBed.inject(ApiDataService);
expect(service).toBeTruthy();
});
});

MODIFY
src/app/services/api-data.service.ts
src/app/services/api-data.service.ts
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {environment} from '../../environments/environment';
+import {Injectable} from '@angular/core';
/**
* Api Version
@@ -174,6 +175,9 @@ export interface GatewayEndpoint {
endpoint: string;
}
+@Injectable({
+ providedIn: 'root'
+})
/**
* A service which executes the REST calls to Api Mgmt UI REST Interface
@@ -185,10 +189,8 @@ export class ApiDataService {
/**
* Constructor
* @param http The http client
- * @param apiMgmtUiRestUrl The Api Mgmt UI REST url
*/
- constructor(private http: HttpClient) {
- }
+ constructor(private http: HttpClient) {}
/**
* Get all public apis

MODIFY
src/environments/environment.prod.ts
src/environments/environment.prod.ts
@@ -18,5 +18,6 @@ export const environment = {
production: true,
apiMgmtRealm: '${KEYCLOAK_REALM}',
apiMgmtUiRestUrl: '${API_MGMT_UI_REST_URL}',
- keycloakAuthUrl: '${KEYCLOAK_AUTH_URL}'
+ keycloakAuthUrl: '${KEYCLOAK_AUTH_URL}',
+ logoUrl: '${LOGO_FILE_URL}'
};

MODIFY
src/environments/environment.ts
src/environments/environment.ts
@@ -22,7 +22,8 @@ export const environment = {
production: false,
apiMgmtRealm: '[keycloakRealm]',
apiMgmtUiRestUrl: 'https://[apimanUiRestEndpoint]:[port]/apiman',
- keycloakAuthUrl: 'https://[keycloakEndpoint]:[port]/auth'
+ keycloakAuthUrl: 'https://[keycloakEndpoint]:[port]/auth',
+ logoUrl: 'assets/ScheerPASLogo.svg'
};
/*

MODIFY
src/index.html
src/index.html
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link rel="icon" type="image/x-icon" href="FAVICON_FILE_URL">
+ <!--CustomCSS-->
</head>
<body>
<app-root></app-root>

GW-423: Allow to change the CSS