From a755d5f362aebda2046162d58b5d93bca5ec55c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?=
 <Sebastien.ANDRE@external.loccitane.com>
Date: Wed, 29 Jul 2020 12:54:59 +0200
Subject: [PATCH] =?UTF-8?q?D=C3=A9but=20de=20fix=20pour=20avoir=20la=20nav?=
 =?UTF-8?q?igation=20au=20clavier=20dans=20le=20formulaire=20de=20login?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/login-user/login-user.component.html  |  6 +--
 .../app/login-user/login-user.component.ts    | 37 +++++++++++--------
 .../skydivelogs-app/src/assets/css/styles.css |  2 +-
 3 files changed, 26 insertions(+), 19 deletions(-)

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 3add5bb..35d6714 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,8 +2,8 @@
   <p>
     <mat-form-field>
       <mat-label>Username</mat-label>
-      <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }"
-        tabindex="0">
+      <input matInput #username="matInput" formControlName="username"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
       <mat-error *ngIf="formCtrls.username.hasError('required')">
         Username is required
       </mat-error>
@@ -16,7 +16,7 @@
     <mat-form-field>
       <mat-label>Password</mat-label>
       <input type="password" matInput formControlName="password"
-        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" tabindex="1">
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
       <mat-error *ngIf="formCtrls.password.hasError('required')">
         Password is required
       </mat-error>
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 105fe20..6bbe913 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
@@ -1,22 +1,24 @@
-import { Component, OnInit } from "@angular/core";
-import { Router, ActivatedRoute } from "@angular/router";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
 
-import { first } from "rxjs/operators";
+import { first } from 'rxjs/operators';
 
-import { AuthenticationService } from "../../services/authentication.service";
+import { AuthenticationService } from '../../services/authentication.service';
 
 @Component({
-  selector: "app-login-user",
-  templateUrl: "./login-user.component.html",
-  styleUrls: ["./login-user.component.css"]
+  selector: 'app-login-user',
+  templateUrl: './login-user.component.html',
+  styleUrls: ['./login-user.component.css']
 })
-export class LoginUserComponent implements OnInit {
+export class LoginUserComponent implements OnInit, AfterViewInit {
   loginForm: FormGroup;
   loading = false;
   submitted = false;
   returnUrl: string;
-  error = "";
+  error = '';
+  @ViewChild('username') userNameInput: MatInput;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -26,26 +28,31 @@ export class LoginUserComponent implements OnInit {
   ) {
     // redirect to home if already logged in
     if (this.authenticationService.currentUserValue) {
-      this.router.navigate(["/"]);
+      this.router.navigate(['/']);
     }
   }
 
+  ngAfterViewInit() {
+    this.userNameInput.focus();
+  }
+
   ngOnInit() {
     this.loginForm = this.formBuilder.group(
       {
-        username: ["", [Validators.required, Validators.minLength(3)]],
+        username: ['', [Validators.required, Validators.minLength(3)]],
         password: [
-          "",
+          '',
           [
             Validators.required /*, Validators.pattern("^[A-Za-z0-9_-]{8,15}$")*/
           ]
         ]
       },
-      { updateOn: "blur" }
+      { updateOn: 'blur' }
     );
 
     // get return url from route parameters or default to '/'
-    this.returnUrl = this.route.snapshot.queryParams["returnUrl"] || "/";
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+
   }
 
   get formCtrls() {
diff --git a/Front/skydivelogs-app/src/assets/css/styles.css b/Front/skydivelogs-app/src/assets/css/styles.css
index 1c8e9c9..063df0b 100644
--- a/Front/skydivelogs-app/src/assets/css/styles.css
+++ b/Front/skydivelogs-app/src/assets/css/styles.css
@@ -3,7 +3,7 @@
 html,
 body {
   min-height: 100vh;
-  width: 100vw;
+  /*width: 100vw;*/
   box-sizing: border-box;
   overflow: auto;
 }