Ajout de check et messages d'erreur

sur les formulaires de connexion et
création d'utilisateur.

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

@@ -5,6 +5,7 @@
       [ngClass]="{ 'is-invalid': submitted && createCtrls.firstname.errors }" />
     <div *ngIf="submitted && createCtrls.firstname.errors" class="invalid-feedback">
       <div *ngIf="createCtrls.firstname.errors.required">Firstname is required</div>
+      <div *ngIf="createCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
@@ -13,6 +14,7 @@
       [ngClass]="{ 'is-invalid': submitted && createCtrls.lastname.errors }" />
     <div *ngIf="submitted && createCtrls.lastname.errors" class="invalid-feedback">
       <div *ngIf="createCtrls.lastname.errors.required">Lastname is required</div>
+      <div *ngIf="createCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
@@ -21,6 +23,7 @@
       [ngClass]="{ 'is-invalid': submitted && createCtrls.email.errors }" />
     <div *ngIf="submitted && createCtrls.email.errors" class="invalid-feedback">
       <div *ngIf="createCtrls.email.errors.required">E-mail is required</div>
+      <div *ngIf="createCtrls.email.errors.email">It's not a e-mail</div>
     </div>
   </div>
 
@@ -30,6 +33,7 @@
       [ngClass]="{ 'is-invalid': submitted && createCtrls.username.errors }" />
     <div *ngIf="submitted && createCtrls.username.errors" class="invalid-feedback">
       <div *ngIf="createCtrls.username.errors.required">Username is required</div>
+      <div *ngIf="createCtrls.username.errors.minlength">Username must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
@@ -38,6 +42,8 @@
       [ngClass]="{ 'is-invalid': submitted && createCtrls.password.errors }" />
     <div *ngIf="submitted && createCtrls.password.errors" class="invalid-feedback">
       <div *ngIf="createCtrls.password.errors.required">Password is required</div>
+      <div *ngIf="createCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
+        {{ '{' }}8,15{{ '}' }})</div>
     </div>
   </div>
 

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

@@ -33,11 +33,14 @@ export class CreateUserComponent implements OnInit {
 
   ngOnInit() {
     this.createForm = this.formBuilder.group({
-      username: ["", Validators.required],
-      password: ["", Validators.required],
-      firstname: ["", Validators.required],
-      lastname: ["", Validators.required],
-      email: ["", Validators.required]
+      username: ["", [Validators.required, Validators.minLength(3)]],
+      password: [
+        "",
+        [Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")]
+      ],
+      firstname: ["", [Validators.required, Validators.minLength(3)]],
+      lastname: ["", [Validators.required, Validators.minLength(3)]],
+      email: ["", [Validators.required, Validators.email]]
     });
 
     // get return url from route parameters or default to '/'
@@ -49,14 +52,15 @@ export class CreateUserComponent implements OnInit {
   }
 
   onCreateSubmit() {
+    this.loading = true;
     this.submitted = true;
 
     // stop here if form is invalid
     if (this.createForm.invalid) {
+      this.loading = true;
       return;
     }
 
-    this.loading = true;
     let createUser = new User();
     createUser.login = this.createCtrls.username.value;
     createUser.password = this.createCtrls.password.value;

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

@@ -5,6 +5,7 @@
       [ngClass]="{ 'is-invalid': submitted && loginCtrls.username.errors }" />
     <div *ngIf="submitted && loginCtrls.username.errors" class="invalid-feedback">
       <div *ngIf="loginCtrls.username.errors.required">Username is required</div>
+      <div *ngIf="createCtrls.username.errors.minlength">Username must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
@@ -12,7 +13,9 @@
     <input type="password" formControlName="password" class="form-control"
       [ngClass]="{ 'is-invalid': submitted && loginCtrls.password.errors }" />
     <div *ngIf="submitted && loginCtrls.password.errors" class="invalid-feedback">
-      <div *ngIf="loginCtrls.password.errors.required">Password is required</div>
+      <div *ngIf="createCtrls.password.errors.required">Password is required</div>
+      <div *ngIf="createCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
+        {{ '{' }}8,15{{ '}' }})</div>
     </div>
   </div>
   <button [disabled]="loading" class="btn btn-primary">

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

@@ -31,10 +31,16 @@ export class LoginUserComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.loginForm = this.formBuilder.group({
-      username: ["", Validators.required],
-      password: ["", Validators.required]
-    });
+    this.loginForm = this.formBuilder.group(
+      {
+        username: ["", [Validators.required, Validators.minLength(3)]],
+        password: [
+          "",
+          [Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")]
+        ]
+      },
+      { updateOn: "blur" }
+    );
 
     // get return url from route parameters or default to '/'
     this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";