Updated to angular 11

Now compiling with strict mode in typescript
Need to error checking now

bookie/src/app/auth/auth-guard.service.ts

@@ -24,7 +24,7 @@ export class AuthGuard implements CanActivate {
       this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
       return false;
     }
-    if (permission !== undefined && user.perms.indexOf(permission) === -1) {
+    if (permission !== undefined && !this.authService.allowed(permission)) {
       this.toaster.show('Danger', 'You do not have the permission to access this area.');
       return false;
     }

bookie/src/app/auth/auth.service.ts

@@ -14,8 +14,8 @@ const JWT_USER = 'JWT_USER';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
-  private currentUserSubject: BehaviorSubject<User>;
-  public currentUser: Observable<User>;
+  private currentUserSubject: BehaviorSubject<User | null> = new BehaviorSubject<User | null>(null);
+  public currentUser: Observable<User | null>;
   public device: Device;
 
   constructor(private http: HttpClient, private cs: CookieService) {
@@ -26,7 +26,7 @@ export class AuthService {
     this.device = new Device({ id: deviceId, name: device });
   }
 
-  static parseJwt(token): User {
+  static parseJwt(token: string): User {
     const base64Url = token.split('.')[1];
     const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
     const jsonPayload = decodeURIComponent(
@@ -48,18 +48,22 @@ export class AuthService {
     });
   }
 
-  checkStorage(): User {
-    const existingToken: User = JSON.parse(localStorage.getItem(JWT_USER));
+  checkStorage(): User | null {
+    const storageToken = localStorage.getItem(JWT_USER);
+    let existingToken: User | null = null;
+    if (storageToken !== null) {
+      existingToken = JSON.parse(storageToken);
+    }
     if (existingToken === null || Date.now() > existingToken.exp * 1000) {
       localStorage.removeItem(JWT_USER);
-      this.currentUserSubject = new BehaviorSubject<User>(null);
+      this.currentUserSubject.next(null);
       return null;
     }
-    this.currentUserSubject = new BehaviorSubject<User>(existingToken);
+    this.currentUserSubject.next(existingToken);
     return existingToken;
   }
 
-  public get user(): User {
+  public get user(): User | null {
     let val = this.currentUserSubject.value;
     if (val == null) {
       return val;
@@ -69,7 +73,7 @@ export class AuthService {
       val = this.checkStorage();
     }
     if (val == null) {
-      return null;
+      return new User();
     }
     expired = Date.now() > val.exp * 1000;
     if (expired) {
@@ -99,7 +103,11 @@ export class AuthService {
   }
 
   needsRefreshing(): boolean {
-    return Date.now() > (this.user.exp - environment.ACCESS_TOKEN_REFRESH_MINUTES * 60) * 1000;
+    const { user } = this;
+    if (user === null) {
+      return true;
+    }
+    return Date.now() > (user.exp - environment.ACCESS_TOKEN_REFRESH_MINUTES * 60) * 1000;
   }
 
   logout() {
@@ -122,4 +130,12 @@ export class AuthService {
         }),
       );
   }
+
+  allowed(permission: string): boolean {
+    const { user } = this;
+    if (user == null || user.perms.indexOf(permission) === -1) {
+      return false;
+    }
+    return true;
+  }
 }

bookie/src/app/auth/login/login.component.ts

@@ -12,7 +12,7 @@ import { AuthService } from '../auth.service';
   styleUrls: ['./login.component.css'],
 })
 export class LoginComponent implements OnInit, AfterViewInit {
-  @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   form: FormGroup;
   hide: boolean;
   showOtp: boolean;
@@ -29,10 +29,10 @@ export class LoginComponent implements OnInit, AfterViewInit {
   ) {
     this.hide = true;
     this.showOtp = false;
-    this.createForm();
-  }
+    this.clientId = '';
+    this.returnUrl = '';
 
-  createForm() {
+    // Create form
     this.form = this.fb.group({
       username: '',
       password: '',
@@ -46,7 +46,9 @@ export class LoginComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.nameElement.nativeElement.focus();
+      if (this.nameElement !== undefined) {
+        this.nameElement.nativeElement.focus();
+      }
     }, 0);
   }