refactor: removed Account link, added log-out btn to header
MODIFY
src/app/components/api-card-list/api-card-list.component.ts
src/app/components/api-card-list/api-card-list.component.ts
@@ -43,11 +43,7 @@ export class ApiCardListComponent implements OnInit {
ngOnInit(): void {
this.apis = [];
- if (this.listType === 'api') {
this.getApiList();
- } else if (this.listType === 'featuredApi') {
- this.getFeaturedApis();
- }
}
OnInput(event: any): void {
@@ -94,7 +90,11 @@ export class ApiCardListComponent implements OnInit {
})
)
.subscribe((searchResult) => {
+ if (this.listType === 'api') {
this.apis = searchResult.apis;
+ } else if (this.listType === 'featuredApi') {
+ this.apis = searchResult.apis.slice(0,4);
+ }
this.totalSize = searchResult.totalSize;
});
}

MODIFY
src/app/components/header/header.component.html
src/app/components/header/header.component.html
<h1 class="mt-40" #heroTitle>{{ heroService.hero.title }}</h1>
<p #heroSubtitle>{{ heroService.hero.subtitle }}</p>
</div>
- <div id="hero-btn" *ngIf="!loggedIn">
- <button mat-raised-button color="primary" routerLink="/account">
+ <div id="hero-btn">
+ <button mat-raised-button color="primary" (click)="login()" *ngIf="!loggedIn">
Register / Login
</button>
+ <button mat-raised-button color="primary" (click)="logout()" *ngIf="loggedIn">
+ Log-Out
+ </button>
</div>
</div>
</div>

MODIFY
src/app/components/header/header.component.scss
src/app/components/header/header.component.scss
position: absolute;
bottom: 10%;
left: 3%;
+ width: 10%;
+ button {
+ width: 100%;
+ }
}
.hero-large {

MODIFY
src/app/components/header/header.component.ts
src/app/components/header/header.component.ts
@@ -2,15 +2,12 @@ import {
AfterViewInit,
Component,
ElementRef,
- EventEmitter,
- OnInit,
Renderer2,
ViewChild,
} from '@angular/core';
-import config from './../../../../config.json';
import { HeroService } from '../../services/hero/hero.service';
-import { Data } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';
+import {KeycloakHelperService} from "../../services/keycloak-helper/keycloak-helper.service";
@Component({
selector: 'app-header',
@@ -28,7 +25,8 @@ export class HeaderComponent implements AfterViewInit {
constructor(
private renderer: Renderer2,
public heroService: HeroService,
- private keycloak: KeycloakService
+ private keycloak: KeycloakService,
+ private keycloakHelper: KeycloakHelperService
) {}
async ngAfterViewInit(): Promise<void> {
@@ -55,4 +53,12 @@ export class HeaderComponent implements AfterViewInit {
this.loggedIn = await this.keycloak.isLoggedIn();
}
+
+ public login() {
+ this.keycloakHelper.login();
+ }
+
+ public logout(): void {
+ this.keycloakHelper.logout();
+ }
}

MODIFY
src/app/services/keycloak-helper/keycloak-helper.service.ts
src/app/services/keycloak-helper/keycloak-helper.service.ts
@@ -54,6 +54,10 @@ export class KeycloakHelperService {
return null;
}
+ public login(): void {
+ this.keycloak.login();
+ }
+
public logout(): void {
// TODO bring you home
KeycloakHelperService.clearTokensFromSessionStorage();

MODIFY
src/app/services/navigation/navigation.service.ts
src/app/services/navigation/navigation.service.ts
@@ -20,11 +20,14 @@ export class NavigationService {
link: 'applications',
openInNewTab: false,
},
- {
- name: this.translator.instant('ACCOUNT.TITLE'),
- link: 'account',
- openInNewTab: false,
- },
+ // To-Do
+ // Show account link again once the account page is implemented correctly
+ // {
+ // name: this.translator.instant('ACCOUNT.TITLE'),
+ // link: 'account',
+ // openInNewTab: false,
+ // },
+
];
navigationChanged: EventEmitter<INavigation> =

refactor: removed Account link, added log-out btn to header