migracja dyrektyw do nowego angulara (ngIf, ngFor)

poprawienie logiki logowania
loading spinner

pom.xml

@@ -279,6 +279,7 @@
                                 </requireMavenVersion>
                                 <requireJavaVersion>
                                     <version>17</version>
+                                    <message>Invalid Java version. It should, at least, be 17</message>
                                 </requireJavaVersion>
                             </rules>
                         </configuration>

src/main/frontend/src/app/auth/auth.service.ts

@@ -61,15 +61,17 @@ export class AuthService {
   }
 
   autoLogin() {
+    const userDataFromStorage = window.sessionStorage.getItem('userData');
+    if (!userDataFromStorage) {
+      return;
+    }
     const userData: {
       mail: string;
       id: number;
       token: string;
       name: string
-    } = JSON.parse(window.sessionStorage.getItem('userData') || '{}');
-    if (!userData) {
-      return;
-    }
+    } = JSON.parse(userDataFromStorage);
+
 
     const loadedUser: User = {
       id: userData.id,

src/main/frontend/src/app/auth/jwt.interceptor.ts

@@ -1,52 +1,43 @@
 import {Injectable} from '@angular/core';
-import {
-  HttpErrorResponse,
-  HttpEvent,
-  HttpHandler,
-  HttpHeaders,
-  HttpInterceptor,
-  HttpRequest
-} from '@angular/common/http';
-import {Observable, tap} from 'rxjs';
+import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
+import {finalize, Observable, tap} from 'rxjs';
 import {AuthService} from "./auth.service";
 import {Router} from "@angular/router";
+import {LoadingService} from "../service/loading.service";
 
 @Injectable()
 export class JwtInterceptor implements HttpInterceptor {
+  private totalRequests = 0;
+
   constructor(private authService: AuthService,
-              private router: Router) {
+              private router: Router,
+              private loadingService: LoadingService) {
   }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    // add auth header with jwt if account is logged in and request is to the api url
-    let httpHeaders = new HttpHeaders();
-    // const account = this.authService.user.value;
-    // const isLoggedIn = account?.token;
-    // if (isLoggedIn) {
-    //   httpHeaders = httpHeaders.append('Authorization', `Bearer ${account.token}`);
-    // }
-
-    // const xsrfHeader = window.sessionStorage.getItem('XSRF-TOKEN');
-    // console.log(xsrfHeader);
-    // if (xsrfHeader) {
-    //   httpHeaders = httpHeaders.append('X-XSRF-TOKEN', xsrfHeader);
-    // }
-
+    this.loadingService.setLoading(true);
+    this.totalRequests++;
     request = request.clone({
-      headers: httpHeaders,
       withCredentials: true
     });
 
-    return next.handle(request).pipe(tap({
-      error: (err: any) => {
-        if (err instanceof HttpErrorResponse) {
-          if (err.status === 401 || err.status === 403) {
-            console.log('redirect');
-            this.authService.logout();
-            this.router.navigate(['login']);
+    return next.handle(request).pipe(
+      finalize(() => {
+        this.totalRequests--;
+        if (this.totalRequests == 0) {
+          this.loadingService.setLoading(false);
+        }
+      }),
+      tap({
+        error: (err: any) => {
+          if (err instanceof HttpErrorResponse) {
+            if (err.status === 401 || err.status === 403) {
+              console.log('redirect');
+              this.authService.logout();
+              this.router.navigate(['login']);
+            }
           }
         }
-      }
-    }));
+      }));
   }
 }

src/main/frontend/src/app/component/app.component.html

@@ -1,10 +1,3 @@
 <div class="container">
   <dashboard></dashboard>
-</div>
-<!--
-<div class="container">
-  <div class="float-start">Komornik</div>
-  <div *ngIf="loggedUser" class="float-end">Witaj {{loggedUser.groupName}}!</div>
-  <header-menu (loggedOut)="onLoggedOut()"></header-menu>
-</div>
--->
+</div>

src/main/frontend/src/app/component/category/all-categories/all-categories.component.html

@@ -3,7 +3,9 @@
     <th *matHeaderCellDef mat-header-cell> Category name</th>
     <td *matCellDef="let category" mat-cell>
       {{ category.name }}
-      <mat-icon *ngIf="category.categoryIconName">{{ category.categoryIconName }}</mat-icon>&nbsp;
+      @if (category.categoryIconName) {
+        <mat-icon>{{ category.categoryIconName }}</mat-icon>&nbsp;
+      }
     </td>
   </ng-container>
   <ng-container matColumnDef="actions">

src/main/frontend/src/app/component/common/forgot-password/forgot-password.component.html

@@ -25,17 +25,19 @@
                 type="email">
             </mat-form-field>
           </div>
-          <div *ngIf="changePassword" class="form-group">
-            <mat-form-field appearance="outline">
-              <mat-label>Hasło</mat-label>
-              <input
-                class="form-control"
-                formControlName="password"
-                id="password"
-                matInput
-                type="password">
-            </mat-form-field>
-          </div>
+          @if (changePassword) {
+            <div class="form-group">
+              <mat-form-field appearance="outline">
+                <mat-label>Hasło</mat-label>
+                <input
+                  class="form-control"
+                  formControlName="password"
+                  id="password"
+                  matInput
+                  type="password">
+              </mat-form-field>
+            </div>
+          }
           <div class="col-xs-12">
             <button [disabled]="this.userForm.invalid"
                     mat-raised-button

src/main/frontend/src/app/component/common/icon-picker/icon-picker.component.html

@@ -9,13 +9,16 @@
     </mat-form-field>
   </div>
   <mat-dialog-content>
-    <div *ngIf="icons.length>0; else nothingFound" class="row">
-      <div *ngFor="let iconName of icons" class="col-xl-1 col-lg-1 col-md-1 col-1 h1 text-center">
-        <i (click)="selectIcon(iconName)" class="material-icons h1" matTooltip="{{iconName}}">{{ iconName }}</i>
+    @if (icons.length > 0) {
+      <div class="row">
+        @for (iconName of icons; track iconName) {
+          <div class="col-xl-1 col-lg-1 col-md-1 col-1 h1 text-center">
+            <i (click)="selectIcon(iconName)" class="material-icons h1" matTooltip="{{iconName}}">{{ iconName }}</i>
+          </div>
+        }
       </div>
-    </div>
+    } @else {
+      <h1 class="text-center py-3">Nie ma takiej.</h1>
+    }
   </mat-dialog-content>
 </div>
-<ng-template #nothingFound>
-  <h1 class="text-center py-3">Nie ma takiej.</h1>
-</ng-template>

src/main/frontend/src/app/component/common/spinner/spinner.component.html

@@ -0,0 +1,5 @@
+@if (loadingService.isLoading()) {
+  <div class="cssload-container">
+    <div class="cssload-speeding-wheel"></div>
+  </div>
+}

src/main/frontend/src/app/component/common/spinner/spinner.component.scss

@@ -0,0 +1,65 @@
+.cssload-container {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 9999;
+}
+
+.cssload-speeding-wheel {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 48%;
+  top: 40%;
+  width: 63px;
+  height: 63px;
+  margin: 0 auto;
+  border: 4px solid rgb(0, 0, 0);
+  border-radius: 50%;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  animation: cssload-spin 500ms infinite linear;
+  -o-animation: cssload-spin 500ms infinite linear;
+  -ms-animation: cssload-spin 500ms infinite linear;
+  -webkit-animation: cssload-spin 500ms infinite linear;
+  -moz-animation: cssload-spin 500ms infinite linear;
+}
+
+@keyframes cssload-spin {
+  100% {
+    transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes cssload-spin {
+  100% {
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-ms-keyframes cssload-spin {
+  100% {
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes cssload-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes cssload-spin {
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

src/main/frontend/src/app/component/common/spinner/spinner.component.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {LoadingService} from "../../../service/loading.service";
+import {NgIf} from "@angular/common";
+
+@Component({
+  selector: 'spinner',
+  templateUrl: './spinner.component.html',
+  standalone: true,
+  imports: [
+    NgIf
+  ],
+  styleUrl: './spinner.component.scss'
+})
+export class SpinnerComponent {
+  constructor(protected loadingService: LoadingService) {
+  }
+
+}