Update to Angular v19 and fixing (#3)

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

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

@@ -1,72 +1,104 @@
-<form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()" autocomplete="off" style="padding: 10px;">
+<form
+  focusInvalidInput
+  autocomplete="off"
+  style="padding: 10px"
+  (ngSubmit)="onCreateSubmit()"
+  [formGroup]="createForm"
+>
   <p>
     <mat-form-field>
-      <mat-label>{{ 'LoginCreateUser_Firstname' | translate }}</mat-label>
-      <input matInput type="text" formControlName="firstname"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" tabindex="0" />
-      <mat-error *ngIf="formCtrls.firstname.hasError('required')">
-        {{ 'LoginCreateUser_FirstnameRequired' | translate }}
+      <mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
+      <input
+        type="text"
+        matInput
+        #firstname="matInput"
+        formControlName="firstname"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls['firstname'].errors }"
+        tabindex="0"
+      />
+      <mat-error *ngIf="formCtrls['firstname'].hasError('required')">
+        {{ "LoginCreateUser_FirstnameRequired" | translate }}
       </mat-error>
-      <mat-error *ngIf="formCtrls.firstname.hasError('minlength')">
-        {{ 'LoginCreateUser_FirstnamePattern' | translate }}
+      <mat-error *ngIf="formCtrls['firstname'].hasError('minlength')">
+        {{ "LoginCreateUser_FirstnamePattern" | translate }}
       </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>{{ 'LoginCreateUser_Lastname' | translate }}</mat-label>
-      <input matInput type="text" formControlName="lastname"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" tabindex="1" />
-      <mat-error *ngIf="formCtrls.lastname.hasError('required')">
-        {{ 'LoginCreateUser_LastnameRequired' | translate }}
+      <mat-label>{{ "LoginCreateUser_Lastname" | translate }}</mat-label>
+      <input
+        matInput
+        type="text"
+        formControlName="lastname"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls['lastname'].errors }"
+        tabindex="1"
+      />
+      <mat-error *ngIf="formCtrls['lastname'].hasError('required')">
+        {{ "LoginCreateUser_LastnameRequired" | translate }}
       </mat-error>
-      <mat-error *ngIf="formCtrls.lastname.hasError('minlength')">
-        {{ 'LoginCreateUser_LastnamePattern' | translate }}
+      <mat-error *ngIf="formCtrls['lastname'].hasError('minlength')">
+        {{ "LoginCreateUser_LastnamePattern" | translate }}
       </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>{{ 'LoginCreateUser_Email' | translate }}</mat-label>
-      <input matInput type="email" formControlName="email"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" tabindex="3" />
-      <mat-error *ngIf="formCtrls.email.hasError('required')">
-        {{ 'LoginCreateUser_EmailRequired' | translate }}
+      <mat-label>{{ "LoginCreateUser_Email" | translate }}</mat-label>
+      <input
+        matInput
+        type="email"
+        formControlName="email"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls['email'].errors }"
+        tabindex="3"
+      />
+      <mat-error *ngIf="formCtrls['email'].hasError('required')">
+        {{ "LoginCreateUser_EmailRequired" | translate }}
       </mat-error>
-      <mat-error *ngIf="formCtrls.email.hasError('email')">
-        {{ 'LoginCreateUser_EmailPattern' | translate }}
+      <mat-error *ngIf="formCtrls['email'].hasError('email')">
+        {{ "LoginCreateUser_EmailPattern" | translate }}
       </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>{{ 'LoginCreateUser_Username' | translate }}</mat-label>
-      <input matInput type="text" formControlName="username"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" tabindex="4" />
-      <mat-error *ngIf="formCtrls.username.hasError('required')">
-        {{ 'LoginCreateUser_UsernameRequired' | translate }}
+      <mat-label>{{ "LoginCreateUser_Username" | translate }}</mat-label>
+      <input
+        matInput
+        type="text"
+        formControlName="username"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
+        tabindex="4"
+      />
+      <mat-error *ngIf="formCtrls['username'].hasError('required')">
+        {{ "LoginCreateUser_UsernameRequired" | translate }}
       </mat-error>
-      <mat-error *ngIf="formCtrls.username.hasError('minlength')">
-        {{ 'LoginCreateUser_UsernamePattern' | translate }}
+      <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
+        {{ "LoginCreateUser_UsernamePattern" | translate }}
       </mat-error>
     </mat-form-field>
   </p>
   <p>
     <mat-form-field>
-      <mat-label>{{ 'LoginCreateUser_Password' | translate }}</mat-label>
-      <input matInput type="password" formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="5" />
-      <mat-error *ngIf="formCtrls.password.hasError('required')">
-        {{ 'LoginCreateUser_PasswordRequired' | translate }}
+      <mat-label>{{ "LoginCreateUser_Password" | translate }}</mat-label>
+      <input
+        matInput
+        type="password"
+        formControlName="password"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
+        tabindex="5"
+      />
+      <mat-error *ngIf="formCtrls['password'].hasError('required')">
+        {{ "LoginCreateUser_PasswordRequired" | translate }}
       </mat-error>
-      <mat-error *ngIf="formCtrls.password.hasError('pattern')">        
-        {{ 'LoginCreateUser_PasswordPattern' | translate }}
+      <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
+        {{ "LoginCreateUser_PasswordPattern" | translate }}
       </mat-error>
     </mat-form-field>
   </p>
 
   <button [disabled]="!createForm.valid" mat-raised-button color="accent">
-    {{ 'LoginCreateUser_BtnLogin' | translate }}
+    {{ "LoginCreateUser_BtnLogin" | translate }}
   </button>
-  <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
+  <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
 </form>

Front/skydivelogs-app/src/app/create-user/create-user.component.ts

@@ -1,7 +1,20 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
-import { TranslateService } from "@ngx-translate/core";
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
+import {
+  TranslateModule,
+  TranslatePipe,
+  TranslateService,
+} from "@ngx-translate/core";
+import { CommonModule } from "@angular/common";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatButtonModule } from "@angular/material/button";
 
 import { first } from "rxjs/operators";
 
@@ -9,23 +22,33 @@ import { AuthenticationService } from "../../services/authentication.service";
 import { User } from "../../models/user";
 
 @Component({
-    selector: "app-create-user",
-    templateUrl: "./create-user.component.html",
-    styleUrls: ["./create-user.component.css"],
-    standalone: false
+  selector: "app-create-user",
+  templateUrl: "./create-user.component.html",
+  styleUrls: ["./create-user.component.css"],
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    TranslateModule,
+    TranslatePipe,
+  ],
 })
 export class CreateUserComponent implements OnInit {
-  createForm: FormGroup;
-  invalidForm = true;
-  submitted = false;
-  returnUrl: string;
-  error = "";
+  public createForm: FormGroup;
+  public invalidForm = true;
+  public submitted = false;
+  public returnUrl: string;
+  public error: string = "";
 
-  constructor(private formBuilder: FormBuilder,
-              private route: ActivatedRoute,
-              private router: Router,
-              private authenticationService: AuthenticationService,
-              private translateService: TranslateService) {
+  constructor(
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private authenticationService: AuthenticationService,
+    private translateService: TranslateService,
+  ) {
     // redirect to home if already logged in
     if (this.authenticationService.currentUserValue) {
       this.router.navigate(["/"]);
@@ -35,16 +58,21 @@ export class CreateUserComponent implements OnInit {
   ngOnInit() {
     this.createForm = this.formBuilder.group(
       {
+        firstname: ["", [Validators.required, Validators.minLength(3)]],
+        lastname: ["", [Validators.required, Validators.minLength(3)]],
+        email: ["", [Validators.required, Validators.email]],
         username: ["", [Validators.required, Validators.minLength(3)]],
         password: [
           "",
-          [Validators.required, Validators.pattern("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&\-_|]).{8,}$")]
+          [
+            Validators.required,
+            Validators.pattern(
+              "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[@$!%*#?&-_|]).{8,}$",
+            ),
+          ],
         ],
-        firstname: ["", [Validators.required, Validators.minLength(3)]],
-        lastname: ["", [Validators.required, Validators.minLength(3)]],
-        email: ["", [Validators.required, Validators.email]]
       },
-      { updateOn: "blur" }
+      { updateOn: "blur" },
     );
 
     // get return url from route parameters or default to '/'
@@ -58,30 +86,26 @@ export class CreateUserComponent implements OnInit {
   onCreateSubmit() {
     this.invalidForm = false;
     this.submitted = true;
-
     if (this.createForm.invalid) {
       this.invalidForm = true;
       return;
     }
-
     let createUser = new User();
-    createUser.login = this.formCtrls.username.value;
-    createUser.password = this.formCtrls.password.value;
-    createUser.firstName = this.formCtrls.firstname.value;
-    createUser.lastName = this.formCtrls.lastname.value;
-    createUser.email = this.formCtrls.email.value;
-    createUser.language = this.translateService.currentLang;
-
-    this.authenticationService.create(createUser)
-                              .pipe(first())
-                              .subscribe(
-                                data => {
-                                  this.router.navigate([this.returnUrl]);
-                                },
-                                error => {
-                                  this.error = error;
-                                  this.invalidForm = false;
-                                }
-                              );
+    createUser.login = this.formCtrls["username"].value;
+    createUser.password = this.formCtrls["password"].value;
+    createUser.firstName = this.formCtrls["firstname"].value;
+    createUser.lastName = this.formCtrls["lastname"].value;
+    createUser.email = this.formCtrls["email"].value;
+    createUser.language = this.translateService.getCurrentLang();
+    this.authenticationService
+      .create(createUser)
+      .pipe(first())
+      .subscribe({
+        complete: () => this.router.navigate([this.returnUrl]),
+        error: (error) => {
+          this.error = error.message;
+          this.invalidForm = false;
+        },
+      });
   }
 }