feat: configure login/logout button colors
MODIFY
src/app/components/header/header.component.html
src/app/components/header/header.component.html
<p #heroSubtitle>{{ heroService.hero.subtitle }}</p>
</div>
<div id="hero-btn">
- <button mat-stroked-button color="primary" (click)="login()" *ngIf="!loggedIn; else logoutBtn" class="primary-border-color">
- Register / Login
- </button>
- <ng-template #logoutBtn>
- <button mat-stroked-button color="primary" (click)="logout()" class="primary-border-color">
- Log-Out
- </button>
- </ng-template>
+ <button #loginBtn (click)="login()" [hidden]="loggedIn" id="login-btn">{{'COMMON.LOGIN_OR_REGISTER' | translate}}</button>
+ <button #logoutBtn (click)="logout()" [hidden]="!loggedIn" id="logout-btn">{{'COMMON.LOGOUT' | translate}}</button>
</div>
</div>
</div>

MODIFY
src/app/components/header/header.component.scss
src/app/components/header/header.component.scss
right: 3%;
}
+#login-btn,#logout-btn{
+ font-family: Roboto, "Helvetica Neue", sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ color: white;
+ border: 1px solid white;
+ padding: 0px 15px;
+ background-color: rgba(0, 0, 0, 0);
+ border-radius: 4px;
+ line-height: 34px;
+}
+
.hero-large {
min-height: 32vh;
}

MODIFY
src/app/components/header/header.component.ts
src/app/components/header/header.component.ts
import {
AfterViewInit,
Component,
- ElementRef,
+ ElementRef, OnInit,
Renderer2,
ViewChild,
} from '@angular/core';
@@ -14,11 +14,13 @@ import {KeycloakHelperService} from "../../services/keycloak-helper/keycloak-hel
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
-export class HeaderComponent implements AfterViewInit {
+export class HeaderComponent implements OnInit, AfterViewInit {
@ViewChild('heroImage') heroImageDiv!: ElementRef;
@ViewChild('heroTitle') heroTitle!: ElementRef;
@ViewChild('heroSubtitle') heroSubtitle!: ElementRef;
@ViewChild('heroOverlay') heroOverlay!: ElementRef;
+ @ViewChild('loginBtn') heroLoginBtn!: ElementRef;
+ @ViewChild('logoutBtn') heroLogoutBtn!: ElementRef;
loggedIn = false;
@@ -29,29 +31,22 @@ export class HeaderComponent implements AfterViewInit {
private keycloakHelper: KeycloakHelperService
) {}
+ async ngOnInit() {
+ this.loggedIn = await this.keycloak.isLoggedIn();
+ }
+
async ngAfterViewInit() {
- this.renderer.setStyle(
- this.heroImageDiv.nativeElement,
- 'background-image',
- 'url("' + this.heroService.hero.heroImgUrl + '")'
- );
- this.renderer.setStyle(
- this.heroTitle.nativeElement,
- 'color',
- this.heroService.hero.fontColor.title
- );
- this.renderer.setStyle(
- this.heroSubtitle.nativeElement,
- 'color',
- this.heroService.hero.fontColor.subtitle
- );
- this.renderer.setStyle(
- this.heroOverlay.nativeElement,
- 'background-color',
- this.heroService.hero.overlayColor
- );
+ this.setStyle(this.heroImageDiv.nativeElement, 'background-image', 'url("' + this.heroService.hero.heroImgUrl + '")');
+ this.setStyle(this.heroTitle.nativeElement,'color', this.heroService.hero.fontColor.title);
+ this.setStyle(this.heroSubtitle.nativeElement,'color', this.heroService.hero.fontColor.subtitle);
+ this.setStyle(this.heroOverlay.nativeElement,'background-color', this.heroService.hero.overlayColor);
this.loggedIn = await this.keycloak.isLoggedIn();
+ this.setStyleForLoginBtn();
+ }
+
+ setStyle(el: any, style: string, value: string){
+ this.renderer.setStyle(el, style, value);
}
public login() {
@@ -61,4 +56,16 @@ export class HeaderComponent implements AfterViewInit {
public logout(): void {
this.keycloakHelper.logout();
}
+
+ private setStyleForLoginBtn() {
+ if (this.heroService.hero.buttonColor.login && !this.loggedIn) {
+ this.setStyle(this.heroLoginBtn.nativeElement, 'color', this.heroService.hero.buttonColor.login);
+ this.setStyle(this.heroLoginBtn.nativeElement, 'border-color', this.heroService.hero.buttonColor.login);
+ }
+
+ if (this.heroService.hero.buttonColor.logout && this.loggedIn) {
+ this.setStyle(this.heroLogoutBtn.nativeElement, 'color', this.heroService.hero.buttonColor.logout);
+ this.setStyle(this.heroLogoutBtn.nativeElement, 'border-color', this.heroService.hero.buttonColor.logout);
+ }
+ }
}

MODIFY
src/app/interfaces/IConfig.ts
src/app/interfaces/IConfig.ts
@@ -20,6 +20,10 @@ export interface IHero {
subtitle: string;
};
overlayColor: string;
+ buttonColor: {
+ login: string;
+ logout: string;
+ };
}
export interface INavigation {

MODIFY
src/assets/config.json
src/assets/config.json
"title": "white",
"subtitle": "white"
},
- "overlayColor": "rgba(0, 0, 0, 0)"
+ "overlayColor": "rgba(0, 0, 0, 0)",
+ "buttonColor": {
+ "login": "rgba(41, 150, 204, 1)",
+ "logout": "rgba(41, 150, 204, 1)"
+ }
},
"navigation": {
"showHomeLink": true,

MODIFY
src/assets/i18n/en.json
src/assets/i18n/en.json
"HTTP_HEADER": "As HTTP Request Header",
"API_DOCS": "API Documentation",
"ERROR": "Data could not be loaded, please try again later.",
- "SUCCESS": "Successfully created!"
+ "SUCCESS": "Successfully created!",
+ "LOGIN_OR_REGISTER": "Login / Register",
+ "LOGOUT": "Logout"
},
"HOME": {
"TITLE": "KoolBank Api Developer Portal",

feat: configure login/logout button colors