Enabled strict mode, code needs fixes

.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

angular.json

@@ -108,9 +108,21 @@
               "devServerTarget": "sample-oauth:serve:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
-  "defaultProject": "sample-oauth"
+  "defaultProject": "sample-oauth",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }

package.json

@@ -34,13 +34,21 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^13.1.2",
+    "@angular-eslint/builder": "13.0.1",
+    "@angular-eslint/eslint-plugin": "13.0.1",
+    "@angular-eslint/eslint-plugin-template": "13.0.1",
+    "@angular-eslint/schematics": "13.0.1",
+    "@angular-eslint/template-parser": "13.0.1",
     "@angular/cli": "^13.1.2",
     "@angular/compiler-cli": "~13.1.1",
-    "@types/jasmine": "^3.10.2",
+    "@types/jasmine": "^3.10.3",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^17.0.5",
+    "@types/node": "^17.0.8",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "codelyzer": "^6.0.0",
-    "jasmine-core": "^3.10.1",
+    "eslint": "^8.2.0",
+    "jasmine-core": "^4.0.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "~6.3.9",
     "karma-chrome-launcher": "~3.1.0",
@@ -56,4 +64,4 @@
     "crypto": false,
     "fs": false
   }
-}
+}

src/app/entities/user.ts

@@ -20,7 +20,7 @@ export const userFromClaims = (claims: UserDataResult) => {
     return new User(
         claims.userData["sub"],
         claims.userData["preferred_username"],
-        '@' + claims["preferred_username"] + ':okupamicoche-synapse',
+        '@' + claims.userData["preferred_username"] + ':okupamicoche-synapse',
         claims.userData["name"],
         claims.userData["admin"] === true
     );

src/app/pages/new-travel/new-travel.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { TravelFormComponent } from 'src/app/views/travel-form/travel-form.component';
 import { Travel } from '../../entities/travel';
@@ -9,19 +9,17 @@ import { ApiService } from '../../services/api.service';
   templateUrl: './new-travel.component.html',
   styleUrls: ['./new-travel.component.css']
 })
-export class NewTravelComponent implements OnInit {
+export class NewTravelComponent {
   travel: Travel = new Travel();
   acceptButtonText = 'Create';
 
-  @ViewChild(TravelFormComponent, { static: true }) form: TravelFormComponent;
+  @ViewChild(TravelFormComponent, { static: true }) form!: TravelFormComponent;
 
   constructor(
     private router: Router,
     private apiService: ApiService
   ) { }
 
-  ngOnInit(): void { }
-
   createTravel(travel: Travel): void {
     this.apiService.createTravel(travel)
       .subscribe(res => {
@@ -30,7 +28,7 @@ export class NewTravelComponent implements OnInit {
           this.router.navigateByUrl('/travel/' + travel.id);
         }
         else {
-          console.error('Error creating travel: ' + res.error.code + ' ' + res.error.msg);
+          console.error('Error creating travel: ' + res.error?.code + ' ' + res.error?.msg);
           this.form.submitted = false;
         }
       });

src/app/services/auth.service.ts

@@ -46,7 +46,8 @@ export class AuthService {
     });
 
     this.oidcSecurityService.userData$.subscribe((claims: UserDataResult) => {
-      console.log('claims', userFromClaims(claims));
+      console.log('claims', claims);
+      console.log('user', userFromClaims(claims));
       this.userSubject.next(userFromClaims(claims));
     });
 

src/app/services/chat.service.ts

@@ -11,17 +11,17 @@ const FORWARDS = 'f';
   providedIn: 'root'
 })
 export class ChatService {
-  private matrixClient: MatrixClient;
-  private chatMessageHandler: ChatMessageHandler;
+  private matrixClient?: MatrixClient;
+  private chatMessageHandler?: ChatMessageHandler;
 
-  getRoomMessages: (roomId: string) => (Observable<MatrixEvent>);
+  getRoomMessages?: (roomId: string) => (Observable<MatrixEvent>);
 
   constructor(
     private http: HttpClient
   ) { }
 
   goToSsoLogin(): void {
-    window.location.href = 'http://okupamicoche-synapse:8008/_matrix/client/r0/login/sso/redirect?redirectUrl=http://localhost:4200/';
+    window.location.href = 'http://okupamicoche-synapse:8008/_matrix/client/r0/login/sso/redirect?redirectUrl=http://localhost:4200/'; // TODO Backend should give URL
   }
 
   login(loginToken: string): Promise<MatrixClient> {
@@ -32,7 +32,7 @@ export class ChatService {
     return matrixClientPromise;
   }
 
-  getUserId = (): string => {
+  getUserId = (): string | null => {
     if (this.matrixClient === undefined) { return null; }
 
     return this.matrixClient.getUserId();
@@ -43,53 +43,53 @@ export class ChatService {
   }
 
   getRoomMembers = (roomId: string): RoomMember[] => {
-    const room: Room = this.matrixClient?.getRoom(roomId) as Room;
-    return room?.getJoinedMembers();
+    const room = this.matrixClient?.getRoom(roomId);
+    return room?.getJoinedMembers() ?? [];
   }
 
   isInRoom = (roomId: string): boolean => {
     if (!this.isLogged()) { return false; }
 
-    const room: Room = this.matrixClient.getRoom(roomId) as Room;
+    const room = this.matrixClient?.getRoom(roomId);
     if (room === null) { return false; }
 
-    return room.getMyMembership() === 'join';
+    return room?.getMyMembership() === 'join';
   }
 
   isInvitedToRoom = (roomId: string): boolean => {
     if (!this.isLogged()) { return false; }
 
-    const room: Room = this.matrixClient.getRoom(roomId) as Room;
+    const room = this.matrixClient?.getRoom(roomId);
     if (room === null) { return false; }
 
-    return room.getMyMembership() === 'invite';
+    return room?.getMyMembership() === 'invite';
   }
 
-  sendMessage = (roomId: string, body: string): Promise<ISendEventResponse> => {
+  sendMessage = (roomId: string, body: string): Promise<ISendEventResponse> | undefined => {
     const message = {
       body,
       msgtype: 'm.text'
     };
-    return this.matrixClient.sendMessage(roomId, message);
+    return this.matrixClient?.sendMessage(roomId, message);
   }
 
-  joinRoom = async (roomId: string): Promise<Room> => {
-    return this.matrixClient.joinRoom(roomId);
+  joinRoom = async (roomId: string): Promise<Room | undefined> => {
+    return this.matrixClient?.joinRoom(roomId);
   }
 
-  leaveRoom = async (roomId: string): Promise<{}> => {
-    return this.matrixClient.leave(roomId);
+  leaveRoom = async (roomId: string): Promise<{} | undefined> => {
+    return this.matrixClient?.leave(roomId);
   }
 
   roomNeedsInvitation = async (roomId: string): Promise<boolean> => {
-    let room: Room = this.matrixClient.getRoom(roomId) as Room;
+    let room = this.matrixClient?.getRoom(roomId) ?? null;
     if (room === null) {
       try {
-        room = await this.matrixClient.peekInRoom(roomId) as Room;
+        room = await this.matrixClient?.peekInRoom(roomId) ?? null;
       }
       catch (error) { return true; }
     }
-    const joinRule = room.currentState.getJoinRule();
+    const joinRule = room?.currentState.getJoinRule();
     return joinRule === 'invite';
   }
 

src/app/views/chat/chat.component.ts

@@ -8,11 +8,11 @@ import { ChatService } from 'src/app/services/chat.service';
   styleUrls: ['./chat.component.css']
 })
 export class ChatComponent implements OnInit, AfterViewInit {
-  @Input() roomId: string;
-  @ViewChild('messageList', { read: ElementRef }) messageList: ElementRef;
-  @ViewChildren('messageItem', { read: ElementRef }) messageItems: QueryList<ElementRef>;
+  @Input() roomId!: string;
+  @ViewChild('messageList', { read: ElementRef }) messageList!: ElementRef;
+  @ViewChildren('messageItem', { read: ElementRef }) messageItems!: QueryList<ElementRef>;
   messages: MatrixEvent[] = new Array();
-  messageInput: string;
+  messageInput?: string;
 
   constructor(
     private chatService: ChatService,
@@ -48,6 +48,10 @@ export class ChatComponent implements OnInit, AfterViewInit {
   }
 
   sendMessage(): void {
+    if (this.messageInput === undefined || this.messageInput.length === 0) {
+      return;
+    }
+
     this.chatService.sendMessage(this.roomId, this.messageInput);
     this.messageInput = '';
   }

tsconfig.json

@@ -4,25 +4,28 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2017",
     "module": "es2020",
     "lib": [
-      "es2018",
+      "es2019",
       "dom"
-    ],
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true
+    ]
   },
   "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
 }