From 50785a4914223108e93ccb02dc8de6bde02195d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= <sebastien.andre@arolla.fr>
Date: Thu, 26 Mar 2020 11:35:23 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20check=20et=20messages=20d'erreur?=
 =?UTF-8?q?=20sur=20les=20formulaires=20de=20connexion=20et=20cr=C3=A9atio?=
 =?UTF-8?q?n=20d'utilisateur.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/create-user/create-user.component.html   |  6 ++++++
 .../src/app/create-user/create-user.component.ts | 16 ++++++++++------
 .../src/app/login-user/login-user.component.html |  5 ++++-
 .../src/app/login-user/login-user.component.ts   | 14 ++++++++++----
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.html b/Front/skydivelogs-app/src/app/create-user/create-user.component.html
index b62f86e..d4e5edc 100644
--- a/Front/skydivelogs-app/src/app/create-user/create-user.component.html
+++ b/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>
 
diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts b/Front/skydivelogs-app/src/app/create-user/create-user.component.ts
index a0c0073..6fab172 100644
--- a/Front/skydivelogs-app/src/app/create-user/create-user.component.ts
+++ b/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;
diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.html b/Front/skydivelogs-app/src/app/login-user/login-user.component.html
index 700a19d..2362d58 100644
--- a/Front/skydivelogs-app/src/app/login-user/login-user.component.html
+++ b/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">
diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts
index 9a89694..20a33a5 100644
--- a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts
+++ b/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"] || "/";