Inicio de home y Angular Material

src/app/app.component.html

@@ -1,12 +1,4 @@
-<nav class="navbar navbar-default">
-  <ul class="nav navbar-nav">
-    <li><a [routerLink]="['/home']">Home</a></li>
-    <li><a [routerLink]="['/password-flow-login']">Password Flow Login</a></li>
-    <li>
-      <a [routerLink]="['/flight-booking/flight-search']">Book a Flight</a>
-    </li>
-  </ul>
-</nav>
+<app-header></app-header>
 
 <div class="container">
   <div class="row">
@@ -17,5 +9,3 @@
     <router-outlet name="aux"></router-outlet>
   </div>
 </div>
-
-<!-- Fußzeile -->

src/app/app.component.ts

@@ -2,12 +2,12 @@ import { Component } from '@angular/core';
 import { OAuthService, NullValidationHandler } from 'angular-oauth2-oidc';
 import { Router } from '@angular/router';
 import { filter } from 'rxjs/operators';
-import { authCodeFlowConfig } from './auth-code-flow.config';
+import { authConfig } from './auth.config';
 import { useHash } from '../flags';
 
 @Component({
   // tslint:disable-next-line:component-selector
-  selector: 'flight-app',
+  selector: 'app-root',
   templateUrl: './app.component.html',
 })
 export class AppComponent {
@@ -24,7 +24,7 @@ export class AppComponent {
   }
 
   private configureCodeFlow(): void {
-    this.oauthService.configure(authCodeFlowConfig);
+    this.oauthService.configure(authConfig);
     this.oauthService.loadDiscoveryDocumentAndTryLogin().then((_) => {
       if (useHash) {
         this.router.navigate(['/']);
@@ -32,6 +32,8 @@ export class AppComponent {
     });
 
     // Optional
-    this.oauthService.setupAutomaticSilentRefresh();
+    if (authConfig.useSilentRefresh) {
+      this.oauthService.setupAutomaticSilentRefresh();
+    }
   }
 }

src/app/app.config.ts

@@ -0,0 +1,3 @@
+export const API_BASE_URL = 'http://localhost:8080';
+export const API_RELATIVE_PATH = '/api';
+export const API_URL = API_BASE_URL + API_RELATIVE_PATH;

src/app/app.module.ts

@@ -6,17 +6,19 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';
-import { BASE_URL } from './app.tokens';
+import { API_URL } from './app.config';
 import { FlightHistoryComponent } from './flight-history/flight-history.component';
 import { HomeComponent } from './home/home.component';
 import { SharedModule } from './shared/shared.module';
 import { RouterModule, ExtraOptions } from '@angular/router';
 import { useHash } from '../flags';
+import { HeaderComponent } from './header/header.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 const ROUTING_OPTIONS: ExtraOptions = {
   // preloadingStrategy: CustomPreloadingStrategy,
   useHash,
-  initialNavigation: !useHash
+  initialNavigation: !useHash,
 };
 
 @NgModule({
@@ -29,23 +31,25 @@ const ROUTING_OPTIONS: ExtraOptions = {
     SharedModule.forRoot(),
     OAuthModule.forRoot({
       resourceServer: {
-        allowedUrls: ['http://localhost:8080/api'],
-        sendAccessToken: true
-      }
-    })
+        allowedUrls: [API_URL],
+        sendAccessToken: true,
+      },
+    }),
+    BrowserAnimationsModule,
   ],
   declarations: [
     AppComponent,
     HomeComponent,
-    FlightHistoryComponent
+    FlightHistoryComponent,
+    HeaderComponent
   ],
   providers: [
     // (useHash) ? { provide: LocationStrategy, useClass: HashLocationStrategy } : [],
     // {provide: AuthConfig, useValue: authConfig },
     // { provide: OAuthStorage, useValue: localStorage },
     // { provide: ValidationHandler, useClass: JwksValidationHandler },
-    { provide: BASE_URL, useValue: 'http://localhost:8080' }
+    // { provide: BASE_URL, useValue: 'http://localhost:8080' }
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/app.tokens.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export const BASE_URL = new InjectionToken<string>('http://localhost:8080');

src/app/auth.config.ts

@@ -1,7 +1,7 @@
 import { AuthConfig } from 'angular-oauth2-oidc';
 import { useSilentRefreshForCodeFlow } from '../flags';
 
-export const authCodeFlowConfig: AuthConfig = {
+export const authConfig: AuthConfig = {
   issuer: 'https://auth.fosil.eu/auth/realms/fosil',
 
   // URL of the SPA to redirect the user to after login
@@ -45,8 +45,9 @@ export const authCodeFlowConfig: AuthConfig = {
   showDebugInformation: true,
 
   sessionChecksEnabled: true,
+  sessionCheckIntervall: 10000,
 
-  timeoutFactor: 0.5,
+  timeoutFactor: 0.75,
   // disablePKCI: true,
 
   clearHashAfterLogin: false

src/app/flight-booking/flight-booking.routes.ts

@@ -6,7 +6,7 @@ import { FlightBookingComponent } from './flight-booking.component';
 import { AuthGuard } from '../shared/auth/auth.guard';
 import { LeaveComponentGuard } from '../shared/deactivation/LeaveComponentGuard';
 
-let FLIGHT_BOOKING_ROUTES: Routes = [
+const FLIGHT_BOOKING_ROUTES: Routes = [
   {
     path: '',
     component: FlightBookingComponent,

src/app/flight-booking/services/flight.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, Inject } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { BASE_URL } from '../../app.tokens';
+import { API_URL } from '../../app.config';
 import { Observable } from 'rxjs';
 import { Flight } from '../../entities/flight';
 import { OAuthService } from 'angular-oauth2-oidc';
@@ -9,14 +9,13 @@ import { OAuthService } from 'angular-oauth2-oidc';
 export class FlightService {
   constructor(
     private oauthService: OAuthService,
-    private http: HttpClient,
-    @Inject(BASE_URL) private baseUrl: string
+    private http: HttpClient
   ) {}
 
   public flights: Array<Flight> = [];
 
   find(from: string, to: string): void {
-    let url = this.baseUrl + '/api/flight';
+    let url = API_URL + '/flight';
     let headers = new HttpHeaders().set('Accept', 'application/json');
     //.set('Authorization', 'Bearer ' + this.oauthService.getAccessToken());
 

src/app/header/header.component.html

@@ -0,0 +1,13 @@
+<div>
+  <img src="/assets/img/logo.png" />
+
+  <div *ngIf="name; then thenBlock; else elseBlock"></div>
+  <ng-template #thenBlock>
+    {{ name }}
+    <button class="btn btn-default" (click)="logout()">Logout</button>
+  </ng-template>
+  <ng-template #elseBlock>
+    <button class="btn btn-default" (click)="login()">Login</button>
+  </ng-template>
+
+</div>

src/app/header/header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './header.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/header.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { authConfig } from '../auth.config';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css'],
+})
+export class HeaderComponent implements OnInit {
+  constructor(private oauthService: OAuthService) {}
+
+  ngOnInit(): void {}
+
+  async login(): Promise<void> {
+    // Tweak config for code flow
+    this.oauthService.configure(authConfig);
+    console.log('login pre');
+    await this.oauthService.loadDiscoveryDocument();
+    console.log('login post');
+    sessionStorage.setItem('flow', 'code');
+
+    this.oauthService.initLoginFlow();
+  }
+
+  logout(): void {
+    this.oauthService.revokeTokenAndLogout();
+  }
+
+  get name(): any {
+    const claims = this.oauthService.getIdentityClaims();
+    if (!claims) {
+      return null;
+    }
+    return claims['name'];
+  }
+}

src/app/home/home.component.html

@@ -1,60 +1,3 @@
-<strong>Status: {{ givenName ? 'logged in' : 'logged out' }} </strong>
-<h1 *ngIf="!givenName">Welcome!</h1>
-<h1 *ngIf="givenName">Welcome, {{ givenName }} {{ familyName }}!</h1>
-
-<div *ngIf="login" style="color: red">
-  You have to login before you can search for flights.
-</div>
-
-<div class="panel panel-default">
-  <div class="panel-body">
-    <p>Login with Authorization Server</p>
-    <div class="checkbox">
-      <label
-        ><input type="checkbox" [(ngModel)]="requestAccessToken" /> Request
-        AccessToken</label
-      >
-    </div>
-  </div>
-  <div class="panel-body">
-    <p>Test settings</p>
-    <div class="checkbox">
-      <label
-        ><input type="checkbox" [(ngModel)]="useHashLocationStrategy" /> Use
-        hash location strategy (Only works with Code Flow)</label
-      >
-    </div>
-  </div>
-</div>
-
-<div class="panel panel-default">
-  <div class="panel-body">
-    <h2>Login with Code Flow</h2>
-    <p>
-      <button class="btn btn-default" (click)="loginCode()">Login</button>
-      <button class="btn btn-default" (click)="logout()">Logout</button>
-    </p>
-    <b>Username/Password:</b> alice/alice
-  </div>
-</div>
-
-<div class="panel panel-default">
-  <div class="panel-body">
-    <h2>Login with Code Flow in popup</h2>
-    <p>
-      <button class="btn btn-default" (click)="loginCodeInPopup()">
-        Login
-      </button>
-      <button class="btn btn-default" (click)="logout()">Logout</button>
-    </p>
-    <p><b>Username/Password:</b> alice/alice</p>
-    <p>
-      <b>Note:</b> When using IE, some security settings block the communication
-      with popups. This prevents that this feature works.
-    </p>
-  </div>
-</div>
-
 <div class="panel panel-default">
   <div class="panel-body">
     <p><b>access_token_expiration:</b> {{ access_token_expiration }}</p>

src/app/home/home.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { authCodeFlowConfig } from '../auth-code-flow.config';
 import { ActivatedRoute } from '@angular/router';
 
 @Component({
@@ -33,27 +32,6 @@ export class HomeComponent implements OnInit {
     */
   }
 
-  async loginCode(): Promise<void> {
-    // Tweak config for code flow
-    this.oauthService.configure(authCodeFlowConfig);
-    await this.oauthService.loadDiscoveryDocument();
-    sessionStorage.setItem('flow', 'code');
-
-    this.oauthService.initLoginFlow('/some-state;p1=1;p2=2?p3=3&p4=4');
-    // the parameter here is optional. It's passed around and can be used after logging in
-  }
-
-  async loginCodeInPopup(): Promise<void> {
-    // Tweak config for code flow
-    this.oauthService.configure(authCodeFlowConfig);
-    await this.oauthService.loadDiscoveryDocument();
-    sessionStorage.setItem('flow', 'code');
-
-    this.oauthService.initLoginFlowInPopup().then(() => {
-      this.loadUserProfile();
-    });
-  }
-
   logout(): void {
     // this.oauthService.logOut();
     this.oauthService.revokeTokenAndLogout();