#1 added possibility to authenticate against api and save accesstoken…

… in cookie

devday/angular.json

@@ -69,7 +69,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "devday:build"
+            "browserTarget": "devday:build",
+            "proxyConfig": "src/proxy.conf.json"
           },
           "configurations": {
             "production": {
@@ -129,4 +130,4 @@
       }
     }},
   "defaultProject": "devday"
-}
+}

devday/package.json

@@ -23,6 +23,7 @@
     "@angular/router": "~13.0.0",
     "@angular/service-worker": "~13.0.0",
     "angular-svg-icon": "^13.0.0",
+    "ngx-cookie-service": "^13.1.2",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.1",
     "webpack-sources": "^3.2.1",

devday/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { environment } from '../environments/environment';
 import { ComponentsModule } from './modules/components.module';
 import { ExamplesPageComponent } from './pages/examples-page/examples-page.component';
 import { AppRoutingModule } from './routing/app-routing.module';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { LoginComponent } from './pages/login/login/login.component';
@@ -17,6 +17,9 @@ import { FavouritesComponent } from './pages/favourites/favourites/favourites.co
 import { YourTicketComponent } from './pages/your-ticket/your-ticket/your-ticket.component';
 import { SpeakersComponent } from './pages/speakers/speakers/speakers.component';
 import { SpeakerComponent } from './pages/speaker/speaker/speaker.component';
+import { LoginService } from './services/login.service';
+import { ApiInterceptor } from './interceptors/api.interceptor';
+import { AccessTokenInterceptor } from './interceptors/access-token.interceptor';
 
 
 @NgModule({
@@ -43,7 +46,11 @@ import { SpeakerComponent } from './pages/speaker/speaker/speaker.component';
   exports: [
       ComponentsModule
   ],
-  providers: [],
+  providers: [
+    LoginService,
+    { provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: AccessTokenInterceptor, multi: true }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

devday/src/app/interceptors/access-token.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AccessTokenInterceptor } from './access-token.interceptor';
+
+describe('AccessTokenInterceptor', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      AccessTokenInterceptor
+      ]
+  }));
+
+  it('should be created', () => {
+    const interceptor: AccessTokenInterceptor = TestBed.inject(AccessTokenInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

devday/src/app/interceptors/access-token.interceptor.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { LoginService } from '../services/login.service';
+import { CookieService } from 'ngx-cookie-service';
+
+@Injectable()
+export class AccessTokenInterceptor implements HttpInterceptor {
+  private token : string;
+
+  constructor(private cookieService : CookieService) {}
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    if (!this.token) {
+      this.token = this.cookieService.get('sessionToken')
+    }
+    return next.handle(this.addToken(request));
+  }
+
+  addToken(request: HttpRequest<any>) {
+    let withToken
+    if (this.token) {
+      withToken = request.clone({
+        setHeaders: {
+          Authorization: `Bearer ${this.token}`
+        }
+      })
+    } else {
+      withToken = request;
+    }
+
+    console.log(withToken)
+
+    return withToken
+  }
+}

devday/src/app/interceptors/api.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiInterceptor } from './api.interceptor';
+
+describe('ApiInterceptor', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      ApiInterceptor
+      ]
+  }));
+
+  it('should be created', () => {
+    const interceptor: ApiInterceptor = TestBed.inject(ApiInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

devday/src/app/interceptors/api.interceptor.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class ApiInterceptor implements HttpInterceptor {
+
+  constructor() {}
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    return next.handle(this.addContentType(request));
+  }
+
+  addContentType(request: HttpRequest<any>) {
+    let withHeaders = request.clone({
+      setHeaders: {
+        'accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+    })
+    console.log(withHeaders)
+
+    return withHeaders
+  }
+}

devday/src/app/pages/login/login/login.component.html

@@ -3,9 +3,9 @@
 <tabs [data]="loginTabs.data" [activeIndex]="loginTabs.activeIndex" (activeIndexChange)="tabChanged($event)"></tabs>
 
 <ng-container *ngIf="loginTabs.activeIndex === 0">
-  <app-input label="E-Mail" icon="ic_mail" placeholder="E-Mail"></app-input>
-  <app-input label="Password" type="password" icon="ic_password" placeholder="Password"></app-input>
-  <button app-button textBtn centered>Login</button>
+  <app-input label="E-Mail" icon="ic_mail" [value]="loginData.username" (change)="loginData.username = $event.value" placeholder="E-Mail"></app-input>
+  <app-input label="Password" type="password" [value]="loginData.password" (change)="loginData.password = $event.value" icon="ic_password" placeholder="Password"></app-input>
+  <button app-button textBtn centered (click)="performLogin()">Login</button>
 </ng-container>
 
 <ng-container *ngIf="loginTabs.activeIndex === 1">

devday/src/app/pages/login/login/login.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { CookieService } from 'ngx-cookie-service';
 import { Card } from 'src/app/classes/card';
+import { LoginData, LoginService } from 'src/app/services/login.service';
 
 @Component({
   selector: 'app-login',
@@ -34,7 +36,12 @@ export class LoginComponent implements OnInit {
     }
   ];
 
-  constructor() { }
+  public loginData : LoginData = {
+    username: null,
+    password: null,
+  }
+
+  constructor(private loginService: LoginService, private cookieService: CookieService) { }
 
   ngOnInit(): void {
   }
@@ -43,4 +50,13 @@ export class LoginComponent implements OnInit {
     this.loginTabs.activeIndex = tabIndex;
   }
 
+  public performLogin() {
+    this.loginService.login(this.loginData).subscribe(
+      (data : {token: string}) => {
+        console.log(data)
+        this.cookieService.set('sessionToken', data.token, { expires: 2, sameSite: 'Strict' });
+      }
+    )
+  }
+
 }

devday/src/app/services/login.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoginService } from './login.service';
+
+describe('LoginService', () => {
+  let service: LoginService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoginService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

devday/src/app/services/login.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { map, Subject } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { BasicRestService } from './basic-rest.service';
+
+export interface LoginData {
+  username: string;
+  password: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoginService {
+
+  constructor(private restService: BasicRestService) { }
+
+  login(loginData : LoginData) {
+    return this.restService.post(environment.apiUrl + 'api-token-auth/', loginData)
+  }
+}

devday/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  apiUrl: 'https://www.devday.de/api/'
 };

devday/src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: 'https://www.devday.de/'
 };
 
 /*

devday/src/proxy.conf.json

@@ -0,0 +1,7 @@
+{
+  "/api/*": {
+      "target": "https://www.devday.de/api/",
+      "secure": false,
+      "logLevel": "debug"
+  }
+}