Chore:

Moved to sqlalchemy 2.0
Added type checking as much as possible
Updated angular to 15
Moved from Angular flex layout to tailwind css

Started developing on vscode with devcontainers

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

@@ -16,9 +16,9 @@ export class AuthGuard implements CanActivate {
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const { user } = this.authService;
     const permission =
-      route.data.permission === undefined
-        ? route.data.permission
-        : route.data.permission.replace(/ /g, '-').toLowerCase();
+      route.data['permission'] === undefined
+        ? route.data['permission']
+        : route.data['permission'].replace(/ /g, '-').toLowerCase();
     if (!user) {
       // not logged in so redirect to login page with the return url
       this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });

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

@@ -1,8 +0,0 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.example-container > * {
-  width: 100%;
-}

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

@@ -1,21 +1,20 @@
 <mat-card>
-  <mat-card-title-group>
+  <mat-card-header>
     <mat-card-title>Login</mat-card-title>
-  </mat-card-title-group>
+  </mat-card-header>
   <mat-card-content>
-    <form [formGroup]="form" fxLayout="column">
-      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
-        <mat-form-field fxFlex>
+    <form [formGroup]="form" class="flex flex-col">
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
           <mat-label>Username</mat-label>
-          <input matInput #nameElement placeholder="Username" formControlName="username" />
+          <input matInput #nameElement formControlName="username" />
         </mat-form-field>
       </div>
-      <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
-        <mat-form-field fxFlex>
+      <div class="flex flex-row justify-around content-start items-start">
+        <mat-form-field class="flex-auto">
           <mat-label>Password</mat-label>
           <input
             matInput
-            placeholder="Password"
             formControlName="password"
             [type]="hide ? 'password' : 'text'"
             (keyup.enter)="login()"

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

@@ -41,7 +41,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    this.returnUrl = this.route.snapshot.queryParams.returnUrl || '/';
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
   }
 
   ngAfterViewInit() {