Page login/create OK

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

@@ -5,6 +5,7 @@
   (ngSubmit)="onCreateSubmit()"
   [formGroup]="createForm"
 >
+  <p>
     <mat-form-field>
       <mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
       <input
@@ -22,31 +23,6 @@
         {{ "LoginCreateUser_FirstnamePattern" | translate }}
       </mat-error>
     </mat-form-field>
-</form>
-
-<!-- <form
-  [formGroup]="createForm"
-  (ngSubmit)="onCreateSubmit()"
-  autocomplete="off"
-  style="padding: 10px"
->
-  <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-error>
-      <mat-error *ngIf="formCtrls['firstname'].hasError('minlength')">
-        {{ "LoginCreateUser_FirstnamePattern" | translate }}
-      </mat-error>
-    </mat-form-field>
   </p>
   <p>
     <mat-form-field>
@@ -125,4 +101,4 @@
     {{ "LoginCreateUser_BtnLogin" | translate }}
   </button>
   <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
-</form> -->
+</form>

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

@@ -13,12 +13,13 @@ import {
 } 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";
 
 import { AuthenticationService } from "../../services/authentication.service";
 import { User } from "../../models/user";
-import { MatInput, MatInputModule } from "@angular/material/input";
 
 @Component({
   selector: "app-create-user",
@@ -31,6 +32,7 @@ import { MatInput, MatInputModule } from "@angular/material/input";
     MatInputModule,
     TranslateModule,
     TranslatePipe,
+    MatButtonModule,
   ],
 })
 export class CreateUserComponent implements OnInit {
@@ -39,7 +41,6 @@ export class CreateUserComponent implements OnInit {
   public submitted = false;
   public returnUrl: string;
   public error: string = "";
-  @ViewChild("firstname") firstnameInput: MatInput;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -54,26 +55,22 @@ export class CreateUserComponent implements OnInit {
     }
   }
 
-  ngAfterViewInit() {
-    this.firstnameInput.focus();
-  }
-
   ngOnInit() {
     this.createForm = this.formBuilder.group(
       {
         firstname: ["", [Validators.required, Validators.minLength(3)]],
-        // username: ["", [Validators.required, Validators.minLength(3)]],
+        lastname: ["", [Validators.required, Validators.minLength(3)]],
-        // password: [
+        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,}$"
-        // ],
+            ),
-        // lastname: ["", [Validators.required, Validators.minLength(3)]],
+          ],
-        // email: ["", [Validators.required, Validators.email]],
+        ],
       },
       { updateOn: "blur" }
     );
@@ -87,28 +84,28 @@ export class CreateUserComponent implements OnInit {
   }
 
   onCreateSubmit() {
-    // this.invalidForm = false;
+    this.invalidForm = false;
-    // this.submitted = true;
+    this.submitted = true;
-    // if (this.createForm.invalid) {
+    if (this.createForm.invalid) {
-    //   this.invalidForm = true;
+      this.invalidForm = true;
-    //   return;
+      return;
-    // }
+    }
-    // let createUser = new User();
+    let createUser = new User();
-    // createUser.login = this.formCtrls["username"].value;
+    createUser.login = this.formCtrls["username"].value;
-    // createUser.password = this.formCtrls["password"].value;
+    createUser.password = this.formCtrls["password"].value;
-    // createUser.firstName = this.formCtrls["firstname"].value;
+    createUser.firstName = this.formCtrls["firstname"].value;
-    // createUser.lastName = this.formCtrls["lastname"].value;
+    createUser.lastName = this.formCtrls["lastname"].value;
-    // createUser.email = this.formCtrls["email"].value;
+    createUser.email = this.formCtrls["email"].value;
-    // createUser.language = this.translateService.getCurrentLang();
+    createUser.language = this.translateService.getCurrentLang();
-    // this.authenticationService
+    this.authenticationService
-    //   .create(createUser)
+      .create(createUser)
-    //   .pipe(first())
+      .pipe(first())
-    //   .subscribe({
+      .subscribe({
-    //     complete: () => this.router.navigate([this.returnUrl]),
+        complete: () => this.router.navigate([this.returnUrl]),
-    //     error: (error) => {
+        error: (error) => {
-    //       this.error = error.message;
+          this.error = error.message;
-    //       this.invalidForm = false;
+          this.invalidForm = false;
-    //     },
+        },
-    //   });
+      });
   }
 }

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

@@ -10,6 +10,7 @@ import {
 import { TranslateModule, TranslatePipe } from "@ngx-translate/core";
 import { MatInput, MatInputModule } from "@angular/material/input";
 import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatButtonModule } from "@angular/material/button";
 
 import { first } from "rxjs/operators";
 
@@ -26,15 +27,15 @@ import { AuthenticationService } from "../../services/authentication.service";
     MatInputModule,
     TranslateModule,
     TranslatePipe,
+    MatButtonModule,
   ],
 })
-export class LoginUserComponent implements OnInit, AfterViewInit {
+export class LoginUserComponent implements OnInit {
   public loginForm: FormGroup;
   public loading = false;
   public submitted = false;
   public returnUrl: string;
   public error: string = "";
-  @ViewChild("username") userNameInput: MatInput;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -47,10 +48,6 @@ export class LoginUserComponent implements OnInit, AfterViewInit {
     }
   }
 
-  ngAfterViewInit() {
-    this.userNameInput.focus();
-  }
-
   ngOnInit() {
     this.loginForm = this.formBuilder.group(
       {