Corrected login and added logout

Author: Bernardo

src/app/authentication/interceptor/authentication.interceptor.ts

@@ -11,15 +11,15 @@ export class AuthenticationInterceptor implements HttpInterceptor {
 
   constructor(private authenticationService: AuthenticationService) { }
 
-  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     let authReq;
 
     const token = this.authenticationService.getToken();
 
     if (token === null) {
-      authReq = req;
+      authReq = request;
     } else {
-      authReq = req.clone({ headers: req.headers.set(this.tokenHeaderKey, 'Basic ' + token) });
+      authReq = request.clone({ headers: request.headers.set(this.tokenHeaderKey, 'Basic ' + token) });
     }
 
     return next.handle(authReq);

src/app/authentication/model/user.ts

@@ -1,7 +1,5 @@
 export class User {
-    id: number = 0;
     username: string = '';
     password: string = '';
     logged: boolean = false;
-    authdata?: string;
 }

src/app/authentication/service/authentication.service.ts

@@ -5,16 +5,10 @@ export class AuthenticationService {
 
     private tokenId: string = 'access_token';
 
-    constructor(
-    ) {
-    }
+    constructor() { }
 
     getToken(): string | null {
         return localStorage.getItem(this.tokenId);
     }
 
-    saveToken(token: string) {
-        return localStorage.setItem(this.tokenId, token);
-    }
-
 }

src/app/login/login-form/login-form.component.html

@@ -5,16 +5,16 @@ <h4 class="card-header">Angular 10 Basic Authentication Example</h4>
           <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
               <div class="form-group">
                   <label for="username">Username</label>
-                  <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
-                  <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
-                      <div *ngIf="f.username.errors.required">Username is required</div>
+                  <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f['username'].errors }" />
+                  <div *ngIf="submitted && f['username'].errors" class="invalid-feedback">
+                      <div *ngIf="f['username'].errors['required']">Username is required</div>
                   </div>
               </div>
               <div class="form-group">
                   <label for="password">Password</label>
-                  <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
-                  <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
-                      <div *ngIf="f.password.errors.required">Password is required</div>
+                  <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f['password'].errors }" />
+                  <div *ngIf="submitted && f['password'].errors" class="invalid-feedback">
+                      <div *ngIf="f['password'].errors['required']">Password is required</div>
                   </div>
               </div>
               <button [disabled]="loading" class="btn btn-primary">

src/app/login/login-form/login-form.component.ts

@@ -1,12 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { AuthenticationService } from '@app/authentication/service/authentication.service';
-import { first } from 'rxjs/operators';
 import { LoginService } from '../service/login.service';
 
 @Component({
-  selector: 'dahs-login-form',
+  selector: 'login-form',
   templateUrl: './login-form.component.html',
   styleUrls: ['./login-form.component.sass']
 })
@@ -22,8 +20,7 @@ export class LoginFormComponent implements OnInit {
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private loginService: LoginService,
-    private authenticationService: AuthenticationService
+    private loginService: LoginService
   ) {
     // redirect to home if already logged in
     if (this.loginService.user.logged) {
@@ -58,12 +55,7 @@ export class LoginFormComponent implements OnInit {
         next: user => {
           this.loading = false;
           if (user.logged) {
-            if(user.authdata){
-              this.authenticationService.saveToken(user.authdata);
-            }
             this.router.navigate([this.returnUrl]);
-          } else {
-            this.authenticationService.saveToken('');
           }
         },
         error: error => {

src/app/login/login.module.ts

@@ -5,12 +5,14 @@ import { AuthenticationModule } from '@app/authentication/authentication.module'
 import { LoginFormComponent } from './login-form/login-form.component';
 import { LoginRoutingModule } from './login-routing.module';
 import { LoginService } from './service/login.service';
+import { LogoutButtonComponent } from './logout-button/logout-button.component';
 
 
 
 @NgModule({
   declarations: [
-    LoginFormComponent
+    LoginFormComponent,
+    LogoutButtonComponent
   ],
   imports: [
     LoginRoutingModule,
@@ -21,6 +23,9 @@ import { LoginService } from './service/login.service';
   ],
   providers: [
     LoginService
+  ],
+  exports: [
+    LogoutButtonComponent
   ]
 })
 export class LoginModule { }

src/app/login/logout-button/logout-button.component.css

@@ -0,0 +1 @@
+<button (click)="logout()">Logout</button>

src/app/login/logout-button/logout-button.component.html

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

src/app/login/logout-button/logout-button.component.spec.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { LoginService } from '../service/login.service';
+
+@Component({
+  selector: 'logout-button',
+  templateUrl: './logout-button.component.html',
+  styleUrls: ['./logout-button.component.css']
+})
+export class LogoutButtonComponent {
+
+  constructor(private loginService: LoginService) { }
+
+  logout(){
+    this.loginService.logout();
+  }
+
+}