Merge pull request 'issue-11-angular-update' (#12) from issue-11-angular-update into issue-10

Reviewed-on: Sebastian/TimeManager#12

README.md

@@ -9,4 +9,6 @@ npm install @openapitools/openapi-generator-cli -g
 2. Generate Code
 ```bash
 npx @openapitools/openapi-generator-cli generate -i openapi.yaml -g typescript-angular -o frontend/src/api/
-```
+```
+
+Notiz: Angular Calendar https://www.npmjs.com/package/angular-calendar

backend/.idea/dataSources/777acb96-8451-4627-b14b-d635cd5e928a/storage_v2/_src_/schema/information_schema.FNRwLQ.meta

@@ -1,2 +0,0 @@
-#n:information_schema
-!<md> [null, 0, null, null, -2147483648, -2147483648]

backend/.idea/dataSources/777acb96-8451-4627-b14b-d635cd5e928a/storage_v2/_src_/schema/mysql.osA4Bg.meta

@@ -1,2 +0,0 @@
-#n:mysql
-!<md> [null, 0, null, null, -2147483648, -2147483648]

backend/.idea/dataSources/777acb96-8451-4627-b14b-d635cd5e928a/storage_v2/_src_/schema/performance_schema.kIw0nw.meta

@@ -1,2 +0,0 @@
-#n:performance_schema
-!<md> [null, 0, null, null, -2147483648, -2147483648]

backend/.idea/dataSources/777acb96-8451-4627-b14b-d635cd5e928a/storage_v2/_src_/schema/restservice.YTTb0Q.meta

@@ -1,2 +0,0 @@
-#n:restservice
-!<md> [1695647618000, 0, null, null, -2147483648, -2147483648]

backend/.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="MavenProjectsManager">

backend/.idea/workspace.xml

@@ -6,6 +6,10 @@
   <component name="ChangeListManager">
     <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Datastructure for Tasks">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/tasks/task-editor/task-editor.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/tasks/task-editor/task-editor.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/tasks/task-editor/task-editor.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/tasks/task-editor/task-editor.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/tasks/task-editor/task-editor.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/tasks/task-editor/task-editor.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -46,12 +50,14 @@
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "issue-10",
+    "git-widget-placeholder": "issue-11-angular-update",
     "last_directory_selection": "D:/Programmierprojekte/TimeManager/backend/src/main/java/core/api/models/timemanager",
+    "last_opened_file_path": "D:/Programmierprojekte/Dicewars/client",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
     "node.js.selected.package.tslint": "(autodetect)",
+    "settings.editor.selected.configurable": "preferences.lookFeel",
     "vue.rearranger.settings.migration": "true"
   },
   "keyToStringList": {
@@ -79,6 +85,9 @@
       <updated>1695647243767</updated>
       <workItem from="1695647249321" duration="397000" />
       <workItem from="1696183811713" duration="4994000" />
+      <workItem from="1696399523081" duration="666000" />
+      <workItem from="1696517800445" duration="3887000" />
+      <workItem from="1696573678147" duration="111000" />
     </task>
     <task id="LOCAL-00001" summary="Structure Taskgroups in Hierarchies">
       <option name="closed" value="true" />

frontend/.browserslistrc

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

frontend/angular.json

@@ -103,6 +103,5 @@
         }
       }
     }
-  },
+  }
-  "defaultProject": "frontend"
 }

frontend/package.json

@@ -10,24 +10,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.2.0",
+    "@angular-material-components/datetime-picker": "^16.0.1",
-    "@angular/cdk": "^13.2.2",
+    "@angular-material-components/moment-adapter": "^16.0.1",
-    "@angular/common": "~13.2.0",
+    "@angular/animations": "^16.2.7",
-    "@angular/compiler": "~13.2.0",
+    "@angular/cdk": "^16.2.6",
-    "@angular/core": "~13.2.0",
+    "@angular/common": "^16.2.7",
-    "@angular/forms": "~13.2.0",
+    "@angular/compiler": "^16.2.7",
-    "@angular/material": "^13.2.2",
+    "@angular/core": "^16.2.7",
-    "@angular/platform-browser": "~13.2.0",
+    "@angular/forms": "^16.2.7",
-    "@angular/platform-browser-dynamic": "~13.2.0",
+    "@angular/material": "^16.2.6",
-    "@angular/router": "~13.2.0",
+    "@angular/material-moment-adapter": "^16.2.7",
+    "@angular/platform-browser": "^16.2.7",
+    "@angular/platform-browser-dynamic": "^16.2.7",
+    "@angular/router": "^16.2.7",
+    "moment": "^2.29.4",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.2",
+    "@angular-devkit/build-angular": "^16.2.4",
-    "@angular/cli": "~13.2.2",
+    "@angular/cli": "^16.2.4",
-    "@angular/compiler-cli": "~13.2.0",
+    "@angular/compiler-cli": "^16.2.7",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~4.0.0",
@@ -36,6 +40,6 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.5.2"
+    "typescript": "~5.1.6"
   }
-}
+}

frontend/src/app/admin-dashboard/settings/settings.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {PropertiesInfo, PropertiesService, PropertyInfo, UserInfo} from "../../../api";
 import {Router} from "@angular/router";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatLegacySnackBar as MatSnackBar} from "@angular/material/legacy-snack-bar";
 
 @Component({
   selector: 'app-settings',

frontend/src/app/admin-dashboard/usermanagement/delete-confirmation/delete-confirmation.component.ts

@@ -1,8 +1,8 @@
 import {Component, Inject, OnInit, Output} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from "@angular/material/legacy-dialog";
 import {UserInfo, UsersService} from "../../../../api";
 import {LoginInfoTypes} from "../../../auth/login/login.component";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatLegacySnackBar as MatSnackBar} from "@angular/material/legacy-snack-bar";
 
 @Component({
   selector: 'app-delete-confirmation',

frontend/src/app/admin-dashboard/usermanagement/edit/edit.component.ts

@@ -1,8 +1,8 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MAT_DIALOG_DATA as MAT_DIALOG_DATA, MatDialogRef as MatDialogRef} from "@angular/material/dialog";
 import {UserInfo, UsersService} from "../../../../api";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
-import {AbstractControl, FormControl, ValidationErrors, Validators} from "@angular/forms";
+import {AbstractControl, UntypedFormControl, ValidationErrors, Validators} from "@angular/forms";
 import {EditData} from "./edit-data";
 
 
@@ -24,22 +24,22 @@ export class EditComponent implements OnInit {
 
   adminUpdateDisabled: boolean = false;
 
-  usernameFormControl = new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(32)])
+  usernameFormControl = new UntypedFormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(32)])
-  emailFormControl = new FormControl('', [Validators.required, Validators.email])
+  emailFormControl = new UntypedFormControl('', [Validators.required, Validators.email])
 
-  passwordEditControl = new FormControl('', [
+  passwordEditControl = new UntypedFormControl('', [
     (control: AbstractControl): ValidationErrors | null => {
       return control.value.length > 0 && control.value.length < 6 ? {minlength: {value: control.value}} : null
     },
   ])
-  passwordAddControl = new FormControl('', [Validators.required, Validators.minLength(6)])
+  passwordAddControl = new UntypedFormControl('', [Validators.required, Validators.minLength(6)])
 
-  passwordDuplicateEditControl = new FormControl('', [
+  passwordDuplicateEditControl = new UntypedFormControl('', [
     (control: AbstractControl): ValidationErrors | null => {
       return control.value != this.password ? {duplicate: {value: control.value}} : null
     }
   ])
-  passwordDuplicateAddControl = new FormControl('', [
+  passwordDuplicateAddControl = new UntypedFormControl('', [
     Validators.required,
     Validators.minLength(6),
     (control: AbstractControl): ValidationErrors | null => {

frontend/src/app/admin-dashboard/usermanagement/usermanagement.component.ts

@@ -1,11 +1,11 @@
 import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {UserInfo, UsersService} from "../../../api";
-import {MatDialog} from "@angular/material/dialog";
+import {MatDialog as MatDialog} from "@angular/material/dialog";
 import {LoginComponent} from "../../auth/login/login.component";
 import {DeleteConfirmationComponent} from "./delete-confirmation/delete-confirmation.component";
 import {CollectionViewer, DataSource} from "@angular/cdk/collections";
 import {Observable} from "rxjs";
-import {MatTableDataSource} from "@angular/material/table";
+import {MatTableDataSource as MatTableDataSource} from "@angular/material/table";
 import {EditComponent} from "./edit/edit.component";
 import {EditData} from "./edit/edit-data";
 

frontend/src/app/app.module.ts

@@ -9,25 +9,22 @@ import {HttpClient, HttpClientModule, HttpHandler} from "@angular/common/http";
 import {ApiModule, Configuration} from "../api";
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatToolbarModule} from "@angular/material/toolbar";
-import {MatButtonModule} from "@angular/material/button";
 import {MatIconModule} from "@angular/material/icon";
-import {MatDialogModule} from "@angular/material/dialog";
+import {MatDialogModule as MatDialogModule} from "@angular/material/dialog";
-import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatFormFieldModule as MatFormFieldModule} from "@angular/material/form-field";
-import {MatInputModule} from "@angular/material/input";
+import {MatInputModule as MatInputModule} from "@angular/material/input";
-import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatProgressSpinnerModule as MatProgressSpinnerModule} from "@angular/material/progress-spinner";
-import {MatSnackBar, MatSnackBarModule} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar, MatSnackBarModule as MatSnackBarModule} from "@angular/material/snack-bar";
-import {MatMenuModule} from "@angular/material/menu";
 import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
 import { MainComponent } from './main/main.component';
 import { UsermanagementComponent } from './admin-dashboard/usermanagement/usermanagement.component';
-import {MatTabsModule} from "@angular/material/tabs";
+
 import {AuthService} from "./auth.service";
 import {environment} from "../environments/environment";
-import {MatTableModule} from "@angular/material/table";
+
-import {MatCheckboxModule} from "@angular/material/checkbox";
 import { DeleteConfirmationComponent } from './admin-dashboard/usermanagement/delete-confirmation/delete-confirmation.component';
 import { EditComponent } from './admin-dashboard/usermanagement/edit/edit.component';
-import {MatCardModule} from "@angular/material/card";
+
 import {UserSettingsComponent} from "./user-settings/user-settings.component";
 import {AccountSettingsComponent} from "./user-settings/account-settings/account-settings.component";
 import { ChangePasswordComponent } from './user-settings/account-settings/change-password/change-password.component';
@@ -35,12 +32,21 @@ import { ManageEmailComponent } from './user-settings/account-settings/manage-em
 import { DeleteAccountComponent } from './user-settings/account-settings/delete-account/delete-account.component';
 import { RegistrationComponent } from './auth/registration/registration.component';
 import { SettingsComponent } from './admin-dashboard/settings/settings.component';
-import {MatListModule} from "@angular/material/list";
+
 import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/taskgroup-dashboard.component';
 import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/taskgroup-creation.component';
 import { TaskgroupDeletionComponent } from './taskgroups/taskgroup-deletion/taskgroup-deletion.component';
 import { TaskEditorComponent } from './tasks/task-editor/task-editor.component';
 import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatButtonModule} from "@angular/material/button";
+import {MatMenuModule} from "@angular/material/menu";
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatTableModule} from "@angular/material/table";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatCardModule} from "@angular/material/card";
+import {MatListModule} from "@angular/material/list";
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule} from "@angular/material/core";
+import {MatMomentDateModule, MomentDateModule} from "@angular/material-moment-adapter";
 
 @NgModule({
   declarations: [
@@ -85,7 +91,11 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
         MatCardModule,
         ReactiveFormsModule,
         MatListModule,
-        MatDatepickerModule
+        MatDatepickerModule,
+        MatInputModule,
+        MatDatepickerModule,
+        MatMomentDateModule,
+        FormsModule
     ],
   providers: [
     HttpClientModule,
@@ -112,8 +122,7 @@ import {MatDatepickerModule} from "@angular/material/datepicker";
       ),
       deps: [AuthService],
       multi: false
-    }
+    },
-
   ],
   bootstrap: [AppComponent]
 })

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

@@ -1,8 +1,8 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {LoginService, PropertiesService} from "../../../api";
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {MAT_DIALOG_DATA as MAT_DIALOG_DATA, MatDialog as MatDialog, MatDialogRef as MatDialogRef} from "@angular/material/dialog";
 import {Router} from "@angular/router";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
 import {AuthService} from "../../auth.service";
 import {RegistrationComponent} from "../registration/registration.component";
 

frontend/src/app/auth/registration/registration.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import {MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {MatDialog as MatDialog, MatDialogRef as MatDialogRef} from "@angular/material/dialog";
 import {LoginService} from "../../../api";
 import {Router} from "@angular/router";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
 import {AuthService} from "../../auth.service";
 import {LoginComponent} from "../login/login.component";
 import {LoginDialogServiceService} from "../../login-dialog-service.service";
-import {AbstractControl, FormControl, ValidationErrors, Validators} from "@angular/forms";
+import {AbstractControl, UntypedFormControl, ValidationErrors, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-registration',
@@ -23,10 +23,10 @@ export class RegistrationComponent implements OnInit {
   pending: boolean = false;
   isAuth: boolean = false;
 
-  usernameControl = new FormControl('', [Validators.required, Validators.minLength(3)]);
+  usernameControl = new UntypedFormControl('', [Validators.required, Validators.minLength(3)]);
-  emailControl = new FormControl('', [Validators.required, Validators.email])
+  emailControl = new UntypedFormControl('', [Validators.required, Validators.email])
-  passwordControl = new FormControl('', [Validators.required, Validators.minLength(6)]);
+  passwordControl = new UntypedFormControl('', [Validators.required, Validators.minLength(6)]);
-  passwordDuplicateControl = new FormControl('', [
+  passwordDuplicateControl = new UntypedFormControl('', [
     Validators.required,
     Validators.minLength(6),
     (control: AbstractControl): ValidationErrors | null => {

frontend/src/app/login-dialog-service.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import {MatDialog} from "@angular/material/dialog";
+import {MatDialog as MatDialog} from "@angular/material/dialog";
 import {LoginComponent, LoginInfoTypes} from "./auth/login/login.component";
 import {Observable} from "rxjs";
 

frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.ts

@@ -1,10 +1,8 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {FormControl, Validators} from "@angular/forms";
+import {UntypedFormControl, Validators} from "@angular/forms";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MAT_DIALOG_DATA as MAT_DIALOG_DATA, MatDialogRef as MatDialogRef} from "@angular/material/dialog";
-import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
+import {TaskgroupService} from "../../../api";
-import {error} from "@angular/compiler/src/util";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
-import {MatSnackBar} from "@angular/material/snack-bar";
-import {ActivatedRoute} from "@angular/router";
 import {TaskgroupCreationData} from "./TaskgroupCreationData";
 
 
@@ -15,7 +13,7 @@ import {TaskgroupCreationData} from "./TaskgroupCreationData";
 })
 export class TaskgroupCreationComponent implements OnInit {
 
-  nameCtrl = new FormControl('', [Validators.required, Validators.maxLength(255)])
+  nameCtrl = new UntypedFormControl('', [Validators.required, Validators.maxLength(255)])
   pending: boolean = false
 
   constructor(private dialogRef: MatDialogRef<TaskgroupCreationComponent>,

frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import {MatDialog} from "@angular/material/dialog";
+import {MatDialog as MatDialog} from "@angular/material/dialog";
 import {TaskgroupCreationComponent} from "../taskgroup-creation/taskgroup-creation.component";
 import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
 import {TaskgroupDeletionComponent} from "../taskgroup-deletion/taskgroup-deletion.component";

frontend/src/app/taskgroups/taskgroup-deletion/taskgroup-deletion.component.ts

@@ -1,7 +1,7 @@
 import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {MAT_DIALOG_DATA as MAT_DIALOG_DATA, MatDialogRef as MatDialogRef} from "@angular/material/dialog";
 import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-taskgroup-deletion',

frontend/src/app/tasks/task-editor/task-editor.component.css

@@ -1,3 +1,8 @@
 .long-form {
   width: 100%;
 }
+
+.date-form {
+  width: 49%;
+  margin-right: 9px;
+}

frontend/src/app/tasks/task-editor/task-editor.component.html

@@ -9,19 +9,18 @@
     <mat-label>ETA</mat-label>
     <input matInput type="number" [formControl]="etaCtrl" min="0">
   </mat-form-field>
- <!--
+  <mat-form-field class="date-form">
-  <mat-form-field>
     <mat-label>Startdate</mat-label>
-    <input matInput [matDatepicker]="startpicker">
+    <input matInput [matDatepicker]="startpicker" [formControl]="startDate">
     <mat-hint>MM/DD/YYYY</mat-hint>
     <mat-datepicker-toggle matIconSuffix [for]="startpicker"></mat-datepicker-toggle>
     <mat-datepicker #startpicker></mat-datepicker>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field class="date-form">
     <mat-label>Deadline</mat-label>
-    <input matInput [matDatepicker]="deadlinepicker">
+    <input matInput [matDatepicker]="deadlinepicker" [formControl]="endDate">
     <mat-hint>MM/DD/YYYY</mat-hint>
     <mat-datepicker-toggle matIconSuffix [for]="deadlinepicker"></mat-datepicker-toggle>
     <mat-datepicker #deadlinepicker></mat-datepicker>
-  </mat-form-field>-->
+  </mat-form-field>
 </div>

frontend/src/app/tasks/task-editor/task-editor.component.ts

@@ -1,16 +1,21 @@
 import { Component, OnInit } from '@angular/core';
-import {FormControl, Validators} from "@angular/forms";
+import {FormControl, UntypedFormControl, Validators} from "@angular/forms";
+import * as _moment from 'moment';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from "@angular/material/core";
+import {MomentDateAdapter} from "@angular/material-moment-adapter";
+
 
 @Component({
   selector: 'app-task-editor',
   templateUrl: './task-editor.component.html',
-  styleUrls: ['./task-editor.component.css']
+  styleUrls: ['./task-editor.component.css'],
 })
 export class TaskEditorComponent implements OnInit {
 
-  nameCtrl = new FormControl('', [Validators.required, Validators.maxLength(255)])
+  nameCtrl: FormControl = new FormControl('', [Validators.required, Validators.maxLength(255)])
-  etaCtrl = new FormControl(0, [Validators.required, Validators.min(0)])
+  etaCtrl: FormControl = new FormControl(0, [Validators.required, Validators.min(0)])
-  startDate = new FormControl(Date.now(), [Validators.required])
+  startDate: FormControl = new FormControl(Date.now(), [Validators.required])
+  endDate: FormControl = new FormControl('');
   constructor() { }
 
   ngOnInit(): void {

frontend/src/app/user-settings/account-settings/change-password/change-password.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import {AbstractControl, FormControl, ValidationErrors, Validators} from "@angular/forms";
+import {AbstractControl, UntypedFormControl, ValidationErrors, Validators} from "@angular/forms";
 import {AccountService} from "../../../../api";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-change-password',
@@ -14,9 +14,9 @@ export class ChangePasswordComponent implements OnInit {
 
   hide: boolean = true;
   pending: boolean = false;
-  oldPasswordControl = new FormControl('', [Validators.required])
+  oldPasswordControl = new UntypedFormControl('', [Validators.required])
-  newPasswordControl = new FormControl('', [Validators.required, Validators.minLength(6)])
+  newPasswordControl = new UntypedFormControl('', [Validators.required, Validators.minLength(6)])
-  duplicatePasswordControl = new FormControl('', [
+  duplicatePasswordControl = new UntypedFormControl('', [
     Validators.required,
     (control: AbstractControl): ValidationErrors | null => {
       return control.value != this.newPassword ? {duplicate: {value: control.value}} : null

frontend/src/app/user-settings/account-settings/delete-account/delete-account.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import {FormControl, Validators} from "@angular/forms";
+import {UntypedFormControl, Validators} from "@angular/forms";
 import {AccountService} from "../../../../api";
 import {Router} from "@angular/router";
 import {AuthService} from "../../../auth.service";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-delete-account',
@@ -14,7 +14,7 @@ export class DeleteAccountComponent implements OnInit {
   password: string = "";
 
   hide: boolean = true;
-  passwordControl = new FormControl('', [Validators.required]);
+  passwordControl = new UntypedFormControl('', [Validators.required]);
   pending: boolean = false;
 
   constructor(private accountService: AccountService, private router: Router, private auth: AuthService, private snackbar: MatSnackBar) { }

frontend/src/app/user-settings/account-settings/manage-email/manage-email.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {AccountService} from "../../../../api";
-import {FormControl, Validators} from "@angular/forms";
+import {UntypedFormControl, Validators} from "@angular/forms";
-import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatSnackBar as MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-manage-email',
@@ -12,8 +12,8 @@ export class ManageEmailComponent implements OnInit {
   email : string = "";
   password: string = "";
 
-  emailControl = new FormControl('', [Validators.required, Validators.email]);
+  emailControl = new UntypedFormControl('', [Validators.required, Validators.email]);
-  passwordControl = new FormControl('', [Validators.required])
+  passwordControl = new UntypedFormControl('', [Validators.required])
   hide: boolean = true;
   pending: boolean = false;
 

frontend/src/test.ts

@@ -7,20 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

frontend/tsconfig.json

@@ -2,7 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
+    "baseUrl": "src",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -16,12 +16,13 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2020",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,