Localhost como auth server. BUG: La app no loguea.

src/app/app.module.ts

@@ -18,7 +18,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { TravelListComponent } from './travel-list/travel-list.component';
+import { ListComponent } from './list/list.component';
 
 const ROUTING_OPTIONS: ExtraOptions = {
   // preloadingStrategy: CustomPreloadingStrategy,
@@ -51,7 +51,7 @@ const ROUTING_OPTIONS: ExtraOptions = {
     AppComponent,
     HomeComponent,
     HeaderComponent,
-    TravelListComponent,
+    ListComponent,
   ],
   providers: [
     // (useHash) ? { provide: LocationStrategy, useClass: HashLocationStrategy } : [],

src/app/auth.config.ts

@@ -2,7 +2,8 @@ import { AuthConfig } from 'angular-oauth2-oidc';
 import { useSilentRefreshForCodeFlow } from '../flags';
 
 export const authConfig: AuthConfig = {
-  issuer: 'https://auth.fosil.eu/auth/realms/fosil',
+  issuer: 'http://localhost:8081/auth/realms/fosil',
+  // issuer: 'https://auth.fosil.eu/auth/realms/fosil',
 
   // URL of the SPA to redirect the user to after login
   redirectUri:
@@ -15,12 +16,6 @@ export const authConfig: AuthConfig = {
   // clientId: 'server.code',
   clientId: 'okupamicoche-frontend-angular',
 
-  // Just needed if your auth server demands a secret. In general, this
-  // is a sign that the auth server is not configured with SPAs in mind
-  // and it might not enforce further best practices vital for security
-  // such applications.
-  // dummyClientSecret: 'secret',
-
   responseType: 'code',
 
   // set the scope for the permissions the client should request

src/app/entities/list-dto.ts

@@ -0,0 +1,4 @@
+export interface ListDto<T> {
+  total: number;
+  list: T[];
+}

src/app/entities/travel-list.ts

@@ -1,6 +0,0 @@
-import { Travel } from './travel';
-
-export interface TravelList {
-    totalTravels: number;
-    travels: Travel[];
-}

src/app/home/home.component.html

@@ -1,4 +1,11 @@
-<app-travel-list></app-travel-list>
+<h3>Mis viajes</h3>
+<app-list *ngIf="login" [displayedColumns]="displayedColumns" [url]="urlMyTravels"></app-list>
+<p *ngIf="!login">Logueate para ver tus viajes</p>
+
+<h3>Viajes disponibles</h3>
+<app-list [displayedColumns]="displayedColumns" [url]="urlTravels"></app-list>
+
+<p>Login={{login}} loginFailed={{loginFailed}}</p>
 
 <div class="panel panel-default">
   <div class="panel-body">

src/app/home/home.component.ts

@@ -14,6 +14,16 @@ export class HomeComponent implements OnInit {
   login: false;
   userTravels: Travel[];
 
+  displayedColumns = [
+    'driver',
+    'departureDate',
+    'origin',
+    'destination',
+    'description',
+  ];
+  urlTravels = 'http://localhost:8080/api/public/list';
+  urlMyTravels = 'http://localhost:8080/api/travel/listusertravels';
+
   constructor(
     private route: ActivatedRoute,
     private oauthService: OAuthService,

src/app/list/list.component.html

@@ -54,7 +54,7 @@
   </mat-table>
 
   <mat-paginator
-    [length]=dataSource.totalTravels
+    [length]=dataSource.total
     [pageSize]="3"
     [pageSizeOptions]="[3, 5, 10]"
   ></mat-paginator>

src/app/list/list.component.ts

@@ -2,6 +2,7 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  Input,
   OnInit,
   ViewChild,
 } from '@angular/core';
@@ -11,35 +12,28 @@ import { MatSort } from '@angular/material/sort';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { merge, fromEvent } from 'rxjs';
 import { ApiService } from '../services/api.service';
-import { TravelsDataSource } from './travel-list.datasource';
+import { ListDataSource } from './list.datasource';
 
 @Component({
-  selector: 'app-travel-list',
-  templateUrl: './travel-list.component.html',
-  styleUrls: ['./travel-list.component.css'],
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.css'],
 })
-export class TravelListComponent implements OnInit, AfterViewInit {
-  dataSource: TravelsDataSource;
+export class ListComponent<T> implements OnInit, AfterViewInit {
+  dataSource: ListDataSource<T>;
 
-  displayedColumns = [
-    'driver',
-    'departureDate',
-    'origin',
-    'destination',
-    'description',
-  ];
+  @Input() displayedColumns: string[];
+  @Input() url: string;
 
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-
   @ViewChild(MatSort, { static: true }) sort: MatSort;
-
   @ViewChild('input', { static: true }) input: ElementRef;
 
   constructor(private route: ActivatedRoute, private apiService: ApiService) {}
 
   ngOnInit(): void {
-    this.dataSource = new TravelsDataSource(this.apiService);
-    this.loadTravels();
+    this.dataSource = new ListDataSource(this.apiService, this.url);
+    this.load();
   }
 
   ngAfterViewInit(): void {
@@ -52,18 +46,18 @@ export class TravelListComponent implements OnInit, AfterViewInit {
         tap(() => {
           this.paginator.pageIndex = 0;
 
-          this.loadTravels();
+          this.load();
         })
       )
       .subscribe();
 
     merge(this.sort.sortChange, this.paginator.page)
-      .pipe(tap(() => this.loadTravels()))
+      .pipe(tap(() => this.load()))
       .subscribe();
   }
 
-  loadTravels(): void {
-    this.dataSource.loadTravels(
+  load(): void {
+    this.dataSource.load(
       this.input.nativeElement.value,
       this.sort.active,
       this.sort.direction === 'asc',

src/app/list/list.datasource.ts

@@ -1,21 +1,19 @@
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 import { Observable, BehaviorSubject, of } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
-import { PUBLIC_API_URL } from '../app.config';
 import { ApiResponse } from '../entities/api-response';
-import { Travel } from '../entities/travel';
-import { TravelList } from '../entities/travel-list';
+import { ListDto } from '../entities/list-dto';
 import { ApiService } from '../services/api.service';
 
-export class TravelsDataSource implements DataSource<Travel> {
-  private travelsSubject = new BehaviorSubject<Travel[]>([]);
+export class ListDataSource<T> implements DataSource<T> {
+  private listSubject = new BehaviorSubject<T[]>([]);
   private loadingSubject = new BehaviorSubject<boolean>(false);
   public loading$ = this.loadingSubject.asObservable();
-  public totalTravels = 0;
+  public total = 0;
 
-  constructor(private apiService: ApiService) {}
+  constructor(private apiService: ApiService, private url: string) {}
 
-  loadTravels(
+  load(
     filter: string,
     sortColumn: string,
     sortAscending: boolean,
@@ -25,7 +23,7 @@ export class TravelsDataSource implements DataSource<Travel> {
     this.loadingSubject.next(true);
 
     this.apiService
-      .call<TravelList>(PUBLIC_API_URL + '/list', {
+      .call<ListDto<T>>(this.url, {
         filter,
         sortColumn,
         sortAscending: String(sortAscending),
@@ -37,20 +35,20 @@ export class TravelsDataSource implements DataSource<Travel> {
         finalize(() => this.loadingSubject.next(false))
       )
       .subscribe((res) => {
-        const travelList = (res as ApiResponse<TravelList>).data;
-        const data = travelList.travels;
-        this.totalTravels = travelList.totalTravels;
-        this.travelsSubject.next(data);
+        const listDto = (res as ApiResponse<ListDto<T>>).data;
+        const list = listDto.list;
+        this.total = listDto.total;
+        this.listSubject.next(list);
       });
   }
 
-  connect(collectionViewer: CollectionViewer): Observable<Travel[]> {
+  connect(collectionViewer: CollectionViewer): Observable<T[]> {
     console.log('Connecting data source');
-    return this.travelsSubject.asObservable();
+    return this.listSubject.asObservable();
   }
 
   disconnect(collectionViewer: CollectionViewer): void {
-    this.travelsSubject.complete();
+    this.listSubject.complete();
     this.loadingSubject.complete();
   }
 }