update Angular to v20

Reviewed-on: #4
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>

Front/skydivelogs-app/src/app/login-user/login-user.component.html

@@ -1,50 +1,66 @@
 <form
-  focusInvalidInput
-  autocomplete="off"
-  style="padding: 10px"
-  [formGroup]="loginForm"
-  (ngSubmit)="onLoginSubmit()"
+    focusInvalidInput
+    autocomplete="off"
+    style="padding: 10px"
+    [formGroup]="loginForm"
+    (ngSubmit)="onLoginSubmit()"
 >
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginUser_Username" | translate }}</mat-label>
-      <input
-        type="text"
-        matInput
-        #username="matInput"
-        formControlName="username"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
-      />
-      <mat-error *ngIf="formCtrls['username'].hasError('required')">
-        {{ "LoginUser_UsernameRequired" | translate }}
-      </mat-error>
-      <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
-        {{ 'LoginUser_UsernamePattern | translate }}
-      </mat-error>
-    </mat-form-field>
-  </p>
-  <p>
-    <mat-form-field>
-      <mat-label>{{ "LoginUser_Password" | translate }}</mat-label>
-      <input
-        type="password"
-        matInput
-        formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
-      />
-      <mat-error *ngIf="formCtrls['password'].hasError('required')">
-        {{ "LoginUser_PasswordRequired" | translate }}
-      </mat-error>
-      <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
-        {{ "LoginUser_PasswordPattern" | translate }}
-      </mat-error>
-    </mat-form-field>
-  </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "LoginUser_Username" | translate }}</mat-label>
+            <input
+                type="text"
+                matInput
+                #username="matInput"
+                formControlName="username"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['username'].errors,
+                }"
+            />
+            @if (formCtrls["username"].hasError("required")) {
+                <mat-error>
+                    {{ "LoginUser_UsernameRequired" | translate }}
+                </mat-error>
+            }
+            @if (formCtrls["username"].hasError("minlength")) {
+                <mat-error>
+                    {{ 'LoginUser_UsernamePattern | translate }}
+                </mat-error>
+            }
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field>
+            <mat-label>{{ "LoginUser_Password" | translate }}</mat-label>
+            <input
+                type="password"
+                matInput
+                formControlName="password"
+                [ngClass]="{
+                    'is-invalid': submitted && formCtrls['password'].errors,
+                }"
+            />
+            @if (formCtrls["password"].hasError("required")) {
+                <mat-error>
+                    {{ "LoginUser_PasswordRequired" | translate }}
+                </mat-error>
+            }
+            @if (formCtrls["password"].hasError("pattern")) {
+                <mat-error>
+                    {{ "LoginUser_PasswordPattern" | translate }}
+                </mat-error>
+            }
+        </mat-form-field>
+    </p>
 
-  <button [disabled]="loading" mat-raised-button color="accent">
-    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
-    {{ "LoginUser_BtnLogin" | translate }}
-  </button>
+    <button [disabled]="loading" mat-raised-button color="accent">
+        @if (loading) {
+            <span class="spinner-border spinner-border-sm mr-1"></span>
+        }
+        {{ "LoginUser_BtnLogin" | translate }}
+    </button>
 
-  <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
+    @if (error) {
+        <div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
+    }
 </form>