From 9d0c5fbfb1231e03c26e5aa1cf6aa941aa2e5573 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 15:03:40 +0100
Subject: [PATCH] Ajout de style

---
 .../src/app/app.component.html                | 29 +++++++++-----
 .../skydivelogs-app/src/app/app.component.ts  |  6 +--
 .../create-user/create-user.component.html    | 40 +++++++++----------
 .../app/create-user/create-user.component.ts  | 35 ++++++++--------
 .../src/app/default/default.component.ts      | 14 +++----
 .../app/login-user/login-user.component.html  | 16 ++++----
 .../app/login-user/login-user.component.ts    | 10 +++--
 7 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html
index 560c38d..7b0ab6a 100644
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/Front/skydivelogs-app/src/app/app.component.html
@@ -1,15 +1,23 @@
 <div>
   <header *ngIf="this.show()">
-    <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
-      <rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
-        transform="translate(31.5 58)"></rect>
-      <rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
-        transform="translate(31.5 44)"></rect>
-      <rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
-        transform="translate(31.5 30)"></rect>
-    </svg>
-
-    <h2 style="display: inline;">{{ title }}</h2>
+    <div style="display: flex; flex-wrap: nowrap; flex-direction: row; align-items: baseline;">
+      <div>
+        <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
+          <rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
+            transform="translate(31.5 58)"></rect>
+          <rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
+            transform="translate(31.5 44)"></rect>
+          <rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
+            transform="translate(31.5 30)"></rect>
+        </svg>
+        <h2>{{ title }}</h2>
+      </div>
+      <div style="text-align: right;">
+        <h2 *ngIf="currentUser">{{ this.currentUser.firstName }}
+          {{ this.currentUser.lastName }}</h2>
+        <a *ngIf="currentUser" (click)="logout()" style="cursor: pointer;">Logout</a>
+      </div>
+    </div>
 
     <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
       <ul>
@@ -27,7 +35,6 @@
             gears</a></li>
         <li><a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Add a new
             jump</a></li>
-        <li *ngIf="currentUser"><a class="nav-item nav-link" (click)="logout()">Logout</a></li>
       </ul>
     </nav>
   </header>
diff --git a/Front/skydivelogs-app/src/app/app.component.ts b/Front/skydivelogs-app/src/app/app.component.ts
index 5d7a4ed..09ec73f 100644
--- a/Front/skydivelogs-app/src/app/app.component.ts
+++ b/Front/skydivelogs-app/src/app/app.component.ts
@@ -12,9 +12,9 @@ import { ServiceComm } from "../services/service-comm.service";
   styleUrls: ["./app.component.css"]
 })
 export class AppComponent implements OnInit {
-  title = "app";
-  showMenu = false;
-  currentUser: User;
+  public title = "app";
+  public showMenu = false;
+  public currentUser: User;
 
   constructor(
     private router: Router,
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 d4e5edc..cb0bc86 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
@@ -2,47 +2,47 @@
   <div class="form-group">
     <label for="firstname">Firstname</label>
     <input type="text" formControlName="firstname" class="form-control"
-      [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>
+      [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" />
+    <div *ngIf="submitted && formCtrls.firstname.errors" class="invalid-feedback">
+      <div *ngIf="formCtrls.firstname.errors.required">Firstname is required</div>
+      <div *ngIf="formCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
     <label for="lastname">Lastname</label>
     <input type="text" formControlName="lastname" class="form-control"
-      [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>
+      [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" />
+    <div *ngIf="submitted && formCtrls.lastname.errors" class="invalid-feedback">
+      <div *ngIf="formCtrls.lastname.errors.required">Lastname is required</div>
+      <div *ngIf="formCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
     <label for="email">E-mail</label>
     <input type="text" formControlName="email" class="form-control"
-      [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>
+      [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" />
+    <div *ngIf="submitted && formCtrls.email.errors" class="invalid-feedback">
+      <div *ngIf="formCtrls.email.errors.required">E-mail is required</div>
+      <div *ngIf="formCtrls.email.errors.email">It's not a e-mail</div>
     </div>
   </div>
 
   <div class="form-group">
     <label for="username">Username</label>
     <input type="text" formControlName="username" class="form-control"
-      [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>
+      [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
+    <div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
+      <div *ngIf="formCtrls.username.errors.required">Username is required</div>
+      <div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
     <label for="password">Password</label>
     <input type="password" formControlName="password" class="form-control"
-      [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_-]
+      [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
+    <div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
+      <div *ngIf="formCtrls.password.errors.required">Password is required</div>
+      <div *ngIf="formCtrls.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 6fab172..ef30d19 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
@@ -32,22 +32,25 @@ export class CreateUserComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.createForm = this.formBuilder.group({
-      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]]
-    });
+    this.createForm = this.formBuilder.group(
+      {
+        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]]
+      },
+      { updateOn: "submit" }
+    );
 
     // get return url from route parameters or default to '/'
     this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
   }
 
-  get createCtrls() {
+  get formCtrls() {
     return this.createForm.controls;
   }
 
@@ -62,11 +65,11 @@ export class CreateUserComponent implements OnInit {
     }
 
     let createUser = new User();
-    createUser.login = this.createCtrls.username.value;
-    createUser.password = this.createCtrls.password.value;
-    createUser.firstName = this.createCtrls.firstname.value;
-    createUser.lastName = this.createCtrls.lastname.value;
-    createUser.email = this.createCtrls.email.value;
+    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;
 
     this.authenticationService
       .create(createUser)
diff --git a/Front/skydivelogs-app/src/app/default/default.component.ts b/Front/skydivelogs-app/src/app/default/default.component.ts
index 0bec71f..c64ba1d 100644
--- a/Front/skydivelogs-app/src/app/default/default.component.ts
+++ b/Front/skydivelogs-app/src/app/default/default.component.ts
@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { ServiceComm } from "../../services/service-comm.service";
 
 @Component({
-  selector: 'app-default',
-  templateUrl: './default.component.html',
-  styleUrls: ['./default.component.css']
+  selector: "app-default",
+  templateUrl: "./default.component.html",
+  styleUrls: ["./default.component.css"]
 })
 export class DefaultComponent implements OnInit {
-
-  constructor() { }
+  constructor(private serviceComm: ServiceComm) {}
 
   ngOnInit() {
+    this.serviceComm.UpdatedComponentTitle("Home");
   }
-
 }
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 2362d58..60b6d84 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
@@ -2,19 +2,19 @@
   <div class="form-group">
     <label for="username">Username</label>
     <input type="text" formControlName="username" class="form-control"
-      [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>
+      [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
+    <div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
+      <div *ngIf="formCtrls.username.errors.required">Username is required</div>
+      <div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
     </div>
   </div>
   <div class="form-group">
     <label for="password">Password</label>
     <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="createCtrls.password.errors.required">Password is required</div>
-      <div *ngIf="createCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
+      [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
+    <div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
+      <div *ngIf="formCtrls.password.errors.required">Password is required</div>
+      <div *ngIf="formCtrls.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/login-user/login-user.component.ts b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts
index 20a33a5..cfa2f07 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
@@ -36,17 +36,19 @@ export class LoginUserComponent implements OnInit {
         username: ["", [Validators.required, Validators.minLength(3)]],
         password: [
           "",
-          [Validators.required, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")]
+          [
+            Validators.required /*, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")*/
+          ]
         ]
       },
-      { updateOn: "blur" }
+      { updateOn: "submit" }
     );
 
     // get return url from route parameters or default to '/'
     this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
   }
 
-  get loginCtrls() {
+  get formCtrls() {
     return this.loginForm.controls;
   }
 
@@ -60,7 +62,7 @@ export class LoginUserComponent implements OnInit {
 
     this.loading = true;
     this.authenticationService
-      .login(this.loginCtrls.username.value, this.loginCtrls.password.value)
+      .login(this.formCtrls.username.value, this.formCtrls.password.value)
       .pipe(first())
       .subscribe(
         data => {