Cleaned up and added comments

Author: Bernardo-MG

src/app/authentication/authentication.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BasicAuthenticationInterceptor } from './interceptor/basic-authentication.interceptor';
-import { UnauthorizedInterceptor } from './interceptor/unauthorized.interceptor';
+import { UnauthorizedErrorInterceptor } from './interceptor/unauthorized.interceptor';
 
 @NgModule({
   declarations: [],
@@ -11,7 +11,7 @@ import { UnauthorizedInterceptor } from './interceptor/unauthorized.interceptor'
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: BasicAuthenticationInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: UnauthorizedInterceptor, multi: true }
+    { provide: HTTP_INTERCEPTORS, useClass: UnauthorizedErrorInterceptor, multi: true }
   ]
 })
 export class AuthenticationModule { }

src/app/authentication/guard/logged-in.guard.ts

@@ -3,6 +3,10 @@ import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTr
 import { Observable } from 'rxjs';
 import { AuthenticationService } from '../service/authentication.service';
 
+/**
+ * Logged in guard. Allows access only if the user in session is logged in. Otherwise redirects
+ * to the login form.
+ */
 @Injectable({
   providedIn: 'root'
 })

src/app/authentication/guard/logged-out.guard.ts

@@ -3,6 +3,10 @@ import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTr
 import { Observable } from 'rxjs';
 import { AuthenticationService } from '../service/authentication.service';
 
+/**
+ * Logged out guard. Allows access only if the user in session is logged out. Otherwise redirects
+ * to the app root URL.
+ */
 @Injectable({
   providedIn: 'root'
 })

src/app/authentication/interceptor/basic-authentication.interceptor.ts

@@ -4,7 +4,10 @@ import { environment } from '@environments/environment';
 import { Observable } from 'rxjs';
 import { AuthenticationService } from '../service/authentication.service';
 
-
+/**
+ * Basic HTTP authentication interceptor. Adds the basic authentication token to all request to
+ * API requests, as long as the user in session is correctly logged in.
+ */
 @Injectable()
 export class BasicAuthenticationInterceptor implements HttpInterceptor {
 

src/app/authentication/interceptor/unauthorized.interceptor.spec.ts

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

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

@@ -4,8 +4,11 @@ import { environment } from '@environments/environment';
 import { catchError, Observable, throwError } from 'rxjs';
 import { AuthenticationService } from '../service/authentication.service';
 
+/**
+ * Unauthorized error interceptor. Logs out the user in session on an authorization error.
+ */
 @Injectable()
-export class UnauthorizedInterceptor implements HttpInterceptor {
+export class UnauthorizedErrorInterceptor implements HttpInterceptor {
 
   constructor(
     private authenticationService: AuthenticationService

src/app/authentication/model/login-status.ts

@@ -1,5 +1,17 @@
+/**
+ * Login status. Shows the status after a login attempt.
+ */
 export class LoginStatus {
+    /**
+     * Username of the login attempt.
+     */
     username: string = '';
+    /**
+     * Logged in flag. If it is true, then the user managed to log in.
+     */
     logged: boolean = false;
+    /**
+     * Authentication token generated by the backend.
+     */
     token: string = '';
 }

src/app/authentication/model/user.ts

@@ -1,5 +1,17 @@
+/**
+ * Application user. Part of the authentication model.
+ */
 export class User {
+    /**
+     * User username.
+     */
     username: string = '';
+    /**
+     * Logged in flag. If it is true, then the user is logged in.
+     */
     logged: boolean = false;
+    /**
+     * Authentication token for the user.
+     */
     token: string = '';
 }

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

@@ -3,10 +3,25 @@ import { Injectable } from '@angular/core';
 import { ApiResponse } from '@app/api/model/api-response';
 import { environment } from '@environments/environment';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { LoginStatus } from '../model/login-status';
 import { User } from '../model/user';
 
+/**
+ * Authentication service. Handles login and logout operations.
+ * 
+ * Login requires sending a request to the login endpoint. While logout just requires cleaning up
+ * the local context.
+ * 
+ * ## Remember me
+ * 
+ * This functionality allows storing the user into the local context, and recovering it automatically.
+ * All this requires is setting the rememberMe flag to true. The service will take care of the rest.
+ * 
+ * This is donde just by storing the user into the local context in a successful login. If said
+ * login was successful. The service will always try to read a user from the local context when it
+ * starts. Also any user in the local context will be removed on a logout.
+ */
 @Injectable({
   providedIn: 'root',
 })
@@ -29,29 +44,66 @@ export class AuthenticationService {
     this.user = this.userSubject.asObservable();
   }
 
+  /**
+   * Logs in a user. This requires sending a login request. If the request fails it returns an
+   * empty user, otherwise it returns the user.
+   * 
+   * If the 'remember me' option is active, the user will be stored in the local storage.
+   * 
+   * @param username username for login
+   * @param password password for login
+   * @returns the user resulting from the login
+   */
   public login(username: string, password: string): Observable<User> {
     return this.http.post<ApiResponse<LoginStatus>>(this.loginUrl, { username, password })
       .pipe(map(response => response.content))
-      .pipe(map(r => this.loadUser(r)));
+      .pipe(map(response => this.toUser(response)))
+      .pipe(tap(user => this.storeUser(user)));
   }
 
+  /**
+   * Logs out the current user.
+   */
   public logout() {
+    // Store empty user
     this.userSubject.next(new User());
+
+    // Clear local storage
     localStorage.removeItem(this.userKey);
   }
 
+  /**
+   * Returns the user currently in session.
+   * @returns the user currently in session
+   */
   public getUser(): User {
     return this.userSubject.value;
   }
 
+  /**
+   * Returns the user currently in session as an observable. This allows reacting to new logins or logouts.
+   * 
+   * @returns the user currently in session as an observable
+   */
   public getUserObservable(): Observable<User> {
     return this.user;
   }
 
+  /**
+   * Sets the status of the remember me option. If active the user will be stored on a succesful login.
+   * 
+   * @param remember remember me flag
+   */
   public setRememberMe(remember: boolean) {
     this.rememberMe = remember;
   }
 
+  /**
+   * Reads the user from the local storage. This allows recovering users stored as part of the 'remember me'
+   * functionality.
+   * 
+   * @returns the user stored in the local storage as part of the 'remember me'
+   */
   private readUserFromLocal(): BehaviorSubject<User> {
     let subject: BehaviorSubject<User>;
 
@@ -70,7 +122,13 @@ export class AuthenticationService {
     return subject;
   }
 
-  private loadUser(status: LoginStatus): User {
+  /**
+   * Maps the login status into a user.
+   * 
+   * @param status status to map
+   * @returns user generated from the login status
+   */
+  private toUser(status: LoginStatus): User {
     let loggedUser;
 
     loggedUser = new User();
@@ -79,15 +137,24 @@ export class AuthenticationService {
       loggedUser.username = status.username;
       loggedUser.logged = status.logged;
       loggedUser.token = status.token;
-
-      if (this.rememberMe) {
-        // Store user
-        localStorage.setItem(this.userKey, JSON.stringify(loggedUser));
-      }
     }
 
-    this.userSubject.next(loggedUser);
-    return this.getUser();
+    return loggedUser;
+  }
+
+  /**
+   * Stores the received user. This takes two steps, first it is stored in the local subject. Then, if
+   * the 'remember me' option is enabled, it will be stored in the local storage.
+   * 
+   * @param user user to store
+   */
+  private storeUser(user: User) {
+    this.userSubject.next(user);
+
+    if (this.rememberMe) {
+      // Store user
+      localStorage.setItem(this.userKey, JSON.stringify(user));
+    }
   }
 
 }

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

@@ -2,25 +2,24 @@
     <div class="form-group">
         <label for="username">Username</label>
         <input type="text" formControlName="username" class="form-control"
-            [ngClass]="{ 'is-invalid': isFormInvalid('username') }" />
-        <div *ngIf="isFormInvalid('username') && form.get('username')?.hasError('required')" class="invalid-feedback">
+            [ngClass]="{ 'is-invalid': isFieldInvalid('username') }" />
+        <div *ngIf="isFieldInvalid('username') && form.get('username')?.hasError('required')" class="invalid-feedback">
             Username is required
         </div>
     </div>
     <div class="form-group">
         <label for="password">Password</label>
         <input type="password" formControlName="password" class="form-control"
-            [ngClass]="{ 'is-invalid': isFormInvalid('password') }" />
-        <div *ngIf="isFormInvalid('password') && form.get('password')?.hasError('required')" class="invalid-feedback">
+            [ngClass]="{ 'is-invalid': isFieldInvalid('password') }" />
+        <div *ngIf="isFieldInvalid('password') && form.get('password')?.hasError('required')" class="invalid-feedback">
             Password is required
         </div>
     </div>
     <div class="form-group">
         <label for="rememberMe">Remember me</label>
         <input type="checkbox" formControlName="rememberMe" class="form-check-input">
     </div>
-    <button [disabled]="!canLogin()" class="btn btn-primary" [attr.aria-disabled]="!canLogin()" aria-label="Login">
-        <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+    <button [disabled]="!this.form.valid" class="btn btn-primary" [attr.aria-disabled]="!this.form.valid" aria-label="Login">
         Login
     </button>
 </form>