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();

src/custom-theme.scss

@@ -0,0 +1,35 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$sample-oauth-primary: mat-palette($mat-indigo);
+$sample-oauth-accent: mat-palette($mat-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$sample-oauth-warn: mat-palette($mat-red);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$sample-oauth-theme: mat-light-theme((
+  color: (
+    primary: $sample-oauth-primary,
+    accent: $sample-oauth-accent,
+    warn: $sample-oauth-warn,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($sample-oauth-theme);
+

src/index.html

@@ -2,13 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Sample</title>
+    <title>Okupa mi coche</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <flight-app></flight-app>
+      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+  <body class="mat-typography">
+    <app-root></app-root>
   </body>
 </html>

src/styles.css

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }