Merge pull request #103 from sinfo/staging

Adapt frontend to new Deck and backend changes

.github/workflows/build-staging.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - "staging"
-      - "master"
 
 jobs:
   docker:

angular.json

@@ -75,6 +75,9 @@
           "configurations": {
             "production": {
               "browserTarget": "corlief-frontend:build:production"
+            },
+            "staging": {
+              "browserTarget": "corlief-frontend:build:staging"
             }
           }
         },
@@ -128,6 +131,9 @@
           "configurations": {
             "production": {
               "devServerTarget": "corlief-frontend:serve:production"
+            },
+            "staging": {
+              "devServerTarget": "corlief-frontend:serve:staging"
             }
           }
         },

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "dev": "ng serve --configuration staging",
     "build": "ng build --prod --output-hashing=all && gzipper c --verbose ./dist",
     "build-dev": "ng build --configuration staging --output-hashing=all && gzipper c --verbose ./dist",
     "test": "ng test",
@@ -33,10 +34,12 @@
     "@ng-bootstrap/ng-bootstrap": "^3.2.0",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
+    "@types/google-one-tap": "^1.2.2",
+    "@types/google.accounts": "^0.0.9",
     "core-js": "^2.5.4",
-    "ng-lazyload-image": "^4.0.0",
+    "ng-lazyload-image": "4.0.0",
     "ngx-clipboard": "^11.1.7",
-    "rxjs": "^6.3.3",
+    "rxjs": "6.0.0",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
@@ -61,4 +64,4 @@
     "tslint": "~5.9.1",
     "typescript": "~2.7.2"
   }
-}
+}

src/app/admin/admin.component.html

@@ -4,6 +4,8 @@
 
     <a class="nav-link" routerLink="/admin/reservations" routerLinkActive="selected" [routerLinkActiveOptions]="{exact: true}">Reservations</a>
 
+    <a class="nav-link" routerLink="/admin/infos" routerLinkActive="selected" [routerLinkActiveOptions]="{exact: true}">Infos</a>
+
     <a class="nav-link" routerLink="/admin/links" routerLinkActive="selected" [routerLinkActiveOptions]="{exact: true}">Links</a>
 
     <a class="nav-link" routerLink="/admin/venues" routerLinkActive="selected" [routerLinkActiveOptions]="{exact: true}">Venue</a>

src/app/admin/infos/info.ts

@@ -0,0 +1,31 @@
+export class Info {
+  info?: MiscInfo;
+  titles?: Titles;
+
+  constructor(info?: MiscInfo, titles?: Titles) {
+    this.info = info;
+    this.titles = titles;
+  }
+}
+
+class MiscInfo {
+  numberOfPeople?: Number;
+  licensePlates?: String[];
+
+  constructor(numberOfPeople?: Number, licensePlates?: String[]) {
+    this.numberOfPeople = numberOfPeople;
+    this.licensePlates = licensePlates;
+  }
+}
+
+class Titles {
+  presentation?: String;
+  lunchTalk?: String;
+  workshop?: String;
+
+  constructor(presentation?: String, workshop?: String, lunchTalk?: String) {
+    this.presentation = presentation;
+    this.workshop = workshop;
+    this.lunchTalk = lunchTalk;
+  }
+}

src/app/admin/infos/infos.component.html

@@ -0,0 +1,3 @@
+<p>
+  infos works!
+</p>

src/app/admin/infos/infos.component.spec.ts

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

src/app/admin/infos/infos.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-infos',
+  templateUrl: './infos.component.html',
+  styleUrls: ['./infos.component.css']
+})
+export class InfosComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/admin/links/complete-company-info.pipe.ts

@@ -20,7 +20,7 @@ export class CompleteCompanyInfoPipe implements PipeTransform {
 
       if (event === undefined) { return result; }
 
-      const participation = Participation.getFromEvent(complete[index].participations, event);
+      const participation = Participation.getFromEvent(complete[index].participation, event);
 
       if (participation) {
         result.currentParticipation = participation;

src/app/admin/links/link/companies.ts

@@ -45,7 +45,7 @@ export class Companies {
             newCompany.currentParticipation =
                 company.currentParticipation
                     ? company.currentParticipation
-                    : Participation.getFromEdition(company.participations, filtered[0].edition);
+                    : Participation.getFromEdition(company.participation, filtered[0].edition);
             newCompany.link = link;
 
             if (link.valid) {

src/app/admin/links/links.service.ts

@@ -8,46 +8,37 @@ import { Subscription } from 'rxjs/internal/Subscription';
 
 import { environment } from 'src/environments/environment';
 import { StorageService } from '../../storage.service';
-import { Credentials } from '../login/credentials';
 
 import { DeckService } from 'src/app/deck/deck.service';
 
 import { Link, LinkForm, LinkEdit } from './link/link';
 import { Companies } from './link/companies';
 import { Company } from 'src/app/deck/company';
 import { Event } from 'src/app/deck/event';
+import { LoginService } from '../login/login.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LinksService {
 
   private corlief = `${environment.corlief}/link`;
-  private credentials: Credentials;
-
+  private companiesSubject: ReplaySubject<Companies> = new ReplaySubject<Companies>();
+  private headers: HttpHeaders;
   companies: Companies;
-
   event: Event;
-
   eventSubscription: Subscription;
-  deckCompaniesSubscription: Subscription;
-
-  private companiesSubject: ReplaySubject<Companies> = new ReplaySubject<Companies>();
-
-  private headers: HttpHeaders;
+  deckCompaniesSubscription: Subscription;s
 
   constructor(
     private http: HttpClient,
-    private storage: StorageService,
-    private deckService: DeckService
+    private deckService: DeckService,
+    private loginService: LoginService
   ) {
     this.companies = new Companies();
 
-    const credentials = <Credentials>this.storage.getItem('credentials');
-    this.credentials = credentials;
-
     this.headers = new HttpHeaders({
-      'Authorization': `${credentials.user} ${credentials.token}`,
+      'Authorization': `Bearer ${this.loginService.getToken()}`,
       'Content-Type': 'application/json'
     });
 
@@ -56,12 +47,12 @@ export class LinksService {
         const eventOverride = this.event !== undefined && this.event.id !== event.id;
         this.event = event;
         if (eventOverride) { this.updateLinks(event.id as string); }
-      });
 
-    this.deckCompaniesSubscription = this.deckService.getDeckCompaniesSubject()
-      .subscribe(companies => {
-        this.companies.updateCompanies(companies, this.event.id);
-        this.updateLinks();
+        this.deckCompaniesSubscription = this.deckService.getDeckCompaniesSubject()
+          .subscribe(companies => {
+            this.companies.updateCompanies(companies, this.event.id.toString());
+            this.updateLinks();
+          });
       });
   }
 

src/app/admin/login/jwt.service.ts

@@ -0,0 +1,123 @@
+import { Injectable } from '@angular/core'
+
+/**
+ * This code was taken from: https://github.com/auth0/angular2-jwt
+ * We only need the basic functionality to decode and check if token is expired
+ */
+@Injectable()
+export class JwtService {
+
+  constructor () {}
+
+  public urlBase64Decode (str: string): string {
+    let output = str.replace(/-/g, '+').replace(/_/g, '/')
+    switch (output.length % 4) {
+      case 0: {
+        break
+      }
+      case 2: {
+        output += '=='
+        break
+      }
+      case 3: {
+        output += '='
+        break
+      }
+      default: {
+        throw new Error('Illegal base64url string!')
+      }
+    }
+    return this.b64DecodeUnicode(output)
+  }
+
+  // credits for decoder goes to https://github.com/atk
+  private b64decode (str: string): string {
+    let chars =
+      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+    let output = ''
+
+    str = String(str).replace(/=+$/, '')
+
+    if (str.length % 4 === 1) {
+      throw new Error(
+        "'atob' failed: The string to be decoded is not correctly encoded."
+      )
+    }
+
+    for (
+      // initialize result and counters
+      // tslint:disable-next-line:one-variable-per-declaration
+      let bc = 0, bs: any, buffer: any, idx = 0;
+      // get next character
+      // tslint:disable-next-line:no-conditional-assignment
+      (buffer = str.charAt(idx++));
+      // character found in table? initialize bit storage and add its ascii value;
+      // tslint:disable-next-line:no-bitwise
+      ~buffer &&
+      (
+        // tslint:disable-next-line:no-conditional-assignment
+        (bs = bc % 4 ? bs * 64 + buffer : buffer),
+        // and if not first of each 4 characters,
+        // convert the first 8 bits to one ascii character
+        bc++ % 4
+      )
+        // tslint:disable-next-line:no-bitwise
+        ? (output += String.fromCharCode(255 & (bs >> ((-2 * bc) & 6))))
+        : 0
+    ) {
+      // try to find character in table (0-63, not found => -1)
+      buffer = chars.indexOf(buffer)
+    }
+    return output
+  }
+
+  private b64DecodeUnicode (str: any) {
+    return decodeURIComponent(
+      Array.prototype.map
+        .call(this.b64decode(str), (c: any) => {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+        })
+        .join('')
+    )
+  }
+
+  public decodeToken (token: string): any {
+    let parts = token.split('.')
+
+    if (parts.length !== 3) {
+      throw new Error('The inspected token doesn\'t appear to be a JWT.')
+    }
+
+    let decoded = this.urlBase64Decode(parts[1])
+    if (!decoded) {
+      throw new Error('Cannot decode the token.')
+    }
+
+    return JSON.parse(decoded)
+  }
+
+  public getTokenExpirationDate (token: string): Date {
+    let decoded: any
+    decoded = this.decodeToken(token)
+
+    if (!decoded.hasOwnProperty('exp')) {
+      return null
+    }
+
+    const date = new Date(0)
+    date.setUTCSeconds(decoded.exp)
+
+    return date
+  }
+
+  public isTokenExpired (token: string, offsetSeconds?: number): boolean {
+    let date = this.getTokenExpirationDate(token)
+    offsetSeconds = offsetSeconds || 0
+
+    if (date === null) {
+      return false
+    }
+
+    return !(date.valueOf() > new Date().valueOf() + offsetSeconds * 1000)
+  }
+}

src/app/admin/login/login.component.css

@@ -11,6 +11,7 @@
 .card-body {
     display: flex;
     flex-direction: column;
+    align-items: center;
 }
 
 .input-group-prepend {